Showing an element by id
The following example demonstrates how you make a hidden <div> element
with an id appear when
someone clicks a button on your page:
1.
Create a Web page
containing the following code:
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML
1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My Test
Page</title>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript">
$(':submit').click(function () {
$('#showme').show();
});
</script>
</head>
<body>
<div id="showme" style="display: none">
This will appear.</div>
<input value="Show" type="submit"></body>
</html>
This code contains a <div> element with an id attribute named
showme. This <div> element is set as hidden using the CSS
style attribute
set to display:none.
$(':submit').click(function () {
$('#showme').show();
});
The code says, “When the button is clicked, show the
element with the
showme id.” This code uses the :submit selector and the click event
to set up the action. The show function, with an id selector, displays the
element with the showme id.
2.
Save the file, and then view it in your browser.
Showing an element with animation
When you show a hidden element, it disappears instantly.
As with the hide
function, the show function allows you to make it appear as though the element
is fading in. To add fade in animations when elements are
displayed,
follow these steps:
1. Create a Web
page containing the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN"
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My Test
Page</title>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript">
$(':submit').click(function () {
$('#slowshow').show(2000);
$('#fastshow').show(500);
});
</script>
</head>
<body>
<div id="slowshow" style="display: none">
This will be shown slowly.</div>
<div id="fastshow" style="display: none">
This will be shown quickly.</div>
<input value="Show" type="submit">
</body>
</html>
This code contains two <div> elements and a button.
$(':submit').click(function () {
$('#slowshow').show(2000);
$('#fastshow').show(500);
});
The code says, “When the button is clicked, show the
element with the
slowshow id at a speed of 2000 milliseconds. Show the element with
the fastshow id at a speed of 500 milliseconds.” This
code uses the
:submit selector and the click event to set up the action.
2. Save the file,
and then view it in your browser.
Refer from Jquery books and google
Thanks..
Refer from Jquery books and google
Thanks..
No comments:
Post a Comment