Support » Plugins » Getting Jquery to work on wordpress

  • Hi,

    I’m fairly new to coding wordpress and ive ran into a problem regarding Jquery Navigation.

    Basically I have this jquery menu all sorted works fine when i open it in just index.php, but i cant get it to run with wordpress index.php? It will run if i have it has index.html but not with index.php and i don’t know why?

    Im pretty aware WordPress supports Jquery so i dont understand what is going wrong??

    Heres the code to the index.php:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head profile="http://gmpg.org/xfn/11">
    
    	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
    
    	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
    
    	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    
        <script src="js/jquery-1.3.2.js" type="text/javascript"></script>
    	<script src="js/jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/animated-menu.js" type="text/javascript"></script>
    
    	<?php wp_get_archives('type=monthly&format=link'); ?>
    	<?php //comments_popup_script(); // off by default ?>
    	<?php wp_enqueue_script('jquery'); ?>
    	<?php wp_head(); ?>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body id="container">
    
    <div id="header">
    			<div id="logocontainer">
        				<div id="logo"></div>
                        <div id="description"><?php bloginfo('description'); ?></div>
    
                </div>
    
                <div id="nav">
                                            <ul>
                                                <li class="green">
                                                    <p><a href="http://google.com">Home</a></p>
    
                                                    <p class="subtext">the front page</p>
                                                </li>
                                                <li class="yellow">
                                                    <p><a href="#">portfolio</a></p>
                                                    <p class="subtext">view our work</p>
                                                </li>
                                                <li class="red">
    
                                                    <p><a href="#">blog</a></p>
                                                    <p class="subtext">check out our blog</p>
                                                </li>
                                                <li class="blue">
                                                    <p><a href="#">about</a></p>
                                                    <p class="subtext">find out more</p>
                                                </li>
    
                                                <li class="purple">
                                                    <p><a href="#">contact</a></p>
                                                    <p class="subtext">get in touch</p>
                                                </li>
                                            </ul>
        </div>
    </div>
    
    </body>
    
    </html>

    And heres the code to the .js file:

    $(document).ready(function(){
    
    	//Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
    
    	//Remove outline from links
    	$("a").click(function(){
    		$(this).blur();
    	});
    
    	//When mouse rolls over
    	$("li").mouseover(function(){
    		$(this).stop().animate({height:'71px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    	});
    
    	//When mouse is removed
    	$("li").mouseout(function(){
    		$(this).stop().animate({height:'40px'},{queue:false, duration:1200, easing: 'easeOutBounce'})
    	});
    
    });

    I just dont understand why??

Viewing 4 replies - 1 through 4 (of 4 total)
  • Possibly because you are using relative urls. Relative urls do not work the way you’d expect in WordPress because so much of it operates inside a kind of imaginary file structure. For example, what loads when you visit http://yourdomainname? Your theme’s index.php, right? (OK… at least by default.) But where is index.php actually located? http://yourdomainname/wp-content/themes/themename/index.php. Now, say you have image.jpg in your theme folder right next to index.php. You think that you should be able to use a relative url of ‘image.jpg’. The two are in the same directory after all. No problem. Except that the browser will look for the image at http://yourdomainname/image.jpg because that is where WP gives the illusion of it being.

    Just use bloginfo(‘url’) to construct a full path.

    Thread Starter osec

    (@osec)

    excellent, thankyou so much.

    Spent about a day of going insane trying to figure this out.

    much appreciated.!

    Thread Starter osec

    (@osec)

    1 more problem im having though is for just general images?

    just like the same problem before they do not show?

    they show when used in the css

    but not when putting say <img src=”images/logo.png”>

    any reasons?

    Sounds like the same problem and the same solution.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Getting Jquery to work on wordpress’ is closed to new replies.