พิมพ์หน้านี้ - จะทำ Active Link ให้กับ link ของ iframe ปัจจุบันอ่ะครับ

หัวข้อ: จะทำ Active Link ให้กับ link ของ iframe ปัจจุบันอ่ะครับ
เริ่มหัวข้อโดย: javo ที่ 31 ตุลาคม 2012, 14:45:40

คือผมสร้าง function มา ให้ setSrc ของ iframe สำหรับคลิกที่ link แล้วเปลี่ยน src ของ iframe ตามนี้นะครับ

JAVASCRIPT

โค๊ด:

<!DOCTYPE html>
<html>
<head>
<script>
function setSrc(value) {
document.getElementById('iframe').src = value;
}
</script>

<style type="text/css">
ul.page-thumbs li { float:left; width:100px; height:105px; display:block; zoom:1; position:relative; margin-left:10px;}
ul.page-thumbs li a.active { background-position:0 -266px; text-decoration:none; 
background-color:#ffa7ef;
}
</style>




</head>
<body>
<div id="pageview" width="300px" height="300px">
 <iframe style="background: #000;" frameborder="0" scrolling="No" width="300px" height="300px" name="page"  id="iframe" src="http://www.w3schools.com/"  allowtransparency='true'></iframe>
</div>
&nbsp;
<div id="partmodule">
<ul class="page-thumbs">
 <li><a title='page1' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.thaiseoboard.com/');" id="page1">page 1</a>
   </li>
    <li><a title='page2' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.thaiware.com/');" id="page2">page 2</a>
   </li>
    <li><a title='page3' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.w3schools.com/');" id="page3">page 3</a>
   </li>
</ul>
</div>

</body>
</html>

ผมอยากจะให้ลิ้งค์ของหน้าที่เราเปิดอยู่ เป็น Active link อ่ะครับ เพื่อ จะได้รู้ว่า เรากำลังเปิด iframe ลิ้งค์ไหนอยู่ อาจจะใช้เป็น .addToggle('active')

สมมติว่า มี link ที่ target ไปที่ iframe ทั้ง หมด 3 link ได้แก่ page1, page2 และ page3
link ไหนที่ ที่เป็น src ตรงกับ iframe ก็ให้ set class เป็น Active อะไรประมาณนี้อ่ะครับผม

ลองหาอ่านบทความแล้วแต่ยัง นึกภาพไม่ค่อยออกอ่ะครับ
ขอคำแนะนำด้วยนะครับ ขอบคุณครับ

หัวข้อ: Re: จะทำ Active Link ให้กับ link ของ iframe ปัจจุบันอ่ะครับ
เริ่มหัวข้อโดย: Jellopy ที่ 31 ตุลาคม 2012, 16:26:20

เพิ่ม code นี้เข้าไปในส่วนที่เปลี่ยน src ของ iframe

โค๊ด:

document.location.hash = "something";

จะทำให้เปลี่ยน src แล้ว url จะมี something ต่อท้าย เช่น
yoursite.com/index.html -> yoursite.com/index.html#something

อย่าไปอ่านครับผมปล่อยไก่ :wanwan023:

หัวข้อ: Re: จะทำ Active Link ให้กับ link ของ iframe ปัจจุบันอ่ะครับ
เริ่มหัวข้อโดย: javo ที่ 31 ตุลาคม 2012, 16:55:27

อ้างจาก: Jellopy ที่ 31 ตุลาคม 2012, 16:26:20

เพิ่ม code นี้เข้าไปในส่วนที่เปลี่ยน src ของ iframe

โค๊ด:

document.location.hash = "something";

จะทำให้เปลี่ยน src แล้ว url จะมี something ต่อท้าย เช่น
yoursite.com/index.html -> yoursite.com/index.html#something

คือยังไงครับ มี something ต่อท้าย ผมไม่เข้าใจอ่ะครับ

หัวข้อ: Re: จะทำ Active Link ให้กับ link ของ iframe ปัจจุบันอ่ะครับ
เริ่มหัวข้อโดย: Jellopy ที่ 31 ตุลาคม 2012, 21:17:37

ผมเข้าใจผิดเองหละครับ :P :P

เอาใหม่
ใช้ jQuery เข้าช่วย

HTML

โค๊ด:

<style type="text/css">
#menu a.active {
	color:red;
}
</style>

<ul id="menu">
	<li><a>Clip1</a></li>
	<li><a>Clip2</a></li>
	<li><a>Clip3</a></li>
</ul>

jQuery

โค๊ด:

$('#menu a').click(function(){
	$('#menu a').removeClass('active');
	$(this).addClass('active');
});

หัวข้อ: Re: จะทำ Active Link ให้กับ link ของ iframe ปัจจุบันอ่ะครับ
เริ่มหัวข้อโดย: javo ที่ 31 ตุลาคม 2012, 22:33:47

อ้างจาก: Jellopy ที่ 31 ตุลาคม 2012, 21:17:37

ผมเข้าใจผิดเองหละครับ :P :P

เอาใหม่
ใช้ jQuery เข้าช่วย

HTML

โค๊ด:

<style type="text/css">
#menu a.active {
	color:red;
}
</style>

<ul id="menu">
	<li><a>Clip1</a></li>
	<li><a>Clip2</a></li>
	<li><a>Clip3</a></li>
</ul>

jQuery

โค๊ด:

$('#menu a').click(function(){
	$('#menu a').removeClass('active');
	$(this).addClass('active');
});

ขอบคุณมากครับ แต่ผมเอาไปใช้แล้วไม่ได้ผลอ่ะครับ รบกวนลองใช้โค๊ด ด้านล่างนี้ ได้รึเปล่าครับ

โค๊ด:

<!DOCTYPE html>
<html>
<head>
<script>
function setSrc(value) {
document.getElementById('iframe').src = value;
}
</script>

<style type="text/css">
ul.page-thumbs li { float:left; width:100px; height:105px; display:block; zoom:1; position:relative; margin-left:10px;}
ul.page-thumbs li a.active { background-position:0 -266px; text-decoration:none; 
background-color:#ffa7ef;
}
</style>




</head>
<body>
<div id="pageview" width="300px" height="300px">
 <iframe style="background: #000;" frameborder="0" scrolling="No" width="300px" height="300px" name="page"  id="iframe" src="http://www.w3schools.com/"  allowtransparency='true'></iframe>
</div>
&nbsp;
<div id="partmodule">
<ul class="page-thumbs">
 <li><a title='page1' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.thaiseoboard.com/');" id="page1">page 1</a>
   </li>
    <li><a title='page2' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.thaiware.com/');" id="page2">page 2</a>
   </li>
    <li><a title='page3' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.w3schools.com/');" id="page3">page 3</a>
   </li>
</ul>
</div>

</body>
</html>

หัวข้อ: Re: จะทำ Active Link ให้กับ link ของ iframe ปัจจุบันอ่ะครับ
เริ่มหัวข้อโดย: Jellopy ที่ 01 พฤศจิกายน 2012, 00:11:10

ตามนี้ :wanwan022:
ที่ว่าใช้ไม่ได้เนี่ย ลืมใส่ jQuery เข้ามารึเปล่า

โค๊ด:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
function setSrc(value) {
document.getElementById('iframe').src = value;
}
jQuery(document).ready(function(){	
	$('.page-thumbs a').click(function(){
		$('.page-thumbs a').removeClass('active');
		$(this).addClass('active');
	});
});
</script>

<style type="text/css">
ul.page-thumbs li { float:left; width:100px; height:105px; display:block; zoom:1; position:relative; margin-left:10px;}
ul.page-thumbs li a.active { background-position:0 -266px; text-decoration:none; 
background-color:#ffa7ef;
}
</style>




</head>
<body>
<div id="pageview" width="300px" height="300px">
 <iframe style="background: #000;" frameborder="0" scrolling="No" width="300px" height="300px" name="page"  id="iframe" src="http://www.w3schools.com/"  allowtransparency='true'></iframe>
</div>
&nbsp;
<div id="partmodule">
<ul class="page-thumbs">
 <li><a title='page1' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.thaiseoboard.com/');" id="page1">page 1</a>
   </li>
    <li><a title='page2' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.thaiware.com/');" id="page2">page 2</a>
   </li>
    <li><a title='page3' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.w3schools.com/');" id="page3">page 3</a>
   </li>
</ul>
</div>

</body>
</html>

หัวข้อ: Re: จะทำ Active Link ให้กับ link ของ iframe ปัจจุบันอ่ะครับ
เริ่มหัวข้อโดย: javo ที่ 01 พฤศจิกายน 2012, 00:21:32

อ้างจาก: Jellopy ที่ 01 พฤศจิกายน 2012, 00:11:10

ตามนี้ :wanwan022:
ที่ว่าใช้ไม่ได้เนี่ย ลืมใส่ jQuery เข้ามารึเปล่า

โค๊ด:

<!DOCTYPE html>
<html>
<head>
<script src="[url]http://code.jquery.com/jquery-1.8.2.min.js[/url]"></script>
<script>
function setSrc(value) {
document.getElementById('iframe').src = value;
}
jQuery(document).ready(function(){	
	$('.page-thumbs a').click(function(){
		$('.page-thumbs a').removeClass('active');
		$(this).addClass('active');
	});
});
</script>

<style type="text/css">
ul.page-thumbs li { float:left; width:100px; height:105px; display:block; zoom:1; position:relative; margin-left:10px;}
ul.page-thumbs li a.active { background-position:0 -266px; text-decoration:none; 
background-color:#ffa7ef;
}
</style>




</head>
<body>
<div id="pageview" width="300px" height="300px">
 <iframe style="background: #000;" frameborder="0" scrolling="No" width="300px" height="300px" name="page"  id="iframe" src="[url]http://www.w3schools.com/[/url]"  allowtransparency='true'></iframe>
</div>
&nbsp;
<div id="partmodule">
<ul class="page-thumbs">
 <li><a title='page1' target="iframe" href="javascript:;" onclick="javascript:setSrc('[url]http://www.thaiseoboard.com/'[/url]);" id="page1">page 1</a>
   </li>
    <li><a title='page2' target="iframe" href="javascript:;" onclick="javascript:setSrc('[url]http://www.thaiware.com/'[/url]);" id="page2">page 2</a>
   </li>
    <li><a title='page3' target="iframe" href="javascript:;" onclick="javascript:setSrc('[url]http://www.w3schools.com/'[/url]);" id="page3">page 3</a>
   </li>
</ul>
</div>

</body>
</html>

:wanwan012: แฮ่ๆ ขอบคุณพี่มากเลยครับๆ คอยชี้แนะผม มาโดยตลอด

หัวข้อ: Re: จะทำ Active Link ให้กับ link ของ iframe ปัจจุบันอ่ะครับ
เริ่มหัวข้อโดย: javo ที่ 01 พฤศจิกายน 2012, 00:36:17

อ้างจาก: Jellopy ที่ 01 พฤศจิกายน 2012, 00:11:10

ตามนี้ :wanwan022:
ที่ว่าใช้ไม่ได้เนี่ย ลืมใส่ jQuery เข้ามารึเปล่า

โค๊ด:

<!DOCTYPE html>
<html>
<head>
<script src="[url]http://code.jquery.com/jquery-1.8.2.min.js[/url]"></script>
<script>
function setSrc(value) {
document.getElementById('iframe').src = value;
}
jQuery(document).ready(function(){	
	$('.page-thumbs a').click(function(){
		$('.page-thumbs a').removeClass('active');
		$(this).addClass('active');
	});
});
</script>

<style type="text/css">
ul.page-thumbs li { float:left; width:100px; height:105px; display:block; zoom:1; position:relative; margin-left:10px;}
ul.page-thumbs li a.active { background-position:0 -266px; text-decoration:none; 
background-color:#ffa7ef;
}
</style>




</head>
<body>
<div id="pageview" width="300px" height="300px">
 <iframe style="background: #000;" frameborder="0" scrolling="No" width="300px" height="300px" name="page"  id="iframe" src="[url]http://www.w3schools.com/[/url]"  allowtransparency='true'></iframe>
</div>
&nbsp;
<div id="partmodule">
<ul class="page-thumbs">
 <li><a title='page1' target="iframe" href="javascript:;" onclick="javascript:setSrc('[url]http://www.thaiseoboard.com/'[/url]);" id="page1">page 1</a>
   </li>
    <li><a title='page2' target="iframe" href="javascript:;" onclick="javascript:setSrc('[url]http://www.thaiware.com/'[/url]);" id="page2">page 2</a>
   </li>
    <li><a title='page3' target="iframe" href="javascript:;" onclick="javascript:setSrc('[url]http://www.w3schools.com/'[/url]);" id="page3">page 3</a>
   </li>
</ul>
</div>

</body>
</html>

ติดอยู่นิดนึงครับผม คือ ตอนนี้มันไม่เป็น class active ตั้งแต่ตอนแรก เราต้องคลิกก่อน ถึงจะเปลี่ยนเป็น Active
ถ้าจะให้มันแสดงอัตโนมัติ ตั้งแต่แรก ต้องทำไงหรอครับ

หัวข้อ: Re: จะทำ Active Link ให้กับ link ของ iframe ปัจจุบันอ่ะครับ
เริ่มหัวข้อโดย: Jellopy ที่ 01 พฤศจิกายน 2012, 16:51:49

