PDA

View Full Version : Keep Site Logo Stationary When Scrolling



mikevine
03-23-2010, 01:54 AM
1) Script Title: Keep Site Logo Stationary When Scrolling

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/logo.htm

3) Describe problem: What code in the Site Logo/Watermark script would I edit to keep the logo stationary when scrolling up or down the page? I only want the fade-in effect. Is it true that this script will not work in IE browsers? I tried IE5, 7, and 8, and no logo appears. It works fine in Safari and Firefox. Is there other scripts that will work with all 3 browsers with the functionality I'm looking for?
My testing URL: http://mldesign1.home.comcast.net/~mldesign1/
Thanks for any help on this.

jscheuer1
03-23-2010, 05:25 AM
If all you want is for the logo to fade in, you don't need a Site Logo/ Watermark Script script for that. Using just the jQuery library and a little bit of css, HTML and javascript code would be sufficient*.

The script works fine in IE though, just check the demo page on Dynamic Drive in that browser. However, one must follow the instructions on the demo page (particularly):


Important Note: Your page should contain a valid doctype (http://www.javascriptkit.com/howto/doctype.shtml) at the very top for this script to work properly. If your page doesn't, the logo will be made stationary on the page via scripting instead of CSS, which is less smooth.

*Demo of fading in logo:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#logo {
height: 110px;
text-align: right;
}
#logo img {
width: 276px;
height: 110px;
border: none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
document.write('<style type="text/css">#logo img { display: none; }<\/style>');
jQuery(function($){
$('#logo img').fadeIn(3000);
});
</script>
</head>
<body>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<div id="logo">
<a href="http://www.google.com/"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt=""></a>
</div>
</body>
</html>

mikevine
03-23-2010, 12:23 PM
jscheuer1,
Thanks for the fast response. I tried adding the code you put on the post, but after the logo is done fading in, it gets cut off by the burgundy stripe graphic (will be editing this graphic later) in the table. I don't know if I inserted the code in the correct place. I tried different locations, but then the logo is not in the upper left corner where I would like it to be. I need the logo to float above all page elements. Also, to position the logo more precisely, do you know the code to add x,y coordinates? Thanks for your help!

jscheuer1
03-24-2010, 01:10 AM
Add to the #logo selector (highlighted):


#logo {
height: 0px;
text-align: left;
position: relative;
}

That will get it so it isn't partially covered by the burgundy stripe. Then to position it more precisely, you may add top and left (just as examples):


#logo {
height: 0px;
text-align: left;
position: relative;
top: -3px;
left: 4px;
}

mikevine
03-24-2010, 11:29 AM
John, thanks again for your quick response and solution.
Mike