Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2004
    Posts
    95
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Adding JQuery functions at runtime

    Hi,

    I am new to jquery and am having some troubles. Please excuse my poor coding. I have some images with text hidden behind and I need to hide the image and show the text on mouseover, and reverse on mouseout. I have a number of divs created dynamically, they have ids like preview0, preview1, preview2, previewImage0, previewImage1, previewImage2, previewHidden0, previewHidden1, previewHidden2 etc

    I have this code which works:-
    Code:
    $(document).ready(function(){
    	$("#preview" + 0).bind('mouseenter', function() {
    		$("#previewImage" + 0).animate({opacity:0},500);	
    		$("#previewHidden" + 0).animate({opacity:1},500);	
    	}).bind('mouseleave', function() {
    		$("#previewImage" + 0).animate({opacity:1},500);	
    		$("#previewHidden" + 0).animate({opacity:0},500);	
    	});  	
    	$("#preview" + 1).bind('mouseenter', function() {
    		$("#previewImage" + 1).animate({opacity:0},500);	
    		$("#previewHidden" + 1).animate({opacity:1},500);	
    	}).bind('mouseleave', function() {
    		$("#previewImage" + 1).animate({opacity:1},500);	
    		$("#previewHidden" + 1).animate({opacity:0},500);	
    	});  	
    	$("#preview" + 2).bind('mouseenter', function() {
    		$("#previewImage" + 2).animate({opacity:0},500);	
    		$("#previewHidden" + 2).animate({opacity:1},500);	
    	}).bind('mouseleave', function() {
    		$("#previewImage" + 2).animate({opacity:1},500);	
    		$("#previewHidden" + 2).animate({opacity:0},500);	
    	});  	
    }
    But I need to get this working in a loop for a varying number or elements. I have tried this but it doesn't work properly, I only get one element with working functions:-
    Code:
     	var numPreviews = $("#numPreviews").val();
     	for(var i = 0; i < numPreviews; i++) {
    		$("#preview" + i).bind('mouseenter', function() {
    			$("#previewImage" + i).animate({opacity:0},500);	
    			$("#previewHidden" + i).animate({opacity:1},500);	
    		}).bind('mouseleave', function() {
    			$("#previewImage" + i).animate({opacity:1},500);	
    			$("#previewHidden" + i).animate({opacity:0},500);	
    		});  	
    	}
    The loop does run the correct number of times. Can anyone help me get this working? Thanks.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,727
    Thanks
    6
    Thanked 1,015 Times in 988 Posts
    Is there a reason why you have IDs on the elements and not classes? They are much better suited for repeating code.

    But anyway, to give you a proper answer it would help to see the HTML (and I mean the entire HTML document).

  • #3
    New Coder
    Join Date
    Mar 2004
    Posts
    95
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Is there a reason why you have IDs on the elements and not classes? They are much better suited for repeating code.

    But anyway, to give you a proper answer it would help to see the HTML (and I mean the entire HTML document).
    Thanks for the response. I am using ID's as I need to address individual elements when I mouseover, rather than all elements in the class. If there is a better way to do any of this, I am in need of suggestions.

    The page I am testing out is here http://www.glenparkerphotography.com/test.html

    I have the script using the working code I posted so you can see the first 3 photos will fade out and in with mouseover/mouseout. If I change it to the loop code, none of them seem to work.

    Appreciate any help you can offer.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,727
    Thanks
    6
    Thanked 1,015 Times in 988 Posts
    You make it more complicated than it needs to be. Firstly, remove that useless hidden input. Then, jQuery has the very useful each() function which serves as “for” loop replacement. Also, fadeIn() and fadeOut() are much simpler than the opacity animation you’re doing. And then also, according to the jQuery documentation, using hover() is the same as using mouseenter() and mouseleave() just shorter so why not use that? Try this:
    Code:
    var speed = 500;
    $('.preview').each(function() {
      $(this).hover(
        function() {
          $(this).children('.previewImage').fadeOut(speed).siblings('.previewHidden').fadeIn(speed);
        },
        function() {
          $(this).children('.previewImage').fadeIn(speed).siblings('.previewHidden').fadeOut(speed);
        }
      );
    });
    Edit:
    It just occurred to me: You can make it even simpler by using fadeToggle() and passing this as only handler to the hover() function. Something like:
    Code:
    $(this).hover(function() {
          $(this).children().fadeToggle(500);
    });
    Of course, it requires the previewHidden to be display: none; initially.
    Last edited by VIPStephan; 01-12-2012 at 11:15 AM.

  • Users who have thanked VIPStephan for this post:

    Taipan (01-12-2012)

  • #5
    New Coder
    Join Date
    Mar 2004
    Posts
    95
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thank you so much for your help. I knew I was doing it all wrong, but had no idea how to get it right. Much appreciated.


  •  

    Posting Permissions

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