Problem using both Prototype and jQuery in the same page

I have a conflict when I use a jquery script for inline window and prototype to toogle a menu. When I use one of the two is working properly. However when I use them both, only the prototype works. I read about a jquery.noconflict but I can use it correctly. Those are the scripts.

here is my jquery script ( inline window )

<script type="text/javascript">

$(document).ready(function(){

    //When you click on a link with class of poplight and the href starts with a # 
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel'); //Get Popup Name
        var popURL = $(this).attr('href'); //Get Popup href to define size

        //Pull Query & Variables from href URL
        var query= popURL.split('?');
        var dim= query[1].split('&');
        var popWidth = dim[0].split('=')[1]; //Gets the first query string value

        //Fade in the Popup and add close button
        $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');

        //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
        var popMargTop = ($('#' + popID).height() + 80) / 2;
        var popMargLeft = ($('#' + popID).width() + 80) / 2;

        //Apply Margin to Popup
        $('#' + popID).css({ 
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });

        //Fade in Background
        $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
        $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 

        return false;
    });


    //Close Popups and Fade Layer
    $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
        $('#fade , .popup_block').fadeOut(function() {
            $('#fade开发者_高级运维, a.close').remove();  
    }); //fade them both out

        return false;
    });


});

</script>

and this is my prototype script

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>  

<script type="text/javascript">  
// <![CDATA[  
// Making sure this code only executes when the document is loaded: this makes the DOM available to us  
Event.observe(document, 'dom:loaded', function() {  

    // for every element with an toggler class...  
    $$('.toggleExample').each(function(element) {  

        // we put on an event listener of the click type  
        Event.observe(element, 'click', function(event){   

            // We stop the default link behaviour  
            Event.stop(event);  

            // when clicked, traverse the DOM: 1 step up (from it's A-element to it's container DIV-element),   
            // and select its following sibling (next(0)), and toggle that shit.  
            Event.element(event).up(0).next(0).toggle();  

        }, false);  

    });  

});  
// ]]>  
</script>  

Put this right after the embedded jquery.js:

<script  type="text/javascript">
$.noConflict();
</script>

And change this line:

$(document).ready(function(){

to

jQuery(document).ready(function($){

First load jQuery and then call

jQuery.noConflict(); 
//if loaded first, you could also use $.noConflict(), 
//but consistency is a good thing

Then continue loading the rest of your stuff (including Prototype, custom scripts, etc).

Finally (and this pertains to your first example above) use the function jQuery where you would normally use $.

Your basic problem is that $ is used by both Prototype and jQuery as a reference to another function. Unfortunately, Prototype more or less requires its $ definition, which means that once its loaded, nothing else should name itself $. jQuery's noConflict method gets rid of the $ method to prevent this problem.

1.- Load jQuery library. 2.- Do your jQuery stuff 3.- Load Prototype library 4.- Do your Prototype stuff

You should use the noConflict function on jQuery, your jQuery stuff should start this way:

<script type="text/javascript">
jQuery.noConflict();
jQuery(function($){

    //All my jQuery stuff

});
</script>

If you need more info check the jQuery API http://api.jquery.com/jQuery.noConflict/