Css ที่ทำงานเพี้ยน ใน GoogleCrome
พอดี ผมได้เขียน Web ที่เป็นการ Slide Show Menu โดย ใช้ Jquery ในการทำงาน โดยถ้านำไป Run ผ่าน Ie หรือ Firefox แล้วมันสามารถทำงานได้ แต่ พอนำไป Run ผ่าน Safari หรือ GoolgeCrome นั้นมันทำให่มีการทำงานที่เพี้ยน ไม่สามารถทำงานได้ เช่น Css มันจะผิดตำแหน่งไปเลย พอมีวิธีที่จะแก้ไขได้หรือเปล่าครับ ขอบคุณครับ
แต่ขอถามเพิ่มหน่อยนะครับ ถ้าผมต้องการตรวจสอบ ว่า เบาว์เซอร์ที่ใช้เป็น IE หรือ FireFox หรือ GoogleCrome ใช้ Javascript ตรวจสอบได้อ่ะเปล่าครับ แล้วใช้คำสั่ง อะไร ช่วยหน่อยนะครับ ^^
ขอบคุณครับ
var navi = navigator.userAgent
if ( navi.match("MSIE")) {
document.write("IE");
} else if(navi.match("Chrome")) {
document.write("Chorm");
}
มีคำถามอีกหน่อยครับ ถ้าต้องการ Create <link rel="stylesheet" type="text/css" href="coda-slider.css"> โดยใช้ javascript อ่ะครับ ทำไงหรอ ผมไม่แน่ใจ อ่ะครับ แล้วมันต้องกำหนด ID ด้วยหรือเปล่า ผมกลัวว่ามันจะไปซ้ำกับอันอื่นๆ ที่มีอยู่แล้วหรือถ้าใครมีวิธีแนะนำบอกได้นะครับ แนวความคิดของผม คือ จะ ตรวจสอบก่อนว่า Browser ที่ใช้ คืออะไร แล้วก็จะ ให้ Javascript นั้น เรียก Css ที่ผมเตรียมไว้เข้ามาทำงาน โดยผมจะเตรียม Css สำหรับ IE และ FireFox แยกกันเอาไว้ อ่ะครับ ช่วยหน่อยนะครับ ^^
ขอบคุณครับ
if (IE) {
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"coda-slider-ie.css\">";
} else {
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"coda-slider-chrome.css\">";
}
ประมาณนี้อ่ะครับ
ขอบคุณมากๆๆครับ
แต่ที่ตอบมา ผมเขียน Javascript อ่ะครับ แล้วเอา PHP ไปแทรก ตรงตำแหน่งนั้นเลยหรอครับไม่ค่อยเข้าใจ อ่ะครับ
<title>Untitled Document</title>
<script>
var navi = navigator.userAgent
if ( navi.match("MSIE")) {
/*
var css_link = document.createElement("link");
css_link.rel="stylesheet";
css_link.type="text/css";
css_link.href="coda-slider.css";
*/
<? echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"coda-slider-ie.css\">"; ?>
} else if(navi.match("Chrome")) {
<? echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"coda-slider-ie.css\">"; ?>
}
</script>
</head>
ผมลองแล้วมัน บอก ว่า ตรงที่เพิ่ม Eror อ่ะครับ ช่วยอีกหน่อยนะครับ ขอบคุณครับ
if ( navi.match("MSIE")) {
document.write("IE");
} else if(navi.match("Chrome")) {
document.write("Chorm");
}
คงต้องหาทางส่งค่าให้ตัวแปรสำหรับใช้โค้ด php น่ะ เช่น ให้ตัวแปร $browser รับค่าแล้วใช้ if else เลือกใช้ css อีกที แต่จะต้องสร้างไฟล์ css 2 ไฟล์นี้ก่อนนะครับ คือ coda-slide-ie.css(สำหรับ browser IE) และ coda-slide-chrome.css (สำหรับ Chrome) แล้วใช้ code PHP เป็นตัวเลือกว่าจะใช้ css ตัวไหน เช่น
if ($browser=='IE') {
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"coda-slider-ie.css\">";
} else if ($browser=='Chrome') {
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"coda-slider-chrome.css\">";
} else {
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"coda-slider-firefox.css\">";
}
รอให้อาจารย์ลองมาแนะอีกดีกว่านะครับ ผมแค่เสนอไอเดีย แต่ไม่รู้จะทำได้จริงหรือเปล่า วิธีการผมอาจจะลูกทุ่งไปหน่อยนะครับ ขออภัยจริงๆ
ตรวจสอบ Browser ด้วย PHP เสร็จแล้วก็ echo CSS ออกมาเลย
ลองหากันสักนิดครับบนเว็บมีบทความหลาย 100 เรื่อง อาจมีบางเรื่องที่ประยุกต์ใช้ได้ ลองใช้ search ค้นหาดูก็ได้ครับ
สำหรับทุกๆๆคำแนะนำได้ความรู้และมีประโยชน์มากๆๆครับ
ขอบคุณมากๆ อีกครั้งครับ
var $panels = $('#slider .scrollContainer > div');
var w = $panels[0].offsetWidth;
var $container = $('#slider .scrollContainer');
var horizontal = true;
if (horizontal) {
$panels.css({'float' : 'left','position' : 'relative'});
$container.css('width', w * $panels.length);
}
สรุปว่าเป็นข้อผิดพลาดของ Javascript ครับ ให้แก้ไขโค้ดในส่วนนี้ที่หน้า index.php นะครับ หวังว่าจะหากันเจอ
1.เขียนไว้ในโค้ด HTML โดยตรง
2.ถูกกำหนดโดย Javascript
จากการตรวจโค้ดไม่พบข้อที่ 1 แสดงว่ามาจากข้อที่ 2 คือกำหนดโดย Javascript
ถ้าจะพิจารณาถึงการทำงานของโค้ด (ร่วมกับสังเกตุจาก classname) แสดงว่า div นี้น่าจะเป็นส่วนห่อหุ้มสำหรับพื้นที่แสดงผลทั้งหมด ถ้าเคยออกแบบ effect พวกนี้ก็จะเดาได้ว่า div นี้จะแปรผันความกว้างตามเนื้อหาภายใน
bingo! สรุปได้แล้ว เราพอจะเดาได้แล้วว่าเป็นความผิดพลาดของ Javascript อันเกิดจากการคำนวณขนาดผิดพลาด ที่เหลือก็คือ หาว่าผิดตรงไหน เรื่องนี้คงต้องศึกษา JQuery ว่ามันทำงานยังไง แล้วก็ลองไล่โค้ดดู
สรุปที่ผิดก็ตามด้านบนแหละครับ Google Chrome อ่านขนาดของ scrollContainer ได้ 0