Popup windows

@merxaisSep 15.2004

[CODE]<script type=”text/javascript”> <!–// function enlarge(pic,title,x,y,a,b){ preview = window.open(“”, title, “resizable=no,toolbar=no,scrollbars=no,menubar=no,status=no,directories=no,width=”+x+”,height=”+y+”,left=”+a+”,top=”+b+””);

preview.document.write(‘<html><head><title>Picture</title></head>’ +'<body onBlur=”self.focus();” marginWidth=”0″ marginHeight=”0″ topmargin=”0″ leftmargin=”0″>’ +'<center><a href=”javascript:self.close()”><img border=”0″ alt=”Click to close” src=”‘+pic+'” width=”‘+x+'” height=”‘+y+'”>’ +'</center></a></body></html>’);

preview.document.close(); } // –> </script>[/CODE]

want to know how come the pic cant be in the center of the windows? help pls… ?

to post a comment

JavaScript

11 Comments(s) _↴

@sciguyryanSep 15.2004 — #Try this (untested):

<script type="text/javascript">



</script>

Hope that helps,

RyanJ

@merxaisauthorSep 16.2004 — #doesnt work... after click pic still not in the center of windows :eek:

@merxaisauthorSep 16.2004 — #anyone help pls... ?

@sciguyryanSep 16.2004 — #Do you have a css enabled broswer because it works fine for me :S.

RyanJ

@merxaisauthorSep 17.2004 — #maybe then the <BODY> part something wrong... mind to give me urs? thanks

@iasonSep 18.2004 — #Merxais, right now I came in the forum to put my question, and I first searched the topics, and here it is I think. Lets face it:

We want a lightweight script to open a popup with only two things inside: a title for the image and the image itself, and with dimensions dynamically adopting the size of the image. Right?

After hard trying to combine scripting ideas -and quite frustrated inside the web fridge- i came up with this:

A head section:

<SCRIPT LANGUAGE="JavaScript">

// Intuitive image presentation

// free to use (or improve, feedback please!)

function SmartShow(image,title) {

pic=new Image();

pic.src=(image);

set="toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,width="+pic.width+",height="+pic.height;

NewWin=window.open(image,"name",set);

NewWin.document.write('<html><head><title>'+title+'</title></head><body leftmargin="0" topmargin="0"><a href="javascript:close();"><img src="'+image+'" border="0" alt="Click to close or follow links on main window" /></a></body></html>');

NewWin.resizeBy(pic.width-NewWin.document.body.clientWidth,pic.height-NewWin.document.body.clientHeight);

if (window.focus) {NewWin.focus()}

}

</script>

and links like this:

<p><a href="picture1.jpg" onclick="SmartShow(this.href,'Title of Image1');return false">Image 1</a></p>

Very functional. But… it does not work to the bitter end:

I edit one picture, i.e. change its dimensions, run the html again, the picture comes out with the old dimensions… I copy all files to another directory, hit the html, at first the pictures come in a 100X100 popup, and the links won’t work except if hit twice and after some delay… (actions that you don’t expect from a web user of course!).

Sorry for any mistakes, I’m a newbie.

Let’s combine: Fix a bit of my mess and surpass the need to center things in the popup. Is this not what we want?

Looking forward for your lights, guys. Perhaps a closer look in that <BODY> part?

many thanks

-iason

@sciguyryanSep 18.2004 — #Why are you escaping the ends of HTML tags, that is not required for this?

RyanJ

@Warren86Sep 18.2004 — #...

@merxaisauthorSep 20.2004 — #Warren thanks for ur scripts but it doesnt work after i upload to web! Its working when i testing in browser but after upload, when click on image and didnt popup!

RyanJ ur BODY scripts pls? ?

@merxaisauthorSep 20.2004 — #

[CODE]
 01<a href="javascript:enlarge('pics/popup/1.gif','popup','640','480','640','480')" onClick="window.focus()"><img src="pics/foto/1.gif" width="128" height="96" border="0" alt="Click to enlarge image"></a>
 [/CODE]

this is my body part!

@Willy_DuittSep 20.2004 — #A search of the forum would have returned [url=http://www.webdeveloper.com/forum/showthread.php?s=&postid=247321#post247321]this thread[/url] where I posted an example which opens the window to the size of the image and centers this window within the screen...

If you wish to pop another window from this popup... You can either recall the original function from the parent by prefixing the function name with [i]opener.[/i] or include another script within the document.write of the new window...

.....Willy

Also in #JavaScript _↴

Submit form on enter, multiple submit buttons/input fields popup menu form won't rcv input - firefox printable version

Success!

Help @merxais spread the word by sharing this article on Twitter...

Tweet This

Popup windows

11 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Popup windows

11 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #JavaScript _↴