What is causing a stack overflow 225 error on the lightbox form

  • Profile Image
    onepoint
    Asked on January 26, 2012 at 12:55 PM

    We are trying to integrate the lightbox version of our quote request into our new website "get a price" button but I'm having a few issues:

    1. In Internet Explorer the form will not come up at all and causes an overflow 225 error on the page. I believe the code is in the correct portion of the header tag, but I suspect the code may be slightly off.

    2. The form works in other browsers, however sometimes the alignment from the top, (in safari) is off cutting the top portion of the form.

    3. There is no mousover change of the cursor to reflect the area is clickable.

    Here is the code I'm using:

    <div class='homeTop'> <div class='homeTopLeft'> <p style="text-align: center;"> <a class="lightbox-13453155873">&nbsp; &nbsp;<img alt="" src="/onepoint/images/the_other_one.png" style="width: 619px; height: 75px;" /></a></p> <script src="http://www.jotform.com/min/g=feedback" type="text/javascript"> new JotformFeedback({ formId:'13453155873', base:'http://www.jotform.com/', windowTitle:'Get A Quote In 5 Minutes', background:'#FFA500', fontColor:'#FFFFFF', type:false, height:900, width:700 }); </script> </div>

    Let me know if you have any suggestions. Thanks

    Michael - One Point Partitions
  • Profile Image
    fxr
    Answered on January 26, 2012 at 03:56 PM

    Hello Michael,

    It looks like the JotForm lightbox code is conflicting with the mootools library that is being loaded into the webpage. 

    I have worked on fixes for similar problems before. I have come up with a mainly CSS lightbox solution which allows us to get the form embedded using an iFrame which prevents any conflict with exisiting code on a webpage. 

    You can see a very basic mock up here: ('get started - premium' button at the top)

    It just shows the sort of effect you can expect if you did want to pursue this method. 

    If you wish, I can create some code tailored to your form that you can then add to your webpage to try out. 

    --

    - It involves adding 2 new CSS classes & a block of code just before your closing body tag of your webpage.

  • Profile Image
    onepoint
    Answered on January 26, 2012 at 06:22 PM

    If you all find time to throw any corrections or script variations at me that would be awesome. I have tried placing the script either in the header or footer and both didn't work for me.

    Though I could get our web guys to create it, I prefer using jotform because of the continuosly changing nature of our form.

    Lets give it a try. Also, everything is correct in my image reference instead of using a text link right?

  • Profile Image
    fxr
    Answered on January 26, 2012 at 06:49 PM

    Yeah, Its not going to matter where that script embed code goes. It does seem to be a conflict with exisiting libraries already in use on your webpage. 

    Yeah, your image link is fine, the problem is with the hover effect. JotForm utilizes changes in the CSS of standard webpage elements e.g divs, text to create that 'change' effect, because you are using an image those 'change' CSS rules wont work. 

    If you want to create a hover affect, one way would be to create another similar image of identical dimensions but with just slight changes to the colours. 

    I can have a look at that when I am working through the code early tomorrow. 

    OK. leave it with me a few hours and I will get back to you with code for this CSS based lightbox solution. 

  • Profile Image
    fxr
    Answered on January 27, 2012 at 07:06 AM

    Hello Michael,

    Here is the lightbox effect I created on a copy of of your webpage. It will be compatible with any browser you use it on regardless of what javascripts/libraries (jquery/mootools) you are also loading onto the webpage. 

    I have also created a minor hover affect for the image link that opens it. 

    -> http://pamppi.info/jotform-testing/lightbox/onepoint.html

    You may or may not like it. Its easily changed or removed

    --

    To add this effect to your own page: you need to remove the existing JotForm lightbox code and add the follwing CSS definations, just before the end of your </head> section. -> http://pastie.org/3262750

    Then you need to add the following html/javascript to the bottom of your webpage, just before the closing </body> tag. -> http://pastie.org/3262758

    The last thing is to replace the HTML for the image link that opens the lightbox: -> http://pastie.org/3262772

     

    If you do decide you like it, I hope that easy enough to follow.

    Let us know if you do see any problems with it or if you would like any other little customisations carried out to it.