Chat บนเว็บแนว ๆ Facebook ลองดูกันครับ

armddd · 04 พฤษภาคม 2011, 16:57:06

ตอนแรกผมทำกะงง ๆ ตอนนี้เสร็จแล้วครับ

ประมาณนี่ครับ แบบกดแล้วโชว์ กดอีกทีแล้วหาย

ลองดูตัวอย่างได้ที่เว็บ http://www.iyatv.com/

นี่ code


<style type="text/css">
.openchat{
BORDER-BOTTOM: #bbdb8e 1px solid;
BORDER-LEFT: #bbdb8e 1px solid;
PADDING-BOTTOM: 2px;
PADDING-LEFT: 8px;
PADDING-RIGHT: 8px;
BACKGROUND: #447302;
COLOR: #fff; FONT-SIZE: 12px;
BORDER-TOP: #bbdb8e 1px solid;
BORDER-RIGHT: #bbdb8e 1px solid;
PADDING-TOP: 2px;font-weight:bold;
position:fixed;right:10px;bottom:1px;
}
</style>



<script type="text/javascript">
var status = "hidden";
var change = 1;
function chat()
{
if(status=="hidden" && change != 0 )
{
document.getElementById("chat").style.visibility="visible";
status = "visible";
change = 0;
 end;
}
if(status=="visible" && change != 1)
{
document.getElementById("chat").style.visibility="hidden";
status = "hidden";
change = 1;
 end;
}
}
document.write('<div id="chat" style="position:fixed;right:10px;bottom:25px; border:#bbdb8e 2px solid; visibility:hidden;z-index:100;" >');
document.write('<iframe src="........." width="450" height="521" scrolling="auto" frameborder="0" ></iframe></div>');
</script>


<div id="openchat" class="openchat" onclick="chat()">Chat มันส์</div>

ส่วนนี่สคริป Chat ครับ

ลิงค์ -->>>> hทีทีp://www.iyatv.com/free/yshout5.rar

เอาไปโมใช้กันตามสบายเลยนะครับ

sornram9254 · 04 พฤษภาคม 2011, 17:54:36

ช่วยได้แค่นี้แหละครับ ผมไม่ค่อยเป็นอ่ะครับ แหะๆ
index.html

โค้ด เลือก


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<div id="box">11111<br>22222<br>33333<br>
</div>
<input type="button" onclick="Hide()" value="Hide" />
<input type="button" onclick="show()" value="show" />
</body>
</html>

javascript.js

โค้ด เลือก


function Hide()
{
document.getElementById("box").style.visibility="hidden";
}
function show()
{
document.getElementById("box").style.visibility="visible";
}

ieiq · 04 พฤษภาคม 2011, 18:04:55

ขอบคุณครบ

armddd · 04 พฤษภาคม 2011, 21:02:01

ทำได้แล้วครับ

แล้วจะทำยังไงให้ปุ่มมันติดอยู่ที่ status bar ตลอดครับ เหมือนของ facebook ครับ

แบบนี้ครับ

Pang25441 · 04 พฤษภาคม 2011, 23:08:08

css

position : fixed; <<ถ้าจำไม่ผิด
bottom: 0%;
left หรือ right แล้วแต่

baTygol · 04 พฤษภาคม 2011, 23:24:49

:wanwan017:ตามมาเก็บความรู้ครับ

sornram9254 · 05 พฤษภาคม 2011, 08:09:29

โค้ด เลือก

http://www.thaicreate.com/php/forum/019883.html

อันนี้น่าจะ work กว่านะครับ ลองใหม่ดู

อ้างถึง<script type="text/javascript">
   function toggle() {
      var ds = document.getElementById("display");
      if(ds.style.display == 'none')
         ds.style.display = 'block';
      else
         ds.style.display = 'none';
   }
</script>
<input type="button" name="btn" id="btn" value="Show" onclick='toggle()' />
<div id='display' style='display:none;'>dddddddddddddd</div>

ปล. ฝากติชมเว็บผมทีครับ ทำรอบนี้ตั้งใจสุดๆ เขียน css ทั้งวันทั้งคืนเลย

http://www.sornram9254.com/

sornram9254 · 05 พฤษภาคม 2011, 09:28:49

มั่วมาให้ได้เท่านี้แหละครับ ที่เหลือก็ไปยำเองแล้วกันนะครับ ฮ่าๆๆ ๆ

โค้ด เลือก


