This article reveals about the some Jquery function usage and the bug present in it, and how to resolve the bug and get the solution what we need ?
I have decide to do a some Test in Jquery by a sample having a TextArea and a checkbox. when i scroll the textbox from the top to the bottom , checkbox should be enabled and checked, It the user scrolls upwards then automatically checkbox should be disabled and unchecked. To do this we are code it in Scroll function of text area like below
HTML:
Now the Bug is when you scroll down and reaches the last position of scroll checkbox is checked and when you move up the checkbox is disabled and unchecked . But when you scroll again second time to the last position of scroll the checkbox is not enabled. Because attr function is not working in JQuery version above 1.9 but working in below version it can be resolve by replace with prop functiopn
Change in the function attr to prop makes the functionality to work correctly.This bug may be fixed in the future versions
I hope this article will make you to aware of using correct functions in JQuery.
I have decide to do a some Test in Jquery by a sample having a TextArea and a checkbox. when i scroll the textbox from the top to the bottom , checkbox should be enabled and checked, It the user scrolls upwards then automatically checkbox should be disabled and unchecked. To do this we are code it in Scroll function of text area like below
HTML:
<html>
<head>
<title></title>
<link rel="Stylesheet" href="StyleSheet1.css" />
<script type="text/javascript"
src="jquery-1.9.1.intellisense.js">
</script>
<script type="text/javascript"
src="jquery-1.9.1.js">
</script>
<script type="text/javascript"
src="jquery-1.9.1.min.js">
</script>
<script type="text/javascript" >
$(document).ready(function () {
$('#agree').attr('disabled',
true);
$('#agree').attr('checked',
false);
var scrollheight = $('#area')[0].scrollHeight;
var innerheight = $('#area').innerHeight();
$('#area').scroll(function
() {
var scrollposi = $(this).scrollTop();
var remaim = scrollheight - innerheight;
$('#feed').text(Math.ceil(remaim));
// alert(scrollposi);
if (remaim <= scrollposi) {
$('#agree').attr('disabled', false);
}
else {
$('#agree').attr('disabled', true);
}
});
});
</script>
</head>
<body align="center">
<div id="feed">dd</div>
<textarea id="area" cols="50" rows="30">
<!-- <textarea
id="terms" rows="20" cols="50"> -->
<p>YouTube was founded by Chad Hurley, Steve Chen, and Jawed
Karim, who were all early employees of PayPal.[7] Hurley had studied design at
Indiana University of Pennsylvania, and Chen and Karim studied computer science
together at the University of Illinois at Urbana-Champaign.[8]
According to a story that has often been repeated in
the media, Hurley and Chen developed the idea for YouTube during the early
months of 2005, after they had experienced difficulty sharing videos that had
been shot at a dinner party at Chen's apartment in San Francisco. Karim did not
attend the party and denied that it had occurred, but Chen commented that the
idea that YouTube was founded after a dinner party "was probably very
strengthened by marketing ideas around creating a story that was very
digestible".[9]
Karim said that the inspiration for YouTube came
from Janet Jackson's role in the 2004 Super Bowl incident, when her breast was
exposed during her performance, and from the 2004 Indian Ocean tsunami. Karim
could not easily find video clips of either event online, which led to the idea
of a video sharing site.[10] Hurley and Chen said that the original idea for
YouTube was a video version of an online dating service, and had been
influenced by the website Hot or Not.[11][12]
</p>
</textarea>
<p><input type="checkbox" id="agree"
/> : Agree</p>
</body>
</html>
Now the Bug is when you scroll down and reaches the last position of scroll checkbox is checked and when you move up the checkbox is disabled and unchecked . But when you scroll again second time to the last position of scroll the checkbox is not enabled. Because attr function is not working in JQuery version above 1.9 but working in below version it can be resolve by replace with prop functiopn
$('#area').scroll(function () {
var scrollposi = $(this).scrollTop();
var remaim = scrollheight - innerheight;
$('#feed').text(Math.ceil(remaim));
// alert(scrollposi);
if (remaim <= scrollposi) {
$('#agree').prop('checked', true);
}
else {
$('#agree').prop('checked', false);
}
});
Change in the function attr to prop makes the functionality to work correctly.This bug may be fixed in the future versions
I hope this article will make you to aware of using correct functions in JQuery.
No comments:
Post a Comment