asked on

DIV Display:None Google Map Off Center

I've read about 30 different potential solutions online for this and have no idea which will be best to implement or even how to modify the Javascript to make it work.

http://www.restorationlutheran.com/

Click the DIRECTIONS link in the header. It pops open a google map, but the PIN for the location is off view in the upper left area and can't be seen unless you drag the map to find it.

The many posts online suggest that it is because of the CSS style display:none that the map can't properly align itself. I get that.

The suggested solutions vary from z-index trickery to visibility:hidden ideas, but I have no idea which will work with the code I found online to even make this div popup work in the first place.

The CSS:

/*GOOGLE MAP POPUP STYLES */
#blanket {
   background-color:#111;
   opacity: 0.65;
   position:absolute;
   z-index: 1111;
   top:0px;
   left:0px;
   width:100%;
}
#popUpDiv {
	position:absolute;
	background-color:#eeeeee;
	width:325px;
	height:auto;
	z-index: 1112;
	top:10%;
	left:40%;
	padding:5px;
	text-align:center;
}

Open in new window

The JS File:

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 blanket_size(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportheight = window.innerHeight;
	} else {
		viewportheight = document.documentElement.clientHeight;
	}
	if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
		blanket_height = viewportheight;
	} else {
		if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
			blanket_height = document.body.parentNode.clientHeight;
		} else {
			blanket_height = document.body.parentNode.scrollHeight;
		}
	}
	var blanket = document.getElementById('blanket');
	blanket.style.height = blanket_height + 'px';
	var popUpDiv = document.getElementById(popUpDivVar);
	popUpDiv_height=blanket_height/2-150;//150 is half popup's height
	popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportwidth = window.innerHeight;
	} else {
		viewportwidth = document.documentElement.clientHeight;
	}
	if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
		window_width = viewportwidth;
	} else {
		if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
			window_width = document.body.parentNode.clientWidth;
		} else {
			window_width = document.body.parentNode.scrollWidth;
		}
	}
	var popUpDiv = document.getElementById(popUpDivVar);
	window_width=window_width/2-150;//150 is half popup's width
	popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
	//blanket_size(windowname);
	//window_pos(windowname);
	toggle('blanket');
	toggle(windowname);		
}

Open in new window

The HTML:

<div id="blanket" style="display:none;"></div>
	<div id="popUpDiv" style="display:none">
		<a href="#" onclick="popup('popUpDiv')">&lt;close&gt;</a><p>
        <html>
        <iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=500+East+Mitchell+Street,+Kendallville,+IN&amp;hl=en&amp;sll=37.0625,-95.677068&amp;sspn=39.780156,59.0625&amp;oq=500+e+mitchell+st+kendallvi&amp;hnear=500+E+Mitchell+St,+Kendallville,+Indiana+46755&amp;t=m&amp;ie=UTF8&amp;hq=&amp;ll=41.444013,-85.259056&amp;spn=0.019302,0.025749&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?q=500+East+Mitchell+Street,+Kendallville,+IN&amp;hl=en&amp;sll=37.0625,-95.677068&amp;sspn=39.780156,59.0625&amp;oq=500+e+mitchell+st+kendallvi&amp;hnear=500+E+Mitchell+St,+Kendallville,+Indiana+46755&amp;t=m&amp;ie=UTF8&amp;hq=&amp;ll=41.444013,-85.259056&amp;spn=0.019302,0.025749&amp;z=14&amp;iwloc=A&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small></html>
	</div>

Open in new window

So, I need to know how to get the map to be centered properly when it pops up.

Gary

If thats the reason (display:none) then move the div off the page with a negative margin no display:none and when you need to show it move it back position:static.
Or change the order of events so the iframe has no source til you show it at which point in your js set the iframe source.
Just a couple of things I think might work.

day6

ASKER

Gary,

Um, sounds cool, but I'm not smart enough to even know how to experiment with this since I basically found the script online and put it on the site. I'm ok with CSS, but modifying the Javascript is what I am lost about.

Gary

No guarantee on this but remove the display none of the element and amend like the following

<div id="popUpDiv" style="position:absolute;top:-999px;">

Open in new window

amend your onclick event from

onclick="popup('popUpDiv')"

Open in new window

onclick="document.getElementById('popUpDiv').setAttribute('style', 'position:static');popup('popUpDiv')"

Open in new window

day6

ASKER

no go

Gary

Can you temporarily remove
<div id="blanket" style="display:none;"></div>

Check it's working and centered - works from my side, haven't looked through your js closely but it seems your placing it in this wrapper at load? If so you don't need it doing this new way and you can just style the popup div as needed.