ก็ตั้ง class="active" ให้มันแต่แรกเลยสิครับ :P

หัวข้อ: Re: จะทำ Active Link ให้กับ link ของ iframe ปัจจุบันอ่ะครับ
เริ่มหัวข้อโดย: javo ที่ 02 พฤศจิกายน 2012, 16:17:14

อ้างจาก: Jellopy ที่ 01 พฤศจิกายน 2012, 16:51:49

ก็ตั้ง class="active" ให้มันแต่แรกเลยสิครับ :P

คือผมจะเอาไปประยุกต์ใช้ กับการตั้งเวลาเปลี่ยนหน้า iframe ด้วย อ่ะครับผม
ถ้าเราตั้งเงื่อนไขว่า ถ้าค่า src ใน iframe ตรงกับ value ใน link ก็ให้ active ลิ้งนั้นอ่ะ ครับ
อ้างอิงจากโค็ดด้านบนนะครับผม

ขอบคุณมากครับ

หัวข้อ: Re: จะทำ Active Link ให้กับ link ของ iframe ปัจจุบันอ่ะครับ
เริ่มหัวข้อโดย: javo ที่ 04 พฤศจิกายน 2012, 01:48:34

ท่านใดพอทราบ แนะนำทีนะครับ :wanwan022:

หัวข้อ: Re: จะทำ Active Link ให้กับ link ของ iframe ปัจจุบันอ่ะครับ
เริ่มหัวข้อโดย: Jellopy ที่ 04 พฤศจิกายน 2012, 16:48:44

โค๊ด:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
jQuery(document).ready(function(){	
	var changeactive = function(e){
		$('.page-thumbs a').removeClass('active');
		$(e).addClass('active');
	};
	$(window).load(function(){
		$('.page-thumbs a').each(function(){
			if($('#iframe').attr('src') == $(this).attr('href'))
				changeactive(this);
		});
	});
	$('.page-thumbs a').click(function(){
		$('#iframe').attr('src',$(this).attr('href'));
		changeactive(this);
		return false;
	});
});
</script>

<style type="text/css">
ul.page-thumbs li { float:left; width:100px; height:105px; display:block; zoom:1; position:relative; margin-left:10px;}
ul.page-thumbs li a.active { background-position:0 -266px; text-decoration:none; 
background-color:#ffa7ef;
}
</style>




</head>
<body>
<div id="pageview" width="300px" height="300px">
 <iframe style="background: #000;" frameborder="0" scrolling="No" width="300px" height="300px" name="page"  id="iframe" src="http://www.w3schools.com/"  allowtransparency='true'></iframe>
</div>
&nbsp;
<div id="partmodule">
<ul class="page-thumbs">
 <li><a title='page1' target="iframe" href="http://www.thaiseoboard.com/" id="page1">page 1</a>
   </li>
    <li><a title='page2' target="iframe" href="http://www.thaiware.com/" id="page2">page 2</a>
   </li>
    <li><a title='page3' target="iframe" href="http://www.w3schools.com/" id="page3">page 3</a>
   </li>
</ul>
</div>

</body>
</html>

รื้อเลยละกัน แบบเดิมเขียนแล้ววุ่นวาย :wanwan023:

หัวข้อ: Re: จะทำ Active Link ให้กับ link ของ iframe ปัจจุบันอ่ะครับ
เริ่มหัวข้อโดย: javo ที่ 04 พฤศจิกายน 2012, 22:43:17

อ้างจาก: Jellopy ที่ 04 พฤศจิกายน 2012, 16:48:44

โค๊ด:

<!DOCTYPE html>
<html>
<head>
<script src="[url]http://code.jquery.com/jquery-1.8.2.min.js[/url]"></script>
<script>
jQuery(document).ready(function(){	
	var changeactive = function(e){
		$('.page-thumbs a').removeClass('active');
		$(e).addClass('active');
	};
	$(window).load(function(){
		$('.page-thumbs a').each(function(){
			if($('#iframe').attr('src') == $(this).attr('href'))
				changeactive(this);
		});
	});
	$('.page-thumbs a').click(function(){
		$('#iframe').attr('src',$(this).attr('href'));
		changeactive(this);
		return false;
	});
});
</script>

<style type="text/css">
ul.page-thumbs li { float:left; width:100px; height:105px; display:block; zoom:1; position:relative; margin-left:10px;}
ul.page-thumbs li a.active { background-position:0 -266px; text-decoration:none; 
background-color:#ffa7ef;
}
</style>




