Jquery conflict on three sites using the popup widget -- stack overflow error at line 225 -- looking for workaround with fancybox

  • Profile Image
    jonschr
    Asked on February 13, 2012 at 09:11 PM

    Hello there!

    I've read through some of the other responses and have found a few solutions that you'd helped with.

    We are getting the stack overflow line 225 error in IE only, and with some different line numbers referenced in a few places.

    Our jquery (I think) is all in noconflict mode on all of these sites. Not asking you to rewrite stuff without using prototype, or anthing like that.

    What I'm hoping for -- so that I can continue using jotforms, which I love -- is for someone to give me some information on what's involved in creating a workaround using another lightbox

    We have fancybox installed on all of these sites already, and one is still in development:

    http://parklaneequestrian.com

    http://dev2.redfishbluefishmedia.com/

    http://greatdaybydesign.com/contact/

     

    Would I create a separate page using your iframe embed, then try to get fancybox (or another lightbox solution, even) to pull that up onclick?

    Would appreciate any sample code as well.

    Thanks!

    Jon

  • Profile Image
    fxr
    Answered on February 14, 2012 at 05:23 AM

    Hello Jon,

     

    OK, here is the code you need to use make use to make use of mostly CSS based lightbox, in which you can open your lightbox in an IFrame, so that we can be sure there will no conflicts with any other javascript on your webpage. 

    Replace your two snippets of lightbox code with the following:

    http://pastie.org/3379692

    I have included your 2 links to your forms in that code, so replace the entire highlighted section in this screenshot this code:

     

    Then add the following code just before the closing tag of your webpage:

    http://pastie.org/3379708

    You can see a clone of your webpage with this code in place here

    --

    Obviously this method of adding lightbox forms to your webpage doesnt automate the process as well as using JotForm code to generate them, so each webpage this code is placed on will need small changes to the CSS & HTML to get it functioning correctly. 

     

    Let me know if you like the effect, and I will try to explain the changes you need to make to the HTML/CSS to use it with it a different form on a different webpage. 

  • Profile Image
    jonschr
    Answered on February 20, 2012 at 04:13 AM

    I do like the effect -- better, in fact, than I liked the original. Cleaner look, slightly.

    There's only one issue I'm having. Using your code, the form seems to be stuck at the bottom of the page. I've tried moving it up in a couple of different ways, but then I'm seeing it show up on the front page on load. 

    Any suggestions? I'm still playing with this, so I may simply figure it out in the meantime.

     

    I'd love to know the general overview of how to use this on different pages. Likely, I'll start using this setup for all of my popup jotform embeds. 

    Thanks!

  • Profile Image
    jonschr
    Answered on February 20, 2012 at 05:07 AM

    As it turns out, I have this working correctly now, with one very small issue. In IE, if I click the little "close" button, it doesn't close. I can live with this if there's not an easy fix, but I imagine it's a single line of code to fix it. Ideas?

    Even having implemented it here and on dev2.redfishbluefishmedia.com without an issue, I'd still love an overview of exactly how it's working, since I'm likely going to integrate this code for the most part into many other sites.

    Thanks again for all your help!

  • Profile Image
    fxr
    Answered on February 21, 2012 at 02:05 PM

    Hello, 

    Sorry about the delay getting back to you on this. (internet issues after a house move) 

    I will be back online again tomorrow and get this all tidied up for you, including the IE issue, which i can't imagine that being too much of problem. (thanks for noticing it!)

    I will include a guide on how this to implement this workaround for jquery/javascript conflicts so you can create that lightbox effect with any form. 

     

     

     

  • Profile Image
    jonschr
    Answered on February 21, 2012 at 02:09 PM

    Turned out that even that issue wasn't a big deal. I inadvertantly missed copying in the right identifier on one of the forms (I'm sure that's not the right term), but fixing that fixed the problem.

    Would still love the guide, but my issues have all been closed. Thanks again for your help!

    Mostly, I'd like to know how to develop my own CSS for different "looks" for this easily. I create websites, start to finish, so I understand CSS, but I don't really understand what each of the divs here "does" if that makes sense.

    Thanks!

    Jon