• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 487
  • Last Modified:

jQuery: slideDown() is quirky

I want options to slide down when a checkbox is checked, and to slide back up when the checkbox is unchecked.

My code behaves strangely when I use jQuery 1.4.4.

My code behaves less strangely when I use jQuery 1.4.2 but it is acts weird with both versions.  If you test my code you will see what I mean.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Demo</title>

<style type="text/css">

div.url {
background: #eee;
padding: 10px;
margin: 10px;
}

div.url span {
display: none;
margin: 0;
padding: 0;
background: #ffaaaa;
}


.removeUrl {
text-align: right;
color: #fa0000;
float: right;
cursor: pointer;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

</head>
<body>

<h2>Step 1: Add one or more websites to be monitored</h2>

<div id="urls">
 <div class="url" >
  <p>
  <label for="Url1">Web address to monitor:</label>
  <input type="text" id="Url1" name="Url1" />
  </p>

  <p>
  <label for="checkUrl1">Check every:</label>
   <select id="checkUrl1" name="checkUrl1">
    <option value="1">Minute</option>
    <option value="5">Five Minutes</option>
    <option value="10">Ten Minutes</option>
    <option value="15">Fifteen Minutes</option>
    <option value="30">Half Hour</option>
    <option value="1">Hour</option>
    <option value="120">Two Hours</option>
   </select>
  </p>

  <p>
  <input class="selectMe" type="checkbox" id="emailNotificationUrl1" name="emailNotificationUrl1" value="1" />
  <label for="emailNotificationUrl1">Receive email notifications</label>
  <span>

<br />

   <input type="checkbox" id="emailNotificationDownUrl1" name="emailNotificationDownUrl1" value="1" />
   <label for="emailNotificationDownUrl1">Receive an email notification when the site goes down</label>

<br />

   <input type="checkbox" id="emailNotificationChangesUrl1" name="emailNotificationChangesUrl1" value="1" />
   <label for="emailNotificationChangesUrl1">Receive an email notification if the site changes</label>

<br />

   <input type="checkbox" id="emailNotificationSpecificUrl1" name="emailNotificationSpecificUrl1" value="1" />
   <label for="emailNotificationSpecificUrl1">Receive an email notification if the site does not contain the following text or code:</label>
   <input type="text" id="emailNotificationSpecificAddressUrl1" name="emailNotificationSpecificAddressUrl1" />

<br />

  </span>
  </p>

  <p>
  <input class="selectMe" type="checkbox" id="phoneNotificationUrl1" name="phoneNotificationUrl1" value="1" />
  <label for="phoneNotificationUrl1">Receive phone notifications</label>
  <span>
   <em>
    <input type="checkbox" id="phoneNotificationDownUrl1" name="phoneNotificationDownUrl1" value="1" />
    <label for="phoneNotificationDownUrl1">Receive a phone call when the site goes down</label>
   </em>
   <em>
    <input type="checkbox" id="phoneNotificationChangesUrl1" name="phoneNotificationChangesUrl1" value="1" />
    <label for="phoneNotificationChangesUrl1">Receive a phone call if the site changes</label>
   </em>
   <em>
    <input type="checkbox" id="phoneNotificationSpecificUrl1" name="phoneNotificationSpecificUrl1" value="1" />
    <label for="phoneNotificationSpecificUrl1">Receive a phone call if the site does not contain the following text or code:</label>
   <input type="text" id="phoneNotificationSpecificAddressUrl1" name="phoneNotificationSpecificAddressUrl1" />
   </em>
  </span>
  </p>

  <p>
  <input class="selectMe" type="checkbox" id="smsNotificationUrl1" name="smsNotificationUrl1" value="1" />
  <label for="smsNotificationUrl1">Receive SMS notifications</label>
  <br />
  <span>
   <em>
    <input type="checkbox" id="smsNotificationDownUrl1" name="smsNotificationDownUrl1" value="1" />
    <label for="smsNotificationDownUrl1">Receive an SMS notification when the site goes down</label>
   </em>
   <em>
    <input type="checkbox" id="smsNotificationChangesUrl1" name="smsNotificationChangesUrl1" value="1" />
    <label for="smsNotificationChangesUrl1">Receive an SMS notification if the site changes</label>
   </em>
   <em>
    <input type="checkbox" id="smsNotificationSpecificUrl1" name="smsNotificationSpecificUrl1" value="1" />
    <label for="smsNotificationSpecificUrl1">Receive an SMS notification if the site does not contain the following text or code:</label>
   <input type="text" id="smsNotificationSpecificAddressUrl1" name="smsNotificationSpecificAddressUrl1" />
   </em>
  </span>
  </p>

 </div>
</div>

<p>
 <input id="addUrl" type="button" value="Add an additional web address to monitor" />
</p>

<p class="later">You may add additional web addresses to your account later.</p>

<div>
<input id="submit" class="submit" type="submit" value="Next Step" />
</div>

<script type="text/javascript">
/* <![CDATA[ */

var ci=0;

$(document).ready(function() {
	$('#addUrl').click(function() {
	   $('#urls').append('<div class="url"><div class="removeUrl">x</div>'+ String($('.url').first().html()).replace(/Url1/g, "Url"+(ci++)) + '</div>');
	   if($('div.url').size()>5) {
	    $('#addUrl').css('display','none');
	    $('.later').css('color','#fa0000')
	   }
	selectMe();
	removeMe(this);
	});
	$('.selectMe').attr('checked', false);
	selectMe();
});

function removeMe (t) {
	$('.removeUrl').unbind('click');
	$('.removeUrl').click(function() {
	    $(this).parent().remove();
	    $('#addUrl').css('display','block');
	    $('.later').css('color','#000000')
	});
}

function selectMe () {
	$('.selectMe').unbind('click');
	$('.selectMe').click(function() {
	 if(  $(this).attr('checked')) $(this).siblings("span").slideDown(2000);
	 else $(this).siblings("span").slideUp();
	});
}

/* ]]> */
</script>

</body>
</html>

Open in new window

0
hankknight
Asked:
hankknight
1 Solution
 
jrm213jrm213Commented:
hi,

this is a bug with jquery 1.4 (or at least a change in functionality from previous versions). try the attached code. I was not sure exactly how you wanted/exptected it to work though.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Demo</title>

<style type="text/css">

div.url {
background: #eee;
padding: 10px;
margin: 10px;
}

div.url span {
display: block;
margin: 0;
padding: 0;
background: #ffaaaa;
}


.removeUrl {
text-align: right;
color: #fa0000;
float: right;
cursor: pointer;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

</head>
<body>

<h2>Step 1: Add one or more websites to be monitored</h2>

<div id="urls">
 <div class="url" >
  <p>
  <label for="Url1">Web address to monitor:</label>
  <input type="text" id="Url1" name="Url1" />
  </p>

  <p>
  <label for="checkUrl1">Check every:</label>
   <select id="checkUrl1" name="checkUrl1">
    <option value="1">Minute</option>
    <option value="5">Five Minutes</option>
    <option value="10">Ten Minutes</option>
    <option value="15">Fifteen Minutes</option>
    <option value="30">Half Hour</option>
    <option value="1">Hour</option>
    <option value="120">Two Hours</option>
   </select>
  </p>

  <p>
  <input class="selectMe" type="checkbox" id="emailNotificationUrl1" name="emailNotificationUrl1" value="1" />
  <label for="emailNotificationUrl1">Receive email notifications</label>
  <span>

<br />

   <input type="checkbox" id="emailNotificationDownUrl1" name="emailNotificationDownUrl1" value="1" />
   <label for="emailNotificationDownUrl1">Receive an email notification when the site goes down</label>

<br />

   <input type="checkbox" id="emailNotificationChangesUrl1" name="emailNotificationChangesUrl1" value="1" />
   <label for="emailNotificationChangesUrl1">Receive an email notification if the site changes</label>

<br />

   <input type="checkbox" id="emailNotificationSpecificUrl1" name="emailNotificationSpecificUrl1" value="1" />
   <label for="emailNotificationSpecificUrl1">Receive an email notification if the site does not contain the following text or code:</label>
   <input type="text" id="emailNotificationSpecificAddressUrl1" name="emailNotificationSpecificAddressUrl1" />

<br />

  </span>
  </p>

  <p>
  <input class="selectMe" type="checkbox" id="phoneNotificationUrl1" name="phoneNotificationUrl1" value="1" />
  <label for="phoneNotificationUrl1">Receive phone notifications</label>
  <span>
   <em>
    <input type="checkbox" id="phoneNotificationDownUrl1" name="phoneNotificationDownUrl1" value="1" />
    <label for="phoneNotificationDownUrl1">Receive a phone call when the site goes down</label>
   </em>
   <em>
    <input type="checkbox" id="phoneNotificationChangesUrl1" name="phoneNotificationChangesUrl1" value="1" />
    <label for="phoneNotificationChangesUrl1">Receive a phone call if the site changes</label>
   </em>
   <em>
    <input type="checkbox" id="phoneNotificationSpecificUrl1" name="phoneNotificationSpecificUrl1" value="1" />
    <label for="phoneNotificationSpecificUrl1">Receive a phone call if the site does not contain the following text or code:</label>
   <input type="text" id="phoneNotificationSpecificAddressUrl1" name="phoneNotificationSpecificAddressUrl1" />
   </em>
  </span>
  </p>

  <p>
  <input class="selectMe" type="checkbox" id="smsNotificationUrl1" name="smsNotificationUrl1" value="1" />
  <label for="smsNotificationUrl1">Receive SMS notifications</label>
  <br />
  <span>
   <em>
    <input type="checkbox" id="smsNotificationDownUrl1" name="smsNotificationDownUrl1" value="1" />
    <label for="smsNotificationDownUrl1">Receive an SMS notification when the site goes down</label>
   </em>
   <em>
    <input type="checkbox" id="smsNotificationChangesUrl1" name="smsNotificationChangesUrl1" value="1" />
    <label for="smsNotificationChangesUrl1">Receive an SMS notification if the site changes</label>
   </em>
   <em>
    <input type="checkbox" id="smsNotificationSpecificUrl1" name="smsNotificationSpecificUrl1" value="1" />
    <label for="smsNotificationSpecificUrl1">Receive an SMS notification if the site does not contain the following text or code:</label>
   <input type="text" id="smsNotificationSpecificAddressUrl1" name="smsNotificationSpecificAddressUrl1" />
   </em>
  </span>
  </p>

 </div>
</div>

<p>
 <input id="addUrl" type="button" value="Add an additional web address to monitor" />
</p>

<p class="later">You may add additional web addresses to your account later.</p>

<div>
<input id="submit" class="submit" type="submit" value="Next Step" />
</div>

<script type="text/javascript">
/* <![CDATA[ */

var ci=0;

$(document).ready(function() {
	$('#addUrl').click(function() {
	   $('#urls').append('<div class="url"><div class="removeUrl">x</div>'+ String($('.url').first().html()).replace(/Url1/g, "Url"+(ci++)) + '</div>');
	   if($('div.url').size()>5) {
	    $('#addUrl').css('display','none');
	    $('.later').css('color','#fa0000')
	   }
	selectMe();
	removeMe(this);
	});
	$('.selectMe').attr('checked', false);
	$('.selectMe').siblings("span").hide();
	selectMe();
});

function removeMe (t) {
	$('.removeUrl').unbind('click');
	$('.removeUrl').click(function() {
	    $(this).parent().remove();
	    $('#addUrl').css('display','block');
	    $('.later').css('color','#000000')
	});
}

function selectMe () {
	$('.selectMe').unbind('click');
	$('.selectMe').click(function() {
	 if(  $(this).attr('checked')) $(this).siblings("span").hide().delay(100).slideDown(2000);
	 else $(this).siblings("span").slideUp();
	});
}

/* ]]> */
</script>

</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now