jQuery Image Flicker on Hover - javascript

I have a picture exactly on top of a Vine video. I want the picture to go away upon mouseover and reappear on mouseout. In other words, the Vine is only visible when the mouse is over the picture.
With the current code I have the image flickers in and out. I think the problem might be with the Vine behind the picture. I've tried playing with z-indexes, but no cigar.
Here's my code (I'm using span to wrap #picture)
<div class = "vine-two media">
<span><img id = "picture" class = "on-top" src = "img/kanye.jpg"></span>
<iframe id = "video" class="vine-embed adj-size"src="https://vine.co/v/bYDuAmjeH9r/embed/simple"frameborder="0"></iframe><script async src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>
<script>
$(document).ready(function() {
$('span').mouseover(function () {
$('#picture').hide();
}).mouseout(function () {
$('#picture').show();
});
});
</script>
</div>
CSS:
.on-top {
position: absolute;
z-index: 1000;
width: 240px;
height: 240px;
}
.adj-size{
width: 240px;
height: 240px;
}

You need to use mouseenter and mouseleave. http://api.jquery.com/mouseenter/ follow that link and you can see the difference in the example. Mouseover fires multible event, which is likely the source of the flicker.
Update:
seeing the code, I would set the iframe to hidden until it is ready to play. Flash causes overlay problems. The youtube solution is http://www.youtube.com/embed/vRH3Kq5qDw4?wmode=opaque which puts the flash into wmode=opaque. vine may have something as well.

Is the span-tag around the image?
If yes, I could imagine that you are hovering over the span, then the image disappears and the span becomes smaller (0x0 pixels) and the mouse cannot hover anymore over the span.
Perhaps try something like this:
<div class="completely_hovering_over_the_video" style="width:video_width;height:video_height" >
<img id="picture" src="bla.jpg">
</div>
With this code I am trying to show you a DIV that completly covers the video and has a fixed width and a fixed height. This DIV will not change it's dimensions even if the IMG becomes smaller or invisible. If you hover the DIV hide the IMG and vise versa.

When it disappears the image will register the mouseout event which will make the image show up again.
One possible solution is to try $('#picture').css('visibility','hidden'); instead of using hide(), and $('#picture').css('visibility','visible'); to show it. I think this will prevent mouseOut from triggering when the image is hidden as the image is still there, just invisible.

span can be any span on your page therefore it's a BAD way to do things,
you need to be more specific with your selectors:
$(function() { // DOM ready shorthand
$('.picture').hover(function () {
$(this).fadeToggle(); // make video underneath visible
});
// other DOM ready stuff here
});
Or follow this implementation example: DEMO
<div class="video">
<!-- video here -->
<img src="image.jpg">
</div>
.video{
position:relative;
width:400px;
height:280px;
}
.video img{
position:absolute;
top:0;
left:0;
}
$('.video').hover(function(){
$(this).find('img').fadeToggle();
});
To explain the basic trick is to point the hover event to a common video and img parent, in this case the DIV . video.
Also this will work:
$('.video').hover(function(){
$("img", this).fadeToggle();
});
Additionally if you want to prevent hysteric users to see animation buildups you can add .stop() method like:
$('.video').hover(function(){
$("img", this).stop().fadeToggle();
});
Also with the HTML I provided it can be all done using just CSS: http://jsbin.com/amiBOKu/4/edit
.video:hover > img{
display:none;
}

I'd suggest a little restructuring, as well as using hover instead of mouseover and mouseout. The reason you're seeing the flicker is because mouseout fires once the image fades, whereas hover will only fire once on mouse in and once on mouse out.
Example:
HTML:
<div class = "vine-two media">
<img class = "on-top picture" src = "http://data2.whicdn.com/images/27599232/kanye-west-announces-new-design-company-called-donda-1_large.jpg">
<iframe id = "video" class="vine-embed adj-size"src="https://vine.co/v/bYDuAmjeH9r/embed/simple"frameborder="0"></iframe><script async src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>
</div>
JS:
$('.media').hover(function() {
// mouse enter
$('.picture', this).hide();
}, function() {
// mouse leave
$('.picture', this).show();
});
Fiddle

Related

Make image fluid with responsive design?

I actually know how to fluid an image with responsive design. But, my problem is not simple. I using scale width function of parent div to append width of image like that :
function OnImageLoad(evt){somthing....}
<div class="parent">
<img style="left: 0px; top: -20px;" onload="OnImageLoad(event);" src="http://4.bp.blogspot.com/-pHWQ1Wp63GQ/Uk3TJLa9FbI/AAAAAAAAACg/_JUXOxweYY8/s1600/edu2.jpg" width="270" height="175">
</div>
Now, I want run event on image onload="OnImageLoad(envent);" again if window resizing
$(window).resize(function(){ ??? });
Help me to fix it. Thanks for your help.
I would give the images a special class (if not all need to be triggered).
(Use a timer in the resize function to support browsers from triggering it multiple times.)
$(window).resize(function(){
//get the function out of the onload attribute
var onloadFunction = $("img.[specialclass]").attr("onload");
//Execute it
eval(onloadFunction);
});
But on the other hand if you only want to scale the images.
The ratio keeps the same in this example by the padding-bottom.
img{
width:100%;
height:0;
padding-bottom:66%;
}

