Click here to Skip to main content
15,903,388 members
Please Sign up or sign in to vote.
2.00/5 (2 votes)
See more:
http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/76965

In this link when window scroll down,Toolbar display .I Want to know js code.
js used: jquery-ui-1.8.custom.min.js,jquery.min.js.
Posted
Updated 5-Feb-12 6:35am
v2
Comments
Ed Nutting 5-Feb-12 11:33am    
Looks like that thread has everything you need...
Sergey Alexandrovich Kryukov 5-Feb-12 13:55pm    
Not sure: the thread is about popup menu on mouse over. The problem OP is asking about is different and not so simple.
I answered with a general method on how to get a solution, please see.
--SA
Sergey Alexandrovich Kryukov 5-Feb-12 13:03pm    
Not a question. Why are you asking us? You already have this code, can't you see that?
--SA

Hi,

Here you go. Next time before asking something like this, install FireBug [^]and try to extract code. It's easy...
Here is full code you need to achieve this:
HTML
<html>
<head>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){	
	
		var _top = $(window).scrollTop();
		
		$(window).scroll(function() {
			var _cur_top = $(window).scrollTop();
			if(_top < _cur_top) {
				$('div#toolbar').slideDown('slow');
			} 
			else {
				$('div#toolbar').slideUp('slow');
			}
			_top = _cur_top;
		}); 
		
	});
	</script>
	
	<style type="text/css">
	
		body {
			color: #434343;
			font: 14px/22px helvetica,arial,verdana,'ms sans serif',sans-serif;
		}

		div#toolbar {
			background: url("http://images.daniweb.com/toolbar_background.gif") repeat-x scroll left bottom #4C265E;
			border-top: 5px solid #E5E5E5;
			bottom: 0;
			height: 30px;
			left: 0;
			position: fixed;
			width: 100%;
			z-index: 999999999 !important;
		}
		
		div.fixedpage {
			text-align: left;
			width: 925px;
		}

		ul.toolbar {
			list-style: none outside none;
			margin: 0;
			padding: 0;
		}
		ul.toolbar li {
			background: url("http://images.daniweb.com/toolbar_button.gif") repeat-x scroll left bottom #572B6A;
			border-left: 1px solid #381747;
			border-right: 1px solid #6C417F;
			color: #FFFFFF;
			float: left;
			font-size: 12px;
			font-weight: bold;
			height: 30px;
			line-height: 30px;
			padding: 0 10px;
		}
		ul.toolbar img {
			margin-right: 10px;
		}
		ul.toolbar li a, ul.toolbar li a:link, ul.toolbar li a:visited, ul.toolbar li a:hover {
			color: #FFFFFF;
			display: block;
			padding: 0 5px;
			text-decoration: none;
		}

		
	</style>
</head>
<body>
	
	
	<p style="height:1440px;">Page content</p>

	
	<div style="display:none" id="toolbar">
		<div align="center"> 
			<div class="fixedpage"> 
				<div style="position:relative"> 
					<ul class="toolbar">
						<li>That is all you need to achieve this... ;)</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

</body>
</html></html>
 
Share this answer
 
Comments
Sergey Alexandrovich Kryukov 5-Feb-12 14:26pm    
As it works, my 5.
OP is recommended to accept it formally (green button).
--SA
softprga 12-Feb-12 10:26am    
I want this popup display from left to right.
is this function in js
// Create scrollLeft and scrollTop methods
jQuery.each( ["Left", "Top"], function( i, name ) {
var method = "scroll" + name;

jQuery.fn[ method ] = function( val ) {
var elem, win;

if ( val === undefined ) {
elem = this[ 0 ];

if ( !elem ) {
return null;
}

win = getWindow( elem );

// Return the scroll offset
return win ? ("pageXOffset" in win) ? win[ i ? "pageYOffset" : "pageXOffset" ] :
jQuery.support.boxModel && win.document.documentElement[ method ] ||
win.document.body[ method ] :
elem[ method ];
}

// Set the scroll offset
return this.each(function() {
win = getWindow( this );

if ( win ) {
win.scrollTo(
!i ? val : jQuery( win ).scrollLeft(),
i ? val : jQuery( win ).scrollTop()
);

} else {
this[ method ] = val;
}
});
};
});
I feel awkward to explain such thing, but it's quite strange to explain such thing to a JavaScript developer.

As this is JavaScript, a client-side code, you have this code fully downloaded to the host running it by the time you run it. You don't need anything else.

With your Web browser, use "View Page Source" to see the source. Save it in some file, read the content of it. Find out which scripts are included (and also CSS and whatever else you might need), figure out URLs of these resources and download them, too.

Now, the problem itself looks very simple.

You can handle scrolling using jQuery .scroll(),
To animate showing of a hidden element, use .show(duration), for example, .show('slow').

Please see:
http://api.jquery.com/scroll/[^],
http://api.jquery.com/show/[^].

[EDIT]

You also need to know direction of scroll. For this purpose, you can compare scroll amount before and after scroll using
.scrollTop, see http://api.jquery.com/scrollTop/[^]. You will also need .hide('slow') on scroll up.

Additionally, there is one more feature you need to implement, called "sticky footer".

Just find a solution here: http://bit.ly/xdoURb[^].

It should keep your toolbar at the bottom of the page no matter where you scroll it.

Actually, Martin has already done it all in his answer.
My main point here is this: you can always copy scripts from the sample and learn how they work, please see above.

—SA
 
Share this answer
 
v5
Comments
Ed Nutting 5-Feb-12 14:14pm    
For sticky footers, why are people using such hacks? Why not just put position:fixed; bottom:0px;? This will "stick" (fix) any element to the bottom of the window - the top, right, left and bottom CSS styles become relative to the window and are the distance you want your element to be from that side of the window. Set a fixed height of something like 30px for a toolbar and then bottom to zero with position fixed (left to whatever you want for centering) and voilà, a compatible, "sticky" toolbar - no CSS/JavaScript hacks required!

Edit: The guy who posted a solution below got it right - just seemed to be that the first few Google links were doing odd things.
Sergey Alexandrovich Kryukov 5-Feb-12 14:20pm    
I'm against hacks even more -- I would not implement the whole behavior for practical purposes, but I was just curious...
I tried "fixed; bottom" -- it did not work properly (in Seamonekey at least). It is positioned like this before scrolling, but scrolling shifts it. It is not sticky.

Any other idea better than "sticky footer"? All the difficulty is being sticky, everything else is simple.
--SA
Ed Nutting 5-Feb-12 14:32pm    
Hi, the following code worked just fine in all major browsers (not even latest versions!):
<html>
<head>
<style type="text/css">
.StickyFooter
{
position:fixed;
bottom:0px;
height:40px;
width:100%;
left:0px;
}
</style>
</head>
<body>
<div class="StickyFooter">
fsdfsdfsd
</div>
</body>
</html>


Just make sure IE doesn't go into quirks mode - look up IE meta tags - there's one that IE recognises to make it use latest version that it has rather than compatibility view or Quirks modes.

Content can go anywhere, before or after the StickyFooter div without any problems. Normally content is put before because it is a footer, but that's jsut convention. Trying to put more than one of these in a page gets fun though!
Sergey Alexandrovich Kryukov 5-Feb-12 14:23pm    
Anyway, main part of my answer was how to copy scripts from a sample, not how implement it... :-) I added one more update as I noticed that this element also gets slowly hidden on scroll up.
--SA

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900