www.webdeveloper.com
Results 1 to 3 of 3

Thread: popup display

Hybrid View

  1. #1
    Join Date
    Aug 2011
    Posts
    2

    popup display

    Hi,

    I am a js newbie, after some research (btw: thanks to every of the authors od the original code) I've copied and customized a script to display a css popup in my little website.

    The script should display a popup in the middle of the browser window, graying out the background,

    Everything seems to work fine except that at the end of the script, the page is displayed from the top. This means that if you click on the popup link from a position down in the page, you'll miss it because you will be taken to the top of the page, where you can't see it.

    Please try it, this is the HTML and CSS code:

    HTML Code:
    <html>
    
    <head>
    
    <title>Test page</title>
    
    <style type="text/css">
    #blanket {
    	background-color:#111;
    	opacity: 0.65;
    	filter:alpha(opacity=65);
    	position:absolute;
    	z-index: 100;
    	top:0px;
    	left:0px;
    	width:100%;
    	}
    
    .popup {
    	position:absolute;
    	background-color:#ff0000;
    	width:600px;
    	height:474px;
    	z-index: 200;
    	}
    
    #closePopup {
    	background-color:#ff00000;
    	width:48px;
    	height:48px;
    	z-index:300;
    	float:right;
    	}
    
    </style>
    
    <script type="text/javascript" src="invent.js"></script>
    
    </head>
    
    <body>
    
    	<div id="blanket" style="display:none;">	<!-- dark background -->
    	</div>
    
    	<div id="block" style="width:100%;height:1800px;"><p>top of the page</p></div>	
    
    	<div id="block" style="width:100%;height:1800px;"><p><a href="#" onclick="popup('test')">Open popup</a></p><p>after you click scroll down here again to see the popup</p></div>
    
    	<p>bottom of the page</p>
    
    	<div id="test" class="popup" style="display:none;">	<!-- popup-->
    		<div id="closePopup" style="margin:-24px;z-index:4;">
    			<a href="#" onclick="popup('test')">x</a>
    		</div>
    		<p>Hello!</p>
    	</div>
    
    </body>
    
    </html>
    ... and the js:

    Code:
    function popup(windowname) {
    	document.getElementById('blanket').style.height = document.getElementsByTagName('body')[0].scrollHeight + 'px'; // blanket 100% page length
    	viewportPos(windowname);
    	toggle('blanket');
    	toggle(windowname);
    }
    
    // looks for the position where the popup must be rendered
    function viewportPos(popUpDivVar) {
    	xPos = f_clientWidth()/2-300;//300 is half popup's width
    	document.getElementById(popUpDivVar).style.left = xPos + 'px';
    	yPos = f_clientHeight()/2-237;//237 is half popup's height
    	document.getElementById(popUpDivVar).style.top = yPos + f_scrollTop() + 'px';
    }
    
    //hides or displays the popup
    function toggle(div_id) {
    	var el = document.getElementById(div_id);
    	if ( el.style.display == 'none' ) {	el.style.display = 'block';}
    	else {el.style.display = 'none';}
    }
    
    function f_scrollTop() {
    	return f_filterResults (
    		window.pageYOffset ? window.pageYOffset : 0,
    		document.documentElement ? document.documentElement.scrollTop : 0,
    		document.body ? document.body.scrollTop : 0
    		);
    	}
    
    function f_clientWidth() {
    	return f_filterResults (
    		window.innerWidth ? window.innerWidth : 0,
    		document.documentElement ? document.documentElement.clientWidth : 0,
    		document.body ? document.body.clientWidth : 0
    	);
    	}
    function f_clientHeight() {
    	return f_filterResults (
    		window.innerHeight ? window.innerHeight : 0,
    		document.documentElement ? document.documentElement.clientHeight : 0,
    		document.body ? document.body.clientHeight : 0
    	);
    	}
    function f_filterResults(n_win, n_docel, n_body) {
    	var n_result = n_win ? n_win : 0;
    	if (n_docel && (!n_result || (n_result > n_docel)))
    		n_result = n_docel;
    	return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
    	}
    I've been debugging with alert boxes and everything seems to be fine until the script ends execution. Then the user is brought again at the top of the page...

    In my final site the only thing I would like to show in the popup is a Flash movie.

    Do you know any workaround? I would even implement a completely different solution if I knew which...

    By the way: At this stage I am using Chrome but I would like my solution to work in any browser, that will the next issue.

    Thank you in advance!

  2. #2
    Join Date
    Apr 2006
    Location
    Perth
    Posts
    154
    <a href="javascript:void(0);" onclick="popup('test')">

    The problem is that you were reloading the page with an empty anchor: '#'

    All href's are designed to load a new page and that is what happened, the current page
    was reloaded. Since there is no anchor named '' (empty string) the top of the page was
    scrolled to as is the normal behaviour of the browser.

    Setting the href to call a javascript function of nothing does nothing, goes nowhere and
    all that is left to do is act on the event.

  3. #3
    Join Date
    Aug 2011
    Posts
    2
    Thanks for your time DracoMerest, I understand your explanation, I made the change and it works perfectly.

    Gee it's so hard being a newbie

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