Jquery Contact Us Lightbox Script Issue

[Blackhawk095]

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:

<!-- START LIGHTBOX CSS -->
<link rel="stylesheet" type="text/css" href="Jquery-Light-Box/css/contact.css" />
<!-- END LIGHTBOX CSS -->

Lightbox link:

<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):

<!-- 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.)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type='text/javascript' src="Jquery-Light-Box/js/jquery.js"></script>

Ideas?

[Ronald Roe]

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.

[Blackhawk095]

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.

[Ganners]

You should have to initialize your SimpleModal Contact Form? It is a jQuery plugin it seems.

[Blackhawk095]

To make it work, I just have to include the javascript files and use this code to call it:

<div id='contact_form'>
<a href='#' class='contact'><div id="contact_us"></div></a>
</div>

For some reason, it still doesn't work.

[Ronald Roe]

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".

[Blackhawk095]

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?

[Ronald Roe]

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.

[Blackhawk095]

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?