Archived

This topic is now archived and is closed to further replies.

  • 0

Hooker and jQuery

Question

Posted · Report post

Hi

 

I have created a slider for my front page and used the Hooker plugin to insert my javaScript, BUT -  when I place the front page ID in (Only show on these pages/posts (coma seperated list of IDs) - the javaScript doesn't work and if I remove the front page ID from the above option the javaScript overrides my background-image on all pages.......

 

How do I command and direct the javaScript to work on my front page and only my front page?

 

NB: I wish to create a new front page - here is a link:  http://anwendt.dk/slider/

 

The javaScript is as follows:

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
$(function() {
    $('#accordion > li').hover(
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'480px'},500);
            $('.heading',$this).stop(true,true).fadeOut();
            $('.bgDescription',$this).stop(true,true).slideDown(500);
            $('.description',$this).stop(true,true).fadeIn();
        },
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'115px'},700);
            $('.heading',$this).stop(true,true).fadeIn();
            $('.description',$this).stop(true,true).fadeOut(500);
            $('.bgDescription',$this).stop(true,true).slideUp(700);
        }
    );
});
 
 </script>
 

Line og Nikolaj

Share this post


Link to post
Share on other sites

3 answers to this question

Posted · Report post

<script type="text/javascript">
jQuery(function() {
    jQuery('#accordion > li').hover(
        function () {
            var $this = jQuery(this);
            $this.stop().animate({'width':'480px'},500);
            jQuery('.heading',$this).stop(true,true).fadeOut();
            jQuery('.bgDescription',$this).stop(true,true).slideDown(500);

            jQuery('.description',$this).stop(true,true).fadeIn();

        },
        function () {
            var $this = jQuery(this);

            $this.stop().animate({'width':'115px'},700);
            jQuery('.heading',$this).stop(true,true).fadeIn();

            jQuery('.description',$this).stop(true,true).fadeOut(500);

            jQuery('.bgDescription',$this).stop(true,true).slideUp(700);

        }
    );
});

 </script>

 

Thats the best I can do, we dont really support code you have copy and pasted from the internet.

Share this post


Link to post
Share on other sites

Posted · Report post

You cant use jquery like that.

 

Wordpress autoloads jQuery anyway, so you dont have o load another version.

 

Its also loaded in noconflict mode, so instead of $ use jQuery foro the function names... example:

 

jQuery(function() {
    jQuery('#accordion > li').hover(

Share this post


Link to post
Share on other sites

Posted · Report post

Hi again

 

I've tried this: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function() {
    jQuery('#accordion > li').hover(
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'480px'},500);
            $('.heading',$this).stop(true,true).fadeOut();
            $('.bgDescription',$this).stop(true,true).slideDown(500);
            $('.description',$this).stop(true,true).fadeIn();
        },
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'115px'},700);
            $('.heading',$this).stop(true,true).fadeIn();
            $('.description',$this).stop(true,true).fadeOut(500);
            $('.bgDescription',$this).stop(true,true).slideUp(700);
        }
    );
});
 
 
 
 </script>
 

 

 

But without luck.... Do you have any other suggestions - I'm a bit at a loss.

 

 

Line og Nikolaj

Share this post


Link to post
Share on other sites