Popup Box (DHTML Announcement Box) - Collection of Scripts - Other - uCoz Community
You logged in as Guest
Username/E-mail:
Recent messages · Members · Forum rules · FAQ · SEARCH Registration · Log in


We are in the second round! Let's keep voting!

Page 1 of 11
Forum moderator: Dartz 
uCoz Community » Other » Collection of Scripts » Popup Box (DHTML Announcement Box)
Popup Box (DHTML Announcement Box)
MistoryDate: Friday, 2009-10-09, 1:31 Am | Message # 1
Constant
Group: Checked
Messages: 275
Awards: 10
Reputation: 8
Status: Offline
Author: Jim Silver

Description: Use this custom DHTML "widget" to uniquely present new or notable pieces of information to your visitors. The interface is cross browser compatible, and can be dragged/ hidden freely by the user. Now that's something new in itself!

Step 1: Add the following script to the <HEAD> section of your page:

Code
<script type="text/javascript">

/******************************************
* Popup Box- By Jim Silver @ jimsilver47@yahoo.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>

Step 2: Insert the below HTML code to the BOTTOM of your page, right above the </BODY> tag itself:

Code
<div id="showimage" style="position:absolute;width:250px;left:250px;top:250px">

<table border="0" width="250" bgcolor="#000080" cellspacing="0" cellpadding="2">
     <tr>
       <td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0"
       height="36px">
         <tr>
           <td id="dragbar" style="cursor:hand; cursor:pointer" width="100%" onMousedown="initializedrag(event)"><ilayer width="100%" onSelectStart="return false"><layer width="100%" onMouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseout="dragswitch=0"><font face="Verdana"
           color="#FFFFFF"><strong><small>Announcement Box</small></strong></font></layer></ilayer></td>
           <td style="cursor:hand"><a href="#" onClick="hidebox();return false"><img src="http://www.dynamicdrive.com/dynamicindex11/close.gif" width="16px"
           height="14px" border=0></a></td>
         </tr>
         <tr>
           <td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">

<!-- PUT YOUR CONTENT BETWEEN HERE -->

Testing 1 2 3

<!-- END YOUR CONTENT HERE -->

</td>
         </tr>
       </table>
       </td>
     </tr>
</table>
</div>

You can edit the text in the message block in the second code.

Heres a quote of the second code (editable parts marked in blue):

Quote
<div id="showimage" style="position:absolute;width:250px;left:250px;top:250px">

<table border="0" width="250" bgcolor="#000080" cellspacing="0" cellpadding="2">
<tr>
<td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0"
height="36px">
<tr>
<td id="dragbar" style="cursor:hand; cursor:pointer" width="100%" onMousedown="initializedrag(event)"><ilayer width="100%" onSelectStart="return false"><layer width="100%" onMouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseout="dragswitch=0"><font face="Verdana"
color="#FFFFFF"><strong><small>Box Title</small></strong></font></layer></ilayer></td>
<td style="cursor:hand"><a href="#" onClick="hidebox();return false"><img src="Close button image link goes here" width="16px"
height="14px" border=0></a></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">

<!-- PUT YOUR CONTENT BETWEEN HERE -->

Message Text goes here...

<!-- END YOUR CONTENT HERE -->

</td>
</tr>
</table>
</td>
</tr>
</table>
</div>



GamesCenter wont grow unless you register! C'mon you know you want to

~I might be a little slow. I'm getting used to the Mac

Message edited by Mistory - Friday, 2009-10-09, 8:44 Am
 
DartzDate: Friday, 2009-10-09, 6:24 Am | Message # 2
Cookie Monster
Group: Head Mod
Messages: 5961
Awards: 61
Status: Offline
It's not suggested to put something in head. And, Mistory, did you test it?


*Yawn... drools on Renatus while sleeping...*
MistoryDate: Friday, 2009-10-09, 8:20 Am | Message # 3
Constant
Group: Checked
Messages: 275
Awards: 10
Reputation: 8
Status: Offline
Yes I use it on my own site - Click Here I might be removing this code on my site soon, so look quick please

GamesCenter wont grow unless you register! C'mon you know you want to

~I might be a little slow. I'm getting used to the Mac

Message edited by Mistory - Friday, 2009-10-09, 9:20 Am
 
RKxLDate: Friday, 2009-10-09, 8:24 Am | Message # 4
Regular
Group: Checked
Messages: 66
Awards: 0
Reputation: 2
Status: Offline
Mistory, why close button looks broken

•Give Respect to Get Respect
Forgive me for my inactivity, I'm very busy with my work.
 
MistoryDate: Friday, 2009-10-09, 8:43 Am | Message # 5
Constant
Group: Checked
Messages: 275
Awards: 10
Reputation: 8
Status: Offline
Quote (RKxL)
Mistory, why close button looks broken

The close button?

This is the button: But you can change it


GamesCenter wont grow unless you register! C'mon you know you want to

~I might be a little slow. I'm getting used to the Mac

 
JasonJuniorDate: Tuesday, 2009-11-10, 11:31 Am | Message # 6
Newbie
Group: Users
Messages: 3
Awards: 0
Reputation: 0
Status: Offline
pop up box not useful in blog & other ajax off site wink if that i cannot support this things..

Regards..

 
uCoz Community » Other » Collection of Scripts » Popup Box (DHTML Announcement Box)
Page 1 of 11
Search: