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


  • Please log in to reply
3 replies to this topic

#1 augustliv

augustliv

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

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
  • LocationDevon
  • Framework Version:2.0
  • Country: Country Flag

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
  • Country: Country Flag

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
  • LocationDevon
  • Framework Version:2.0
  • Country: Country Flag

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.