Topic awaiting preservation: Dynamic HTML in Pop-up; Write Line Only if Needed

Okay, I'm getting in over my head here.

What I'm doing is creating a pop-up whose HTML is written dynamically by a JavaScript function. That much I can do, but it gets more complicated.

The pop-up I need will contain from 2 to 4 images, and possibly a caption for each image or a caption at the top for the whole thing. In other words, it could go...

--------
Caption
Image
Image
--------

...or...

--------
Image
Caption
Image
Caption
--------

...or...

--------
Image
Image
Image
--------

...using, like I said, anywhere from 2 to 4 images.

Here's what I've written so far. (Better to link than to get horizontal scroll.)

I call it with a link like this:
<A HREF="javascript:mimgPopup('Caption at the top.','img_01.jpg','Caption.','img_02.jpg','Caption.','img_03.jpg','Caption.','img_04.jpg','Caption.',);">

The obvious problem here is that, if I do not have a third or fourth image, the image tag (and its table cell) gets written anyway, without a file name. The lack of a caption would create an empty table cell, as well, although that wouldn't really be noticeable.

What I need to be able to do is have the script write a line only if a variable (a caption or a file name) has been defined. Ideally, I would be able to tell it what's what, so I could avoid having to enter all sorts of empty quotes in the link ? <A HREF="javascript:mimgPopup('','img_01.jpg','','img_02.jpg','','','','','');> ? which just seems very silly. Maybe prefix each variable somehow so the script knows what they are?

Also, although this isn't vital, it would be nice not to limit the script to 4 images and captions in the event that a future pop-up actually required more ? just add more to the link and the script would know what to do with them.

Not asking much, am I? Can anyone help?





[This message has been edited by Wes (edited 01-17-2003).]

An easy, but not very beautifull way of solving is this. Call the function like this:

<a href="javascript:mimgPopup( 'Caption at the top.', 

     'img_01.jpg', 'Caption.', 'img_02.jpg', 'Caption.', null, null, null, null );">

and in the function change the document.write lines something like this:

if (capOne != null ) mw.document.write( '<TR><TD 

      ALIGN=center CLASS="popup-caption">'+capOne+'</TD></TR>\n' );

This will cause the script only to write the lines with a varible that differs from null. You can also change null to ' ' or whatever other combination of letters you like as long as you remeber to change the if statement in the function as well.

I doubt that your ideal solution is possible since "default function values" isn't enabled in Javascript as far as I know. So you have to type all the commas to get the right function call.
_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"


[This message has been edited by Veneficuz (edited 01-17-2003).]

Yeah, I figured I'd have to settle for something like that. Not a big deal, I suppose, since I don't use a multiple-image pop-up often.

Thanks!

If the number of images is uncertain, I'd pass an array of images and captions into the function, along with capTop. (Both should have the same number of elements. Empty captions can be empty strings: "".) Then you can loop through the array and write out the necessary html for each one, ignoring captions that are empty strings.

I'd do the same as slime but modify a bit (I don't like putting that much in links)

// put all this in your head
<BLOCKQUOTE><FONT face="Verdana, Arial">code:</font><HR><pre>
// A couple of array's of content.
cap1 = new Array('cap1 this is a caption','cap2.jpg');
cap2 = new Array('cap1.jpg','cap3','capWhatever I want this to be');

