I need help with my LightBox form!

  • Profile Image
    fcaqGeolotech
    Asked on February 03, 2013 at 09:18 PM

    Right, I have a form for a website that I created myself using Dreamweaver, for a friend of mine. Here's the link to the form: Form

    I wanted the form to be a Lightbox effect, which I did by using the embed option. The form on the website can be found here. The form can be opened by clicking the "Register Your Interest" link beneath the main text. However, when the form is opened, there is a hideous horizontal scrollbar at the bottom.

    Also, in Internet Explorer, the reCapture is apparently undefined. I guess this is because IE9 doesn't fully support JavaScript or jQuery as yet, which is a big pain in the... Anyway, when the form opens in IE, there is no reCapture nor a normal Capture in it's place. So people using IE can't send the form, because there is nothing there to validate it.

    To solve the Horizonal scrollbar on the form I used a suggestion in the forum to change the form JavaScript source from g=feedback2 to g=feedback, which does get rid of the Horizontal scrollbar. And this also solves, somehow, the reCapture problem in IE.

    But I've implemented a jQuery div element (Social Network links) to scroll down/up when the user scrolls down/up (I'm using jScroll), therefore keeping it in-veiw. This works with the g=feedback2 but doesn't when changed to g=feedback. So the JavaScript for the form is somehow interferring with the JavaScript for the on-scroll effect.

    Here is the link for the test page for the g=feedback: Test page. So you see, the horizontal scrollbar is sorted out, and so is the IE problem, but the Social links don't follow you as you scroll.

    I will paste the JavaScript code for the on-scroll effect below.

     

    The script sourse below is the source of the jScroll JavaScript, which you can take a look at HERE.

    <script src="JavaScript/jquery.jscroll.js"></script>

    This code is the call function for the jScroll to work.

    <script>

    $(function() {

         $(".Social").jScroll();

    });

    </script>

     

    This code is placed in the <head> of the HTML document, after the script source for the jQuery library has been declared. I have tried placing the code in the <body>, but with no luck.

     

    Please can you help me sort this out. Thanks in advance.

  • Profile Image
    EltonCris
    Answered on February 03, 2013 at 11:18 PM

    Hi,

    Declare your scroll script this way. This should fixed it.

    <script>

    var j = jQuery.noConflict();

    j(function() {

         j(".Social").jScroll();

    });

    </script>

    I have highlighted the modified part with noconflict declared. Check the working version here. http://idarktech.com/test/jquery_fix_scroll_174010.html

    Thanks!

  • Profile Image
    fcaqGeolotech
    Answered on February 04, 2013 at 12:16 AM

    That's awesome! It works perfectly now. Thanks a million. :D

  • Profile Image
    EltonCris
    Answered on February 04, 2013 at 01:49 AM

    Glad to hear it!

    Cheers! =)