ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: jQuery + GreaseMonkey #2 TSB Fixed  (อ่าน 4047 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
ball6847
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 212
ออฟไลน์ ออฟไลน์

กระทู้: 4,174



ดูรายละเอียด
« เมื่อ: 14 ตุลาคม 2008, 16:29:00 »

Bitthailand Preview Image By P' Tee++;
http://www.thaiseoboard.com/in...40078.msg527857.html#msg527857

ThaiSEOBoard Avartar and Linkpr Fixed By Ball6847
http://www.thaiseoboard.com/in...40078.msg552033.html#msg552033


// =======================================

เวลาก็ไม่ค่อยจะมีเท่าไหร่ แต่ก็หาเรื่องอู้งานศึกษาอะไรเพิ่มเติม
ล่าสุดหัด jQuery มาได้ประมาณ 5 วัน

คิดไปคิดมา เอ...อยากจะฝึกเขียน jQuery แต่ไม่รู้จะเอาไปใช้กับกรณีไหนดี ก็เลยเกิด idea นำเอา jQuery เข้ามาใช้ผสมเข้ากับ GreaseMonkey แล้วหาไรที่มันน่าจะเป็นประโยชน์ทดลองง่ายๆดูสักโปรแกรม

ชั่วแว๊บบนึงกำลังคิดไป+หาโหลดบิตที่สยามบิตไปพลาง ไอเดียนึงเลยผุดขึ้นมาในสมอง "ถ้ารูปภาพมันโชว์หน้าเลือกไฟล์เลยก็ดีดิเนี่ย" ขี้เกียจเปิดดูบ่อยๆ

เลยเอาอันนี้ซะเลย

เริ่มวางแผนเอางัยดีหว่า (ใครเชี่ยวๆ jQuery ขอคำชี้แนะด้วย)
- คิดวิธีใช้ selector เหมาะๆ ก็ view source ดู เลยเอาเป็น attribute selector แระกันเพราะรูปมันจะมี alt="รูปภาพ" อยู่
- ที่อยู่ของรูปจะอยู่ที่ href ของลิ้งค์ซึ่งเป็น parent ของ img อีกที เลยเลื่อน node มาเป็น parent เพื่อจะเอาที่อยู่ของภาพ
- ได้รูปภาพแระ จับยัดรูปภาพต่อจากลิ้งค์เลย แต่แอบไว้ก่อน รอให้รุปภาพโหลดเส้ดก่อน เอิ้กๆ
- เมื่อรูปภาพพร้อมก็จัดแจง คำนวน scale รูปแล้ว resize ซะใหม่
- ครอบรูปภาพด้วย <p> ให้มันอยู่ให้ถูกที่ถูกทางสักนิด
- เมื่อเส็ดหมดก็แสดงรูปภาพขึ้นมาได้
ปัญหาที่เกิด
- รูปภาพเอามาแสดงได้แค่รูปที่เป็นลิ้งค์ตรง แต่หลายที่ต้องเข้าไปดูที่เว็บทำให้รูปเจ้ง เหอๆ เลยต้องจัดการกับรูปที่เจ้งสักนิด รูปไหนเจ้ง remove ออกไปให้หมด

โค๊ด:
// ==UserScript==
// @name           Siambit Torrent Images
// @namespace      ball6847
// @include        http://sb.in.th/*
// ==/UserScript==

var width = 250;
var height = 250;
var wait4dom = false;

function SB_preview_images() {
$('img[@title="รูปภาพ"]').parent().each(function(key , link) {
$(link).after('<img src="'+ $(link).attr('href') +'" style="display:none;border:none;">');
$(link).next().load(function() {
var dim = scaleImg($(this).width() , $(this).height());
$(this).width(dim.width);
$(this).height(dim.height);
$(this).wrap('<p></p>');
$(this).css('display' , 'block');
});
$(link).next().error(function() {$(this).remove()});
});
}

function scaleImg(w , h) {
var scale = (w > h) ? (width / w) : (height / h) ;
var dim = {width: Math.round(w * scale) ,height: Math.round(h * scale) }
return dim;
}


if(wait4dom) $(document).ready(function() {SB_preview_images()});
else SB_preview_images();