jQuery .fadeOut() blocking div under

I was checking this example of slideshow and found a strange behavior.
I am using this code but the image under does not show until the above one is done fading out. Why? I expected the image #above to fade out to the image #under.
(Note that #above has z-index:10;)
<div id="current_image">
<img width="370" id="above" src="...
<img width="370" id="under" src="...
</div>
jQuery
$(document).ready(function () {
$(".small_image").click(function () {
event.preventDefault();
var image = $(this).prop("rel");
var above = $('#above');
var under = $('#under');
under.prop('src', image);
above.fadeOut(1000, function () {
above.prop('src', under.prop('src')).css('display', 'block');
});
});
});
FIDDLE
The problem is that the 2 images in the #current_image div are not on top of one another, but the one image is vertically above the other image (the images are not stacked).
http://jsfiddle.net/cVNTG/2/
So, you just need to alter some CSS:
#current_image {
width:370px;
height:245px;
float:left;
overflow:hidden;
position: relative;
}
#current_image img {
min-height:100%;
position: absolute;
top: 0;
left: 0;
}
Now your images are absolutely aligned, and they're on top of one another. So as one fades out, the other one is showing behind it. If you had inspected the HTML/CSS with something like Firebug, you would have seen this.
I would consider rewriting the JavaScript portion of this. You don't really need to change src and all that. Just assign your #above and #below id's as needed, and then make sure #above has a higher z-index (or really, you probably only need to add/remove the #above id).

How to put this div in center and lock everything else with light blue background

