How to properly add Javascript?!? --- HELP!
I have a bunch of custom javascript/jQuery added to the "add HTML/CSS" inserts but there is a problem...
I can't use any plug-ins that use javascript because they conflict with the current code I have! I know that my main problem is calling the javascript/jQuery correctly, I just have no idea on how to call the jQuery that is already included with wordpress that way there are no conflicts of calling jQuery a bunch of times. This is my site (that i have to finish for school next week!), the custom stuff is a pop up footer, a navigation that sticks to the top, and a little animated line under the navigation links... titosoto.com Here is the code that I added to the "Header"; <! This is the DIV stick to the top !> <script type="text/javascript"> jQuery(function($) { // Check the initial Poistion of the Sticky Header var stickyHeaderTop = $('#stickyheader').offset().top; $(window).scroll(function(){ if( $(window).scrollTop() > stickyHeaderTop ) { $('#stickyheader').css({position: 'fixed', top: '0px'}); } else { $('#stickyheader').css({position: 'static', top: '0px'}); } }); }); </script> <! THIS IS THE SLIDE UP FOOTER !> <script type="text/javascript"> jQuery(function($) { var open = false; $('#footerSlideButton').click(function () { if(open === false) { $('#footerSlideContent').animate({ height: '300px' }); $(this).css('backgroundPosition', 'bottom left'); open = true; } else { $('#footerSlideContent').animate({ height: '0px' }); $(this).css('backgroundPosition', 'top left'); open = false; } }); }); </script> <! THIS IS THE ANIMATED NAVIGATION UNDERLINE BAR !> <script type="text/javascript"> jQuery(function($) { var $el, leftPos, newWidth; $mainNav2 = $("#example-two"); /* Add Magic Line markup via JavaScript, because it ain't gonna work without */ $("#example-one").append("<li id='magic-line'></li>"); /* Cache it */ var $magicLine = $("#magic-line"); $magicLine .width($(".current_page_item").width()) .css("left", $(".current_page_item a").position().left) .data("origLeft", $magicLine.position().left) .data("origWidth", $magicLine.width()); $("#example-one li").find("a").hover(function() { $el = $(this); leftPos = $el.position().left; newWidth = $el.parent().width(); $magicLine.stop().animate({ left: leftPos, width: newWidth }); }, function() { $magicLine.stop().animate({ left: $magicLine.data("origLeft"), width: $magicLine.data("origWidth") }); }); }); </script> So, anyone know hoy my code would look like to stop all this javascript/jQuery conflict?! all plug-ins work but then none of my custom stuff works... NOTE im not a programmer AT ALL, im a graphic design student. |
Hi, from Russia.
I do not quite understand your question, but maybe it will help. Quote:
|
Vslider plugin did not work with my jquery code, because I have twice used the same library (jquery.min.js - my and WP), then i changed my code from:
Code:
$('div#menutop li').each(function () {if (this.getElementsByTagName("a")[0].href == location.href) this.className = "current";}); Code:
jQuery('div#menutop li').each(function () {if (this.getElementsByTagName("a")[0].href == location.href) this.className = "current";}); Code:
<script src="http://yandex.st/jquery/1.6.4/jquery.min.js"></script> Now both code works fine |
All times are GMT -6. The time now is 11:19 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.