<style type="text/css">
.button{
	height:25px;
	text-align:center;
}
.button, .content{
	cursor:pointer;
	background:#eee;
	float:right;
	position:fixed;
	border:1px solid #999;
	width:250px;
}
.main{
	float:right;
	width:250px;
	height:100%;
}
</style>

<script type="text/javascript">
	function toggle() {
		var ds = document.getElementById("display");
		if(ds.style.display == 'none')
			ds.style.display = 'block';
		else 
			ds.style.display = 'none';
}
</script>

<div class="main">
<div class="content">
<div id='display' style='display:none;'>
<!-- BEGIN DATA -->
0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>
<!-- END DATA -->
</div>
</div>
<div class="button" value="Show" onclick='toggle()'>
show
</div>
</div>

armddd · 05 พฤษภาคม 2011, 11:05:51

ขอบคุณมากครับ ได้แล้วคับตอนนี้

ระบบ Chat ลองเข้าไปดูกันได้นะครับ เว็บที่ ลายเซ็นต์

9inepiek · 05 พฤษภาคม 2011, 11:11:05

อ้างถึงจาก: armddd ใน 05 พฤษภาคม 2011, 11:05:51
ขอบคุณมากครับ ได้แล้วคับตอนนี้

ระบบ Chat ลองเข้าไปดูกันได้นะครับ เว็บที่ ลายเซ็นต์

แวะไปดูแล้วครับ

ทำยังไงหว่า
อยากทำบ้าง
555+

bigbossbear · 05 พฤษภาคม 2011, 11:13:27

อ้างถึงจาก: armddd ใน 05 พฤษภาคม 2011, 11:05:51
ขอบคุณมากครับ ได้แล้วคับตอนนี้

ระบบ Chat ลองเข้าไปดูกันได้นะครับ เว็บที่ ลายเซ็นต์

ป้าดๆๆ แจ่ม ทำยังไงเนี่ย อยากได้มั่ง

sornram9254 · 05 พฤษภาคม 2011, 11:16:22

ผมไปแกะมาเรียบร้อยและครับฮ่าๆๆ ๆ

โค้ด เลือก


<style type="text/css">
.openchat{
BORDER-BOTTOM: #bbdb8e 1px solid;
BORDER-LEFT: #bbdb8e 1px solid;
PADDING-BOTTOM: 2px;
PADDING-LEFT: 8px;
PADDING-RIGHT: 8px;
BACKGROUND: #447302;
COLOR: #fff; FONT-SIZE: 12px;
BORDER-TOP: #bbdb8e 1px solid;
BORDER-RIGHT: #bbdb8e 1px solid;
PADDING-TOP: 2px;font-weight:bold;
position:fixed;right:10px;bottom:1px;
}
</style>



<script type="text/javascript">
var status = "hidden";
var change = 1;
function chat()
{
if(status=="hidden" && change != 0 )
{
document.getElementById("chat").style.visibility="visible";
status = "visible";
change = 0;
 end;
}
if(status=="visible" && change != 1)
{
document.getElementById("chat").style.visibility="hidden";
status = "hidden";
change = 1;
 end;
}
}
document.write('<div id="chat" style="position:fixed;right:10px;bottom:25px; border:#bbdb8e 2px solid; visibility:hidden;z-index:100;" >');
document.write('<iframe src="chat/example/dark.html" width="450" height="521" scrolling="auto" frameborder="0" ></iframe></div>');
</script>


<div id="openchat" class="openchat" onclick="chat()">Chat มันส์</div>

ปล. ไม่รู้ว่า จขกท จะว่าเปล่า แอบแกะโค้ดเขามาแจก

armddd · 05 พฤษภาคม 2011, 11:28:32

อ้างถึงจาก: sornram9254 ใน 05 พฤษภาคม 2011, 11:16:22
ผมไปแกะมาเรียบร้อยและครับฮ่าๆๆ ๆ