I have a div,
<div id="messagebox" style="display: none; cursor: default">
<asp:DropDownList ID="ddl" runat="server" EnableViewState="true" AutoPostBack="true" OnSelectedIndexChanged="ddl_SelectedIndexChanged"/>
</div>
On click event, I am showing this div using,
$('#messagebox').show();
How can I put it in center of screen and also make background light dark, I want to dropdown list to trigger code behind so want to disable everything except this div,
I Edited your html and added it inside tabel. Now it's working fine and always
stay in center position even on window resizing. Check below demo
http://jsfiddle.net/NnckT/9/
Sounds like you want this div to function as a modal; you can add a <div> covering the entire background, e.g.:
<div id="cover" style="position:absolute; width:100%; height:100%; background-color: #fff; display:none; "></div>
...and then show it via the same .show() method:
$('#cover').show();
You may also need to play with the z-index property of both to get the layering correct. You could also explore jQuery's Dialog system, if using jQuery UI is in the realm of possibilities.
This is essentially a 'modal pop-up functionality', also called 'dark box' pop-up. You can achieve the 'modal pop-up' functionality either with Javascript, or with 'pure CSS'; the latter will work even in case of Javascript disabled. Here is a link to Modal Pop-Up demo implemented as pure CSS3/HTML5 solution (no any javascripting): http://webinfocentral.com/html5/ModalPopUp.htm
Essential part of it utilizes target attribute as shown in the listing below:
/*** pop-up div to cover entire area ***/
.divModalDialog {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
/*! important !*/
display:none;
/* last attribute set darkness on scale: 0...1.0 */
background-color:rgba(0,0,0,0.8);
text-align:center;
z-index:101;
}
/*** ! target attribute does the job ! ***/
.divModalDialog:target { display:block; }
Refer to my article (http://www.codeproject.com/Tips/170049/Pure-HTML-5-CSS-3-Modal-Dialog-Box-no-JavaScript) for the complete solution.
I would use som kind of modal plugin: Here is a couple, lots of examples out there. No reason to develop one of your own if no other requirements?
http://jquerybyexample.blogspot.com/2013/01/jquery-popup-window-tutorial-plugins.html
You can use jQuery BlockUI Plugin to block the screen with your desired div accessible as a popup in centre of the screen
$(document).ready(function() {
$('#someButton').click(function() {
$.blockUI({ message: $('#cover') });
});
});
See demos over here: http://www.malsup.com/jquery/block/#demos
try this ..
var windowWidth = $(window).width(); //retrieve current window width
var windowHeight = $(window).height();//retrieve current window height
$('#messagebox').css('top',(windowHeight/2)+"px");
$('#messagebox').css('left',(windowHeight /2)+"px");
$('#messagebox').show();

Jquery: Hide and show a div when image is hover

I wonder if someone can help me find a solution to an effect hover to an image in my blog.
The idea was when I hover an image, you see a div with the image information, link project name, date,...
What i have done is, assign two classes do the div information, class show and class hide, and at the beginning it apears with a class hide.
Then with jQuery/JavaScript when the img:hover it remove the class hide and add a class show.
the problem is, when i do hover to a image, appears the information of all images.
I am wonder if some can help me to make just appear the information of the image that the mouse are hover.
My HTML:
<div id="content">
<img src="images/1.jpg" alt="Projecto 1" height="290" width="220" />
<div class="information hide">
<h2>Titulo</h2>
<p>Lorem Ipsun</p>
Read More
</div>
</div>
<div id="content">
<img src="images/1.jpg" alt="Projecto 1" height="290" width="220" />
<div class="information hide">
<h2>Titulo</h2>
<p>Lorem Ipsun</p>
Read More
</div>
</div>
My CSS:
body div.information {
background: rgba(219, 49, 49, 0.52);
width: 220px;
height: 290px;
position: relative;
top: -290px;
}
/* HOVER EFFECT */
.hide {
display: none;
}
.show {
display: block;
}
My JavaScript:
$('img').hover(function() {
$('.information').addClass("mostrar");
$('.information').removeClass("hide");
});
And by the way, if some one can tell me, how to hide the information again when the image is not hover, I appreciate to.
What about something simpler:
$("div.content > img").hover(function() {
$(this).next(".information").show(); //hover in
}, function() {
$(this).next(".information").hide(); //hover out
});
This way, using jquery .show and .hide you don't need to use the css which you created for the hover effect, since these jquery's functions already take care of the attributes.
If you don't need to support IE7 and lower, you can do this with just CSS using the adjacent sibling combinator selector, no JavaScript required:
img + div.information {
display: none;
}
img:hover + div.information {
display: block;
}
That says: "Hide div.information when it's immediately after an img" but "Show div.information when it's immediately after a hovered img". The latter rule being both later in the CSS and (I think) more specific, it wins when the image is hovered and not when it isn't.
Live example - Works in modern browsers, including IE8 and higher.
the problem is, when i do hover to a image, appears the information of all images.
I believe this is because you're referencing the generic information class, not the id of a single div. Instead, use the adjacent sibling reference to get only the information for the image you're hovering. You could use the :nth-child() selector.
$("#content:nth-child(1)")
Also, you shouldn't have multiple divs with the same id.
$(this).parent().find('.information').addClass("mostrar")
.removeClass("hide");
This will grab the parent of the individual img which is being hovered, search within the parent and find the .information specific to that img.
Try this:
$('img').hover(function(){
$(this).siblings('.information').removeClass('hide').addClass('mostrar').addClass('show');
}, function(){
$(this).siblings('.information').removeClass('show').removeClass('mostrar').addClass('hide');
});
Try this
$('img').hover(function() {
$('.information').addClass("hide")
$(this).next().addClass("mostrar").removeClass("hide");
}, function(){
$('.information').addClass("hide").removeClass("mostrar")
});

toggle jquery - issue

I have this demo
However the mouse over when dragged to left or right stops the toogle.
The hover() event didn't solve the problem.
Any idea ?
div.fileinputs {
position: relative;
display: none;
}
#show {
width: 200px;
height: 40px;
background-color: red;
z-index: -2px;
position: absolute;
}
<div id="show"></div>
<div class="fileinputs">Visible Panel Div</div>
$('#show').mouseover(function() {
$('.fileinputs').toggle();
});
Given that you want to simply show the element on mouseover and then hide it on mouseout, you should also use mouseout() to define the desired behavior you want when the mouse is removed:
$("#show")
.mouseover(function(){
$(".fileinputs").toggle();
})
.mouseout(function(){
$(".fileinputs").toggle();
});
Example. (It's choppy because fileinputs is a separate element, and it's not counting hovering over that as hovering over the show div).
But you should use hover, just to make it easier:
$("#show").hover(function(){
$(".fileinputs").show();
}, function(){
$(".fileinputs").hide();
});
Example. (Choppy for the same reason as above).
Since your desired behavior is definite, we'll just use show() for when the mouse is over it and hide() when it is removed.
By the way, it is preferred that you bind events using delegate() (for older versions of jQuery) or on() (for jQuery 1.7+):
$(document).on("mouseover mouseout", "#show", function(){
$(".fileinputs").toggle();
});
Example.
Though, you really should just use CSS for this. You can place fileinputs inside of show and use a child selector:
#show:hover > .fileinputs {
display: block;
}
Example. This one doesn't flicker because the element is inside the one that's getting the hover declarations attached to it, and CSS considers it as though you are still hovering over the parent element (because you technically are, as the target of the hover is within the boundaries of the parent [it would still work if it was outside the boundaries because the element is still nested]).
I think it's because you set your z-index on show to be -2. Once the fileInputs div is visible, it becomes on top of show, and as a result, mouseover for show no longer responds.
If you notice, if you hover from left to right over the red show div, but just below where the text is, the fileinputs div does in fact toggle.
If you add a border around the fileinputs div, the cause of the behavior will be clearer.
See: http://jsfiddle.net/pS9L8/
Moving your cursor over the region where the two divs overlap triggers a mouseover event, showing the hidden fileinputs div. Since that div is now displayed on top of show, your cursor is no longer directly over the original show div. You then continue to move your cursor, and as it moves outside the fileinputs region, that move is seen as another entrance to the underlying show div. Which again triggers the .toggle(), re-hiding the fileinputs div.
One quick fix is to switch to the jQuery custom event mouseEnter instead of mouseover (although you may get some jerky artifacts as jQuery reasons about the meaning of "over"). Depending on what you're trying to achieve, another option would be to reorder the two divs by z-index.

Categories