Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Senior Member Blackhawk095's Avatar
    Join Date
    May 2011
    Location
    Kentucky (USA)
    Posts
    384
    Member #
    27969
    Liked
    45 times
    I have decided to try something new and add a lightbox contact us form. I found a free script online and when I tested the form by itself, the lightbox worked great, but once I applied it to the website I'm working on, the lightbox stopped working.

    I have another jquery script running, but I don't think that it is interfering with the lightbox. I took that script out and the lightbox still didn't work.

    Here is the website that I got the script from: http://www.ericmmartin.com/projects/simplemodal-demos/
    (scroll down the the 'Contact Form' section of the website for the source code and a demo)

    Here is the working version after I edited the css: http://www.my-testing-area2.netau.net/website_projects/soldiers_of_america/Jquery-Light-Box/

    Here is the website I tried to apply it to: http://www.my-testing-area2.netau.net/website_projects/soldiers_of_america/index.php
    (click the 'Contact Us' button to the left side)

    These are some of the code that I used when applying the lightbox to the website:

    CSS link:
    HTML Code:
    <!-- START LIGHTBOX CSS -->
    <link rel="stylesheet" type="text/css" href="Jquery-Light-Box/css/contact.css" />
    <!-- END LIGHTBOX CSS -->
    Lightbox link:
    HTML Code:
    <div id='contact_form'>
    <a href='#' class='contact'><div id="contact_us"></div></a>
    </div>
    Scripts (This code is inserted right above the </body> tag):
    HTML Code:
    <!-- START LIGHTBOX SCRIPTS -->
    <script type='text/javascript' src="Jquery-Light-Box/js/jquery.js"></script>
    <script type='text/javascript' src='Jquery-Light-Box/js/jquery.simplemodal.js'></script>
    <script type='text/javascript' src='Jquery-Light-Box/js/contact.js'></script>
    <!-- END LIGHTBOX SCRIPTS -->
    Here are the two Jquery links I have:
    (The top is for an expanding div. The second script is for the lightbox.)
    HTML Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    HTML Code:
    <script type='text/javascript' src="Jquery-Light-Box/js/jquery.js"></script>
    Ideas?
    [COLOR=rgb(0, 51, 102)]Student Web Designer[/COLOR]
    [COLOR=rgb(0, 51, 102)]If you thought something I said was helpful. LIKE IT![/COLOR]

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    For these lightboxes, there's usually a script that tells the lightbox script to fire based on a given link or other event. Is that what contact.js is? If not, you may be missing part of the script. I did something like this with Fancybox, and it took me a good bit to finagle it into firing for anything but images.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member Blackhawk095's Avatar
    Join Date
    May 2011
    Location
    Kentucky (USA)
    Posts
    384
    Member #
    27969
    Liked
    45 times
    Yes, Contact.js is the script that makes the lightbox work.

    I have been playing with it for hours. I can't figure out the issue. I don't think I'm missing any part of the script. As I mentioned earlier, I tested the script before applying it to the website and it worked great.
    [COLOR=rgb(0, 51, 102)]Student Web Designer[/COLOR]
    [COLOR=rgb(0, 51, 102)]If you thought something I said was helpful. LIKE IT![/COLOR]

  5. #4
    Senior Member Ganners's Avatar
    Join Date
    Feb 2011
    Location
    United Kingdom
    Posts
    415
    Member #
    27007
    Liked
    92 times
    You should have to initialize your SimpleModal Contact Form? It is a jQuery plugin it seems.
    Mark Gannaway Software Developer

    Recent Experiments
    - Backpropogation Neural Network language solving (http://ann.ganners.co.uk/)
    - Animated image to ASCII (http://google.ganners.co.uk/)
    - 3D Paper Characters (http://cybergame.ganners.co.uk/)
    - Anagram solving (http://roflol.co.uk/)

  6. #5
    Senior Member Blackhawk095's Avatar
    Join Date
    May 2011
    Location
    Kentucky (USA)
    Posts
    384
    Member #
    27969
    Liked
    45 times
    To make it work, I just have to include the javascript files and use this code to call it:

    HTML Code:
    <div id='contact_form'>
    <a href='#' class='contact'><div id="contact_us"></div></a>
    </div>
    For some reason, it still doesn't work.
    [COLOR=rgb(0, 51, 102)]Student Web Designer[/COLOR]
    [COLOR=rgb(0, 51, 102)]If you thought something I said was helpful. LIKE IT![/COLOR]

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by Ganners, post: 226370
    You should have to initialize your SimpleModal Contact Form? It is a jQuery plugin it seems.
    What I was getting at is there is usually a script with a set of parameters that tell the plugin what settings to use, like what class or id to target, or whatever. For instance, at a minimum, Fancybox requires the following:
    $("a#single_image").fancybox();
    It tells the plugin to initiate fancybox when you click a link with the id "single_image".
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Senior Member Blackhawk095's Avatar
    Join Date
    May 2011
    Location
    Kentucky (USA)
    Posts
    384
    Member #
    27969
    Liked
    45 times
    To initialize the form, there must be a div with an id of 'Contact_form' and a link with the class of 'contact'.

    Which is what I've done. Do you think that any other scripts could be interfering?
    [COLOR=rgb(0, 51, 102)]Student Web Designer[/COLOR]
    [COLOR=rgb(0, 51, 102)]If you thought something I said was helpful. LIKE IT![/COLOR]

  9. #8
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    2 things:
    1. You only need one copy of jQuery. Choose the newer version and get rid of the other.

    2. In contact.js, it calls for an id of contact-form, not contact-us. Try changing that.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  10. #9
    Senior Member Blackhawk095's Avatar
    Join Date
    May 2011
    Location
    Kentucky (USA)
    Posts
    384
    Member #
    27969
    Liked
    45 times
    Quote Originally Posted by Ronald Roe, post: 226416
    2 things:
    1. You only need one copy of jQuery. Choose the newer version and get rid of the other.

    2. In contact.js, it calls for an id of contact-form, not contact-us. Try changing that.
    The div that is surrounding all of the code has the id of #contact-form. The div that has the id #contact_us, styles the box. It has no part in the javascript.

    I have found a very interesting detail about this issue. The script won't work on the index.php page, but it will work on a page in the light-box sub-folder: Jquery-Light-Box/index.html.

    index.php (not working):
    http://www.my-testing-area2.netau.ne...rs_of_america/

    Jquery-Light_box/index.html (working):
    http://www.my-testing-area2.netau.ne...Box/index.html

    I even tried moving the light-box file from the sub-folder to the main folder and it still didn't work. I have never had this issue. Do you have any idea what is causing it?
    [COLOR=rgb(0, 51, 102)]Student Web Designer[/COLOR]
    [COLOR=rgb(0, 51, 102)]If you thought something I said was helpful. LIKE IT![/COLOR]


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:28 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com