Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

« Newer Snippets
Older Snippets »
Showing 1-5 of 5 total  RSS 

Open a popup window with specified parameters / arguments

opens a popup a window with the specified width and height. can be centered in the screen

function openAWindow( pageToLoad, winName, width, height, center)
{
    xposition=0; yposition=0;
    if ((parseInt(navigator.appVersion) >= 4 ) && (center)){
        xposition = (screen.width - width) / 2;
        yposition = (screen.height - height) / 2;
    }
	
	//0 => no
	//1 => yes
    var args = "";
    	args += "width=" + width + "," + "height=" + height + ","
		+ "location=0,"
		+ "menubar=0,"
		+ "resizable=0,"
		+ "scrollbars=0,"
		+ "statusbar=false,dependent,alwaysraised,"
		+ "status=false,"
		+ "titlebar=no,"
		+ "toolbar=0,"
		+ "hotkeys=0,"
		+ "screenx=" + xposition + ","  //NN Only
		+ "screeny=" + yposition + ","  //NN Only
		+ "left=" + xposition + ","     //IE Only
		+ "top=" + yposition;           //IE Only
		//fullscreen=yes, add for full screen
    	var dmcaWin = window.open(pageToLoad,winName,args );
    	dmcaWin.focus();
    //window.showModalDialog(pageToLoad,"","dialogWidth:650px;dialogHeight:500px");
}


call the function as openAWindow("yourfilenamehere","windownamehere",500,600,true);
500 => width
600 => height
true => if you want to place the popup window in the center of the screen

Customize JavaScript Popup Window Code in sigle one line

Oneline JavaScript Popup Window Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
</head>

<body>
        <a href="#"
        onClick="MyWindow=window.open('http://www.yahoo.com','MyWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=600,height=300,left=0,top=0'); return false;">
        Popup Window Code in single one line without any function</a>

</body>

</html>

Javascript open window

Javascript open window sometimes is useful for adding a popup window to your pages. When the user clicks on a link, a new window opens and displays a page. Demo can be found on this script homepage - free code and tutorials website.

/**
*
*  Javascript open window
*  http://www.webtoolkit.info/
*
**/

function openWindow(anchor, options) {

	var args = '';

	if (typeof(options) == 'undefined') { var options = new Object(); }
	if (typeof(options.name) == 'undefined') { options.name = 'win' + Math.round(Math.random()*100000); }

	if (typeof(options.height) != 'undefined' && typeof(options.fullscreen) == 'undefined') {
		args += "height=" + options.height + ",";
	}

	if (typeof(options.width) != 'undefined' && typeof(options.fullscreen) == 'undefined') {
		args += "width=" + options.width + ",";
	}

	if (typeof(options.fullscreen) != 'undefined') {
		args += "width=" + screen.availWidth + ",";
		args += "height=" + screen.availHeight + ",";
	}

	if (typeof(options.center) == 'undefined') {
		options.x = 0;
		options.y = 0;
		args += "screenx=" + options.x + ",";
		args += "screeny=" + options.y + ",";
		args += "left=" + options.x + ",";
		args += "top=" + options.y + ",";
	}

	if (typeof(options.center) != 'undefined' && typeof(options.fullscreen) == 'undefined') {
		options.y=Math.floor((screen.availHeight-(options.height || screen.height))/2)-(screen.height-screen.availHeight);
		options.x=Math.floor((screen.availWidth-(options.width || screen.width))/2)-(screen.width-screen.availWidth);
		args += "screenx=" + options.x + ",";
		args += "screeny=" + options.y + ",";
		args += "left=" + options.x + ",";
		args += "top=" + options.y + ",";
	}

	if (typeof(options.scrollbars) != 'undefined') { args += "scrollbars=1,"; }
	if (typeof(options.menubar) != 'undefined') { args += "menubar=1,"; }
	if (typeof(options.locationbar) != 'undefined') { args += "location=1,"; }
	if (typeof(options.resizable) != 'undefined') { args += "resizable=1,"; }

	var win = window.open(anchor, options.name, args);
	return false;

}

Javascript onload popup

Place the following in the BODY tag.


<script type="text/JavaScript">
<!--
function popupMsg(msg) { //v1.0
  alert(msg);
}
//-->
</script>

onLoad="popupMsg('message here')"

www.webscriptexpert.com - Java - Image based tool tips

// This script creates 'tool tips' for images. Use as much text as you want. Formatting is controlled through the use of style sheets. The text will resize, according to the screen width and placement of the cursor.



<!-- TWO STEPS TO INSTALL IMAGE TOOL TIPS:

1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<style type="text/css">
<!--
#toolTipBox {
display: none;
padding: 5;
font-size: 12px;
border: black solid 1px;
font-family: verdana;
position: absolute;
background-color: #ffd038;
color: 000000;
}
-->
</style>

<script type="text/javascript">
<!--
Created by: Saul Salvatierra :: http://myarea.com.sapo.pt
with help from Ultimater :: http://ultimiacian.tripod.com */

var theObj="";

function toolTip(text,me) {
theObj=me;
theObj.onmousemove=updatePos;
document.getElementById('toolTipBox').innerHTML=text;
document.getElementById('toolTipBox').style.display="block";
window.onscroll=updatePos;
}

function updatePos() {
var ev=arguments[0]?arguments[0]:event;
var x=ev.clientX;
var y=ev.clientY;
diffX=24;
diffY=0;
document.getElementById('toolTipBox').style.top = y-2+diffY+document.body.scrollTop+ "px";
document.getElementById('toolTipBox').style.left = x-2+diffX+document.body.scrollLeft+"px";
theObj.onmouseout=hideMe;
}
function hideMe() {
document.getElementById('toolTipBox').style.display="none";
}
-->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<div align="center">
<span id="toolTipBox" width="200"></span>
<img src="yourImage.jpg" width="237" height="197" border="0" onmouseover="toolTip('Place your tool tip here',this)">
</div>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://www.webscriptexpert.com">Web Script Expert </a></font>
</center><p>

« Newer Snippets
Older Snippets »
Showing 1-5 of 5 total  RSS