Forum Moderators: open
On my website when you load the main page, I have it so a pop up window comes up with a picture advertising my bands next show... this is the script I used
<script language="JavaScript" for="window" event="onload()">
<!--
window.open("http://urlofpic.jpg","vb","height=330,width=248")
//-->
</script>
Now it works fine... but there are spaces around the picture... how do i make it so that the box comes out the size of the picture... i tried resizing it useing the:
height=330,width=248 code...
but it just cuts off the picture.
All help is much appreciated
Kind Regards
Martin
The secret is to put the image in an .html file like this..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Image</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /><style type="text/css">
/*<![CDATA[*/
body
{
margin:0;
}
/*//]]>*/
</style></head>
<body>
<div>
<img src="your_image.jpg" alt="your_image" width="248" height="330" border="0"/>
</div>
</body>
</html>
birdbrain
Magpie
How do I do that... I mean, all my pages are saved as .htm do I just save it in one of them?
No, you use the new .html file that I made [ let's name it my_image.html ] and contains just the
image that this script is calling...
<script language="JavaScript" for="window" event="onload()">
<!--
window.open("http://urlofpic.jpg","vb","height=330,width=248")
//-->
</script>
<script language="JavaScript" for="window" event="onload()">
<!--
window.open("http://yoursite/my_image.html","vb","height=330,width=248")
//-->
</script>
I hope that this makes sense ;)
birdbrain
and also exactly the script that goes inplace of what i already have
Cheers
Martin
Do i need to use any of the code u posted previously at the top?
Here, again, is the page that you use
I will even put your image in ;)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Image</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /><style type="text/css">
/*<![CDATA[*/
body
{
margin:0;
}
/*//]]>*/
</style></head>
<body>
<div>
<img src="urlofpic.jpg" alt="urlofpic" width="248" height="330" border="0"/>
</div>
</body>
</html>
Now 'copy & paste' this and save it as urlofpic.htm
Here is the script to call this file...
<script language="JavaScript" for="window" event="onload()">
<!--
window.open("urlofpic.htm","vb","height=330,width=248")
//-->
</script>
If the image dimensions, that I have used, are correct...
do not change anything. It will work in I.E. Netscape 7 and
Mozilla firefox 0.8
birdbrain
"html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
no picture
------------------------------------------------------
this is the script i have put in:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
"html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Borderline</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css>
/*<![CDATA[*/
body
{
margin;0:
}
/*//]]/*/
</style>
</head>
<body>
<div>
<img src="URL of the picture" alt="Name of picture" width="248" height="330"border="0"/>
</div>
</body>
<html/>
[edited by: birdbrain at 4:02 pm (utc) on April 2, 2004]
<"html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
this is the exact script i have used
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<"html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Borderline</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css>
/*<![CDATA[*/
body
{
margin;0:
}
/*//]]/*/
</style>
</head>
<body>
<div>
<img src="http://www.underjudgement.com/images/Borderline.jpg" alt="Borderline" width="248" height="330"border="0"/>
</div>
</body>
<html/>
------------------------------------------------------
And on the page where the pop up occurs i have this:
<script language="JavaScript" for="window" event="onload()">
<!--
window.open("http://www.underjudgement.com/borderline.htm","vb","height=330,width=248")
//-->
</script>
[underjudgement.com...]
you'll get the pop up and you'll see that the image has big borders and when i resise the window to fit the image, the borders star but it cuts the picture off from the bottom right.
Thanks
Martin
This is getting silly ;)
this line needs the added " removed...
<"html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
thus...
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
this line needs the removed " added...
<style type="text/css>
thus...
<style type="text/css">
this is...
borderline.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Borderline</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body
{
margin:0;
}
/*//]]/*/
</style>
</head>
<body>
<div>
<img src="http://www.underjudgement.com/images/Borderline.jpg" alt="Borderline" width="248" height="330"border="0"/>
</div>
</body>
</html>
this is the...
script
<script language="JavaScript" for="window" event="onload()">
<!--
window.open("http://www.underjudgement.com/borderline.htm","vb","height=330,width=248")
//-->
</script>
Save the borderline.htm correctly ;) and it will work ;)
birdbrain
[edited by: birdbrain at 7:16 pm (utc) on April 2, 2004]
and the same thing happens. Here is the link to the outcome.
[underjudgement.com...]
If you see, when the pop up comes up, the picture is still getting cut off and there are still boarders around the top and the left of the picture
What am i doing wrong... I do agree this is getting very silly :-(
lol
I appreciate all your help
Martin
I have got it nailed ;)
There is one more typo, I have found, that
was not in my original...
<style type="text/css">
/*<![CDATA[*/
body
{
margin:0:
}
/*//]]/*/
</style>
so...
<style type="text/css">
/*<![CDATA[*/
body
{
margin:0
}
/*//]]/*/
</style>
;) ;) ;)
birdbrain
THANK F*** FOR THAT... lol
Thank you ever so much... I really appreciate it... It's amazing what one TINY little alteration of adding a simple ';' or taking it away can do.
You've made my day mate.
Thanks again
Kind Regards
Martin
How do I go about changing the Title on the top of the pop up window?
Cheers
Martin
<script language="JavaScript" for="window" event="onload()">
<!--
window.open
("borderline.htm","vb","height=307,width=230")
//-->
</script>
;) ;)
birdbrain
Thanks again
Martin
'But is there any way I can get it to say 'Next Gig' instead of the URL using javascript'
Yes, as I said before change...
<script language="JavaScript" for="window" event="onload()">
<!--
window.open
("http://www.underjudgement.com/borderline.htm","vb","height=307,width=230")
//-->
</script>
to this...
<script language="JavaScript" for="window" event="onload()">
<!--
window.open
("borderline.htm","vb","height=307,width=230")
//-->
</script>
and then in borderline.htm change ...
<title>Borderline</title>
to this...
<title>Next Gig</title>
;) ;)
birdbrain
this is the code i used:
Borderline.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Next Gig</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body
{
margin:0
}
/*//]]/*/
</style>
</head>
<body>
<div>
<img src="http://www.underjudgement.com/images/Borderline.jpg" alt="Borderline" width="230" height="307"border="0"/>
</div>
</body>
<html/>
------------------------------------------------------
and the script:
<script language="JavaScript" for="window" event="onload()">
<!--
window.open
("borderline.htm","vb","height=307,width=230")
//-->
</script>
Cheers
Martin
i changed the code to this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Borderline</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body
{
margin:0
}
/*//]]/*/
</style>
<title>Borderline</title>
</head>
<body>
<div>
<img src="http://www.underjudgement.com/images/Borderline.jpg" alt="Borderline" width="230" height="307"border="0"/>
</div>
</body>
<html/>
------------------------------------------------------
I added the:
<title>Borderline</title>
inbetween the style and the head... it was a lucky guess really tho lol... This is the correct way of ding it yes?
Cheers for everything... Keep an eye on this post... no doubt ill be askin somin agen on the same topic lol
Martin
I discovered that the code did not work
in 'Opera' browsers with just margin:0.
To get it to render correctly in that browser
you need to add padding:0
so...
<style type="text/css">
/*<![CDATA[*/
body
{
margin:0;
padding:0;
}
/*//]]/*/
</style>
birdbrain
