display div with delay

Question

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 5-Feb-12 5:31am

softprga

Updated 5-Feb-12 6:35am

Manfred Rudolf Bihy

v2

Add a Solution

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

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Martin Arapovic · Answer 1 · 2012-02-05T07:57:00

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>

Sergey Alexandrovich Kryukov · Answer 2 · 2012-02-05T07:16:00

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

display div with delay

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0