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

Read More

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

Read More

สร้างปุ่มเลื่อนขึ้นบน page scroll

$(document).ready(function(){ $(‘a[href=#]’).click(function(e){ // เลือก a ที่มี href=# $.scrollTo(0,’slow’); e.preventDefault();//code หลังจากนี้จะไม่ทำงานเอาไว้หยุดคำสั่งอื่นของโค้ดในหน้านัน้ }); });

Read More

เปิดปิด Toggle

$(document).ready(function(){ $(‘#bio > div’).hide();//div ที่อยู่ ใน bio จะ hide เครื่องหมาย > หมายถึงตัวลูกทุกตัว $(‘#bio > div:first’).show();//show อันแรก ถ้าต้องการตัวที่สองของ div ให้ใส่เป็น div:eq(1)ไปแทน

Read More

navigation floating scroll

jquery $(document).ready(function(){ $(window).scroll(function(){ $(‘#navigation’).css(‘top’,$(document).scrollTop());//สั่งใน css ให้เลื่อนตาม }); }); หรือใช้แบบนี้ก็ได้ #navigation { position: relative; } #content { height: 2000px; } #navigation.fixed

Read More