[Tutorial] Javascript Box

~~Dentafrice1~~ · 21-05-2006, 12:15 AM

This Will Be The file you need to include to display it:

Box.php

PHP Code:


<?
include ("config.php");
$result = mysql_query("SELECT * FROM message WHERE status='Y'") 
or die(mysql_error()); 
while($row = mysql_fetch_array( $result )) {
?>
<script type="text/javascript">
/******************************************
* Popup Box- By Jim Silver @ jimsilver47******.com
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
//drag drop function for NS 4////
/////////////////////////////////
var dragswitch=0
var nsx
var nsy
var nstemp
var 
function drag_dropns(name){
if (!ns4)
return
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP) 
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}
function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}
function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}
//drag drop function for ie4+ and NS6////
/////////////////////////////////

function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
return false
}
}
function initializedrag(e){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "html" : document.compatMode && document.compatMode!="BackCompat"? "documentElement" : "body"
while (firedobj.tagName!=topelement.toUpperCase() && firedobj.id!="dragbar"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}
if (firedobj.id=="dragbar"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY
tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)
dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmouseup=new Function("dragapproved=false")
////drag drop functions end here//////
function hidebox(){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.showimage.visibility="hide"
}
</script>
<font size="2"><span>
<span class="style2"><strong>
<div style="left: 250px; width: 248px; position: absolute; top: 250px; height: 103px;" id="showimage">
<table cellspacing="0" cellpadding="2" width="250" bgcolor="#d0483c" border="0" id="table1">
<tbody>
<tr>
<td width="100%">
<table height="36" cellspacing="0" cellpadding="0" width="100%" border="0" id="table2">
<tbody>
<tr>
<td style="cursor: pointer;" onMouseDown="initializedrag(event)" id="dragbar" width="100%">
<ilayer onselectstart="return false" width="100%">
<layer onMouseOver="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseOut="dragswitch=0" width="100%"><font face="Verdana" color="#ffffff"><strong><font size="1">
 <small>
<img title="" height="11" alt="" src="lamp.gif" width="12"><? echo $row[title]; ?></small></strong></font>
</layer>
</ilayer></td>
<td style="cursor: hand;"><a onClick="hidebox();return false" href="#">
<img height="16" alt="" src="closed10734.gif" width="15" border="0"></a></td></tr>
<tr>
<td style="padding-right: 4px; padding-left: 4px; padding-bottom: 4px; padding-top: 4px;" width="100%" bgcolor="#c3200f" colspan="2"><!-- PUT YOUR CONTENT BETWEEN HERE --><font face="Verdana" color="#ffffff" size="1">
<? echo $row[message]; ?></td></tr></tbody></table></td></tr></tbody></table></div>
<? } ?>

To Put that on your main page Do:
<? include "Box.php"; ?>

This will be our Config.php:

PHP Code:


<?php
// ## Hab-World  - Configuration
define('MYSQL_HOST','localhost');
define('MYSQL_USER','');
define('MYSQL_PASS','');
define('MYSQL_NAME','');
$connection = mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS) or die("Unable to connect to the database.");
$db = mysql_select_db(MYSQL_NAME, $connection) or die("Unable to select database.");
?>

Admin.php

PHP Code:


<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>ID</title>
</head>
<body>
<table border="1" width="900" height="18">
 <tr>
  <td height="18" width="76" style="border-left-style:solid; border-left-width:1px; border-right-style:solid; border-right-width:1px; border-top-style:solid; border-top-width:1px; ">
  <b><font face="Verdana" size="1">ID</font></b></td>
  <td height="18" width="284" style="border-right-style:solid; border-right-width:1px; border-top-style:solid; border-top-width:1px; ">
  <b><font face="Verdana" size="1">Title</font></b></td>
  <td height="18" width="87" style="border-right-style:solid; border-right-width:1px; border-top-style:solid; border-top-width:1px; ">
  <b><font face="Verdana" size="1">Message</font></b></td>
  <td height="18" width="318" style="border-right-style:solid; border-right-width:1px; border-top-style:solid; border-top-width:1px; ">
  <b><font face="Verdana" size="1">Options</font></b></td>
  <td height="18" width="61" style="border-right-style:solid; border-right-width:1px; border-top-style:solid; border-top-width:1px; border-bottom-style:solid; border-bottom-width:1px">
  <b><font face="Verdana" size="1">Active</font></b></td>
 </tr>
<?
include ("config.php");
$result = mysql_query("SELECT * FROM message ORDER BY id") 
or die(mysql_error()); 
while($row = mysql_fetch_array( $result )) {
?> 
 <tr>
  <td height="18" width="76" style="border-style:solid; border-width:1px; ">
  <font face="Verdana" size="1"><? echo $row[id]; ?></font></td>
  <td height="18" width="284" style="border-right-style:solid; border-right-width:1px; border-bottom-style:solid; border-bottom-width:1px; border-top-style:solid; border-top-width:1px">
  <font face="Verdana" size="1"><? echo $row[title]; ?></font></td>
  <td height="18" width="87" style="border-right-style:solid; border-right-width:1px; border-bottom-style:solid; border-bottom-width:1px; border-top-style:solid; border-top-width:1px">
  <font face="Verdana" size="1"><? echo $row[message]; ?></font></td>
  <td height="18" width="318" style="border-right-style:solid; border-right-width:1px; border-bottom-style:solid; border-bottom-width:1px; border-top-style:solid; border-top-width:1px">
  <font face="Verdana" size="1">
  <a href="edit.php?id=<? echo $row[id]; ?>">Edit </a>&nbsp;/
  <a href="delete.php?id=<? echo $row[id]; ?>">Delete</a> /
  <a href="show.php?id=<? echo $row[id]; ?>">Show</a></font></td>
  <td height="18" width="61" style="border-right-style:solid; border-right-width:1px; border-top-style:solid; border-top-width:1px; border-bottom-style:solid; border-bottom-width:1px">
  <font face="Verdana" size="1"><? if($row[status] == "Y") { echo ("Yes"); }else{ echo ("No"); } ?>
  </font>
  </td>
 </tr>
 <? } ?>
</table>
<p align="center"><b><font face="Verdana" size="1"><a href="new.php">New Popup</a></font></b></p>
</body>
</html>

Delete.php:

PHP Code:


<?
include ("config.php");
$query = mysql_query("DELETE FROM `message` WHERE `id` = $_GET[id] LIMIT 1");
?>
<meta http-equiv=Refresh content=0;url=admin.php>

Edit.php:

PHP Code:


<?
include ("config.php");
$result = mysql_query("SELECT * FROM message WHERE id='$_GET[id]'") 
or die(mysql_error()); 
while($row = mysql_fetch_array( $result )) {
?>
<form method="POST" action="update.php?id=<? echo $row[id]; ?>">
 <p><b><font face="Verdana" size="2">Edit a Current</font></b><font size="2" face="Verdana"><b> 
 JavaScript Popup</b></font><font size="1" face="Verdana"><br>
 <hr></font>
 <p>Title: <input type="text" name="title" value="<? echo $row[title]; ?>" size="20">
<br>Message: <input type="text" name="message" value="<? echo $row[message]; ?>" size="20"> 
 <br>
 <br>
 Active:<br>
 <select size="1" name="status">
 <option>Y</option>
 <option>N</option>
 </select><br>
 <br>
 <input type="submit" value="Update" name="B1"></p>
</form>
<? } ?>

Insert.php:

PHP Code:


<?
include ("config.php");
$title = $_POST["title"];
$message = $_POST["message"];
mysql_query("UPDATE message SET status='N'");
mysql_query("INSERT INTO message 
(title, message, status) VALUES('$title', '$message', 'Y') ") 
or die(mysql_error()); 
?>
<meta http-equiv="Refresh" content="0;url=admin.php">

New.php:

PHP Code:


<?
include ("config.php");
$title = $_POST["title"];
$message = $_POST["message"];
mysql_query("UPDATE message SET status='N'");
mysql_query("INSERT INTO message 
(title, message, status) VALUES('$title', '$message', 'Y') ") 
or die(mysql_error()); 
?>
<meta http-equiv="Refresh" content="0;url=admin.php">

Update.php:

PHP Code:


<?
include ("config.php");
$title = $_POST["title"];
$message = $_POST["message"];
$status = $_POST["status"];
$result = mysql_query("UPDATE message SET title='$title', message='$message', status='$status' WHERE id=$_GET[id]") 
or die(mysql_error()); 
?>
<meta http-equiv="Refresh" content="0;url=admin.php">

SQL:

PHP Code:


CREATE TABLE `message` (
  `id` int(10) NOT NULL auto_increment,
  `status` text NOT NULL,
  `title` text NOT NULL,
  `message` text NOT NULL,
  PRIMARY KEY  (`id`)
) TYPE=MyISAM AUTO_INCREMENT=15 ;

Show.php:

PHP Code:


<?
include ("config.php");
$result = mysql_query("SELECT * FROM message WHERE id=$_GET[id]") 
or die(mysql_error()); 
while($row = mysql_fetch_array( $result )) {
?>
<script type="text/javascript">
/******************************************
* Popup Box- By Jim Silver @ jimsilver47******.com
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
//drag drop function for NS 4////
/////////////////////////////////
var dragswitch=0
var nsx
var nsy
var nstemp
function drag_dropns(name){
if (!ns4)
return
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}
function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}
function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}
//drag drop function for ie4+ and NS6////
/////////////////////////////////

function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
return false
}
}
function initializedrag(e){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "html" : document.compatMode && document.compatMode!="BackCompat"? "documentElement" : "body"
while (firedobj.tagName!=topelement.toUpperCase() && firedobj.id!="dragbar"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}
if (firedobj.id=="dragbar"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY
tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)
dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmouseup=new Function("dragapproved=false")
////drag drop functions end here//////
function hidebox(){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.showimage.visibility="hide"
}
</script>
<font size="2"><span>
<span class="style2"><strong>
<div style="left: 250px; width: 248px; position: absolute; top: 250px; height: 103px;" id="showimage">
<table cellspacing="0" cellpadding="2" width="250" bgcolor="#d0483c" border="0" id="table1">
<tbody>
<tr>
<td width="100%">
<table height="36" cellspacing="0" cellpadding="0" width="100%" border="0" id="table2">
<tbody>
<tr>
<td style="cursor: pointer;" onMouseDown="initializedrag(event)" id="dragbar" width="100%">
<ilayer onselectstart="return false" width="100%">
<layer onMouseOver="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseOut="dragswitch=0" width="100%"><font face="Verdana" color="#ffffff"><strong><font size="1">
 <small>
<img title="" height="11" alt="" src="lamp.gif" width="12"><? echo $row[title]; ?></small></strong></font>
</layer>
</ilayer></td>
<td style="cursor: hand;"><a onClick="hidebox();return false" href="#">
<img height="16" alt="" src="closed10734.gif" width="15" border="0"></a></td></tr>
<tr>
<td style="padding-right: 4px; padding-left: 4px; padding-bottom: 4px; padding-top: 4px;" width="100%" bgcolor="#c3200f" colspan="2"><!-- PUT YOUR CONTENT BETWEEN HERE --><font face="Verdana" color="#ffffff" size="1">
<? echo $row[message]; ?></td></tr></tbody></table></td></tr></tbody></table></div>
<? } ?>

Thats my little bad tutorial.

nets · 21-05-2006, 12:32 AM

You didn't really explain what it is, and I can't be bothered to read the code to work it out. Lol.

~~Dentafrice1~~ · 21-05-2006, 12:32 AM

I know.. Im going to do that in a sec :p

D3stroyer · 21-05-2006, 06:52 AM

just like i got accused of the code is from dynamic drive so its not yours.

Luckyrare · 21-05-2006, 10:04 AM

What ever it does, it doesnt need that much coding...

craigg. · 21-05-2006, 10:40 AM

I agree Danny, but what is this "Box" script all about? - You havn't explained what it does or anything

Halting · 21-05-2006, 10:42 AM

Is it a Javascript Alert thing? It doesn't look anything like one rofl.

Mentor · 21-05-2006, 11:26 AM

there looks to be an entire news system in there as well..

Halting · 21-05-2006, 11:31 AM

lmao - thats queer.

~~Slixor~~ · 21-05-2006, 11:55 AM

wth is this thing?? a box with admin controlls and needs a mysql database :S

Thread: [Tutorial] Javascript Box

Thread Tools

[Tutorial] Javascript Box

Posting Permissions