ansaurus

Question

Change Element Visibility Upon Page Load

Answer 1

A:

For the CSS:

imageID{opacity:0.0;filter:alpha(opacity=00)}

This ensures that the image isn't shown until the JS is loaded.

For the Javascript:

$(document).ready(function(){
    $("imageID").fadeIn("slow"3);
});

This changes the opacity from 0 to 1.

Cheers!

Isaac Hodes 2009-12-13 05:55:35

Answer 2

+3 A:

CSS:

div.fade_in { display: none; }

You can make it fade in on page load:

$(function() {
  $("div.fade_in").fadeIn();
});

If you want to wait for the mouse to move:

function fade_in() {
  $("div.fade_in").fadeIn();
  $("html").unbind("mousemove", fade_in);
}

$("html").mousemove(fade_in);

Edit: tested in IE8 (compatibility mode), FF3.5 and Chrome 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://mageia.rh.rit.edu//resources/main.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
function fade_in() {
  $("div.fade_in").fadeIn();
  $("html").unbind("mousemove", fade_in);
}

$(function() {
  $("html").mousemove(fade_in);
});  
</script>
<style type="text/css">
div.fade_in { display: none; }
</style>
</head>
<body>
<h1 class="centertext">Welcome to Mageia</h1> 
<h3 class="centertext">The Works of Genii</h3> 
<div id = "container" class="fade_in" > 
<img class="image1" src="http://mageia.rh.rit.edu/resources/Escher.gif" /> 
</body>
</html>

cletus 2009-12-13 05:57:09

Nice, +1. Didn't recall that Google waited until the mouse moved. And I suppose that `display:none` is far simpler than messing with the different implementations of `opacity`.

Isaac Hodes 2009-12-13 06:00:02

This seems like exactly what I am looking for, but I can't quite get it to work. If I make the CSS say display:none, then the images doesn't load at all, even after moving the mouse. If I set it do visibility:hidden, then the same issue happens with the image loading, then disappearing, then when you move the mouse it re-appears. Any thoughts?

Wayfarer 2009-12-13 06:21:58

ansaurus

tags:

views:

answers:

Change Element Visibility Upon Page Load

related questions