js | code jquery iframe auto height
Lang thang trên những trang nước ngoài, mình view source và sàng lọc thì mót được một hiệu ứng hay. Xin cjia sẽ đến các bạn. Tại đây chúng ta sẽ tham khảo 2 kỹ thuật. Một là jquery iframe auto height, hai là click menu dropdown.
<meta charset=utf-8>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.js'></script>
<script>
jQuery(document).ready(function() {
var $wheight = jQuery(window).height();
var $fheight = jQuery(window).width() <= 767 ? $wheight : $wheight - 59;
jQuery('#iframe').height($fheight);
jQuery("#field").click(function(){
jQuery("#dropdown").slideToggle("slow");
jQuery(this).toggleClass("active"); return false;
});
var $thumb = jQuery('a.themeitem');
$thumb.mouseover(function(e) {
jQuery("body").append("<img class='gallery-hover' src='"+jQuery(this).attr("rel")+"' alt='' />");
jQuery("img.gallery-hover").css({display:"none", visibility:"visible"}).fadeIn(350);
}).mousemove(function(e) {
jQuery("img.gallery-hover").css({left:e.pageX+20, top:e.pageY-50});
}).mouseout(function() {
jQuery("img.gallery-hover").remove();
});
});
jQuery(window).resize(function() {
var $wheight = jQuery(window).height();
var $fheight = jQuery(window).width() <= 767 ? $wheight : $wheight - 59;
jQuery('#iframe').height($fheight);
});
</script>
<style>
@media only screen and ( max-width: 767px ) {
#frame { display: none; }
#frame #inside { width: 767px; }
}
</style>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; font-size: 13px; }
/******/
#iframe { margin: 0; padding: 0; float: left; }
#frame { width: 100%; height: 30px; float: left; margin: 0; padding: 0; background:#D4D0C8; }
#switcher { float: right; margin-right: 40px; position: relative; }
#field { width: 255px; background:#E8E8FF; cursor: pointer; color: #424242; font-family: Georgia; font-style: italic; padding: 7px;}
#dropdown { display: none; position: absolute;width: 275px; height: 252px; overflow: hidden; background-color: #e8eff7; -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.3); border: 1px solid #becddf; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;}
#dropdowninside {-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; border-top: 1px solid #fff; border-left: 1px solid #fff; width: 241px; height: 252px; overflow: scroll; }
#dropdowninside ul { list-style: none; display: block; float: left; }
#dropdowninside ul li { list-style: none; display: block; float: left; border-top: 1px solid #f8fafc; }
#dropdowninside ul li a { padding: 9px; /*width: 215px;*/ display: block; float: left; font-family: Georgia; color: #8fa0b3; text-shadow: 1px 1px 0px #fff; font-style: italic; border-bottom: 1px solid #c9d6e7; }
#dropdowninside ul li a:hover { background-color: #dde7f1; color: #798594; }
.gallery-hover { z-index: 40; position: absolute; background: #fff; padding: 8px; -webkit-border-radius: 8px; -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.25); -moz-border-radius: 8px; -moz-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.25); border: none; visibility: hidden; left:-9999px; top:0px;}
body { overflow: hidden; }
#iframe body { overflow: auto; }
</style>
<body>
<div id="frame">
<div id="switcher">
<div id="field">Chọn xem hình ↵ </div>
<div id="dropdown">
<div id="dropdowninside">
<ul>
<li><a class="themeitem" rel="https://lh5.googleusercontent.com/-Ext6sWxNkCs/Ud5u6T59uHI/AAAAAAAAAow/VH4JIOStJEE/s100/Japan_Digital_Landscape__03.jpg" href="https://lh5.googleusercontent.com/-Ext6sWxNkCs/Ud5u6T59uHI/AAAAAAAAAow/VH4JIOStJEE/s0/Japan_Digital_Landscape__03.jpg" target="iframe" > img 01</a></li>
<li><a class="themeitem" rel="https://lh3.googleusercontent.com/-d0HIR9eXwKo/Ud5vuw05OSI/AAAAAAAAApA/0uOJ7o8Og-Q/s100/Japan_Digital_Landscape__04.jpg" href="https://lh3.googleusercontent.com/-d0HIR9eXwKo/Ud5vuw05OSI/AAAAAAAAApA/0uOJ7o8Og-Q/s0/Japan_Digital_Landscape__04.jpg" target="iframe" >img 02</a></li>
<li><a class="themeitem" rel="https://lh3.googleusercontent.com/-ctCo6iR5isE/Ud5vaTX7TiI/AAAAAAAAAo4/op7NoNQaGEY/s100/Japan_Digital_Landscape__05.jpg" href="https://lh3.googleusercontent.com/-ctCo6iR5isE/Ud5vaTX7TiI/AAAAAAAAAo4/op7NoNQaGEY/s0/Japan_Digital_Landscape__05.jpg" target="iframe" >img 03</a></li>
<li><a class="themeitem" rel="https://lh4.googleusercontent.com/-LWusB7oUdCo/Ud5wdK4NlLI/AAAAAAAAApQ/5sewW5zei58/s100/Japan_Digital_Landscape__07.jpg" href="https://lh4.googleusercontent.com/-LWusB7oUdCo/Ud5wdK4NlLI/AAAAAAAAApQ/5sewW5zei58/s0/Japan_Digital_Landscape__07.jpg" target="iframe" >img 04</a></li>
<li><a class="themeitem" rel="https://lh5.googleusercontent.com/-q9MiQIy8TjQ/Ud5wys_UV8I/AAAAAAAAApY/xExg6AYr9IE/s100/Japan_Digital_Landscape__08.jpg" href="https://lh5.googleusercontent.com/-q9MiQIy8TjQ/Ud5wys_UV8I/AAAAAAAAApY/xExg6AYr9IE/s0/Japan_Digital_Landscape__08.jpg" target="iframe" >img 05</a></li>
<li><a class="themeitem" rel="https://lh5.googleusercontent.com/-X5q2CDvY2Wo/Ud5xqHIu-pI/AAAAAAAAApo/VL2Lc4HkudA/s100/Japan_Digital_Landscape__10.jpg" href="https://lh5.googleusercontent.com/-_sdS07m5fbg/Ud5xXmy8dgI/AAAAAAAAApg/-oLjte0BD7Q/s0/Japan_Digital_Landscape__09.jpg" target="iframe" >img 06</a></li>
<li><a class="themeitem" rel="https://lh6.googleusercontent.com/-qjKgiAB5GpA/Ud5x1fpWtmI/AAAAAAAAApw/OqmVevGIFWs/s100/Japan_Digital_Landscape__11.jpg" href="https://lh6.googleusercontent.com/-qjKgiAB5GpA/Ud5x1fpWtmI/AAAAAAAAApw/OqmVevGIFWs/s0/Japan_Digital_Landscape__11.jpg" target="iframe" >img 07</a></li>
<li><a class="themeitem" rel="https://lh5.googleusercontent.com/-0prMuRylUrg/Ud5zIIN60XI/AAAAAAAAAqQ/CWUDfbYQo0I/s100/Japan_Digital_Landscape__15.jpg" href="https://lh5.googleusercontent.com/-0prMuRylUrg/Ud5zIIN60XI/AAAAAAAAAqQ/CWUDfbYQo0I/s0/Japan_Digital_Landscape__15.jpg" target="iframe" >img 08</a></li>
</ul>
</div>
</div>
</div>
</div>
<iframe id="iframe" name="iframe" src="http://lh5.googleusercontent.com/-Ext6sWxNkCs/Ud5u6T59uHI/AAAAAAAAAow/VH4JIOStJEE/s0/Japan_Digital_Landscape__02.jpg" width="100%" scrolling="auto" frameborder="0" style="visbility:hidden"></iframe>
</body>
...
Chủ đề: l. Library l.Window Frames