Forum Moderators: open
here is my code at the moment... Could someone possible alter it to what it should say:
--------------------------------------------------------------
</script>
<title>Under Judgement Gig: 21st November 2003</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Microsoft Theme" content="under-judgement 1100, default">
</head>
<body>
<p align="center"><br>
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20001.jpg" width="52" height="80"></a>
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20002.jpg" width="52" height="80">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20003.jpg" width="52" height="80">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20004.jpg" width="52" height="80">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20005.jpg" width="52" height="80">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20006.jpg" width="52" height="80">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20007.jpg" width="52" height="80">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20008.jpg" width="52" height="80"></p><p align="center">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20009.jpg" width="52" height="80">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20010.jpg" width="52" height="80">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20011.jpg" width="52" height="80">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20012.jpg" width="52" height="80">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20013.jpg" width="52" height="80">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20014.jpg" width="52" height="80">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20015.jpg" width="52" height="80">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20016.jpg" width="52" height="80"></p><p align="center">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20017.jpg" width="52" height="80">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20018.jpg" width="52" height="80">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20019.jpg" width="52" height="80">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20020.jpg" width="52" height="80">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20021.jpg" width="52" height="80">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20022.jpg" width="52" height="80">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20023.jpg" width="52" height="80">
<img border="0" src="images/Gig%20Pics/21.11.03/Gig%20PicS%20024.jpg" width="52" height="80"></p>
</body>
</html>
-------------------------------------------------------------------------
All help is much appreciated
Regards
Magpie
Could you help with that... or anyone
Much appreciated
Magpie
<script type="text/javascript">
[paste in here]
</script>
Then your thumbnail images each need to be made into a link, so that a click opens the new window.
You can just replace "page.html" with the file name for the enlarged image, and replace "Click for popup window" with the file name of your thumbnail sized image.
lol
If you could change my code to what I need i would be very greatful
Cheers
Magpie
So focus in on what is still confusing to you, and ask a specific question. I'll be glad to help at that level. And then you will have a new tool in your toolkit. Opening a pop-up window is a function that you will probably want to use in the future, even if you are just doing the website as a sideline.
One extra bit of information might help - I told you, above, to load the large IMAGE in the pop-up window. But you can often get better results by first creating a PAGE - one that only has the image as its content. Then use the function to load that new page.
You'll be making a different .html file for each large image, and then pluggin that file name into the <body> mark-up in the spot where "page.html" appears.
One extra comment - the html you pasted in above has no ancho tags -- no links. So jus that much will not open any new page, in the same window or a new window. You need to wrap each image in an anchor tag. In a simple case, it just opens a new page in the same window. But if you use the javascript link, it will open the new page in a NEW window.
<script language="JavaScript" for="window" event="onload()">
<!--
window.open
("sggig.htm","vb","height=480,width=630")
//-->
</script>
-------------------------------------------------------------------------
That is basically calling a page that i have created with the picture in it..... The page that I am calling has this code in it to get rid of the margins, address bar and buttons etc and makes it fit for the picture:
<!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>Verge Show</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body
{
margin:0;
padding:0;
}
/*//]]/*/
</style>
<title>Verge Show</title>
</head>
<body>
<div>
<img src="../../images/Gig%20Pics%20/21.11.03/Gig%20Pic%20001.jpg" alt="Under Judgement" border="0" width="630" height="480"/>
</div>
</body>
<html/>
-----------------------------------------------------------------
What I really want to do is this:
Instead of it being a pop up.... When u go to one of my pages that has a series of small pictures in it.... i want it so that when u click on on of the small pictures it does sort of the same thing.... I would like it to bring up a new window without all the buttons, margins and address bar etc. and to the fit size of the picture.... so that the user cant maximise it at all....
Can any thing be done with the code i have so far?
All help is much appreciated!
Regards
Magpie
Here's the general syntax of the javascript window.open() method. There are three parameters than can be accepted within the parenthesis.
window.open (URL,windowname,features)
1. The parameter "URL" is URL of the page to load in the new window.
2. The parameter "windowname" is the name you can given to the new window. You can use that name to refer this window again, or you can choose not to assign any name at all to the window.
3. The "features" string determines what window features will be in the popup window (such as the status bar, the address bar, resizability, etc) Once you declare any feature, then all the other features default to "no" (which is the same as "0") unless you explicitly declare them as "yes" ("1")
So, the following code opens a new window named "mywindow" that has a status bar but no other features.
window.open("http://www.example.com/page.html","mywindow","status=1");
If you put that basic information together with the particulars on the generic javascript thread [webmasterworld.com], Message #4 you will have all the ingredients to make your new windows do whatever you want.
I really apreciate all your help... Im just trying to understand wht it all means... After carefully reading everything you have written, althought they are amazing explanations... I can't seem to action it and make it work on my website... I dont really know what to write or where to put things.... everything I have done on my site so far has pretty much been done by you guys here at webmasterworld.... every thing from Iframes and loads of technical things.... but this problem (which sounds alot easier than the problems ive had previously and solved with help) has really stummped me... I can honestly say tho that after this i cant think of any thing more to do to my site that would make it look any better
Sorry for being a right pain...
Again I really appreciate it..
Magpie
Knowing that, just experiment with it - this is essentially a basic javascript exercise, but know that it will not forgive missing quotes, or wrong case letters, or line breaks in the middle of a line of script...and so on.
If you can't get it to work after an honest effort (I'd be surpised, by the way) I'm sure the folks in the Javascript forum will help you find the problem.
Ultimately, it's head-banging simple, even mindlessly simple. Just a pure machine thing with no wiggle room for human-style errors. So be like a machine.
<a href="javascript:window.open("http://www.example.com/page.html","mywindow","status=1");
on my page with all the small pictures on it i have:
<script language="JavaScript">
function cPop(url, wide, high)
{window.open(url,"popup",'width=' + wide + ',height=' + high);
}
</script>
and in the link of the picture I have:
<a href="javascript:cPop('urlofpage.htm',630,480)">
---------------------------------------------------------------
and to get rid of all of the margins and address bar etc I just used the same code as I showd before on the page that holds the bigger picture:
<!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>Verge Show</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body
{
margin:0;
padding:0;
}
/*//]]/*/
</style>
<title>Verge Show</title>
</head>
<body>
<div>
<img src="../../images/Gig%20Pics%20/21.11.03/Gig%20Pic%20001.jpg" alt="Under Judgement" border="0" width="630" height="480"/>
</div>
</body>
<html/>
Again... cheers for all the help mate.... really appreciate it
Magpie
<a href="javascript:window.open("bigimage.html","mywindow","status=1,width=300,height=500")"><img src="littleimage.jpg" width="20" height="20" alt=""></a>
I find it too easy to lose track when there are a lot of links on a page and they all have such involved javascript in them - that's why I prefer to approach this kind of thing by first defining a function in the head section that takes care of all the basics that every link will need.
Then in the body section, the links just need to call the function that I defined, and pass the parameters to it that change with every link.
So, on the Generic Javascript page, I advise defining a function that I named cPop (my shorthand for custom pop-up) an placing it in the <head> section of the page.
<script type="text/javascript">
function cPop(url, wide, high)
{window.open(url,"popup",'width=' + wide + ',height=' + high);
}
</script>
My cPop function takes three parameters: the URL, wide, and high. In this particular function, I chose to name each window the same thing - "popup" - because I didn't expect to need separate windows for each image. If the user leaves the window open, then any other image will just load in the same window and that's OK by me.
The specific combination of single and double quotes is important to get right, by the way.
Then in the body, when I need a pop-up link, I can use the function that I already defined once in the head section, ad pass it the three exact parameters that I need in each specific case. And that way, I have a short and tidy looking link:
<a href="javascript:cPop('page.html',300,500)"><img src="smallimage.jpg" width="20" height="20" alt=""></a>
Because I already used double quotes preceding the word javascript, I use single quotes around the url.
Notice each part used in the mark-up for the link:
a -
the opening anchor taghref -
the anchor tag's attribute, that tells you what the link will dojavascript: -
when the link is clicked, a javascript function will be calledcPop -
the name of the specific function I created in the head section('page.html',300,500) -
the three parameters that the cPop() function needs to do its work<img src="smallimage.jpg"> -
The thumbnail image that becomes hot-linked</a> -
The closing anchor tag
By the way, when technical terms are unfamiliar for me, I use Google. Every one of us has areas of technology that we just don't know - that's the situation. So if I don't understand, I look it up. And that happens almost every day.
Things can get a bit confusing because not every person uses technical vocabulary in an exact way - that would be nice, but it's not reality on a forum. Nevertheless, search engines will help you find your way through many unknown technical areas. And then, after a while, you find you've learned enough to get around on you own.
Kind regards
Magpie
When the popup loads up... how do you make it so that the new window loads up in the top left of the screen?
<script language="JavaScript">
function cPop(url, wide, high)
{window.open(url,"popup",'width=' + wide + ',height=' + high);
}
</script>
would it just be an addition to this code?
All help is much appreciated
Regards
Magpie
Let's say you want the new window to appear at these screen coordinates: [30,40]
Then you would add 4 items to the cPop() function's features string:
<script language="JavaScript">
function cPop(url, wide, high)
{window.open(url,"popup",'width=' + wide + ',height=' + high,left=30,top=40,screenX=30,screenY=40);
}
</script>
Also note, users can easily and accidentally hide the pop-up window under other open windows. Then if they click on a new enlargement, it will still load in the existing window but the user can't see it, because it's buried under other windows. For this reason, on every enlargement html page it's a good idea to use some javascript in the <body> tag that will put the pop-up window back on top every time a new page is loaded into it:
<body onLoad="window.focus()>
If you do a web search on a phrase like [window open features string] you will find many more possible additions - not all of which enjoy univeral browser support, but some of which do. Just be aware that the features string parameters should not have any spaces around the commas that separate them from each other - neither preceding or following.
I've put in this code as you said:
<script language="JavaScript">
function cPop(url, wide, high)
{window.open(url,"popup",'width=' + wide + ',height=' + high,left=30,top=40,screenX=30,screenY=40);
}
</script>
when I go to click on one of the pictures it does not work.... Internet Explorer gives me this error message:
Line: 44
Char: 2
Error: Not Implemented
Code: 0
Url: [......]
If you test in a different browser, like Firefox, you'll find the javascript console gives more helpful error information.