โค้ด เลือก ขยาย
<style type="text/css"> .openchat{ BORDER-BOTTOM: #bbdb8e 1px solid; BORDER-LEFT: #bbdb8e 1px solid; PADDING-BOTTOM: 2px; PADDING-LEFT: 8px; PADDING-RIGHT: 8px; BACKGROUND: #447302; COLOR: #fff; FONT-SIZE: 12px; BORDER-TOP: #bbdb8e 1px solid; BORDER-RIGHT: #bbdb8e 1px solid; PADDING-TOP: 2px;font-weight:bold; position:fixed;right:10px;bottom:1px; } </style> <script type="text/javascript"> var status = "hidden"; var change = 1; function chat() { if(status=="hidden" && change != 0 ) { document.getElementById("chat").style.visibility="visible"; status = "visible"; change = 0; end; } if(status=="visible" && change != 1) { document.getElementById("chat").style.visibility="hidden"; status = "hidden"; change = 1; end; } } document.write('<div id="chat" style="position:fixed;right:10px;bottom:25px; border:#bbdb8e 2px solid; visibility:hidden;z-index:100;" >'); document.write('<iframe src="chat/example/dark.html" width="450" height="521" scrolling="auto" frameborder="0" ></iframe></div>'); </script> <div id="openchat" class="openchat" onclick="chat()">Chat มันส์</div>

ปล. ไม่รู้ว่า จขกท จะว่าเปล่า แอบแกะโค้ดเขามาแจก

ฮา ๆๆๆ รวดเร็วมากครับท่าน แกะไงหว่าเร็วมาก มีโปรแกรมเหรอครับ

Pang25441 · 05 พฤษภาคม 2011, 11:29:48

Big mini chat
(ใหญ่เกินกว่าจะเอาไปแอบไว้ตรงนั้น

)

ว่าแล้วก็เอาไปทำบ้างดีกว่า (ทำห้องแชตไว้อยู่อันนึง)
เดียวจะทำเป็นเวอชั่น mini เสริม

sornram9254 · 05 พฤษภาคม 2011, 11:32:57

เปล่าครับ ผมก็ view source ไปเรื่อยๆ อ้อ ผมแนะนำอย่างครับ เขียน css แบบรวบรัดไปเลยครับ ผมแก้มาให้บางส่วนแล้วครับ

อ้างถึง

<style type="text/css">
.openchat{
   border:#bbdb8e 1px 1px 1px 1px solid; /* ความหมาย : TOP , Right , Bottom , Left (ตามเข็มนาฬิกาครับ) */
   padding:2px 8px 2px 8px;
   BACKGROUND:#447302;
   COLOR: #fff; FONT-SIZE: 12px;
   font-weight:bold;
   position:fixed;
   right:10px;
   bottom:1px;
}
</style>



<script type="text/javascript">
   var status = "hidden";
   var change = 1;
   function chat()
   {
      if(status=="hidden" && change != 0 )
         {
            document.getElementById("chat").style.visibility="visible";
            status = "visible";
            change = 0;
            end;
         }
      if(status=="visible" && change != 1)
         {
            document.getElementById("chat").style.visibility="hidden";
            status = "hidden";
            change = 1;
            end;
         }
   }

document.write('<div id="chat" style="position:fixed;right:10px;bottom:25px; border:#bbdb8e 2px solid; visibility:hidden;z-index:100;" >');
document.write('<iframe src="chat/example/dark.html" width="450" height="521" scrolling="auto" frameborder="0" ></iframe></div>');
</script>


<div id="openchat" class="openchat" onclick="chat()">Chat มันส์</div>

ปล. ผมเพิ่งหัด css น่ะครับ

9inepiek · 05 พฤษภาคม 2011, 11:59:39

เอาไปใช้ยังไงหรอครับ

ผมเอาไปใช้แล้ว พอคลิกแล้วมันขึ้นหน้า 404
เว็บตามลายเซ็นต์
ขอบคุณครับ

sornram9254 · 05 พฤษภาคม 2011, 12:10:53

ถ้าไม่ได้เขียน css เองก็ปล่อยไปก็ได้ครับ เดี๋ยวไปแก้มันจะเละเปล่าๆ

armddd · 05 พฤษภาคม 2011, 13:14:11

อ้างถึงจาก: sornram9254 ใน 05 พฤษภาคม 2011, 12:10:53
ถ้าไม่ได้เขียน css เองก็ปล่อยไปก็ได้ครับ เดี๋ยวไปแก้มันจะเละเปล่าๆ

css กับ javascript นั้น ผมเขียนเองครับ

mitigatez · 05 พฤษภาคม 2011, 13:50:46

เข้ามาแล้วได้ความรู้เลยยยยย
ขอบคุณมากครับ ^^

popcorns · 05 พฤษภาคม 2011, 13:59:08

ผมขอสคริปหน้า chat บ้างได้ไหมครับ