jQuery .fadeOut() blocking div under - javascript

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).

Related

jQuery Image Flicker on Hover

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

Running function before window has loaded

I wasn't sure how to correctly word the title, but here's what I have going on. I have two images in the body of the html.
<img src="http://www.narm.org.uk/home/images/Daylight%20design.jpg" id="b1" alt="day" />
<img src="http://www.aphoenix.ca/photoblog/photos/NighttimeColours.jpg" id="b2" alt="night" />
The corresponding css is as follow (basically makes one of them the background):
#b1, #b2 {
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
}
Here is the javascript:
window.onload = function() {
setBackground();
}
function setBackground() {
var back1 = $('#b1').hide();
var back2 = $('#b2').hide();
//setTimeout(function() {setBackground()}, 1000);
}
What currently happens now is that one image will display briefly because I"m waiting until the page has loaded to hide both the backgrounds. How would I go about hiding the backgrounds before the page has completely loaded?
Maybe with css on your images:
display: none;
So, styles will be like:
#b1, #b2 {
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
display: none;
}
I think you want to use jQuery.ready:
jQuery(function($) {
var back1 = $('#b1').hide();
var back2 = $('#b2').hide();
});
The window.onload function is fired when all external sources is loaded (styles, scripts, images, etc..)
jQuery's ready method is fired when the DOM is ready.
A little article about the difference
Take the function out of the window.onload call, and move it to between two script tags at the top of the page. The browser reads from top to bottom, so it will execute the code as soon as it sees it.
so make your code look something like this:
<head>...
<script>
setBackground();
</script>
...</head>
i think you have to create a custom functions for this, you can have all your content hidden, once the page is ready .load() you hide you background then show the new background and the content
If I understand correctly, you want to preload the images and keep them hidden until you need them.
Rather than JavaScript, css seems to be the way to go here. However if you use display:none; some browsers might decide to delay the image load. My suggestion is to move the images offscreen:
#b1, #b2 {
left: -9999px;
top: -9999px;
z-index: -1;
position: absolute;
}
[Update] Here is a test page for display:none:
http://www.quirksmode.org/css/displayimg.html
It mentions that Opera will not load the images.

Fire CSS3 Transform from Javascript button click

I am new to CSS3 transitions. I am trying to make a image slideshow for webkit only. there are 3 images aligned next to each other inside a wide DIV. This wide DIV is inside a container DIV whoose overflow property has been set as hidden. the width of the container DIV is equal to each Image, hence user can see only one image at a time.
here is the HTML and CSS for that.
HTML
<div id = "imageHolder">
<div id="slide1_images">
<img src="./images/fish.jpg" />
<img src="./images/desert.jpg" />
<img src="./images/space.jpg" />
</div>
</div>
CSS
#imageHolder
{
width: 320px;
height: 240px;
border: 1px solid grey;
overflow: hidden;
position: relative;
}
#slide1_images
{
position:absolute;
left:0px;
width:960px;
-webkit-transition: -webkit-transform 0.5s;
}
Now I have added a CSS hover selector in the code just to test the transition. when user hovers over the image (the inner DIV, to be precise), the whole set moves to left by 320 pixels (which is the width of each image).
CSS for hover
#slide1_images:hover
{
-webkit-transform:translate(-320px,0);
}
Upto this the code works perfectly, when I hover mouse over the first image, the set moves left and the 2nd image fits perfectly in the outer DIV.
What I want is, to perform the same action on Javascript button click. I have added a button called btnNext in my page. How can I fire the translate from the button click event? I tried the below but it does not work.
Javascript
<script type = "text/javascript">
function btnNext_clicked()
{
document.getElementById("slide1_images").style.-webkit-transform = "translate(-320px,0)"
}
</script>
I am sure I have done something stupid! could you please help me out fixing the Javascript function? Thanks a lot in advance :)
With the obvious caveat its for webkit browsers only you just need to use
.style["-webkit-transform"] = ..
as - cannot be used in an inline propery name here: style.-webkit-transform
From JavaScript you can access -webkit-transform property in this way:
var style = document.getElementById("slide1_images").style;
style.webkitTransform ='translateX(-320px)';
You can make it cross-browser friendly by accessing following properties:
transform
webkitTransform
MozTransform
OTransform
msTransform

jQuery: resizing element cuts off parent's background

