Javascript Essentials Part 3

by Hiroshi on November 1st, 2008

Button Pop-Up

Head Section Code

<script language="JavaScript" type="text/JavaScript">
function openPopup(){
window.open("","_popup","toolbars=0,location=0,width=300,height=150,
toolbar=0,menubar=0,location=0,screenX=0,screenY=100,scrollbars=no,
resizable=0,statusbar=0");
return true;
}

Body Section Code

<form action="votes.php" method="post" target="_popup" onsubmit="return openPopup()"> 
<input type="submit" value="VOTE">
</form>

By this way you can also post variables to POP UP and get the results there.

Pop-Up – Body Based

From body based; I mean that you need no code to past in head section of page for this popup.

<a href="#" title="Click to view" onClick="window.open('http://www.msn.com', 'win_ranking', 'width=320,height=197,toolbar=0,menubar=0,location=0,left=0,top=113,screenX=0,screenY=100,scrollbars=no'); return false;">text or image to which you want to associae this popup</a>

Pop-Up Using Head and Body of Web page

Head Section Code

<script language="JavaScript" type="text/JavaScript">
function MM_openBrWindow(theURL,winName,features) 
{ 
window.open(theURL,winName,features);
}

Body Section Code

<a href="#" target="_self" onClick="MM_openBrWindow('javascript_all_in_one_2.htm','maintn32','')">This page Switch to full screen</a>

Pop-Up Window Maker

popup window generator

Pop-Up Box – On Load – Cross Browser

Head Section Code

<script type="text/javascript">
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>

Body Section 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="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>