?
Solved

DIV Display:None Google Map Off Center

Posted on 2012-08-24
21
Medium Priority
?
1,722 Views
Last Modified: 2012-08-26
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.
0
Comment
Question by:day6
  • 12
  • 8
21 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 38332967
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.
0
 
LVL 1

Author Comment

by:day6
ID: 38332972
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38333022
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

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

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:day6
ID: 38333029
no go
0
 
LVL 58

Expert Comment

by:Gary
ID: 38333056
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38333072
That seems to be working fine now and in IE9 (it wasn't before)
0
 
LVL 1

Author Comment

by:day6
ID: 38333076
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38333086
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


to
<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

0
 
LVL 58

Expert Comment

by:Gary
ID: 38333107
Remove the opacity from the css for blanket and display:none
0
 
LVL 1

Author Comment

by:day6
ID: 38333110
now nothing displays at all
0
 
LVL 58

Expert Comment

by:Gary
ID: 38333114
In popup.js remove
toggle('blanket');
0
 
LVL 58

Accepted Solution

by:
Gary earned 1800 total points
ID: 38333132
The popup.js is messing all the positioning up
Replace everything in it with this (keep a backup of if)
function popUpDiv_show(){
document.getElementById('blanket').setAttribute('style', 'position:static');
document.getElementById('blanket').setAttribute('style', 'top:100px');
}

function popUpDiv_close(){
document.getElementById('blanket').setAttribute('style', 'position:absolute');
document.getElementById('blanket').setAttribute('style', 'top:-999px');
}

Open in new window


Change this
<a href="#" onclick="popup('popUpDiv')">&lt;close&gt;</a>
to
<a href="#" onclick="popup('popUpDiv_close')">&lt;close&gt;</a>

and change this
<a href="#" onclick="document.getElementById('blanket').setAttribute('style', 'position:static');popup('popUpDiv')" class="sn">&lt;directions&gt;</a>

to this
<a href="#" onclick="popup('popUpDiv_show')" class="sn">&lt;directions&gt;</a>
0
 
LVL 1

Author Comment

by:day6
ID: 38333139
all changed, no popup displaying
0
 
LVL 58

Expert Comment

by:Gary
ID: 38333192
Change popup('popUpDiv_show') to popUpDiv_show()

Change popup('popUpDiv_close') to popUpDiv_close()
0
 
LVL 1

Author Comment

by:day6
ID: 38333241
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38333338
function popUpDiv_show(){
document.getElementById('blanket').setAttribute('style', 'position:static');
document.getElementById('blanket').setAttribute('style', 'top:100px');
document.getElementById('blanket').setAttribute('style', 'marginLeft:40%');
}
0
 
LVL 1

Author Comment

by:day6
ID: 38333451
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38333486
It's too late for me now, will get back to this tomorrow but I cannot see my amendment as above in popup.js
0
 
LVL 43

Assisted Solution

by:David S.
David S. earned 200 total points
ID: 38333573
Gary, setting the style attribute multiple times like that overwrites the value each time, so only the last style declaration is used. Also for compatibility with older versions of IE, it's best to avoid using setAttribute() to set styles.

You can do it like this:
function popUpDiv_show(){
  document.getElementById('blanket').style.cssText= 'position:static;top:100px;margin-left:40%';
} 

Open in new window

or like this:
function popUpDiv_show(){
  document.getElementById('blanket').style.position= 'static';
  document.getElementById('blanket').style.top= '100px';
  document.getElementById('blanket').style.marginLeft= '40%';
} 

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 38334096
Doh, in my defence it was very late for me...
0
 
LVL 1

Author Closing Comment

by:day6
ID: 38334107
Great job Gary even though you were tired with the javascript thing. LOL.
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

571 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question