We Keep Coding

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

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

Convert Image to background of Content

I am running into a problem and I trying to solve it in the only way that comes to mind. The problem is I am trying to take content that is attached to a image button, but the content is hidden and show it next to the button with a background image when the user hovers over it. Here is when the problem comes in, I have the background image currently as just an image(img tag), so I can stretch it by adjusting the height/width. I want to be able to lay the content on top of that image: For example:
<div class="ContentDiv"><img id="ContentButton">
<ul class="Content"><li>this is first</li><li> This is second</li>
<li>This is third content part</li></ul></div>
<div class="ContentDiv"><img id="ContentButton2">
<ul class="Content"><li>this is first</li><li> This is second</li>
<li>This is third content part</li></ul></div>
<div id="backgroundDiv"><img id="backgroundimg" src="backgroundI_Want_To_Use"></div>
so with jquery I use disregard simple syntax errors
var mem;
var img= $("#backgroundDiv").html();
$(".ContentDiv").hover(
function(){
mem=$(this).find(".Content").html();
$("#backgroundDiv").html(img+mem);
}function(){
});
The above does the intented, which is add all the content after the div img, which is what I'm stumped at, I want to be able to make the background img tag the actual background for the content. If I try to set the background-image in css to the url for the div. The image doesn't make the background as larger enough. Keep in mind I am under ie 6 for some cases but only as far as ie 8 for most cases.
So what I have tried was using css to change the z-index for the image and the content as so: but doesn't work:
#backgroundimg{
z-index:-100;
position:absolute;
}
.Content{
z-index:100;
position:relative;
}

i would use a different approach.
Structure your content like this:
+ DIV (position static / relative)
+ IMG (position relative)
+ DIV (position absolute)
+ "contents"
So you could work without any JS if i understood the question... See an example here:
http://jsfiddle.net/meo/h64w4/4/

<script type="text/javascript">
$(document).ready(function(){
var img= $("#backgroundDiv").html();
$(".ContentDiv").mouseover(
function(){
$("#backgroundDiv").html(img+'<div class="addedContent">'+$(this).find(".Content").html()+'</div>');
/* Use the following line if you want to scale the "background" image to the content */
$("#backgroundDiv").css('height',$(this).find(".Content").height());
});
});
</script>
<style type='text/css'>
#backgroundDiv{
position:relative;
height:auto;
width:auto;
}
#backgroundimg{
width:100%;
height:100%;
}
.addedContent{
position:absolute;
top:0;
left:0;
z-index:999;
}
</style>

If you weren't using a terrible browser, css3 could lend you a hand.
background-size: [ [ <length> | <percentage> | auto ]{1,2} || round ]
http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

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);
};
};