ใครกำลังหัด jQuery ลองไล่อ่านโค้ดดูเอานะคับ แหะๆ มั่วๆเอาเหมือนกัน





จิงๆแล้วมันก็ไม่ได้วิเศษวิโสอะไรมากมาย แต่มันก็น่าจะต่อยอดไปได้ไกลนะผมว่า โดยเฉพาะ jQuery ไม่นึกเลยว่ามันจะเทพขนาดนี้

อีกข้อได้เปรียบของ greasemonkey  คือ greasemonkey มีฟังก์ชั่นสามารถใช้งาน xmlhttpRequest จากเว็บไหนก็ได้ ไม่จำกัดว่าต้องอยู่เฉพาะในโดเมนใดโดเมนหนึ่ง

ปล. ใครจะเล่นบ้าง อย่าลืมลง jQuery ลงไปใน Greasemonkey ก่อนเด้อ (อย่าลืมตั้งให้เป็นลำดับแรกด้วยล่ะ)
« แก้ไขครั้งสุดท้าย: 02 พฤศจิกายน 2008, 17:39:43 โดย ball6847 » บันทึกการเข้า

digitalex
สมุนแก๊งเสียว
*

พลังน้ำใจ: 14
ออฟไลน์ ออฟไลน์

กระทู้: 670



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 14 ตุลาคม 2008, 17:22:57 »

ผมเคยลองเล่นอยู่นิดหน่อยครับ ยืนยันความเทพอีกเสียง
บันทึกการเข้า

DJJome
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 46
ออฟไลน์ ออฟไลน์

กระทู้: 1,123



ดูรายละเอียด
« ตอบ #2 เมื่อ: 14 ตุลาคม 2008, 17:33:28 »

code less, do more.

บันทึกการเข้า
awat
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 46
ออฟไลน์ ออฟไลน์

กระทู้: 1,214



ดูรายละเอียด
« ตอบ #3 เมื่อ: 14 ตุลาคม 2008, 19:50:43 »

อะนะ ผมก็เคยลองเขียนอยู่พักหนึ่ง ใช้งานง่ายดีครับ ไม่ต้องยุ่งยากกับ การเขียน js ทั้งดุ้ง Tongue Tongue
บันทึกการเข้า

.NET Developer, Cloud computing Developer
รับทำ component joomla, wordpress, drupal
BosnoS
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 222
ออฟไลน์ ออฟไลน์

กระทู้: 8,168



ดูรายละเอียด
« ตอบ #4 เมื่อ: 14 ตุลาคม 2008, 19:56:02 »

สู้ๆ คุณบอล Seeeeeeeeeeeeeed
บันทึกการเข้า
Tee++;
โปรแกรมเมอร์ จอหงวน
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 79
ออฟไลน์ ออฟไลน์

กระทู้: 1,861



ดูรายละเอียด เว็บไซต์
« ตอบ #5 เมื่อ: 14 ตุลาคม 2008, 21:00:19 »

อ๊ะโห Idea เก๋เลย เล่นบ้างดีกว่า อิอิ ขอบคุณนะครับ ที่มา Share

---------------------------------
หนุกดี เลยไปขอลองมาบ้างอิอิ อันนี้เป็นแบบคลิกที่ภาพ or hotlink แล้วมันจะไปดึงมาลอยอยู่กลางจอ

โค๊ด:
// ==UserScript==
// @name           Bitthailand
// @namespace      http://jquerytips.com/greasemonkey
// @description    Image Show Up
// @include        http://www.bitthailand.com/browse.php*
// ==/UserScript==


function getPageSize(){
var de = document.documentElement;
var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
arrayPageSize = [w,h];
return arrayPageSize;
}


var pageSize = getPageSize();
var el = $('<div>');

$(el).css({
width: '580px',
height: '500px',
backgroundColor: '#000000',
display: 'none',
position: 'absolute',
left: ((pageSize[0] / 2) - 290 * 1) + 'px'
});

$(el).attr('id', 'temp');

$('body').append(el);

$('img[@alt="Picture"]').click(function() {

t = (window.pageYOffset + 20*1) + 'px';
href = $(this).parent().attr('href');
ifr = '<iframe src="' + href + '" width="100%" height="100%"></iframe>';
$('#temp').css('top', t).html(ifr).show();
return false;

});

