Solved

jquery slideup slidedown shows twice

Posted on 2013-12-13
15
827 Views
Last Modified: 2013-12-21
Hi,

I have this website http://goo.gl/beU48M, I use jquery slideup slidedown to display error. I dont know why it run twice, could you please help me to fix it?

To show error, you can buy 1 deal, on the shopping cart, check remove and click update. Then you will see the yelow error bar on top of page, it runs twice.

Thank you
0
Comment
Question by:tkien
15 Comments
 
LVL 22

Expert Comment

by:Mrunal
ID: 39716298
Hi
Can you show your code?

Add debugger in your code and check yourself is that code is running twice.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39716353
Check this : http://validator.w3.org/check?uri=http%3A%2F%2Fv2.wpgroupbuy.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

You've tons of errors in your page.
Especially duplicate ID attributes.
ID attributes must be unique in a page.
0
 

Author Comment

by:tkien
ID: 39716898
This is the Js file. The error id is #notification

jQuery(window).load(function() {
	jQuery('body').addClass("loaded");
	jQuery('#notification').has('.wg-message').slideDown('medium');
	jQuery('#notification').delay(5000).slideUp('fast');
	
	var sidebar_container = jQuery('.sidebar');
	if ( sidebar_container.width() > 600 ) {
		
		sidebar_container.masonry({
			itemSelector: '.widget',
			isResizable: true,
			gutterWidthInteger: 20,
			// set columnWidth a fraction of the container width
			columnWidth: sidebar_container.width() / 2
		});
	};
});

Open in new window

0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39722600
You've got the wrong event to initialize this it should be

JQuery(document).ready(function() {
...
});

If you wrap the window.load event then it will call twice as you've seen and animate twice
0
 

Author Comment

by:tkien
ID: 39722970
I tried with tagit's solution but it still show message twice.
0
 
LVL 35

Assisted Solution

by:Robert Schutt
Robert Schutt earned 50 total points
ID: 39722973
In your page I find:
<script type="text/javascript" src="http://v2.wpgroupbuy.com/wp-content/themes/WPGroupbuy/js/jquery.template.js"></script>

Open in new window

*and*
<script type='text/javascript' src='http://v2.wpgroupbuy.com/wp-content/themes/WPGroupbuy/js/jquery.template.js?ver=2.0'></script>

Open in new window

This seems to be essentially the same script and the code that shows the notification is in there, and is indeed being executed twice.

So I would say, delete one of those references and it should be ok, but still of course you should take notice of the earlier remarks about creating valid html and deciding on right event to trigger on.
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 42

Assisted Solution

by:Rob Jurd, EE MVE
Rob Jurd, EE MVE earned 150 total points
ID: 39722993
Additionally to what robert_shutt has said, you're also including jQuery twice:

view-source:http://v2.wpgroupbuy.com/cart/

line 28: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

line 48: <script type='text/javascript' src='http://v2.wpgroupbuy.com/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
0
 
LVL 42

Assisted Solution

by:Rob Jurd, EE MVE
Rob Jurd, EE MVE earned 150 total points
ID: 39722995
jquery UI twice

line 29: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>

line 70-72:
<script type='text/javascript' src='http://v2.wpgroupbuy.com/wp-includes/js/jquery/ui/jquery.ui.core.min.js?ver=1.10.3'></script>
<script type='text/javascript' src='http://v2.wpgroupbuy.com/wp-includes/js/jquery/ui/jquery.ui.widget.min.js?ver=1.10.3'></script>
<script type='text/javascript' src='http://v2.wpgroupbuy.com/wp-includes/js/jquery/ui/jquery.ui.tabs.min.js?ver=1.10.3'></script>
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39722996
All these are going to cause conflicts unless you're separating them with .noConflict and assigning the returned object to a variable (other than jQuery)
0
 
LVL 42

Assisted Solution

by:Rob Jurd, EE MVE
Rob Jurd, EE MVE earned 150 total points
ID: 39723005
You've also got <script> tags all through your <body>.  This is something you should be aware of and how it affects the execution and redering of the page.
I personally have everything in the head.  If I need script to load after the page is ready then I do that with script.  the defer and async attributes can also be used for this purpose but I see no advantage to putting script tags in the <body>
0
 

Accepted Solution

by:
tkien earned 0 total points
ID: 39723008
thank you for comments, I found the issue, just add .not(":animated")

jQuery('#notification').has('.wg-message').not(":animated").slideDown('medium');

Open in new window


and it works :)
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39723017
That's called a hack :-). In other words you're masking an issue instead of fixing it.
you will still find other issues with your site unless you fix the issues listed here.
0
 

Author Closing Comment

by:tkien
ID: 39733422
Thank you all for support :) I've found other issues from your comments.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to count occurrences of each item in an array.

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now