I've been trying to recreate an effect from this tutorial: http://jqueryfordesigners.com/jquery-look-tim-van-damme/
Unfortunately, I want a background image underneath and because of the resize going on in JavaScript, it gets resized and cut off as well, like so: http://dev.gentlecode.net/dotme/index-sample.html - you can view source there to check the HTML, but basic structure looks like this:
<div class="page">
<div class="container">
div.header
ul.nav
div.main
</div>
</div>
Here is my jQuery code:
$('ul.nav').each(function() {
var $links = $(this).find('a'),
panelIds = $links.map(function() { return this.hash; }).get().join(","),
$panels = $(panelIds),
$panelWrapper = $panels.filter(':first').parent(),
delay = 500;
$panels.hide();
$links.click(function() {
var $link = $(this),
link = (this);
if ($link.is('.current')) {
return;
}
$links.removeClass('current');
$link.addClass('current');
$panels.animate({ opacity : 0 }, delay);
$panelWrapper.animate({
height: 0
}, delay, function() {
var height = $panels.hide().filter(link.hash).show().css('opacity', 1).outerHeight();
$panelWrapper.animate({
height: height
}, delay);
});
});
var showtab = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';
$links.filter(showtab).click();
});
In this example, panelWrapper is a div.main and it gets resized to fit the content of tabs. The background is applied to the div.page but because its child is getting resized, it resizes as well, cutting off the background image.
It's hard to explain so please look at the link above to see what I mean.
I guess what I'm trying to ask is: is there a way to resize an element without resizing its parent? I tried setting height and min-height of .page to 100% and 101% but that didn't work. I tried making the background image fixed, but nada. It also happens if I add the background to the body or even html. Help?
Another solution could be to use jquery to set a minimum height on the .page element. Height must be set in pixels, not percentages. I've tested the following and it works:
$('.page').css('min-height',$('body').height()+'px');
But you will need to run this whenever the browser window is resized.
For a completely non-javascript solution you could put the bubbles in an absolutely positioned div behind the content. Use the following CSS to make the div fill the screen:
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
z-index:1;
You'll have to make sure this doesn't sit on top of your page content by giving that a higher z-index (for z-index to take effect you will need to set position:relative or position:absolute on the page content)
Have you tried adding min-height: 100%; background-attachment: fixed; to the body element?
The background-attachment might not be needed, though.
Could you add the background image to the body instead of the .page element?
.page {
background: transparent url(../img/glass/bg-page.png) top center fixed no-repeat;
overflow: hidden;
}
The body fills the browser window but the .page div is only as big as its content, which is why it's getting cut off as the content animates.

A way to fade in the background on load?

I am working on a website design, and I need a way to fade in the background image of the body tag when it is completely done loading (perhaps then a pause of 500 ms).
If you see August's website design you will see the background fades in; however, this is done with a Flash background. Is there any way to do this with jQuery or JavaScript?
Update 9/19/2010:
So for those that are coming from Google (this is currently the number one result for "fade in background on load", I just thought I'd make a more clear implementation example for everyone.
Add a <div id="backgroundfade"></div> to your code somewhere in the footer (you can also append this via JavaScript if you don't want your DOM getting cluttered.
Style as such -
#backgroundfade {
position: fixed;
background: #FFF /* whatever color your background is */
width: 100%;
height: 100%;
z-index: -2;
}
Then add this to your JavaScript scripting file (jQuery required):
$(document).ready(function() {
    $('#backgroundfade').fadeOut(1000);
});
This has the effect of fading the #backgroundfade element (the box "covering" your actual background) out in 1 second upon DOM completion.
Yep:
Don't give the body a background image. Then prepare an animated GIF with the fading effect. In Javascript:
document.onload = function () {
window.setTimeout (function () {
document.getElementsByTagName ("body")[0].style.backgroundImage = "url(/path/to/image.gif)";
}, 500);
};
In jQuery it would be
$(function () {
$('body').css ('backgroundImage', 'url(/path/...)');
});
If you don't want to do the animated GIF trick, but need support for JPEG or PNG, it get's nasty. You'll have to create a placeholder <div/>, position it to the right place and play with opacity. You also have to detect when the background image has loaded, so that you don't get silly jumps on slow connections. A non-working example:
var x = new Image();
x.onload = function () {
/*
create div here and set it's background image to
the same value as 'src' in the next line.
Then, set div.style.opacity = 0; (best, when the
div is created) and let it fade in (with jQuery
or window.setInterval).
*/ };
x.src = "/path/to/img.jpg";
Cheers,
I haven't done this myself, but it might work.
You could, I guess, setup the background image and then mask it with a big old div that has a black background. Then play with opacity of this div to create the fade effect. This black div would have to cover the entire body.
i see this link ,
http://fragged.org/dev/changing-and-fading-body-background-image.php
the idea is :
apply your background to a div that's assigned a low z-index, absolute positioning and a background (think of it as a reverse / back modal). then produce your content into another layer on top of it with a transparent background....
you can now reference the bottom layer by id and change the opacity.
all it needs is a stack / array of background mages to apply as a property to the layer...
I'm not sure if there is a way to have the background image fade in, but one way you could do it is using an absolutely positioned image with a negative z-index. You could then use jquery to fade in the image. This approach might be trickier if you need the background image to tile or repeat.
The HTML:
<body style="z-index: -2">
<img src="backgroundImage.jpg" id="backgroundImage" style="position: absolute; top: 0px; left: 0px; z-index: -1; display: none;">
<!-- The rest of your HTML here -->
</body>
The jQuery:
$(window).load(function() {
$("#backgroundImage").fadeIn("slow");
});
Why not use a ready-made script: this one makes a background image fade-in on page load.
It also fits the image to the dimensions of the window, but this can be disabled if not needed.
My solution:
HTML:
<img id='myImg' />
CSS:
#myImg{
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
}
JS:
var img = document.getElementById('myImg'),
steps = 30,
appearTime = 1000;
img.src = "/path/to/img.gif";
img.onload = function(){
for(i=0; i<=1; i+=(1/steps)){
setTimeout((function(x){
return function(){
img.style.opacity = x;
img.style.MozOpacity = x;
img.style.KhtmlOpacity = x;
img.style.filter = "alpha(opacity=" + (x*100) + ")";
};
})(i), i*appearTime);
};
};

Categories