$('body').click(function() {
$('img[@alt="Picture"]').unbind('click');
$('#temp').fadeOut();
});



ปล.เขียน Support Greasemonkey ที่ include jQuery เท่านั้นนะ
« แก้ไขครั้งสุดท้าย: 14 ตุลาคม 2008, 23:38:48 โดย Tee++; » บันทึกการเข้า

ball6847
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 212
ออฟไลน์ ออฟไลน์

กระทู้: 4,174



ดูรายละเอียด
« ตอบ #6 เมื่อ: 02 พฤศจิกายน 2008, 17:34:49 »

TSB Fixed

- avatar ของคนที่มีขนาดกว้างเกินแล้วขึ้น scrollbar สคิรปท์นี้ช่วยให้ปรับขนาดลงมาให้พอดีกับพื้นที่
- linkpr ไม่ต้องเข้า 2 ต่อ สคิรปท์นี้ช่วยเปลี่ยนให้ linkpr กลายเป็น directlink คลิ้กไปปลายทางได้ทันที

ตัวอย่าง

avatar





linkpr






code

โค๊ด:
// ==UserScript==
// @name           ThaiSEOBoard FIX
// @namespace      ball6847
// @include        http://www.thaiseoboard.com/*
// ==/UserScript==


// Fix avatar Size
$('.avatar').each(function(k,v){
w = $(this).width();
h = $(this).height();
mw = $(this).parent().width();
if(w > mw) {
diff = w - mw;
h = h - diff;
$(this).width(mw).height(h);
}
});

// Fix linkpr
$('a[@href^="http://www.thaiseoboard.com/go/?"]').each(function(i,a) {
$(a).attr('href' , 'http://' + $(a).attr('href').replace(/http:\/\/www\.thaiseoboard\.com\/go\/\?(http:\/\/)?/, ''));
});


เล็กๆน้อยๆ แต่ก็ดีกว่าเดิมหล่ะนะ แหะๆ ถือว่าเป็นการแก้ปัญหาที่ตัวเองคับ  Smiley

ขอบคุณครับ

ปล. จริงๆ ผมจะทำแก้ปัญหา quick reply และก็ quote ที่เป็นมีปัญหาอยู่ด้วย แต่ยุ่งยากไปหน่อย Grin
รอท่าน admin แก้ดีก่า เด๋สคนใช้ IE จะเซ็งเป็ด
บันทึกการเข้า

Tee++;
โปรแกรมเมอร์ จอหงวน
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 79
ออฟไลน์ ออฟไลน์

กระทู้: 1,861



ดูรายละเอียด เว็บไซต์
« ตอบ #7 เมื่อ: 02 พฤศจิกายน 2008, 22:42:27 »

หนุกดีๆ เจ๋งๆ เอาอีกเยอะๆ นะ ^^
บันทึกการเข้า

tosakp
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 113
ออฟไลน์ ออฟไลน์

กระทู้: 1,960



ดูรายละเอียด
« ตอบ #8 เมื่อ: 02 พฤศจิกายน 2008, 22:58:41 »

หนุกครับ เล่นด้วย ชอบตัด linkpr ออกอ่ะ
บันทึกการเข้า

chanun
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 69
ออฟไลน์ ออฟไลน์

กระทู้: 1,912



ดูรายละเอียด เว็บไซต์
« ตอบ #9 เมื่อ: 20 ธันวาคม 2008, 18:37:46 »

อ๊ะโห Idea เก๋เลย เล่นบ้างดีกว่า อิอิ ขอบคุณนะครับ ที่มา Share

---------------------------------
หนุกดี เลยไปขอลองมาบ้างอิอิ อันนี้เป็นแบบคลิกที่ภาพ or hotlink แล้วมันจะไปดึงมาลอยอยู่กลางจอ

โค๊ด:
// ==UserScript==
// @name           Bitthailand
// @namespace      http://jquerytips.com/greasemonkey
// @description    Image Show Up
// @include        http://www.bitthailand.com/browse.php*
// ==/UserScript==


