Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

How to properly add Javascript?!? --- HELP!


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Feb 4, 2012, 05:06 PM
basslover911
 
1 posts · Feb 2012
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.

Last edited by basslover911; Feb 4, 2012 at 09:18 PM.
  #2  
Old Dec 25, 2012, 08:07 AM
johnnybravo
 
36 posts · Apr 2011
Russia
Hi, from Russia.
I do not quite understand your question, but maybe it will help.

Quote:
This is a syntax issue, the jQuery library included with WordPress loads in "no conflict" mode. This is to prevent compatibility problems with other javascript libraries that WordPress can load. In "no-confict" mode, the $ shortcut is not available and the longer jQuery is used, i.e.

jQuery(document).ready(function ($) {

By including the $ in parenthesis after the function call you can then use this shortcut within the code block.
  #3  
Old Dec 25, 2012, 08:16 AM
johnnybravo
 
36 posts · Apr 2011
Russia
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";});
to:
Code:
jQuery('div#menutop li').each(function () {if (this.getElementsByTagName("a")[0].href == location.href) this.className = "current";});
And deleted my row from header:
Code:
<script src="http://yandex.st/jquery/1.6.4/jquery.min.js"></script>
- it was more than

Now both code works fine

Last edited by johnnybravo; Dec 25, 2012 at 08:19 AM.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Sidebars don't display properly in IE writesbooks Sidebars & Widgets 1 Sep 15, 2010 09:05 AM
[SOLVED] Favicon doesn't want to appear or doesn't do so properly GrahamW Header configuration & styling 4 Aug 23, 2010 06:49 PM
RSS Feed not working properly adrianneizaguirre RSS, Feeds & Subscribing 1 Mar 19, 2010 04:10 PM
Adsense doesn't show up properly fangfang Sidebars & Widgets 3 Dec 7, 2009 07:03 PM


All times are GMT -6. The time now is 04:09 AM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.