WordPress.org

Ready to get started?Download WordPress

Forums

Jquery in wordpress not working? (14 posts)

  1. lencanoot
    Member
    Posted 4 years ago #

    Hello everyone,

    I have been at it all day but it's not functioning the way I want it to function. I'm talking about a jquery script.

    It's the following:

    // Begin jQuery
    
    	$(document).ready(function() {
    		alert ("helloworld");
    		$("#subscribe_sidebar_list a").hover(function() {
    		    $(this).stop().animate({ marginTop: "-10px" }, 200);
    		    $(this).parent().find("span").stop().animate({ marginTop: "18px" }, 200);
    		},function(){
    		    $(this).stop().animate({ marginTop: "0px" }, 300);
    		    $(this).parent().find("span").stop().animate({ marginTop: "1px" }, 300);
    		});
    
    	// End jQuery
    
    	});

    It moves the ID subscribe_sidebar_list a when the mouse hovers over it.

    The call looks like this in the header.php:

    <?php wp_enqueue_script("jquery"); ?>
    <?php wp_head(); ?>
    <script type="text/javascript"   src="<?php bloginfo("template_url"); ?>/js/execute.js"></script>

    Is this wrong? Because my other Jquery is working (idTabs).

    For your information:
    HTML:

    <ul id="subscribe_sidebar_list">
    		<li class="button1"><a href="http://www.facebook.com" title="My fancy link">Link Text</a></li>
    		<li class="button2"><a href="#" title="link">Link Text</a></li>
    		<li class="button3"><a href="#" title="link">Link Text</a></li>
    	</ul>

    And CSS:

    #subscribe_sidebar_list {
    	float: right;
    	width: 360px;
    	height: 60px;
    	list-style: none;
    	list-style-type:none;
    	margin-right: 15px;
    }
    
    #subscribe_sidebar_list li {
    	float: left;
    	width: 60px;
    	height: 60px;
    	display: block;
    	padding-left: 5px;
    }
    
    #subscribe_sidebar_list a, #subscribe_sidebar_list a:visited, #subscribe_sidebar_list a:hover {
    	overflow: hidden;
    	display: block;
    	text-indent: -9999px;
    	width: 60px;
    	height: 60px;
    }
    
    /* Button Types */
    
    #subscribe_sidebar_list li.button1  {
    	background: url(images/facebook.png) no-repeat;
    	width: 60px;
    	height: 60px;
    	}
    
    #subscribe_sidebar_list li.button2 {
    	background: url(images/twitter.png) no-repeat;
    	width: 60px;
    	height: 60px;
    	}
    
    #subscribe_sidebar_list li.button3 {
    	background: url(images/feed.png) no-repeat;
    	width: 60px;
    	height: 60px;
    	}
    script

  2. Mark / t31os
    Moderator
    Posted 4 years ago #

    Try changing this..

    $(document).ready(function() {

    ..for..

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

    Info: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers

  3. lencanoot
    Member
    Posted 4 years ago #

    I think my function is wrong. The alert works now.. Thanks!

  4. lencanoot
    Member
    Posted 4 years ago #

    All dandy now, thanks!

  5. lencanoot
    Member
    Posted 4 years ago #

    Ehm actually it works in Firefox, Chrome and Safari, but not in IE.. Anyone know why?

  6. Mark / t31os
    Moderator
    Posted 4 years ago #

    Not working how in what way?

    Check the page source, make sure scripts are still being output in IE as they would be in FF, etc.. Is JS enabled in your IE...

    I can test in IE and FF if you would like to provide a link.

  7. lencanoot
    Member
    Posted 4 years ago #

    Well it's not outputting anything in IE. Not even an alert. Other browsers do it fine, just not IE. I'm running it on 8.

    Scripting is enabled on IE by the way.

    I can upload it to a webserver later today, I'm running it on a local test server at the moment.

  8. Mark / t31os
    Moderator
    Posted 4 years ago #

    Ok, let me take your code above and give it a shot under IE...

    At least i can fiddle with it that way... bear with me, going to test..

    UPDATE BELOW:
    Tested using Firefox 3.5.8 and IE7 (i don't have 8 on this PC)

    Alert popped up both times and the animation also works under both IE and FF.

    With the above in mind, try changing this..

    <?php wp_enqueue_script("jquery"); ?>
    <?php wp_head(); ?>
    <script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/execute.js"></script>

    for..

    <?php
    wp_enqueue_script(
    	// Name / reference for your script
    	'execute_jq' ,
    	// Path to the file
    	get_bloginfo('template_directory').'/js/execute.js' ,
    	// Script dependancies - what scripts your's requires
    	array('query')
    );
    wp_head();
    ?>

    Testing conditions, for comparison:
    WinXP SP3 - Local wamp install
    Firefox 3.5.8
    Internet Explorer 7 (default configuration)
    WP 2.9 / WP 3.0 (i run both locally)

  9. lencanoot
    Member
    Posted 4 years ago #

    Thanks for testing!

    This is the address: http://www.getloud.nl/

    IE not working.. :S

  10. Mark / t31os
    Moderator
    Posted 4 years ago #

    Open your JS file and remove the random line further down..

    $(document).ready()

    ..which comes just before..

    // End jQuery

    ..does that help?

  11. lencanoot
    Member
    Posted 4 years ago #

    I got it working now, don't know what the exact reason is why it works now, but I altered my js code to:

    // Begin jQuery
    
    	//Subsribe buttons movement
    	jQuery(document).ready(function($) {
    									//alert ('hallooo');
    			$("#subscribe_sidebar_list li").hover(function() {
    		    $(this).stop().animate({ marginTop: "-35px" }, 200);
    				   },function(){
    		    $(this).stop().animate({ marginTop: "0px" }, 300);
    		});
    
    		// Navigation movement
    			$("#archief li").hover(function() {
    		    $(this).stop().animate({ paddingLeft: "+12px", }, 200);
    
    		 },function(){
    		    $(this).stop().animate({ paddingLeft: "0px" }, 300);
    		 });	
    
    				$("#categorie li").hover(function() {
    		    $(this).stop().animate({ paddingLeft: "+12px", }, 200);
    
    		 },function(){
    		    $(this).stop().animate({ paddingLeft: "0px" }, 300);
    		 });		
    
    				$("#popular li").hover(function() {
    		    $(this).stop().animate({ paddingLeft: "+12px", }, 200);
    
    		 },function(){
    		    $(this).stop().animate({ paddingLeft: "0px" }, 300);
    		 });	
    
    $(document).ready()
    
    	// End jQuery
    
    	});

    It's working now. Thanks for all the help t31os_! Much obliged!

  12. lencanoot
    Member
    Posted 4 years ago #

    You know what it is? My localhost shows the website totally different in IE 8 than on my online webserver. Very strange, but a well.. :S

  13. Mark / t31os
    Moderator
    Posted 4 years ago #

    Ok, that's great news.. but why are you leaving that odd line in there?

    $(document).ready()

    Maybe you know something i don't, but as far as i know that'll do nothing, and invalidate your code.

    Like i said, when i tested your code(minus that error mentioned above), it worked under IE7. I just find it strange that code that works under IE7 would fail under IE8.. (though i'd not be totally surprised if it were true).

    And, you're welcome.. ;)

  14. lencanoot
    Member
    Posted 4 years ago #

    Yeah it's not necessary, it's already in there. I'll try to get see if it still works with that line. :)

Topic Closed

This topic has been closed to new replies.

About this Topic