function mimgPopup(myArray) {
mw = window.open('','... blah ... blah ....
// bunch of stuff to here

// Loop Through the array
for(i=0;i<myArray.length;i++) {

// If it ends with .jpg or .gif then it's an image
re = /(\.jpg

You know, I should probably ask first, how long of a string can I safely use in such a link?

I mean, 4 file names with 4 captions several words long ? am I risking any problems?

If so, could I safely create an array anywhere within a document that I could reference in a link? In other words, the script is in a separate .js document and I insert the following somewhere in the body of the document that uses the link:

<SCRIPT>
cap1 = new Array('cap1 this is a caption','cap2.jpg');
cap2 = new Array('cap1.jpg','cap3','capWhatever I want this to be');
</SCRIPT>

Then I use the link wherever I need in that same document.

(The reason I would need to do this is because I mostly use such pop-ups in news headlines that I enter into a blogging program. I don't want to go and open the script up to add a new array every time.)

And one last question: Is there any difference at all between using double quotation marks and single quotation marks in the arrays?

Yes, creating the array(s) in a separate <script> tag is a good idea. And no, in JS there is no difference between single and double quotes. (It allows single quotes so that you can use it within double-quoted HTML attributes, such as onclick="myfunc('hi')")

Yikes... you were just sitting there waiting for me to reply, weren't you?

This is all good news. I think the array would be less clumsy than putting so much in the link. It would also make it easier for me to read the copy without such a long link in the middle.

And being able to use double quotes means no more problems using apostrophes in my captions. In a link, I'd have to use a special character to get an apostrophe.

Ooh...

Now I'm considering combining two pop-up scripts together. Mind helping me with a little syntax?

How exactly do I write, "If there is only one image in the array..."?

That depends on how you're doing it. If you have one array for images and one array for captions, you can just do

if (the_image_array.length <= 1) {zero_or_one_images();}

But if you're mixing them, then you'll have to do:

var number_of_images = 0;
var re = /(\.jpg

Woo! Thanks, guys. I've got it doing pretty much what I want it to now ? one script for both single- and multi-image pop-ups.

I integrated Bugimus's excellent resize script into the mix and it seems to work great so far. (At least in IE6. I'll try to test it further. I need to make sure my windows sizes are right for other browsers, anyway.)

Give it a try and let me know what you think. If you spot anything I'm not really doing correctly, please let me know.

Okay, here are the results:

IE 6: Super.

NN 6: Super.

NN 4: Weird problem ? my images are getting blocked. I use the following to keep others from linking to my images and it's affecting this particular pop-up. (Screen shot.)

<BLOCKQUOTE><FONT face="Verdana, Arial">code:</font><HR><pre>RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?bigwaste.com.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://(www\.)?texastwisted.com.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://(www\.)?ozoneasylum.com.*$ [NC]
RewriteRule \.(gif

Hmm no great answer except apparently NN4 is sending some wierd HTTP_REFFERER Variable

do you have php installed try just echoing $HTTP_REFERER and see what that does so we can check that against your rewrite rules.
actually do something like
echo "--> $HTTP_REFERER <--";

(I'm afraid netscape isn't sending a referer at all)

Also right click that blank "IMAGE" in the opera 5 and see if you can get the image properties to see what it's looking for (I don't think it's a referer issue)



.:[ Never resist a perfect moment ]:.

[This message has been edited by bitdamaged (edited 01-25-2003).]

Here's what I get for the image properties in Opera. Not a whole lot of help.

As for the referrer, I'm not sure how to do what you suggested. I know zilch about PHP. I tried using an SSI echo, but I realized that didn't work because the pop-up is generated entirely on the client side.

well nothing is completely client side

just do this. Name the file you are using for the popup whatever.php

Then just put

<?
echo "--> $HTTP_REFERER <--";
?>
(go ahead and cut and paste)

That should tell you what the HTTP_REFERER is

actually that tells me something about the Opera issue. It's writing a tag called like <img src="">
which is of course wierd hmmm.



.:[ Never resist a perfect moment ]:.

[This message has been edited by bitdamaged (edited 01-25-2003).]

That's the thing. I can't name the pop-up file .php because there is no pop-up file. It's generated entirely by the JavaScript.

I believe that's probably the reason there may be no referer; there's no file being linked to.

As for Opera, I can't view the source of the pop-up for some reason, so I can't even figure out exactly what's being written.

Whew!

Took long enough to find the time to finish this and to work out that referrer problem in NN4, but it's finally done and you guys are credited in the source with links to your sites.

Bugimus gets top billing, though, since I started with his dynamically resizing pop-up script.
 
http://www.bugimus.com/gurus/image_popup/imagepopup.html

Thanks, all!

Incidentally, it still doesn't work properly in Opera 5, but I figure it's up to 7 now and everyone who uses Opera does so deliberately and is most likely keeping up with the latest versions.




[This message has been edited by Wes (edited 03-22-2003).]