Link to home
Start Free TrialLog in
Avatar of Redscrapbook
RedscrapbookFlag for Ireland

asked on

JavaScript: Ten seconds notification

I've notification highlighted as yellow colour for ten seconds approx and then it disappears. Then, you see a same message from notification in cyan as static.

The problem when the ten seconds notification disappears, it dragged the whole page up momentarily. Is it possible to stop this happening?

$(document).ready(function(){

 	$('.header-notification').delay(14000).animate({//7000 original
		  height: "0px",
		  paddingBottom:"0px",
		  marginBottom:"5px",
		  paddingTop:"0px",
	}, 500 ).hide(500);	
	

	
	$('.toggle-deploy').click(function(){
		$('.toggle-content').show(200);
		$('.toggle-close').show();
		$('.toggle-deploy').hide();
	});
	
	
	$('.toggle-close').click(function(){
		$('.toggle-content').hide(200);
		$('.toggle-close').hide();
		$('.toggle-deploy').show();
	});	

});

Open in new window


or line 364 <script src="js/header_notification.js"></script>

On line 1055 of HTML5 body where the notification header is:
<div class="header-notification"><p class="center-text">Swipe the image or use buttons as below.</p></div>

Open in new window


In order to find this:
www.kerrydeaf.com/medx/index14.html > Case Study > Open Q Type question here > Click a button Check the answers in here. > Yellow header notification will appear on header area for ten seconds. Then it will disappears.

It is a one-off JavaScript and header-notification appear once. Until browser refreshed.
Screen-Shot-2012-11-10-at-19.13..png
Screen-Shot-2012-11-10-at-19.14..png
ASKER CERTIFIED SOLUTION
Avatar of Gary
Gary
Flag of Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Redscrapbook

ASKER

Which effect that you cannot see?

Interesting about different animation like fade in so the div isn't hidden then reshown?
I'm now more interested animation like fade in.

Do you have example of JavaScript or CSS3 in that case?
Thank yoou for the link. I see most of the links as above with mouseover etc. What I'm hoping to find the one without hover, mouseover etc. It change itself after 10 seconds once a page is active.
You would need to use js/jquery to implement the class of fade in, they're just examples of the css to do the fade in.
It would be easier to just add a container div for that toggling div if you are happy with the show/hide.
That is the answer.

"Or wrap that particular div (header_runner3) in another div that has the specific height of the header_runner3 div." I've moved a DIV for yellow inside DIV blue and it worked. It doesn't move the page upwards.