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();
}
);

 

});

 

 

 

 

 

 

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

Advertisements

HTML5: changing URL without refreshing page

ใช้ object  history ของ javascript

โดยใช้ function history.pushState( data,”title”,”url”);
โดย data  ใส่อยู่ใน format ของ JSON
title ใส่เป็น String อะไรก็ได้ (ไม่สำคัญ)
url ใส่เป็น url ที่ต้องการจะต่อท้ายจาก page เดิม โดยเป็นแบบ relative

ตัวอย่าง

function toFollow(param){ 
new Ajax.Request("<%=request.getContextPath()%>;/viewFollowList.do?show="+param,
{method : "get", 
onComplete : function(xhr) { 
document.getElementById("main_of_profile_body").innerHTML = ""+ xhr.responseText;}});}
history.pushState(null, "", "viewWall.do?page="+param);

นอกจาก history.pushState แล้ว เรายังสามารถใช้ history.replaceState ได้ โดยข้อแตกต่างคือ replaceState จะทำการเปลี่ยน state ปัจจุบันทำให้ไม่สามารถกด back กลับมาได้ ส่วน pushState จะเป็นการใส่เพิ่มลงไปแทน

<script type="text/javascript">
var stateObj = { foo: "bar"};
history.replaceState(stateObj, "index", "\\");>
</script>

สำหรับ function อื่นได้แก่ history.forward() , history.back() , history.go(1), history.go(-1)

อ่านเพิ่ม https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history