SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need a little help with jquery

    Hi friends,

    A bit of help if you may.

    Basically, there are 10 menu items listed on the left and 10 corresponding images on the right. So,if I hover over the 1st item on the left, the corresponding 1st image on the right should fade to 0.33 opacity and come back.

    - The ten text items on the left each have a class of "1","2","3"..and so on till "10" and the 10 pics on the right each have a same corresponding class of "1","2","3"...and so on till "10".
    - The 10 text items on the left are inside a div with id="left" and the 10 pics on the right are inside a div with class="gallerycontainer".

    This is the code I am using but it seems to be working only on the 1st item-1st image pair...

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
    
    var a=10,b;
    
    for(a=0;a<10;a++)
    { b=a+1;
    
    $("#left ."+b).hover(function () { 				 
    	               $(".gallerycontainer ."+b+" img").fadeTo("slow", 0.33,function() {$(".gallerycontainer ."+b+" img").fadeTo("slow", 1.00);}); });
    					
    } //end of for-loop	
    
    });
    </script>
    Can you tell me whats going wrong ?

    Thanks a lot
    Rohil

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you need to re-reference the class name within the hover function so:

    Code JavaScript:
    $("#left ."+b).hover(function () {
     
         var b = $(this).attr('class'); // <<-- HERE
         $(".gallerycontainer ."+b+" img").fadeTo("slow", 0.33,function() {$(".gallerycontainer ."+b+" img").fadeTo("slow", 1.00);}); });
     
    } //end of for-loop

    You should note that (according to the CSS specification) class or ID names should not start with a digit.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    I think you need to re-reference the class name within the hover function so:

    Code JavaScript:
    $("#left ."+b).hover(function () {
     
         var b = $(this).attr('class'); // <<-- HERE
         $(".gallerycontainer ."+b+" img").fadeTo("slow", 0.33,function() {$(".gallerycontainer ."+b+" img").fadeTo("slow", 1.00);}); });
     
    } //end of for-loop

    You should note that (according to the CSS specification) class or ID names should not start with a digit.
    Hey ,

    Thanks for the info. But the referencing you suggested is not working. There is some other problem here.

    I have changed the class names from "1" to "a1", "2" to "a2" and so on...for both the text and the pics. Here is the main problem I am facing.

    In the following code, I am getting the alert message 10 times which means that the loop is running correctly :
    Code:
    $(document).ready(function() {
    
    var a,b;
    
    for(a=0;a<10;a++)
    {
    b=a+1;
    
    alert("Check");
     
    } //end of for-loop
    
    });
    If I replace the alert command by the fade command like this:
    Code:
    $(document).ready(function() {
    var a,b;
    
    for(a=0;a<10;a++)
    {
    b=a+1;
      $(".gallerycontainer .a"+b+" img").fadeTo  ("slow", 0.33,function() {  $(".gallerycontainer .a"+b+" img").fadeTo("slow", 1.00);}
      );
      
       }//end of for-loop
    
    });
    now when the page loads, the pics fade away but dont fade back. All 10 of them. So, this means that here also loop runs 10 times.

    Now when I insert the -- $("#left .a"+b).hover -- condition in like this,
    Code:
    $(document).ready(function() {
    var a,b;
    
    for(a=0;a<10;a++)
    {b=a+1;
    
    $("#left .a"+b).hover(function () { 	//start of hover event
    
      $(".gallerycontainer .a"+b+" img").fadeTo  ("slow", 0.33,function()  {  $(".gallerycontainer .a"+b+" img").fadeTo("slow", 1.00);}
      );  
    
    });  //end of hover event
      
       } //end of for-loop
    
    });
    Only the 1st pair of menu text and image are working properly. If I hover the 1st menu text item, the first pic which shares the same class "a1" with it, fades out and back in. This is not happening with the rest 9 pairs.

    Bottomline : When --- $("#left .a"+b).hover --- event is put in, the loop is running only once. Else its running properly.

    Been trying to get this work for hours. If anyone could help, it would be great.

    Regards
    Rohil

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To explain the problem more clearly, i tried to explicitly use it for only the starting 2 pairs. But here also only 1st pair works !!! the second command for "a2" does not work !!

    Code:
    $(document).ready(function() {
    
    
    //Below code works
    $("#left .a1").hover(function () {
      $(".gallerycontainer .a1 img").fadeTo  ("slow", 0.33,function() {  $(".gallerycontainer .a1 img").fadeTo("slow", 1.00);}
      ); });
      
    
    //Below code DOES NOT work
    $("#left .a2").hover(function () {
      $(".gallerycontainer .a2 img").fadeTo  ("slow", 0.33,function() {  $(".gallerycontainer .a2 img").fadeTo("slow", 1.00);}
      ); });
    
    });

  5. #5
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    Code JavaScript:
    $(document).ready(function() {
     
        for(var a=1;a<=10;a++) {
            alert(a);
     
            $("#left .a"+a).bind('mouseover',function () {     
                var class = $(this).attr('class');             
                $(".gallerycontainer img."+class).fadeTo("slow", 0.33,function() {
                    $(".gallerycontainer img."+class).fadeTo("slow", 1.00);
                });
            });
     
        } //end of for-loop    
     
    });
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  6. #6
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    Try this:

    Code JavaScript:
    $(document).ready(function() {
     
        for(var a=1;a<=10;a++) {
            alert(a);
     
            $("#left .a"+a).bind('mouseover',function () {     
                var class = $(this).attr('class');             
                $(".gallerycontainer img."+class).fadeTo("slow", 0.33,function() {
                    $(".gallerycontainer img."+class).fadeTo("slow", 1.00);
                });
            });
     
        } //end of for-loop    
     
    });
    Hey James,
    That worked great ! You rock! Thanks a lot.
    But why was the error in the my just immediate last post happening ?
    Why was only the 1st block of code getting executed and not the others ?

    Thanks again
    Rohil

  7. #7
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think there was an error originally because when you gave the hover event a function, it only ran that function upon the element being hovered, and so any variables defined through the loop would not work - i.e. the hover function does not run on each iteration of the loop. - I'm not totally sure but I think that's what it is..

    Also there seems to be a problem with using the hover method for this type of thing. Using bind('mouseover') or just mouseover(function(){}) both seem to work fine...

    Anyway... I'm glad it's working...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  8. #8
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bad news James. The above code doesnt work in IE. Both ve. 6 or 7

  9. #9
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    weird... How about this? (below)

    Code JavaScript:
    $(document).ready(function() {
       for(var a=1;a<=10;a++) {
          $("#left .a"+a).bind('mouseover',function () {            
             $(".gallerycontainer img."+this.className).fadeTo("slow", 0.33,function() {
                $(".gallerycontainer img."+this.className).fadeTo("slow", 1.00);
             });
          });
       } //end of for-loop   
    });
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •