CSS : position fixed และ absolute

ข้อแตกต่างระหว่าง fixed และ absolute

Absolute

absolute ใช้สำหรับกำหนดตำแหน่งของ container โดยอ้างอิงจากขอบนอกสุดของหน้านั้น

position : absolute
top: 100px;
left: 600px;

คือแสดง container โดยห่างจากขอบบนสุด 100px ขอบซ้าย 600px

นอกจากนี้ยังสามารถอ้างอิงจากกรอบของ container ที่มันอาศัยอยู่แทนการอ้างอิงจากกรอบ  browser ได้ด้วย โดย container ที่คลุมมันต้องมี position เป็น relative
ex. ตอนกด icon notification / friend request/ message ใน facebook


Fixed

ใช้สำหรับกำหนดตำแหน่งของ container โดยอ้างอิงจากตำแหน่งหน้าจอของ browser ขณะนั้น

position:fixed;
top: 100px;
left: 600px;

คือแสดง container โดยอ้างจากขอบบนของหน้าจอตอนนั้น 100px และซ้าย 600px (เช่นเลื่อนลงมาครึ่งจอแล้วค่อยสร้าง container)
ex. พวกแบนเนอร์โฆษณาที่วิ่งตามเวลาเรา scroll หนี, ตอนกด delete post ใน wall facebook

//delete post ใน wall facebook ไม่ได้ใช้ fixed ธรรมดา แต่ใช้ fixed ผสมกับ absolute เพื่อไม่ให้ container เลื่อนตามจอ
//สร้างเส้นไว้กำหนดตำแหน่งด้วย fix -> กดปุ่ม delete -> javascript คำนวนตำแหน่งของเส้น ณ ตอนนั้น -> สร้าง container absolute ณ ตำแหน่ง ของเส้นตอนนั้น

day 8 : Implement categories and subs

แก้ category + sub   leftofbody

แก้หน้า add product ( แก้ category , เพิ่ม sub , เพิ่ม auto insert commas)

productinfo เพิ่ม lightbox gallery (ยังเลื่อนซ้ายขวา + Esc ไม่ได้)

Using both jQuery and Prototype (javascript)

วันนี้เอาโค้ด enlarge image แบบที่ blur ข้างหลัง (lightbox?) มาจากเพื่อน ซึ่งมันเขียนโดยใช้ jquery มา

ทีนี้เนื่องจากทั้ง jquery และ prototype ใช้ namespace “$” ในการเข้าถึง element ต่างๆในหน้าเหมือนกัน

พอเอาโค้ดจากเพื่อนมารวมกับโค้ดที่ทำไว้แล้ว (ซึ่งใช้ prototype) ก็เลยใช้งานไม่ได้ – –

สำหรับวิธีแก้ก็ไม่ยาก
แค่เพิ่ม บรรทัด jQuery.noConfilct(); เข้าไป
แล้วเวลาต้องการใช้ jQuery ก็ให้ใช้คำว่า ‘jQuery’ แทนเครื่องหมาย $
ส่วนเครื่องหมาย $ ก็ให้ prototype ใช้ตามเดิม

ตัวอย่าง

โค้ดจากเพื่อน
<script type="text/javascript" src="jquery.js" language="javascript"> </script>
<script type="text/javascript" language="javascript">
function getH(v,w){
var x = $(v).children().width();
var y = $(v).children().height();
return w*y/x;
}
$(document).ready(function(){

var $enlargedCover = $('<img/>').addClass('enlarged').css('opacity',0.9).hide().appendTo('body');
var $backCover = $('<div/>').addClass('back').css('opacity',0.6).hide().appendTo('body');

var $enlargeRollover = $('<img/>').attr('src','enlargeIcon.png').attr('border',0)
.addClass('control')
.css('opacity',0.6);

var $covers = $('.thumb');
$covers.click(function(event){
var h = getH(this,800);
$enlargedCover.attr('src', $(this).attr('href'))
.css({
'left' : ($('body').width()-800)/2 ,
'top' : 100,
'width': 800,
'height': h
}).fadeIn('slow')
.one('click',function(){
$enlargedCover.fadeOut();
$backCover.fadeOut();
});
$backCover.fadeIn('slow')
.one('click',function(){
$enlargedCover.fadeOut();
$backCover.fadeOut();
});
event.preventDefault();
}).hover(
function(){
$enlargeRollover.appendTo(this).show();
}, function(){
$enlargeRollover.hide();
}
);

});
</script>

เมื่อแปลงแล้วจะได้แบบนี้

<script type="text/javascript">
jQuery.noConflict();

function getH(v,w){
var x = jQuery(v).children().width();
var y = jQuery(v).children().height();

return w*y/x;
}

jQuery(document).ready(function(){
var $enlargedCover = jQuery('<img/>').addClass('enlarged').css('opacity',0.9).hide().appendTo('body');

var $backCover = jQuery('<div/>').addClass('back').css('opacity',0.6).hide().appendTo('body');

var $enlargeRollover = jQuery('<img/>').attr('src','enlargeIcon.png').attr('border',0)
.addClass('control')
.css('opacity',0.6);

var $covers = jQuery('.thumb');
$covers.click(function(event){
var h = getH(this,800);

$enlargedCover.attr('src', jQuery(this).attr('href'))
.css({
'left' : (jQuery('body').width()-800)/2 ,
'top' : 100,
'width': 800,
'height': h
}).fadeIn('slow')
.one('click',function(){
$enlargedCover.fadeOut();
$backCover.fadeOut();
});

$backCover.fadeIn('slow')
.one('click',function(){
$enlargedCover.fadeOut();
$backCover.fadeOut();
});
event.preventDefault();
}).hover(
function(){
$enlargeRollover.appendTo(this).show();
}, function(){
$enlargeRollover.hide();
}
);

 

});

 

 

 

 

 

 

(ยังต้องแก้เรื่องสเกลกับตำแหน่งอีกสินะ = =)

day 7 : draft categories and sub #1

นั่งคิดหลายรอบมาก ตอนนี้ได้แบบนี้ ใครคิดว่าอยากให้ปรับอะไรก็บอกได้นะ

  • Books
    • Comics
    • Dictionaries
    • Novels
    • Textbooks
    • Others
  • CDs & DVDs
    • Games
    • Movies
    • Musics
    • Softwares
    • Others
  • Computers & Technologies
    • Cameras & Accessories
    • Cell Phones & Tablets
    • Desktop & Parts
    • Game Consoles & CD Players
    • Laptops
    • Others
  • Fashion
    • Men’s
    • Tops
    • Bottoms
    • Underwears
    • Shoes
    • Accessories
    • Women’s
    • Dresses
    • Tops
    • Bottoms
    • Lingeries
    • Shoes
    • Accessories
  • Health & Beauties
    • Cosmetics
    • Foods
    • Sport Goods
    • Others
  • Hobbies & Toys
    • Collectibles
    • Dolls & Bears
    • Models
    • Toys
    • Others
  • Musical Instruments
    • Brass
    • Electronic
    • Percussion
    • String
    • Wind
    • Others
  • Tickets
    • Concerts
    • Shows
    • Others
  • Others

ย้าย console จาก hobby & toy -> technology … + cd dvd player

pda -> tablet

เปลี่ยน cloth -> fashion
เพิ่ม accessories ไว้ใน fashion

underwear -> lingeries 55 ใช้ได้กับทั้ง ช ญ เปล่า ?

เพิ่ม toys ใน hobbies & toys

CD +musics

เพิ่ม Dictionaries