javascript - Overlay div over an image -


i trying overlay div on image. doing using mouseenter , mouseleave events. using knockout data binding.

<ul class="gallery" data-bind="foreach: images">         <li>             <img data-bind="attr: {src:turl},event: {mouseenter: $parent.showoverlay, mouseleave: $parent.hideoverlay}" />         </li> </ul>  <div class="list-overlay overlay">     <img src="/content/images/play.png" /> watch </div>

javascript:

showoverlay: function (data, event) {         var position = $(event.currenttarget).position();         var height = $(event.currenttarget).innerheight();         var width = $(event.currenttarget).innerwidth();          $(".list-overlay").css("top", parseint(position.top) + parseint(height) - 40);         $(".list-overlay").css("left", position.left);         $(".list-overlay").css("width", width)         $(".list-overlay").show();      },     hideoverlay: function () {         $(".list-overlay").hide();     }

above code works fine show overlay. if start moving mouse on overlay starts flickering firing mouseleave , mouseenter again , again. tried using mouseleave , mouseout behavior same.

you need bind mouseleave overlay. , @ start hideoverlay() check if pointer entering overlay (from image) or image (from overlay), if stop function returning, check can use event.relatedtarget


Comments

Post a Comment

Popular posts from this blog

Regex find and replace between <div class="customclass"> and </div> tag -

i cant find anywhere working regex expression find , replace text between div tags so there html want select between <div class="info"> , </div> tag , replace other texts <div class="extrauserinfo"> <p>hello world! sample text</p> <javascript>.......blah blah blah etc etc </div> and replace with my custom text codes <tags> asdasd asdasdasdasdasd</tags> so <div class="extrauserinfo"> custom text codes <tags> asdasd asdasdasdasdasd</tags> </div> here refiddle code there , can see want replace whole bunch of codes between , tag http://refiddle.com/1h6j hope mean :) if there's no nesting, plain match non-greedy (lazy) (?s)<div class="extrauserinfo">.*?</div> .*? matches amount of character (as few possible) meet </div> used s modifier making dot match newlines too. edit : here javas...
Read more

frame rate - JAVA simple fps animation(how can i work with?) -

can me, how can calculate , show fps in animation? want show simple rect (for example). if have code: private final fps = 30; private final size = 10; private int x = 10; private int y = 0; private string myfps; private void start(){ while(true){ moverect(); paint(); } } private void paint(){ g2.drawrect(x, y, size, size); g2.drawstring(myfps, 10, 10); } private void moverect(){ x++; } here copypaste of old simple java graphics+bufferstrategy gameloop test app. animation loop draws few moving rectangles , fps counter. java -cp ./lib/test.jar gameloop2 "fullscreen=false" "fps=60" "vsync=true" //http://www.javagaming.org/index.php/topic,19971.0.html //http://fivedots.coe.psu.ac.th/~ad/jg/ch1/ch1.pdf import java.util.*; import java.awt.color; import java.awt.frame; import java.awt.graphics; import java.awt.graphicsconfiguration; import java.awt.graphicsdevice; import java.awt.graphicsenvironmen...
Read more