$(document).ready(function(){ $(‘a[rel=celeb]’).colorbox({ transition: ‘fade’, speed: 500, current: “{current} of {total} celebrity photos”, width:’100%’, height:’100%’ }); }); /* ColorBox Core Style
Author: admin
Light BOX Custom
$(document).ready(function(){ $(‘a.lightbox’).click(function(e) { $(‘body’).css(‘overflow-y’, ‘hidden’); // hide scrollbars! $(‘<div id=”overlay”></div>’) .css(‘top’, $(document).scrollTop(0)) .css(‘opacity’, ‘0’) .animate({‘opacity’: ‘0.5’}, ‘slow’) .appendTo(‘body’); $(‘<div id=”lightbox”></div>’)
horizontal pane splitter
$(document).ready(function(){ $(‘#splitter>div:first’).resizable({ handles:’e’, minWidth:’100′, maxWidth:’400′, resize: function(){ var remainingSpace=$(this).parent().width()-$(this).outerWidth(); var divTwo=$(this).next(); var divTwoWidth=remainingSpace-(divTwo.outerWidth()-divTwo.width()); divTwo.css(‘width’,divTwoWidth+’px’); } }); }); <!doctype html> <html
resize ทุกตัวใน tag P
$(document).ready(function() { $(‘p’).resizable(); });
layout switcher ปรับหน้าจอตามขนาดหน้าจอได้ ย่อขยายได้
$(document).ready(function(){ stylesheetToggle(); $(window).resize(stylesheetToggle); }); function stylesheetToggle() { if($(‘body’).width()>900){ $(‘<link rel=”stylesheet” href=”wide.css” type=”text/css” />’) .appendTo(‘head’); }else{ $(‘link[href=”wide.css”]’).remove(); } } body #container
custom scrollbar
$(document).ready(function(){ $(‘#fine_print’).jScrollPane({ verticalGutter:20 }); });
สร้างปุ่มเลื่อนขึ้นบน page scroll
$(document).ready(function(){ $(‘a[href=#]’).click(function(e){ // เลือก a ที่มี href=# $.scrollTo(0,’slow’); e.preventDefault();//code หลังจากนี้จะไม่ทำงานเอาไว้หยุดคำสั่งอื่นของโค้ดในหน้านัน้ }); });
เปิดปิด Toggle
$(document).ready(function(){ $(‘#bio > div’).hide();//div ที่อยู่ ใน bio จะ hide เครื่องหมาย > หมายถึงตัวลูกทุกตัว $(‘#bio > div:first’).show();//show อันแรก ถ้าต้องการตัวที่สองของ div ให้ใส่เป็น div:eq(1)ไปแทน
navigation floating scroll
jquery $(document).ready(function(){ $(window).scroll(function(){ $(‘#navigation’).css(‘top’,$(document).scrollTop());//สั่งใน css ให้เลื่อนตาม }); }); หรือใช้แบบนี้ก็ได้ #navigation { position: relative; } #content { height: 2000px; } #navigation.fixed