Gary

That seems to be working fine now and in IE9 (it wasn't before)

day6

ASKER

well i got it to center up next to the link, but now the CLOSE link inside the popup div doesn't work and there's a DIV overlay issue with the div contents below the popup bleeding through. I've set a z-index of 4000 to ensure that it is indeed on top of all other items, but I believe it isn't. I seem to recall something about the wrapper div (blanket) being there to prevent the bleed through or something.

I removed that div as you mentioned, but now it doesn't close and the bleed through is happening.

Gary

Thats fine,

Change

	<div id="popUpDiv" style="position:absolute;top:-999px; margin-left:auto; margin-right:auto">
		<a href="#" onclick="popup('popUpDiv')">&lt;close&gt;</a><p>
        <html>
        <iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=500+East+Mitchell+Street,+Kendallville,+IN&amp;hl=en&amp;sll=37.0625,-95.677068&amp;sspn=39.780156,59.0625&amp;oq=500+e+mitchell+st+kendallvi&amp;hnear=500+E+Mitchell+St,+Kendallville,+Indiana+46755&amp;t=m&amp;ie=UTF8&amp;hq=&amp;ll=41.444013,-85.259056&amp;spn=0.019302,0.025749&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?q=500+East+Mitchell+Street,+Kendallville,+IN&amp;hl=en&amp;sll=37.0625,-95.677068&amp;sspn=39.780156,59.0625&amp;oq=500+e+mitchell+st+kendallvi&amp;hnear=500+E+Mitchell+St,+Kendallville,+Indiana+46755&amp;t=m&amp;ie=UTF8&amp;hq=&amp;ll=41.444013,-85.259056&amp;spn=0.019302,0.025749&amp;z=14&amp;iwloc=A&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small></html>
	</div>

Open in new window

<DIV style="position:absolute;top:-999px; margin:0 auto" id="blanket">
<div id="popUpDiv">
		<a href="#" onclick="popup('popUpDiv')">&lt;close&gt;</a><p>
        <html>
        <iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=500+East+Mitchell+Street,+Kendallville,+IN&amp;hl=en&amp;sll=37.0625,-95.677068&amp;sspn=39.780156,59.0625&amp;oq=500+e+mitchell+st+kendallvi&amp;hnear=500+E+Mitchell+St,+Kendallville,+Indiana+46755&amp;t=m&amp;ie=UTF8&amp;hq=&amp;ll=41.444013,-85.259056&amp;spn=0.019302,0.025749&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?q=500+East+Mitchell+Street,+Kendallville,+IN&amp;hl=en&amp;sll=37.0625,-95.677068&amp;sspn=39.780156,59.0625&amp;oq=500+e+mitchell+st+kendallvi&amp;hnear=500+E+Mitchell+St,+Kendallville,+Indiana+46755&amp;t=m&amp;ie=UTF8&amp;hq=&amp;ll=41.444013,-85.259056&amp;spn=0.019302,0.025749&amp;z=14&amp;iwloc=A&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small></html>
	</div></div>

Open in new window

and amend the following to target the blanket

onclick="document.getElementById('popUpDiv').setAttribute('style', 'position:static');popup('popUpDiv')"

Open in new window

becomes

onclick="document.getElementById('blanket').setAttribute('style', 'position:static');popup('popUpDiv')"

Open in new window

Gary

Remove the opacity from the css for blanket and display:none

day6

ASKER

now nothing displays at all

Gary

In popup.js remove
toggle('blanket');

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

day6

ASKER

all changed, no popup displaying

Gary

Change popup('popUpDiv_show') to popUpDiv_show()

Change popup('popUpDiv_close') to popUpDiv_close()

day6

ASKER

ugh. it pops open now, but it's anchored to the left side of the screen and no matter what I do for the CSS to center it, it does nothing. I even added some more style attributes in the Javascript thinking it may center it, but nothing. It's also being overlayed by existing divs on the page.

Gary

function popUpDiv_show(){
document.getElementById('blanket').setAttribute('style', 'position:static');
document.getElementById('blanket').setAttribute('style', 'top:100px');
document.getElementById('blanket').setAttribute('style', 'marginLeft:40%');
}

day6

ASKER

doesn't work. i tried like 5 combinations of what you did, and every one left it off screen completely. the only way it appears on screen is with just the two styles you had originally.

Gary

It's too late for me now, will get back to this tomorrow but I cannot see my amendment as above in popup.js

SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Gary

Doh, in my defence it was very late for me...

day6

ASKER

Great job Gary even though you were tired with the javascript thing. LOL.