</head>
<body>
<div id="pageview" width="300px" height="300px">
 <iframe style="background: #000;" frameborder="0" scrolling="No" width="300px" height="300px" name="page"  id="iframe" src="[url]http://www.w3schools.com/[/url]"  allowtransparency='true'></iframe>
</div>
&nbsp;
<div id="partmodule">
<ul class="page-thumbs">
 <li><a title='page1' target="iframe" href="[url]http://www.thaiseoboard.com/[/url]" id="page1">page 1</a>
   </li>
    <li><a title='page2' target="iframe" href="[url]http://www.thaiware.com/[/url]" id="page2">page 2</a>
   </li>
    <li><a title='page3' target="iframe" href="[url]http://www.w3schools.com/[/url]" id="page3">page 3</a>
   </li>
</ul>
</div>

</body>
</html>

รื้อเลยละกัน แบบเดิมเขียนแล้ววุ่นวาย :wanwan023:

ขอบคุณมากครับ สุดยอดเลยครับ โค๊ดเดิม มันทำยุ่งยาก หรือว่า มันไม่สามารถทำได้ครับ

หัวข้อ: Re: จะทำ Active Link ให้กับ link ของ iframe ปัจจุบันอ่ะครับ
เริ่มหัวข้อโดย: javo ที่ 04 ธันวาคม 2012, 21:37:21

อ้างจาก: Jellopy ที่ 04 พฤศจิกายน 2012, 16:48:44

โค๊ด:

<!DOCTYPE html>
<html>
<head>
<script src="[url]http://code.jquery.com/jquery-1.8.2.min.js[/url]"></script>
<script>
jQuery(document).ready(function(){	
	var changeactive = function(e){
		$('.page-thumbs a').removeClass('active');
		$(e).addClass('active');
	};
	$(window).load(function(){
		$('.page-thumbs a').each(function(){
			if($('#iframe').attr('src') == $(this).attr('href'))
				changeactive(this);
		});
	});
	$('.page-thumbs a').click(function(){
		$('#iframe').attr('src',$(this).attr('href'));
		changeactive(this);
		return false;
	});
});
</script>

<style type="text/css">
ul.page-thumbs li { float:left; width:100px; height:105px; display:block; zoom:1; position:relative; margin-left:10px;}
ul.page-thumbs li a.active { background-position:0 -266px; text-decoration:none; 
background-color:#ffa7ef;
}
</style>




</head>
<body>
<div id="pageview" width="300px" height="300px">
 <iframe style="background: #000;" frameborder="0" scrolling="No" width="300px" height="300px" name="page"  id="iframe" src="[url]http://www.w3schools.com/[/url]"  allowtransparency='true'></iframe>
</div>
&nbsp;
<div id="partmodule">
<ul class="page-thumbs">
 <li><a title='page1' target="iframe" href="[url]http://www.thaiseoboard.com/[/url]" id="page1">page 1</a>
   </li>
    <li><a title='page2' target="iframe" href="[url]http://www.thaiware.com/[/url]" id="page2">page 2</a>
   </li>
    <li><a title='page3' target="iframe" href="[url]http://www.w3schools.com/[/url]" id="page3">page 3</a>
   </li>
</ul>
</div>

</body>
</html>

รื้อเลยละกัน แบบเดิมเขียนแล้ววุ่นวาย :wanwan023:

ผมเอาไปลองใช้ดูแล้ว แต่ ผมต้องใช้ รูปแบบโค๊ดตามที่ผมโพสไว้ข้างบน อ่ะครับ รบกวนอีกทีได้ รึเปล่าครับ

ในส่วนของลิ้ง ผม จำเป็นต้องใช้แบบด้านล่างอ่ะ ครับ :wanwan008:

โค๊ด:

<ul class="page-thumbs">
 <li><a title='page1' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.thaiseoboard.com/');" id="page1">page 1</a>
   </li>
    <li><a title='page2' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.thaiware.com/');" id="page2">page 2</a>
   </li>
    <li><a title='page3' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.w3schools.com/');" id="page3">page 3</a>
   </li>
</ul>

หัวข้อ: Re: จะทำ Active Link ให้กับ link ของ iframe ปัจจุบันอ่ะครับ
เริ่มหัวข้อโดย: javo ที่ 15 ธันวาคม 2012, 14:08:58

มีใคร พอจะช่วยแนะนำได้ ไหม ครับ

SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com

ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: javo ที่ 31 ตุลาคม 2012, 14:45:40