Question

I have this site and I try to add a contact form in jQuery called facebox, and when I add this code for the contact form work with style the slider and style in menu doesn’t work correctly:

<script type="text/javascript" src="formulario/jquery.js"></script> 

How can I resolve this so the contact form would work fine?

Problem explanation:

Code of the site:

<script src="javascripts/home_packaged.js" type="text/javascript"></script>
<link href="stylesheets/home_packaged.css" media="screen" rel="stylesheet" type="text/css" />
 <!-- THIS IS MY ORIGINAL LIBRARIES JQUERY CODE  -->
        <script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script>
         <script type="text/javascript" src="javascripts/jquery.min.js"></script>
         <script type="text/javascript" src="javascripts/jquery.selectbox-0.5.js"></script>
         <script type="text/javascript" src="javascripts/jquery.colorbox.js"></script>

        <!-- DDSlider jQuery Plugin - VERY IMPORTANT -->
        <script type="text/javascript" src="javascripts/jquery.DDSlider.min.js"></script>

        <!-- Let's start the slider -->
        <script type="text/javascript">

        //triggers the slider
        $(document).ready(function() {
            $('#Items1').selectbox();
             $('#Items2').selectbox();
              $('#Items3').selectbox();
               $('#Items4').selectbox();
                $('#Items5').selectbox();
                 $('#Items6').selectbox();
                  $('#Items7').selectbox();
                   $('#Items8').selectbox();
                    $('#Items9').selectbox();
                     $('#Items10').selectbox();
                     $(".example5").colorbox();
            $('#yourSliderId').DDSlider({

                nextSlide: '.slider_arrow_right',
                prevSlide: '.slider_arrow_left',
                selector: '.slider_selector'

                });

        });


        </script>

<script type="text/javascript">$(document).ready(function(){jQuery.ajaxSetup({'beforeSend':function(xhr){xhr.setRequestHeader("Accept","text/javascript")}})
$("#q").autocomplete({url:'/categories.js',mustMatch:false});$("#q").autocomplete('/categories',function(event,data,formatted){if(data)
document.location.href='/categories/'+data[1];});});</script>
<script type="text/javascript">$(document).ready(function(){$('img.menu_class').click(function(){$('ul.the_menu2').hide();$('ul.the_menu3').hide();$('ul.the_menu').slideToggle('medium');});});$(document).ready(function(){$('a.menu_class').click(function(){$('ul.the_menu2').hide();$('ul.the_menu3').hide();$('ul.the_menu').slideToggle('medium');});});$(document).ready(function(){$('img.menu_class2').click(function(){$('ul.the_menu').hide();$('ul.the_menu3').hide();$('ul.the_menu2').slideToggle('medium');});});$(document).ready(function(){$('img.menu_class3').click(function(){$('ul.the_menu').hide();$('ul.the_menu2').hide();$('ul.the_menu3').slideToggle('medium');});});</script>
<script type="text/javascript">(function($){$.fn.extend({customStyle:function(options){if(!$.browser.msie||($.browser.msie&&$.browser.version>6)){return this.each(function(){var currentSelected=$(this).find(':selected');$(this).after('<span class="customStyleSelectBox"><span class="customStyleSelectBoxInner">'+currentSelected.text()+'</span></span>').css({position:'absolute',opacity:0,fontSize:$(this).next().css('font-size')});var selectBoxSpan=$(this).next();var selectBoxWidth=parseInt($(this).width())-parseInt(selectBoxSpan.css('padding-left'))-parseInt(selectBoxSpan.css('padding-right'));var selectBoxSpanInner=selectBoxSpan.find(':first-child');selectBoxSpan.css({display:'inline-block'});selectBoxSpanInner.css({width:selectBoxWidth,display:'inline-block'});var selectBoxHeight=parseInt(selectBoxSpan.height())+parseInt(selectBoxSpan.css('padding-top'))+parseInt(selectBoxSpan.css('padding-bottom'));$(this).height(selectBoxHeight).change(function(){selectBoxSpanInner.text($(this).find(':selected').text()).parent().addClass('changed');});});}}});})(jQuery);$(function(){$('select.styled').customStyle();});</script>
<script type="text/javascript">jQuery(document).ready(function(){jQuery('#mycarousel').jcarousel();});</script>
<script type="text/javascript">$(document).ready(function(){$('#slider1').s3Slider({timeOut:4000});});</script>
<script type="text/javascript">$(document).ready(function()
{$(".tab_content-n").hide();$("ul.tabs-n li:first").addClass("active").show();$(".tab_content-n:first").show();$("ul.tabs-n li").click(function()
{$("ul.tabs-n li").removeClass("active");$(this).addClass("active");$(".tab_content-n").hide();var activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn();return false;});});</script>


<!-- then I ADD THIS CODE FOR ADD A CONTACT FORM AND THE ERRORS BEGIN  -->

<script type="text/javascript" src="formulario/jquery.js"></script>
<script type="text/javascript" src="formulario/jquery.form.js"></script>
<script src="formulario/facebox/facebox.js" type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready(function(){
     $(".contimage").hover(function() {
            $(this).animate({
                opacity:1
            },200);
        }, function() {
            $(this).animate({
                opacity:0.8
            },200);
        });
        $('#submitform').ajaxForm({
            target: '#error',
            success: function() {
            $('#error').fadeIn('slow');
            }
    });
$('a[rel*=facebox]').facebox()
     }); 
</script>

Also available here: http://pastebin.com/vQrSx0GU

Answer 1

It looks like your jquery code is not added until much after your jQuery plugins are loaded.
This:

<script type="text/javascript" src="formulario/jquery.js"></script>

Should come before

<script type="text/javascript" src="javascripts/jquery.DDSlider.min.js"></script>

Also, I would suggest adding a class to each of selectbox elements, maybe “selectBoxItems” and then operate on the class.

        $('#Items1').selectbox();
            $('#Items2').selectbox();
            $('#Items3').selectbox();
            $('#Items4').selectbox();
            $('#Items5').selectbox();
            $('#Items6').selectbox();
            $('#Items7').selectbox();
            $('#Items8').selectbox();
            $('#Items9').selectbox();
            $('#Items10').selectbox();
            $(".example5").colorbox();
        $('#yourSliderId').DDSlider({
            nextSlide: '.slider_arrow_right',
            prevSlide: '.slider_arrow_left',
            selector: '.slider_selector'
        });
    });

This would be changed to

$(".selectBoxItems").selectbox();
$('#yourSliderId').DDSlider({
    nextSlide: '.slider_arrow_right',
    prevSlide: '.slider_arrow_left',
    selector: '.slider_selector'
});

Could you post the code specific to the problem, both HTML and JS here (preferably formatted)?