function getPageSize(){
var de = document.documentElement;
var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
arrayPageSize = [w,h];
return arrayPageSize;
}


var pageSize = getPageSize();
var el = $('<div>');

$(el).css({
width: '580px',
height: '500px',
backgroundColor: '#000000',
display: 'none',
position: 'absolute',
left: ((pageSize[0] / 2) - 290 * 1) + 'px'
});

$(el).attr('id', 'temp');

$('body').append(el);

$('img[@alt="Picture"]').click(function() {

t = (window.pageYOffset + 20*1) + 'px';
href = $(this).parent().attr('href');
ifr = '<iframe src="' + href + '" width="100%" height="100%"></iframe>';
$('#temp').css('top', t).html(ifr).show();
return false;

});

$('body').click(function() {
$('img[@alt="Picture"]').unbind('click');
$('#temp').fadeOut();
});



ปล.เขียน Support Greasemonkey ที่ include jQuery เท่านั้นนะ



ขอโทษนะครับ พอจะอธิบายคราวๆ ได้ไหมครับว่าเอาไปใช้ยังไง ผมพอมีพื้นอยู่ เอาคราวๆก็ได้ครับ
บันทึกการเข้า



ซื้อเครื่องเล่นเกมคุณภาพและเช็คราคา PS4 PS3 PSP XBOX WII 3DS ได้ที่นี้
psp ราคา
SvZ
คนรักเสียว
*

พลังน้ำใจ: 28
ออฟไลน์ ออฟไลน์

กระทู้: 163



ดูรายละเอียด เว็บไซต์
« ตอบ #10 เมื่อ: 20 ธันวาคม 2008, 19:08:30 »

chanun, Greasemonkey เป็น add-ons ของ firefox น่ะ
บันทึกการเข้า

chanun
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 69
ออฟไลน์ ออฟไลน์

กระทู้: 1,912



ดูรายละเอียด เว็บไซต์
« ตอบ #11 เมื่อ: 20 ธันวาคม 2008, 19:18:27 »

แล้วถ้าเป็น ie จะใช้ไมได้หรือครับ
คือตอนนี้อยากทำแบบ พอเอาเม้าสไปวางบนลิงค์แล้วมันมีรุปเวบที่เราจะลิงค์ไปโผล่มาให้ดูก่อนนะครับ เหมือนด้านบน นั่งหาสารพัดจนปวดตาเลยยังไม่ได้เลยครับ Lips Sealed
บันทึกการเข้า



ซื้อเครื่องเล่นเกมคุณภาพและเช็คราคา PS4 PS3 PSP XBOX WII 3DS ได้ที่นี้
psp ราคา
figaro
คนรักเสียว
*

พลังน้ำใจ: 7
ออฟไลน์ ออฟไลน์

กระทู้: 112



ดูรายละเอียด
« ตอบ #12 เมื่อ: 21 ธันวาคม 2008, 00:59:01 »

วิธีนี้จะใช้คุณสมบัติของ Greasemonkey เพื่อรัน javascript โดยเฉพาะ ซึ่งมันมีเฉพาะ ff

ie ทำไมได้นะคับ
บันทึกการเข้า

อย่าปล่อยให้ความโลภครอบงำ
visavavit
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 69
ออฟไลน์ ออฟไลน์

กระทู้: 1,717



ดูรายละเอียด
« ตอบ #13 เมื่อ: 21 ธันวาคม 2008, 01:14:26 »

jquery หาลงจากไหนกันหรอครับ เจอแต่ GreaseMonkey
บันทึกการเข้า

figaro
คนรักเสียว
*

พลังน้ำใจ: 7
ออฟไลน์ ออฟไลน์

กระทู้: 112



ดูรายละเอียด
« ตอบ #14 เมื่อ: 21 ธันวาคม 2008, 12:57:11 »

http://docs.jquery.com/Downloading_jQuery

โหลดมาแล้วเพิ่ม script เข้าไปที่ GreaseMonkey

โดเมนก็ตั้งตามนี้ http://www.thaiseoboard.com/ *
บันทึกการเข้า

อย่าปล่อยให้ความโลภครอบงำ
chanun
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 69
ออฟไลน์ ออฟไลน์

