เขียน html ให้มัน ยืดหยุ่น โดยใช้ iframe จะได้ไหม????( ดูภาพปรากรอบ - -")

Fallen · 02 ธันวาคม 2011, 22:13:47

ลองคิดเเละทำอยู่ 2 วัน
ติดปัญหา เรื่องเมนู แบบ Drop ได้
มันจะแสดงได้ได้เฉพาะไม่เกินความสูงที่กำหนดไว้ใน iframe
มีวิธีไหน พอจะทำได้บ้าง

เวลาเเสดงผล ของ index.htm มันจะดึง iframe menu.htm กับ iframe content-1.htm มาเเสดง
(ใช้หลักการของ php แบบว่า get head , get footer ฯลฯ อ่ะ)
อาจจะเป็นสิ่งที่ไม่มีใครทำกัน - -"

- เราเขียน php ไม่ได้
- เขียน html เวลาแก้เมนูต้องแก้เป็นร้อยหน้าเลย(บ้าป่ะ)

จึงคิดว่า ถ้าเขียน HTML เเยก ทำ เป็นเมนู เเละ เนื้อหา เเล้ว ใช้ iframe ดึงเอา เลยจะดีกว่า
เวลาแก้เมนู ก็แก้ที่เดียว ไม่ต้องแก้หลายที่
เเต่เมนูที่ต้องการนี้เป้น เมนูที่ Drop ลงมาได้ มันเลยติดปัญหา

โค๊ดของเมนูนั้น ประกอบไปด้วย Div และ li

ช่วยเเนะนผมด้วยครับ

Nomkhonwaan · 02 ธันวาคม 2011, 22:48:30

ถ้าเป็น frame ทำไม่ได้ครับ

ในกรณีนี้เขียน menu ไว้ที่ไฟล์ใดไฟล์หนึ่ง สมมติ index.html แล้วใช้ AJAX เรียกหน้า content ที่ต้องการแสดงมาใส่จะดีกว่าครับ

คล้ายๆ หลักการ iframe แต่สามารถทำให้ drop down menu เลื่อนลงมาทับได้อย่างที่ต้องการครับ

mSkyline · 02 ธันวาคม 2011, 22:51:26

ใช้ include('') เอาครับ

Fallen · 02 ธันวาคม 2011, 22:52:02

อ้างถึงจาก: Nomkhonwaan ใน 02 ธันวาคม 2011, 22:48:30
ถ้าเป็น frame ทำไม่ได้ครับ

ในกรณีนี้เขียน menu ไว้ที่ไฟล์ใดไฟล์หนึ่ง สมมติ index.html แล้วใช้ AJAX เรียกหน้า content ที่ต้องการแสดงมาใส่จะดีกว่าครับ

คล้ายๆ หลักการ iframe แต่สามารถทำให้ drop down menu เลื่อนลงมาทับได้อย่างที่ต้องการครับ

(+1 ก่อนเลย )
ใช้ AJAX
คำสั่งอย่างไรพอบอกได้ไหมครับ

เอามาครอบ โค๊ดของเมนูนั้น ประกอบไปด้วย Div และ li ยังไงครับ ?
เเล้วเวลาแก้ไข เมนูเช่นจะเพิ่ม อะไรเข้าไป แก้ที่เดียวเลยใช่ไหมครับ ?

Fallen · 02 ธันวาคม 2011, 22:52:38

อ้างถึงจาก: mSkyline ใน 02 ธันวาคม 2011, 22:51:26
ใช้ include('') เอาครับ

+ 1 ก่อน

ทำอย่างไรครับ เเนะได้ไหมครับ

Love Family · 02 ธันวาคม 2011, 22:55:56

include('') ต้องเป็น .php ครับ

beg · 02 ธันวาคม 2011, 23:01:30

อ้างถึงจาก: Fallen ใน 02 ธันวาคม 2011, 22:52:38
อ้างถึงจาก: mSkyline ใน 02 ธันวาคม 2011, 22:51:26
ใช้ include('') เอาครับ

+ 1 ก่อน

ทำอย่างไรครับ เเนะได้ไหมครับ

include ง่ายดีครับ

ตัวอย่าง สร้างไฟล์ชื่อ head.php foot.php menu.php ทุกไฟล์เขียนเป็น html ธรรมดา แต่เซฟเป็น .php

เวลาเรียกใช้งาน ก็เขียนแบบนี้

ไฟล์ index.php

โค้ด เลือก



<?
include('head.php'); // ส่วนหัว  html head title 
include('menu.php');  // เมนู
?>
เนื้อหาต่างๆ ใส่ตรงนี้ HTML ธรรมดาๆ 
<?
include('foot.php'); // ล่างสุด
?>

rabbitch · 02 ธันวาคม 2011, 23:09:29

อ้างถึงจาก: mSkyline ใน 02 ธันวาคม 2011, 22:51:26
ใช้ include('') เอาครับ

ขยายความ
ใช้วิธีการ Server Side Include (ไม่ต้องเซ็ตอะไรเพิ่ม ต้องถูกเซ็ตจาก Host มาแล้ว) ทำ HTML ไฟล์โดยไม่ต้องใช้ iframe ใส่



ไม่แน่ใจว่านะว่าต้องตัดส่วน <html><head><title> ออกไปให้เหลือแต่โค้ดของตัวเมนูหรือเปล่า ไม่ได้ใช้นานแล้ว ด้านต่ำกว่าเมนูลงไปก็คือเนื้อหาหน้านั้น ทุกหน้าก็แค่ include เมนูเข้าไปแก้ไฟล์เมนูครั้งเดียวก็ไปทุกหน้าเลย

อีกอย่างใช้ php ถ้า host มีให้ใช้อยู่ก็

<?php include("content.html ที่เป็นเมนู"); ?> แค่เปลี่ยนวิธีเรียกไฟล์จากให้ server เรียกเป้นให้ php เรียกแทน

Fallen · 02 ธันวาคม 2011, 23:39:51

อ้างถึงจาก: beg ใน 02 ธันวาคม 2011, 23:01:30
อ้างถึงจาก: Fallen ใน 02 ธันวาคม 2011, 22:52:38
อ้างถึงจาก: mSkyline ใน 02 ธันวาคม 2011, 22:51:26
ใช้ include('') เอาครับ

+ 1 ก่อน

ทำอย่างไรครับ เเนะได้ไหมครับ

include ง่ายดีครับ

ตัวอย่าง สร้างไฟล์ชื่อ head.php foot.php menu.php ทุกไฟล์เขียนเป็น html ธรรมดา แต่เซฟเป็น .php

เวลาเรียกใช้งาน ก็เขียนแบบนี้

ไฟล์ index.php
โค้ด เลือก ขยาย
<? include('head.php'); // ส่วนหัว html head title include('menu.php'); // เมนู ?> เนื้อหาต่างๆ ใส่ตรงนี้ HTML ธรรมดาๆ <? include('foot.php'); // ล่างสุด ?>

+1 เลยเนี่ย

สุดยอดมากเลยอ่ะ นี่เเหละทำได้เเล้ววว

อ้างถึงจาก: rabbitch ใน 02 ธันวาคม 2011, 23:09:29
อ้างถึงจาก: mSkyline ใน 02 ธันวาคม 2011, 22:51:26
ใช้ include('') เอาครับ

ขยายความ
ใช้วิธีการ Server Side Include (ไม่ต้องเซ็ตอะไรเพิ่ม ต้องถูกเซ็ตจาก Host มาแล้ว) ทำ HTML ไฟล์โดยไม่ต้องใช้ iframe ใส่



ไม่แน่ใจว่านะว่าต้องตัดส่วน <html><head><title> ออกไปให้เหลือแต่โค้ดของตัวเมนูหรือเปล่า ไม่ได้ใช้นานแล้ว ด้านต่ำกว่าเมนูลงไปก็คือเนื้อหาหน้านั้น ทุกหน้าก็แค่ include เมนูเข้าไปแก้ไฟล์เมนูครั้งเดียวก็ไปทุกหน้าเลย

อีกอย่างใช้ php ถ้า host มีให้ใช้อยู่ก็

<?php include("content.html ที่เป็นเมนู"); ?> แค่เปลี่ยนวิธีเรียกไฟล์จากให้ server เรียกเป้นให้ php เรียกแทน

อันนี้ไม่ค่อยเข้าใจเลยอ่ะ เเต่น่าจาใช้ได้ เทคนิดนี้แปลกดี +อ่ะ
ดีจัยมาก

+ ทุกคนข้างบนเลยนะ

ไม่รู้ว่า
ไฟล์ .php ที่ข้างในเป็น html กับ ไฟล์.php ที่ข้างในเป็น php จะต่างกันไหม

TonHaDy · 02 ธันวาคม 2011, 23:48:17

ผมมึนๆ กับคำถามนิดๆ

1. ใช้ script drop down ทั่วไปที่แจกฟรี
2. เขียนเองใช้ z index

-..-

อ่อ เดาอีกอย่าง เขียนเปน 3 ส่วนนั้นปแหละถูกละ บน กลาง ล่าง แล้ว include กลางมา แล้ว server มันจะ cache ส่วนบนให้ด้วย เหมือน ajax ในตัวเรย สบาย

mSkyline · 03 ธันวาคม 2011, 00:14:57

อ้างถึงไฟล์ .php ที่ข้างในเป็น html กับ ไฟล์.php ที่ข้างในเป็น php จะต่างกันไหม

ไม่ต่างครับ ใช้งานได้เหมือนกันปกติ (จะว่าต่างก็ตรงนามสกุลครับ

)

แต่ถ้ามีcode php ในไฟล์ html
apache มันจะมองเป็น text ธรรมดาครับ

bonshington · 03 ธันวาคม 2011, 03:12:56

Hikkyz · 03 ธันวาคม 2011, 03:53:24

เก็บความรุ้ๆๆ

Fallen · 03 ธันวาคม 2011, 08:25:01

อ้างถึงจาก: bonshington ใน 03 ธันวาคม 2011, 03:12:56
<div style="position:absolute;"></div>

อันนี้ทำไงอ่ะ

อ้างถึงจาก: TonHaDy ใน 02 ธันวาคม 2011, 23:48:17
ผมมึนๆ กับคำถามนิดๆ

1. ใช้ script drop down ทั่วไปที่แจกฟรี
2. เขียนเองใช้ z index

-..-

อ่อ เดาอีกอย่าง เขียนเปน 3 ส่วนนั้นปแหละถูกละ บน กลาง ล่าง แล้ว include กลางมา แล้ว server มันจะ cache ส่วนบนให้ด้วย เหมือน ajax ในตัวเรย สบาย

1.ใช่ครับ เอามาใช้กับเว็บ .html ของเรา เเละมัน drop ลงมาได้
2. z indez อันนี้หมายถึงอะไรอ่ะ

คือ เว็บเราเป้น .html เขียนเเต่ละหน้าเเยกกัน หน้า page เป็น หมด เวลาเราเปลี่ยนเมนูสวยๆมาใส่เว็บก็ต้องแก้ ทั้งหลายร้อยหน้าเลย
จึงคิดหาวิธีที่จะทีเดียวเเล้ว ไม่ต้องแก้ทุกหน้า จึงติดปัญหาเรื่อง ทำอย่างรไ ให้เมนูที่เราเปลี่ยนนี้เปลี่ยนที่จุดเดียว เเล้วมันก็มีผลกับทุกหน้าเดิม (ไม่ต้องเข้าแก้ทุกหน้า)
จึงคิดเอา iframe มาใช้ เเต่มันติดปัญหา คือ เมนูที่เป็นเเบบ Drop นั้น จะเเสดงมาไม่เกินความสูงของ iframe ที่เรากำหนด
ครั้นจะให้ความสุงนั้นมากๆก็ทำให้หน้าเพจเกิดที่ว่าง อีก (ระหว่างเมนูกับเนื้อหา)

ถ้าเป็น .php ก็แก้ปัญหานี้ได้เเล้วว เเต่ถ้ายังใช้ .html มันจะไม่ได้ครับ (เพิ่งคิดได้เนี่ย)

อ้างถึงจาก: Love Family ใน 02 ธันวาคม 2011, 22:55:56

include('') ต้องเป็น .php ครับ

เออ ช่ายจริงด้วยครับ
อาบน้ำอยู่ คิดไปคิดมา ถ้าเปลี่ยน .php ต้องแก้ path ทั้ง 200ลิ้งเลยอ่ะ เพราะเดิมเป็น .html

Nomkhonwaan · 03 ธันวาคม 2011, 10:33:32

อย่างที่ผมใช้ AJAX นะครับจะเขียนแบบนี้

/* index.html
/* -------------------------------------------------------------------*/

โค้ด เลือก

<script type="text/javascript">
            function loadUrl(url) {
                $.get(url, null, function(xhr){
                    $('#result').html(xhr);
                });
            }
</script>

และสร้าง div#result ขึ้นมาเพื่อใช้สำหรับใส่ response result จาก AJAX

โค้ด เลือก

<div id="result"></div>

และที่เมนู ก็เพิ่มคำสั่งนี้เข้าไป สมมติเมนูผมเป็น tag a

โค้ด เลือก

<a href="#" onclick="loadUrl(' --- ชื่อไฟล์ที่จะโหลด --- ')">Anchor Text</a>

จากคำสั่งข้างบนก็หมายความว่าเมื่อ click ที่ tag a ก็จะทำการเรียก function loadUrl และส่ง parameter เป็นชื่อไฟล์ที่จะโหลด จากนั้นก็โหลด
ผ่าน AJAX มาใส่ที่ div#result

ตัวอย่างครับ http://www.mediafire.com/?xuy0g0kddjve6lg โหลดแล้วเอาไฟล์ใส่ที่ localhost server นะครับ

-- ต้องใช้ jQuery ด้วยครับ

ส่วนเรื่อง z-index หมายถึงระดับ layer ของ element ครับ นึกถึงเวลาคุณใช้ Photoshop แล้วสร้าง layer ใหม่ layer ที่อยู่บนจะแสดงผลทับ ด้านล่างใช่ไหมครับ
หลักการเดียวกันกับ z-index ถ้ามี div สองอันที่แสดงตำแหน่งเดียวกัน การกำหนด z-index ให้อีกตัวหนึ่งมากกว่า มันก็จะแสดงทับตัวที่ z-index น้อยกว่า ครับ

เรื่องที่ใช้ frame, iframe, frameset อะไรนั้นยังไงก็ไม่สามารถทำให้ drop down menu ยืดลงมาเกินขอบของ frame ได้ครับ

** ยกเว้นคุณจะเขียน JavaScript สั่งให้ frame มันเพิ่ม height เวลา drop down menu ยืด

mSkyline · 03 ธันวาคม 2011, 10:58:01

อ้างถึงจาก: Fallen ใน 03 ธันวาคม 2011, 08:25:01
คือ เว็บเราเป้น .html เขียนเเต่ละหน้าเเยกกัน หน้า page เป็น หมด เวลาเราเปลี่ยนเมนูสวยๆมาใส่เว็บก็ต้องแก้ ทั้งหลายร้อยหน้าเลย
จึงคิดหาวิธีที่จะทีเดียวเเล้ว ไม่ต้องแก้ทุกหน้า จึงติดปัญหาเรื่อง ทำอย่างรไ ให้เมนูที่เราเปลี่ยนนี้เปลี่ยนที่จุดเดียว เเล้วมันก็มีผลกับทุกหน้าเดิม (ไม่ต้องเข้าแก้ทุกหน้า)
จึงคิดเอา iframe มาใช้ เเต่มันติดปัญหา คือ เมนูที่เป็นเเบบ Drop นั้น จะเเสดงมาไม่เกินความสูงของ iframe ที่เรากำหนด
ครั้นจะให้ความสุงนั้นมากๆก็ทำให้หน้าเพจเกิดที่ว่าง อีก (ระหว่างเมนูกับเนื้อหา)

ถ้าเป็น .php ก็แก้ปัญหานี้ได้เเล้วว เเต่ถ้ายังใช้ .html มันจะไม่ได้ครับ (เพิ่งคิดได้เนี่ย)

อ้างถึงจาก: Love Family ใน 02 ธันวาคม 2011, 22:55:56

include('') ต้องเป็น .php ครับ

เออ ช่ายจริงด้วยครับ
อาบน้ำอยู่ คิดไปคิดมา ถ้าเปลี่ยน .php ต้องแก้ path ทั้ง 200ลิ้งเลยอ่ะ เพราะเดิมเป็น .html

ประเด็นคือ คุณมีเว็บอยู๋แล้ว และต้องการแปลงให้มันแก้ได้ในจุดเดียว
ซึ่งถ้าคุณไล่ทำให้มันเป็น iframe กับ include มันก็วิธีเดียวกัน ต้องทำเหมือนกัน การทำงานเดียวกัน

แตถ้าเป็น include มันจะได้เรื่องของการตัดสินใจไงครับ
cms ส่วนใหญ่ก็ใช้แบบนี้ทั้งนั้น

execter · 03 ธันวาคม 2011, 12:25:43

ตอนนี้ถ้าคุณจะใช้ IFrame คุณก็ต้องแก้ทุกหน้าอยู่แล้ว งั้นคุณควรเปลี่ยนมาใช้ include ของ PHP ดีกว่าเพราะ Google มันไม่เข้าไปเก็บข้อมูลใน IFrame (หรือเปล่าหว่า) แต่ถ้าไมาสามารถเปลี่ยนได้ก็คงต้องพึ่ง IFrame ลองดูนะครับ

Fallen · 03 ธันวาคม 2011, 15:01:05

อ้างถึงจาก: execter ใน 03 ธันวาคม 2011, 12:25:43
ตอนนี้ถ้าคุณจะใช้ IFrame คุณก็ต้องแก้ทุกหน้าอยู่แล้ว งั้นคุณควรเปลี่ยนมาใช้ include ของ PHP ดีกว่าเพราะ Google มันไม่เข้าไปเก็บข้อมูลใน IFrame (หรือเปล่าหว่า) แต่ถ้าไมาสามารถเปลี่ยนได้ก็คงต้องพึ่ง IFrame ลองดูนะครับ

ใช่เเล้วครับ เเต่ติดปัญหาเรื่อง เเต่เสียดาย page ที่ อินเด็กไปเเล้วว

เว้นเเต่ว่า จะเขียน script ให้ rediret จาก error404.htmlโดยให้มันเเปลง url จาก path เดิม .htm เป็น .php (ที่เราเปลี่ยนนามสกุลเเล้ว)
มันจะเข้าไป link เดิมเลย เเต่ เขียนไม่เป็น

จะแก้ปัญหาทุกอย่างได้

อ้างถึงจาก: Nomkhonwaan ใน 03 ธันวาคม 2011, 10:33:32

อย่างที่ผมใช้ AJAX นะครับจะเขียนแบบนี้

/* index.html
/* -------------------------------------------------------------------*/
โค้ด เลือก ขยาย
<script type="text/javascript"> function loadUrl(url) { $.get(url, null, function(xhr){ $('#result').html(xhr); }); } </script>

และสร้าง div#result ขึ้นมาเพื่อใช้สำหรับใส่ response result จาก AJAX

โค้ด เลือก ขยาย
<div id="result"></div>

และที่เมนู ก็เพิ่มคำสั่งนี้เข้าไป สมมติเมนูผมเป็น tag a

โค้ด เลือก ขยาย
<a href="#" onclick="loadUrl(' --- ชื่อไฟล์ที่จะโหลด --- ')">Anchor Text</a>

จากคำสั่งข้างบนก็หมายความว่าเมื่อ click ที่ tag a ก็จะทำการเรียก function loadUrl และส่ง parameter เป็นชื่อไฟล์ที่จะโหลด จากนั้นก็โหลด
ผ่าน AJAX มาใส่ที่ div#result

ตัวอย่างครับ http://www.mediafire.com/?xuy0g0kddjve6lg โหลดแล้วเอาไฟล์ใส่ที่ localhost server นะครับ

-- ต้องใช้ jQuery ด้วยครับ

ส่วนเรื่อง z-index หมายถึงระดับ layer ของ element ครับ นึกถึงเวลาคุณใช้ Photoshop แล้วสร้าง layer ใหม่ layer ที่อยู่บนจะแสดงผลทับ ด้านล่างใช่ไหมครับ
หลักการเดียวกันกับ z-index ถ้ามี div สองอันที่แสดงตำแหน่งเดียวกัน การกำหนด z-index ให้อีกตัวหนึ่งมากกว่า มันก็จะแสดงทับตัวที่ z-index น้อยกว่า ครับ

เรื่องที่ใช้ frame, iframe, frameset อะไรนั้นยังไงก็ไม่สามารถทำให้ drop down menu ยืดลงมาเกินขอบของ frame ได้ครับ

** ยกเว้นคุณจะเขียน JavaScript สั่งให้ frame มันเพิ่ม height เวลา drop down menu ยืด

ลองดูเเล้วครับ เยี่ยมมากเลย
เเต่ ใส่ url เเบบเต็มมันไม่ไป อ่ะ หาในเว็บอยู่ ชม กว่าๆ ยังหาไม่เจอเลย

บวก ทุกท่าน เเล้วนะ ที่ไห้คำเเนะนำ

คนธรรมดา · 03 ธันวาคม 2011, 15:08:22

ซื้อหนังสือ php มาอ่าน ตั้งใจอ่านนิดหนึ่ง เล่มหนึ่งก็ไม่แพงนะครับ 150-300 บาท

ดีกว่าเยอะครับ รับประกันให้ครับ

bonshington · 03 ธันวาคม 2011, 15:25:29

css
button.my-menu ul{
position:absolute;
list-style:none;
display:none;
z-index:10;
margin-left:-50px;
margin-top:20px;
}
button.my-menu:hover ul{
display:inline-block;
}

html
<button class="my-menu">menu<ul><li>choice</li><li>choice</li></ul></button>

แสดงผลได้ดีบน chrome
แต่ถ้าเป็น ie ต้องใส่ js เพิ่มเอานิดนึง เพราะ มันไม่รองรับ :hover