SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Bucks County, Pennsylvania, USA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery: slideDown Not Working

    I am just starting out teaching myself jQuery (bought the ninja book yesterday) and I'd appreciate any help with this script I'm trying to write...

    I want to have a form asking the user for a number and then slide in a message underneath the form based on the number they've entered.

    Here is my lame failure of an attempt:

    Code HTML4Strict:
    <div id="kyss">
    	<!-- show if javascript is disabled -->
    	<p id="kyss-ph-msg">Please enable JavaScript for this page to work properly.</p>
    </div>

    Code JavaScript:
    $(document).ready(function() {
    	$('#kyss-ph-msg').hide();
     
    	$('<input type="button" id="kyss-ph-submit" value="go" />').prependTo('#kyss');
    	$('<input type="text" id="kyss-ph-value" />').prependTo('#kyss');
     
    	$('#kyss-ph-submit').click(function() {			
    		ph = Math.abs(parseFloat($('#kyss-ph-value').val()));
    		ph = ph.toFixed(2);
     
    		if (!isNaN(ph)) {
    			if(ph < 6.3) {
    				$('#kyss-ph-msg').replaceWith('<p id="kyss-ph-msg">Less than 6.3</p>');
    			}
    			if(ph >= 6.3 && ph < 7) {
    				$('#kyss-ph-msg').replaceWith('<p id="kyss-ph-msg">Greater than or equal to 6.3 and less than 7</p>');
    			}
    			if(ph >= 7) {
    				$('#kyss-ph-msg').replaceWith('<p id="kyss-ph-msg">Greater than or equal to 7</p>');
    			}
    		}
    		$('#kyss-ph-msg').slideDown('slow');
    	});
     
    });

    So, the script works, but it doesn't animate the message. I don't know why. Any ideas?

    Thanks for your help.

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,897
    Mentioned
    138 Post(s)
    Tagged
    2 Thread(s)
    You're replacing #kyss-ph-msg with a new one. The new one is visible by default, so slideDown() doesn't do anything.

    Instead of
    Code javascript:
    $('#kyss-ph-msg').replaceWith('<p id="kyss-ph-msg">Greater than or equal to 7</p>');

    you should do:
    Code javascript:
    $('#kyss-ph-msg').text('Greater than or equal to 7');

    (and of course also do this for all the others.)
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Bucks County, Pennsylvania, USA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked nicely. Thank you very much.


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
  •