Archived topic
Jquery problems
12 replies · Started by Anonymous on February 5, 2015
Hi, trying to use a jquery script with this theme. I see that jquery is loaded with the following in the <head> of the page:
<script type='text/javascript' src='http://mpwrestling.com/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
Here is the script I'm trying to run:
$(document).ready(function() {
var w = $(window);
var masthead = $('#site-navigation');
var adminbar = $('#wpadminbar');var a = adminbar.height();
var o = adminbar.length > 0 ? a : 0;
var h = $('.site-branding').height();
var m = masthead.offset().top;w.scroll(function() {
var st = w.scrollTop();
if(st > h)
{
masthead.css({'position' : 'fixed', 'top' : o})
}
else
{
masthead.css({'position' : 'absolute', 'top' : 0})
}})
});
Basically, it's a script to fix the gray bar to the top of the page as it scrolls there. It's a script I've run on several other websites successfully. However, I get "Uncaught TypeError: undefined is not a function" in the console when it's run. It's acting like jquery's not there.
So I tried to insert a link to a "fresh" jquery library. My script works fine now; however, the nav menu dropdowns freeze after I mouse over a menu item.
Anyone else have this problem?
In order for jQuery to work with WordPress, you need to change your very first line from:
$(document).ready(function() {
to:
jQuery(document).ready(function($) {
WordPress needs you to specify that you're using jQuery, as it supports multiple other libraries as well.
Let me know if that fixes it :)
That did it. Thanks!
You're welcome!
Where is this first line?
I'm using layerslider and the contents are not showing in the container.
The above was for writing his own jQuery.
Can you link me to your site where layerslider isn't working?
Thanks!
Hmm, looking like more of a layer slider issue.
Is the text you're wanting to show up called "Home Automation"?
If so, is it supposed to be an image, or text? Right now, it's set to be an image, but there's no image URL, so it's using the alt tag of the image (Home Automation).
Yes. I'll drag it into their forum then. Thank you for your help on this.
No worries. Let me know if there's anything I can do :)
Well, since you asked....
I'd like to turn the top menu bar into a responsive block, that holds only phone # and address. It would need two divs I guess, so that when the site is shrunk the phone # is on top of the address. ( I currently disabled the top menu bar )
The reason being is I don't want them to disappear when in mobile, and the don't have to be a nav menu.
You could add something like this into GP Hooks (Above Header):
<div class="grid-container grid-parent">
<div class="grid-50">
Phone number
</div>
<div class="grid-50">
Address
</div>
</div>The above will show the phone number on the left, and address on the right. Then, on mobile, the phone will be above the address.
Let me know if that helps or not :)
