Jump to content


Photo
- - - - -

Hooker and jQuery


Best Answer Simon_P , 05 April 2013 - 09:49 PM

<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.

Go to the full post


This topic has been archived. This means that you cannot reply to this topic.
3 replies to this topic

#1 augustliv

augustliv

    Newbie

  • Members
  • 4 posts

Posted 05 April 2013 - 08:51 PM

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: 

Please Login or Register to see this Hidden Content

 

The javaScript is as follows:

 

<script src="

Please Login or Register to see this Hidden Content

"></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



#2 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts

Posted 05 April 2013 - 09:31 PM

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(



#3 augustliv

augustliv

    Newbie

  • Members
  • 4 posts

Posted 05 April 2013 - 09:46 PM

Hi again

 

I've tried this: <script src="

Please Login or Register to see this Hidden Content

"></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



#4 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts

Posted 05 April 2013 - 09:49 PM   Best Answer

<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.