Jqueryui dialog create conflicts with other scripts

Question

I have such an issue, I am using few script like jquery carousel slider, jquery drop down menu but when I am trying to add jqueryui dialog all others scripts do not work. Here is my code:

Before I add JqueryUi dialog:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcmegamenu.1.3.3.js'></script>
<script type='text/javascript' src='js/jquery.liquidcarousel.pack.js'></script>
<script>
    $(document).ready(function(){  
        //To switch directions up/down and left/right just place a "-" in front of the top/left attribute  

        //Caption Sliding (Partially Hidden to Visible)  
        $('.boxgrid.caption').hover(function(){  
            $(".cover", this).stop().animate({top:'40px'},{queue:false,duration:160});  
        }, function() {  
            $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});  
        });  
            $('.boxgrid2.caption').hover(function(){  
            $(".cover", this).stop().animate({top:'190px'},{queue:false,duration:160});  
        }, function() {  
            $(".cover", this).stop().animate({top:'240px'},{queue:false,duration:160});  
        });  
            $('.boxgrid3.caption').hover(function(){  
            $(".cover", this).stop().animate({top:'40px'},{queue:false,duration:160});  
        }, function() {  
            $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});  
        }); 


    });  
</script>
<script>
jQuery(document).ready(function($) {
    jQuery('#mega-menu-1').dcMegaMenu();

});
</script>

<script> 
    function show() { 
        if(document.getElementById('benefits').style.display=='none') { 
            document.getElementById('benefits').style.display='block'; 
        } 
        return false;
    } 
    function hide() { 
        if(document.getElementById('benefits').style.display=='block') { 
            document.getElementById('benefits').style.display='none'; 
        } 
        return false;
    }   
</script> 
<script type="text/javascript">
    <!--
        $(document).ready(function() {
            $('#liquid1').liquidcarousel({height:129, duration:100, hidearrows:false});
        });
    -->
</script>

Code with JqueryUi dialog:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcmegamenu.1.3.3.js'></script>
<script type='text/javascript' src='js/jquery.liquidcarousel.pack.js'></script>

<!--Dialog start-->
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<script>
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "fade"

});
$( ".log-in" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});
</script>
<!--Dialog end-->


<script>
    $(document).ready(function(){  
        //To switch directions up/down and left/right just place a "-" in front of the top/left attribute  

        //Caption Sliding (Partially Hidden to Visible)  
        $('.boxgrid.caption').hover(function(){  
            $(".cover", this).stop().animate({top:'40px'},{queue:false,duration:160});  
        }, function() {  
            $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});  
        });  
            $('.boxgrid2.caption').hover(function(){  
            $(".cover", this).stop().animate({top:'190px'},{queue:false,duration:160});  
        }, function() {  
            $(".cover", this).stop().animate({top:'240px'},{queue:false,duration:160});  
        });  
            $('.boxgrid3.caption').hover(function(){  
            $(".cover", this).stop().animate({top:'40px'},{queue:false,duration:160});  
        }, function() {  
            $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});  
        }); 


    });  
</script>



<script>
jQuery(document).ready(function($) {
    jQuery('#mega-menu-1').dcMegaMenu();

});
</script>


<script> 
    function show() { 
        if(document.getElementById('benefits').style.display=='none') { 
            document.getElementById('benefits').style.display='block'; 
        } 
        return false;
    } 
    function hide() { 
        if(document.getElementById('benefits').style.display=='block') { 
            document.getElementById('benefits').style.display='none'; 
        } 
        return false;
    }   
</script> 
<script type="text/javascript">
    <!--
        $(document).ready(function() {
            $('#liquid1').liquidcarousel({height:129, duration:100, hidearrows:false});
        });
    -->
</script>

One more very strange thing for me is that when I add JqueryUi dialog script after all script (to the end of this code) it doesn't work at all.

Any ideas why?

Answer 1

I have used noConflict();

add to script $jQ = jQuery.noConflict(); then change all $ -> $jQ

<script>
$jQ = jQuery.noConflict();
$jQ .fx.speeds._default = 1000;
$jQ (function() {
$jQ ( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "fade"

});
$jQ ( ".log-in" ).click(function() {
$jQ ( "#dialog" ).dialog( "open" );
return false;
});
});
</script>