what's up everyone?! It's been a while, but I'll get right to it.
I need some help getting SimpleModal to work on a BigCartel Shop. I've installed SimpleModal fine on a splash page hosted on my server but the same implementation doesn't work with Big Cartel.
According to the BigCartel forums (which are now Kaput!) the Prototype Library used by the shop conflicts with the jQuery library. WTF!
There are also some weird things I can't wrap my head around like the div id=contact-form (which I changed to contact_form because it was conflicting with the BigCartel shops contact form) doesn't appear anywhere in the SimpleModal CSS?! What am I missing here?
My coding skills are limited to copy and paste javascripts and CSS so all this jQuery.noConflict is a completely foreign!
Any insight will be very appreciated. Thanks in advance!
Allright, you can consider it this way :
When javascript developers create a library of code they put all that stuff in a specific namespace, which is actually defined as a javascript object, containing all functions, methods etc. This is done specifically to avoid conflicts when using code from different developers side by side.
So Prototype and jQuery both run in their own namespace. However in this case it seems they both unfortunately use the same symbol to represent their namespaces ( or some part of them, didn't check ).
What the piece of noConflict code seems to do is remove the symbol conflict - it should work by just copy/pasting it beneath your Prototype/jQuery includes - no need to understand what's going on under the hood afaict.
Can't say anything about the css thing without an example 
OK, this is what the head part of the shop looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> {{ store.name }} — {{ page.name }} <!-- --> {{ head_content }}
<script type="text/javascript" src="http://bottomrocker.com/contact/js/jquery.js"></script>
<script type="text/javascript" src="http://bottomrocker.com/contact/js/jquery.simplemodal.js"></script>
<script type="text/javascript" src="http://bottomrocker.com/contact/js/contact.js"></script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
When I simply copy and paste the code from Jquery's site my site content completely disapears.
If I remove the noConflict script the site content re-appears.
You are importing jQuery twice. Could be that screws with the fix ? What if you comment one out ? Can't hurt to try.
Also, could be that simpleModal.js uses $, expecting it to refer to jQuery, while it points to prototype.
I removed the google instance of jQuery and added jQuery.noConflict(); which works because before that, the FancyZoom script stopped working and now it's back up.
I also tried to play with where the jquery script is placed in the html and had no luck either.
There is also some weirdness happening now... If you click on a product to display the product detail page and then try to click on the SimpleModal link in the left menu, the page goes blank and freezes on Firefox 3.5.3. On IE 7.0 the overlay appears aswell as horz. and vert. scrollbars with the left menu and header logo repeated and offset. :|