JQuery Conflict WordPress
- SOLVED
Hi upon my site: http://www.testing-websites.com/popcorn/portfolio/
I have a JQuery slider which works great, however I have just added a JQuery login box that drops down from the header.
The JQuery login box works fine when I add this call the the header.php of wordpress:
<script src="http://www.testing-websites.com/popcorn/wp-content/themes/popcorn/js/jquery.js" type="text/javascript"></script>
But when I add that it breaks all the other JQuery functionality on the page.
As you see the site now, the above call is NOT added.
I read something about a jQuery.noConflict() but don't know how or where to add this.
Can someone help me?
Thanks
Answers (4)
Christianto answers:
Hi,
Change javascript.js on http://www.testing-websites.com/popcorn/wp-content/themes/popcorn/js/
to this code
jQuery(document).ready(function($){
$("div.panel_button").click(function(){
$("div#panel").animate({
height: "100px"
})
.animate({
height: "80px"
}, "fast");
$("div.panel_button").toggle();
});
$("div#hide_button").click(function(){
$("div#panel").animate({
height: "0px"
}, "fast");
});
});
Jerson Baguio answers:
I think your jQuery.noConlict() is setup already.
Jquery is setup on your site. but if you need that version try put this code on the footer
<script src="http://www.testing-websites.com/popcorn/wp-content/themes/popcorn/js/jquery.js" type="text/javascript"></script>
Ram Kumar answers:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
JUST USE THIS CODE.
Hai Bui answers:
Hi,
Please open this file http://www.testing-websites.com/popcorn/wp-content/themes/popcorn/js/javascript.js and replace the content with this:
jQuery(document).ready(function($) {
$("div.panel_button").click(function(){
$("div#panel").animate({
height: "100px"
})
.animate({
height: "80px"
}, "fast");
$("div.panel_button").toggle();
});
$("div#hide_button").click(function(){
$("div#panel").animate({
height: "0px"
}, "fast");
});
});