mirror of
https://github.com/YunoHost-Apps/limesurvey_ynh.git
synced 2024-09-03 19:36:32 +02:00
163 lines
5.4 KiB
HTML
163 lines
5.4 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
|
|
<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">
|
||
|
|
|
||
|
|
if( $.browser.msie && $.browser.version < 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>
|