Side navigation
Ticket #5541: example-1.html
File example-1.html, 1.6 KB (added by Abro, November 21, 2009 06:19PM UTC)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>jQuery Bug Example</title>
<style type="text/css">
*
{
margin : 0;
padding : 0;
}
/*
* here's the problem:
* if we set this to [content:none;] everything is fine,
* but then we could just leave it out ;O)
*/
:before,:after
{ content : ''; }
input
{ border : 5px solid #f00; }
.hide-css
{ display : none; }
/*this is just foo*/
body
{ text-align : center; }
p
{ margin-bottom : 1em; }
.box
{
border : 1px solid #ff8;
width : 200px;
height : 20px;
margin : 0 auto 20px auto;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($)
{
$('.hide-js').hide();
});
</script>
</head>
<body>
<p>You should see a red dot in the yellow box @ Opera 9.63 / Win</p>
<p>Via CSS "display:none;" : </p>
<div class="box"><input class="hide-css" type="password" value="" /></div>
<p>Via jQuery "$el.hide();" : </p>
<div class="box"><input class="hide-js" type="password" value="" /></div>
</body>
</html>
Download in other formats:
Original Format
File example-1.html, 1.6 KB (added by Abro, November 21, 2009 06:19PM UTC)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>jQuery Bug Example</title>
<style type="text/css">
*
{
margin : 0;
padding : 0;
}
/*
* here's the problem:
* if we set this to [content:none;] everything is fine,
* but then we could just leave it out ;O)
*/
:before,:after
{ content : ''; }
input
{ border : 5px solid #f00; }
.hide-css
{ display : none; }
/*this is just foo*/
body
{ text-align : center; }
p
{ margin-bottom : 1em; }
.box
{
border : 1px solid #ff8;
width : 200px;
height : 20px;
margin : 0 auto 20px auto;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($)
{
$('.hide-js').hide();
});
</script>
</head>
<body>
<p>You should see a red dot in the yellow box @ Opera 9.63 / Win</p>
<p>Via CSS "display:none;" : </p>
<div class="box"><input class="hide-css" type="password" value="" /></div>
<p>Via jQuery "$el.hide();" : </p>
<div class="box"><input class="hide-js" type="password" value="" /></div>
</body>
</html>