jquery.actual
Version:
Older version of jQuery has trouble finding the width/height of invisible DOM elements. With element or its parent element has css property 'display' set to 'none'. `$('.hidden').width();` will return 0 instead of the actual width; This plugin simply fix
166 lines (149 loc) • 5.77 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Actual Plugin Demo - with css3pie</title>
<style type="text/css">
#wrap{
width: 700px;
margin: 0 auto 50px;
}
#info{
text-align: center;
margin: 50px 0 0;
}
.block{
margin: 0 0 20px;
}
.nav{
line-height: 20px;
font-size: 18px;
list-style: none;
height: 50px;
margin: 0;
padding: 0;
border: 0;
}
.nav li{
float: left;
display: inline;
margin: 0;
padding: 0;
border: 0;
}
.nav a{
-pie-watch-ancestors: 1;
-webkit-background-clip: padding-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-khtml-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
-pie-lazy-init: true;
behavior: url(PIE.htc);
padding: 8px;
margin: 0 8px 0 0;
display: block;
position: relative;
background: #aaaaaa;
color: white;
text-decoration: none;
font-family: 'Georgia';
font-weight: bolder;
}
.nav a:hover {
background: #777777;
color: white;
}
</style>
</head>
<body>
<div id="wrap">
<h1>
jQuery Actual Plugin Demo - with css3pie
</h1>
<p>
<a title="Go to css3pie home page" href="http://css3pie.com/">css3pie</a> makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features. If you haven't heard of it, you should give it a try now.
</p>
<p>How ever css3pie breaks your layout in some cases. For example if you have a navigation bar with float elements apply css3 border-radius property. Your layout will break in ie6. Because what css3pie does is it renders a image with rounded corners and append it 'inside' the element and has width set to 100%.</p>
<p>In ie6 if you have a image width set to 100% inside float elements with no specific width. Those float elements will have 100% of their parent width instead of the content width</p>
<p>In this case we have to give every css3pie applied elements a fix width. Please see the source code to tell the difference.</p>
<div id="origin" class="block">
<h2>Origin</h2>
<p>This is going to break with ie6.</p>
<ul class="nav">
<li><a href="#about">About</a></li>
<li><a href="#works">Works</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#blog">Blog</a></li>
</ul>
</div>
<div id="with-jquery-width" class="block">
<h2>With jQuery width</h2>
<p>This is going to break with ie6 as well.</p>
<pre>
$( '#with-jquery-width' ).find( 'a' ).each( function(){
var $this = $( this );
$this.width( $this.width());
});
</pre>
<ul class="nav">
<li><a href="#about">About</a></li>
<li><a href="#works">Works</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#blog">Blog</a></li>
</ul>
</div>
<div id="with-jquery-actual" class="block">
<h2>With jQuery Actual Plugin</h2>
<p>This works in all browsers.</p>
<pre>
$( '#with-jquery-actual' ).find( 'a' ).each( function(){
var $this = $( this );
$this.width( $this.actual( 'width', { clone : true }));
});
</pre>
<ul class="nav">
<li><a href="#about">About</a></li>
<li><a href="#works">Works</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#blog">Blog</a></li>
</ul>
</div>
<h3 id="info">
Demo provides by <a href="http://dreamerslab.com/">DreamersLab</a>
</h3>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.actual.min.js"></script>
<script type="text/javascript" charset="utf-8">
// Should be equivalent to: if( $.browser.msie && $.browser.version < 7 ){
if( navigator.appName === "Microsoft Internet Explorer" &&
parseFloat(navigator.userAgent.replace(new RegExp(".*MSIE\\D*(\\d+.\\d+).*"), "$1")) < 7
){
$( function(){
$( '#with-jquery-width' ).find( 'a' ).each( function(){
var $this = $( this );
$this.width( $this.width());
});
$( '#with-jquery-actual' ).find( 'a' ).each( function(){
var $this = $( this );
$this.width( $this.actual( 'width', { clone : true }));
});
});
}
</script>
<script type="text/javascript" charset="utf-8">
// google analytics
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20960410-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>