on clicking a trigger (image) a 2nd box should auto open obove the first one

Page: 1

Author Post
Member
Registered: May 2012
Posts: 3
Hi,
I've tried a lot now, BUT nothing realy worked - couldn't find the solution and
I am sure floatbox is able to do what I want...

I use an image as a trigger: (booking button)

if a visitor clicks the button (booking) an iframe should open (that's easy)
BUT
I need an -> automatically opening 2nd floatbox above the opened iframe with an x or close button to close that 2nd infobox again.
(the second box has a promotion code to be filled out in the booking form=iframe)

how is that possible to do?

Please give me an idea... :(
Administrator
Registered: Aug 2008
Posts: 3382
This sounds like a job for the afterItemStart callback. Try adding something like the following to the options on the link that opens the iframe:

data-fb-options="afterItemStart:`fb.start('promoCode.html');`"

If you need to tweak the options for that second floatbox, options can be provided in a second parameter to the fb.start call. (See the API Reference for details.) Don't forget the back-quotes around the afterItemStart code.
Member
Registered: May 2012
Posts: 3
THANK YOU - it works!

I used this code... (actually I used a div not a html document as infobox...)
<a href="https://www.mybookinglink.html/?source=panel" class="floatbox" data-fb-options=" afterItemStart:`fb.start(&#039;infoOptions: width:475 backgroundColor:#ffffe7 info:#promotioncode_info&#039;);` width:950 height:700 scrolling:yes showOuterClose: true ">


and the div is like:
<div id="promotioncode_info" style="display:none; color:black; background: #C60; width: 450px;">

<p style="margin:0; padding:10px;">
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br />
Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. <br />
Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. </p>
<p style="margin:0; padding:10px;"></p>
<img src="../../../gifs/arrow_down3.gif" width="24" height="18" alt="-" /></div>




2 more callenges -Questions:

The infobox must not close if I click somewhere in the first Floatbox,
becourse the customer would enter the promotion code he/she reads in the infobox. So the infobox must only close If clicked --- close!

2)
how to place the window not middle... but exact at x / y position (absolut or relativ... eg in the first window...) ?

I am sure it is possible, but how?



THANKS! :P
« Last edit by martinius on Tue May 08, 2012 9:35 am. »
Administrator
Registered: Aug 2008
Posts: 3382
I don't think the code you quoted will work.
fb.start() takes two parameters, the first is mandatory and gives the source for what to show in the floatbox. The second parameter is optional and is a string (or object) of options to apply, if any, to that floatbox. There is no source parameter in your fb.start call. There's only an option string passed as the first and only parameter.

I suspect you want something like:
fb.start( '#promotioncode_info', 'width:475 contentBackgroundColor:#ffffe7' );

It sounds like you want to have a non-modal floatbox that stays open while the user types in the first floatbox. Try some of the following options:
fb.start('#promotioncode_info', 'width:475 boxLeft:10 boxTop:10 modal:false enableKeyboardNav:false');

It sounds like a read of the Options Reference might be helpful as it would save a bunch of time wasted trying to guess "how do I....???"
Member
Registered: May 2012
Posts: 3
Thank you for replay!

Quote
I don't think the code you quoted will work.


Somehow locally tested it worked, but your solution is surely better!

Thank you!!!!!

lg
martin :P

P.S.: I did read the the Options Reference and checked what I could find to help solving the challenge, BUT - as I am not a programmer... oder so, there is a lack of demo links... to see how to implement the codes in real cases. For me that would be just it.
But thank you for replay.
Hope the Headline of inquiry is helping somebody to get the same solution....for a similar problem... :oops:

Page: 1