problem with info div

Page: 1

Author Post
jjack
Guest
Hello, I have used floatbox to my project to show gallery of products with link which I generate used HTML code like this:

<a href="img.jpg" title="" rel="slideshow" rev="info:#myInfoDiv infoOptions:`theme:white width:500 height:400` type:iframe" ><img src="tn/img.jpg" alt="Gallery Img 1" /></a>

when myInfoDiv contain code like this:

<div id="myInfoDiv" style="visibility:hidden; display:none;">

<form method="post" action="">
<div><label>name</label><input type="text" value="" name="name" id="recommendtoFriend_name"></div>
<div><label>surname</label><input type="text" value="" name="surname" id="recommendToFriend_surname"></div>
<input type="text" value="" name="pictureWhichIWantToSend" id="pictureWhichIWantToSend"></div>
</form>


</div>

What i changed in checkbox is getting name of file of actually showed image and putting it on <input type="text" value="" name="pictureWhichIWantToSend" id="pictureWhichIWantToSend"> which is in myInfoDiv.

and it's not good for me because I want to use floatbox to:

Show gallery of products with option to send to friend, which will open new floatbox (like infoDiv) with form and give possibility to send email (via PHP) with image in attachment of picture where user clicked link to "Send to friend".
What is necessery for me is I want to validate via Javascript form.

Is there any way to show gallery via floatbox, and showing link to form with hidden name of file ?
Administrator
Registered: Aug 2008
Posts: 3382
I'm not sure I understand, but I'll attempt a reply based on what I think you might be asking.

There's a couple of things you should understand about displaying forms and inline content (hidden divs) in floatbox. First, in floatbox up to v3.24 the hidden div content is copied in to the floatbox div. This creates two instances of the innerHTML of that hidden div on your page. So if the content from that hidden div contains element ids or names, those ids and names will also be duplicated and have two instances on your page. So now if you try to access one of those elements by id or name to update it, you may get the instance you are looking for in the floatbox, or, more likely, you will get the original element that's still in the hidden div. (Floatbox v3.25 changes this by moving hidden div content into the box instead of copying it, thereby maintaining a single instance of that content on the page.)

Because of this duplicate id/name problem, it is best to load content that you want to dynamically update as iframed content, not inline content. But there is also a second reason why you want to use iframed content for your forms.

When you use inline content, you have a single document and the floatbox keyboard handler is in effect for everything in that document. This means that a form that was loaded from an inline div will have the tab key and spacebar blocked from normal usage. Your site visitors will not be able to tab between form fields, nor will they be able to 'click' buttons by using the spacebar (unless you disable floatbox's normal keyboard handling).

A form loaded as an iframe has its own window and document and its own keyboard handler, so is unaffected by floatbox's keyboard handler when it has the focus.

Ok, so hopefully I've convinced you that your form resides in an external html file loaded as an iframe. Now populating the form fields on load is not too difficult. Your info setting might now look something like rev="info:`myForm.html?val=somePic.jpg` ...".

And in myForm.html you would add a window.onload action that takes the value of val from the querystring and injects that into the form field. I'll leave it to you to work out the onload javascript required to parse the pic name out of the querystring (window.location.search), locate the named text input on your form, and update the value of that input field with the pic name.

Note that you don't need to use the "info" capability of floatbox to do this, but if you do, you may want to change the infoText option to something other than the default string. You could instead set your link up as an anchor in the caption if you like. Remember to encode html entities (<, >, ") if you use the caption string.
jjack
Guest
thank you very much, mr Admin ;)

I did what you wrote, and it works like a charm.

Thank you very much!

Page: 1