1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 12:44 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

white space on right side of popup

         

okerix

9:05 pm on Jun 23, 2010 (gmt 0)

10+ Year Member



Hello,
I am trying to create some javascript that will create a popup and the popup itself is just an image. But since I want the image to take up the entire window i create the html in a variable to hold the image. For some reason I always get white space on the right. I already have css built into the html variable to take out padding and margins and I even specify the size(sized exactly to the image) when doing window.open. I have not been able to solve this in a couple of days and have been trying alot of different solutions with no work. Any help is appreciated, here is the code: 

function get_radio_value()
{
var wrong = "<html><head><style type='text/css'>body {margin: 0; padding:0; border:0;}</style>\
<title>Incorrect, try again!</title></head><body><bgsound src='Plbt.wav'>\
<a href='javascript:window.close()'><img src='wrong.jpg'></a></body></html>";
var right = "<html><head><style type='text/css'>body {margin: 0}</style>\
<title>You are Correct!</title></head><body>\
<a href='javascript:window.close()'><img src='right.jpg'></a></body></html>";
for (var i=0; i < document.question.mquestion.length; i++)
{
if (document.question.mquestion[i].checked)
{
var rad_val = document.question.mquestion[i].value;
if (rad_val != "b")
{ var popup = window.open('','',"resizeable=no,scrollbars=no,location=no,menubar=no,toolbar=no,width=221,height=112");
popup.document.write(wrong);
pops.document.close();
}
else
{ var popup = window.open("","window","resizeable,scrollbars=no,width=221,height=112");
popup.document.write(right);
pops.document.close();
}
}
}
}
</script>

whoisgregg

4:20 pm on Jun 24, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to WebmasterWorld, okerix!

Do you get the same white space in multiple browsers? Or just a particular one?

Have you tried just having the window created to be however many pixels smaller to account for the extra white space?

Fotiman

4:26 pm on Jun 24, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



You might also try removing margin/padding on ALL elements, not just body.

rocknbil

5:20 pm on Jun 24, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



var wrong = "<html><head>....
var right = "<html>.....


When your popup opens, right-click a background area and select view page info in FF. I'm guessing you'll see "Quirks Mode" under Render Mode.

Add a doctype there, see what it does. Most of the below are irrelevant improvements but still improvements, I suspect Quirks mode. 


var wrong = '<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 '+ 
 'Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">'+ 
 '<html lang="en"><head><title>Incorrect, try again!</title>'+ 
 '<style type="text/css">body {margin: 0; padding:0; border:0;}</style></head><body>'+ 
 '<a href="#" onclick="window.close(); return false;"><img src="wrong.jpg"></a></body></html>'; 
 // 
var right = '<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 '+ 
 'Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">'+ 
 '<html lang="en"><head><title>You are Correct!</title>'+ 
 '<style type="text/css">body {margin: 0; padding:0; border:0;}</style></head><body>'+ 
 '<a href="#" onclick="window.close(); return false;"><img src="right.jpg"></a></body></html>'; 
// 
// Only using "j" here because the code tags on this message board screw up "i" 
for (var j=0; j < document.question.mquestion.length; j++) { 
 if (document.question.mquestion[j].checked) { 
 var targ = (rad_val != "b")?wrong:right; 
 window.open('','',"width=221,height=112"); 
 popup.document.write(targ); 
 popup.document.close(); 
 break; 
 } 
}


Some notes on my changes:

- I don't know if double quoting will make a difference, but my validators all kick errors on single quoted code. It's a byproduct of PHP coding, but give double quoting a try.
- note the proper application of href, javascript: is not a URL.
- the ternary operator just decides which to use for document output.
- you do not need to specify "no" for attributes you don't need, just leave them out.
- the break is important, once your value is found you don't want to keep looping through.
- Not sure what pops is? :-)

okerix

9:48 pm on Jun 24, 2010 (gmt 0)

10+ Year Member



whoisgregg: I am writing some web based training using some software and i can modify the code to add in additional functionality(where this code comes in) and the WBT's only use IE. Plus there going to be used in schools so It is the way to go there I think. Yes I opened the window at 1 by 1 pixel and it still made that, I also tried lots of other sizes.

Fotiman: I tried head and img what else would you recommend I add in the css?

rocknbil: Thanks for the tips I have added those in but I'am unable to do the view page info in FF.

I might do some testing on just a plain webpage and use FF and see what happens. But I am still looking for a resolution. Otherwise I may be adding a background image to cover it up....

Fotiman

10:56 pm on Jun 24, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Try this:

* { margin: 0; padding: 0; }

subexpression

3:57 am on Jun 25, 2010 (gmt 0)

10+ Year Member



okerix,

Which version of Internet Explorer are you testing in?
Some schools are still running IE6, even though it boggles the mind.

I work with an international education company, and a good handful of the schools we build software for only run Macs with Safari. But, the primary browser, at least in America, is Internet Explorer 7.
So, we're "forced" to support IE6, IE7, IE8, Firefox 1.5+, Safari 2+

Have you tried a lightbox approach instead of popup windows?
Virtual popups (lightboxes, modals, screen cover widgets) are much cleaner, prettier, easier to manage, and you don't need to deal with popup blockers and such.

I coded a basic lightbox example which emulates what you're attempting to do with popup windows.
But since this thread is dealing with popups, I will leave it up to you to send me a pm.

okerix

1:53 pm on Jun 25, 2010 (gmt 0)

10+ Year Member



I am still a noob so I don't think I can pm. But I am very interested it what you have if you don't mind sharing.

edit: I found pm

okerix

9:52 pm on Jun 29, 2010 (gmt 0)

10+ Year Member



It appears there is some sort of minimum width the popup must have. Somewhere around the 250px range. Thanks for the help guys.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 12:44 am May 14, 2026