กระทู้: 1,912



ดูรายละเอียด เว็บไซต์
« ตอบ #15 เมื่อ: 21 ธันวาคม 2008, 15:24:47 »

ตอนนี้ผมใช้ff โหลด greasemonkey มาแล้ว และลง ใส่ jquery.js เข้าไปที่ headแล้ว
แล้วโคตที่คุณตรีให้มาเอาไปทำอะไหรือครับ
บันทึกการเข้า



ซื้อเครื่องเล่นเกมคุณภาพและเช็คราคา PS4 PS3 PSP XBOX WII 3DS ได้ที่นี้
psp ราคา
smapan
Global Moderator
เจ้าพ่อบอร์ดเสียว
*****

พลังน้ำใจ: 643
ออฟไลน์ ออฟไลน์

กระทู้: 8,272



ดูรายละเอียด เว็บไซต์
« ตอบ #16 เมื่อ: 24 ธันวาคม 2008, 04:50:24 »

ปรกติผมเอาไว้รันพวก web game online อ่ะครับ พวก travian อะไรพวกนี้   Grin

บันทึกการเข้า

จูมล่าโฮส สยามโฮสเว็บ modty.com
รวมที่พัก เช่ารายวัน ที่พักเช่ารายเดือนมากที่สุดแจ่มจริง
***Tel 083-757-1515 ติดปัญหา Joomla ตรงไหนรับปรึกษาฟรี โทรมาเถอะครับ ถ้าตอบได้ช่วยแน่นอน ไม่มีกั้ก. ***
Design108
ก๊วนเสียว
*

พลังน้ำใจ: 2
ออฟไลน์ ออฟไลน์

กระทู้: 203



ดูรายละเอียด เว็บไซต์
« ตอบ #17 เมื่อ: 08 ธันวาคม 2009, 01:43:27 »

1. ติดตั้ง monkey
2. jQuery ดาวน์โหลดมาแล้ว แต่เอามาใส่ใน monkey อย่างไร

รบกวนพี่ ๆ
บันทึกการเข้า

เกมส์ เล่นวันละนิด ชีวิตแจ่มใส
Sudoku  คุณรู้จักป่ะ ว่ามันคืออะไร
ผ้าม่าน สาระการตกแต่งบ้าน

ขอความรู้และประสบการณ์จงบังเกิดกับเด็กใหม่อย่างข้า เพื่อลูก สู้โว้ย !!!
ผมอยากแลก link กับเว็บที่เกี่ยวกับตกแต่งบ้านหรืออสังหาริมทรัพย์ครับ
raptor
ก๊วนเสียว
*

พลังน้ำใจ: 97
ออฟไลน์ ออฟไลน์

กระทู้: 280



ดูรายละเอียด
« ตอบ #18 เมื่อ: 08 ธันวาคม 2009, 03:41:22 »

ถ้าใช้ใน thaiseoboard.com จะมีการ include jquery อยู่แล้ว view source ดูจะเห็น <script language="JavaScript" type="text/javascript" src="http://www.thaiseoboard.com/Th...iseoboard_rev2009/js/jquery.js "></script>

ให้เรียกใช้ได้เลย code แบบนี้ดูครับ
$ = unsafeWindow.jQuery;
alert($("title").html());    // alert($); เฉย ๆ ก็ได้ถ้ามีค่าแปลว่าใช้ jquery ได้แล้ว

แต่ถ้าใช้ในเว็บที่ไม่มีการ include jquery อยู่แล้ว ผมใช้แบบนี้
var include_jq = document.createElement('script');
include_jq.src = 'http://ajax.googleapis.com/aja...s/jquery/1.3.2/jquery.js';
include_jq.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(include_jq);
function include_jq_wait() {
   if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(include_jq_wait,100); }
   else { $ = unsafeWindow.jQuery; main(); }
}
include_jq_wait();

function main(){
   alert($("title").html());
}
เป็นการ include jquery จาก google api
ท่านใดมีวิธี include jquery จากในเครื่องเราเองเลยบ้างครับ ทำยังไงอยากรู้เหมือนกันครับ
บันทึกการเข้า
หน้า: [1]   ขึ้นบน
พิมพ์