www.webdeveloper.com
Results 1 to 6 of 6

Thread: Popup Javascript?

  1. #1
    Join Date
    Apr 2012
    Posts
    4

    Popup Javascript?

    So I used a popup code script generator here (http://accessify.com/tools-and-wizar...dow-generator/)

    The accessible popup works great but now Im trying to position it in the center this screen as opposed to its default top left corner.

    My javascript understanding is very limited and hope someone out their may have some insight in how to achieve this.

    Here is the Javascript used:
    Code:
    <script language="javascript" type="text/javascript">
    function addEvent(elm, evType, fn, useCapture){if(elm.addEventListener){elm.addEventListener(evType, fn, useCapture);return true;}else if (elm.attachEvent){var r = elm.attachEvent('on' + evType, fn);return r;}else{elm['on' + evType] = fn;}}
    			var newWindow = null;
    
    			function closeWin(){
    				if (newWindow != null){
    					if(!newWindow.closed)
    						newWindow.close();
    				}
    			}
    
    			function popUpWin(url, type, strWidth, strHeight){
    
    				closeWin();
    
    				type = type.toLowerCase();
    
    				if (type == "fullscreen"){
    					strWidth = screen.availWidth;
    					strHeight = screen.availHeight;
    				}
    				var tools="";
    				if (type == "standard") tools = "resizable,toolbar=yes,location=yes,scrollbars=yes,menubar=yes,width="+strWidth+",height="+strHeight+",top=0,left=0";
    				if (type == "console" || type == "fullscreen") tools = "resizable,toolbar=no,location=no,scrollbars=yes,width="+strWidth+",height="+strHeight+",left=0,top=0";
    				newWindow = window.open(url, "newWin", tools);
    				newWindow.focus();
    			}
    
    			function doPopUp(e)
    			{
    			//set defaults - if nothing in rel attrib, these will be used
    			var t = "standard";
    			var w = "780";
    			var h = "580";
    			//look for parameters
    			attribs = this.rel.split(" ");
    			if (attribs[1]!=null) {t = attribs[1];}
    			if (attribs[2]!=null) {w = attribs[2];}
    			if (attribs[3]!=null) {h = attribs[3];}
    			//call the popup script
    			popUpWin(this.href,t,w,h);
    			//cancel the default link action if pop-up activated
    			if (window.event) 
    				{
    				window.event.returnValue = false;
    				window.event.cancelBubble = true;
    				} 
    			else if (e) 
    				{
    				e.stopPropagation();
    				e.preventDefault();
    				}
    			}
    
    			function findPopUps()
    			{
    			var popups = document.getElementsByTagName("a");
    			for (i=0;i<popups.length;i++)
    				{
    				if (popups[i].rel.indexOf("popup")!=-1)
    					{
    					// attach popup behaviour
    					popups[i].onclick = doPopUp;
    					// add popup indicator
    					if (popups[i].rel.indexOf("noicon")==-1)
    						{
    						popups[i].style.backgroundImage = "url(pop-up.gif)";
    						popups[i].style.backgroundPosition = "0 center";
    						popups[i].style.backgroundRepeat = "no-repeat";
    						popups[i].style.paddingLeft = "15px";
    						}
    					// add info to title attribute to alert fact that it's a pop-up window
    					popups[i].title = popups[i].title + " [Opens in pop-up window]";
    					}
    				}
    			}
    
    			addEvent(window, "load", findPopUps, false);
    </script>
    Here is the link reference:
    Code:
    <a href="http://www.google.com" rel="popup console 600 300">Link text goes here</a>

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,670
    may be this will help

    Code:
    function popUpWin(url, type, strWidth, strHeight){
    
    				closeWin();
    
    				type = type.toLowerCase();
    
    				if (type == "fullscreen"){
    					strWidth = screen.availWidth;
    					strHeight = screen.availHeight;
    				}
    				var tools="";
    
    				if (type == "standard") tools = "resizable,toolbar=yes,location=yes,scrollbars=yes,menubar=yes,width="+strWidth+",height="+strHeight+",top="+(strHeight/2+screen.height/2)+",left="+(strWidth/2+screen.width/2);
    				if (type == "console" || type == "fullscreen") tools = "resizable,toolbar=no,location=no,scrollbars=yes,width="+strWidth+",height="+strHeight+",top="+(strHeight/2+screen.height/2)+",left="+(strWidth/2+screen.width/2);
    				newWindow = window.open(url, "newWin", tools);
    				newWindow.focus();
    			}

  3. #3
    Join Date
    Apr 2012
    Posts
    4
    Your awesome Padonok!

    This definitely helped and is now changing the position however for some reason its showing up in bottom right of screen now.

    In the new "top" and "left" code that added - i noticed their are not closing quotes at the end. Could this be causing it?

    I tried to add the closing quote - but it gave me a syntax error.

    Code:
    top="+(strHeight/2+screen.height/2)+",left="+(strWidth/2+screen.width/2);

  4. #4
    Join Date
    Apr 2012
    Posts
    4
    This seamed to do it....

    Code:
    top="+(screen.height/2-strHeight/2)+",left="+(screen.width/2-strWidth/2);
    Still not sure if closing quote is needed.

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,670
    Quote Originally Posted by yolksac View Post
    This seamed to do it....

    Code:
    top="+(screen.height/2-strHeight/2)+",left="+(screen.width/2-strWidth/2);
    Still not sure if closing quote is needed.
    of course this one. sorry the plus sign was just a mistyping - usually i create a local page and test everything before posting but this time i was lazy and wrote it right in this editor )) closing quotes are not needed - everything ok with it

  6. #6
    Join Date
    Apr 2012
    Posts
    4
    Thanks for your help with this man...

    This was a big help and very much appreciated.
    Cheers!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles