Two different jQuery scripts conflict on the same page

Hi,

I have a serious problem. I am using two jquery code one is for slider and one is for menu.
Know when i put menu script on a page slider disappear. menu start working and also showing drop down menu.
but when i remove Menu jquery script from the page slider start working but menu didn't work.

Menu Script files:

1. <scripttype="text/javascript"src="http://code.jquery.com/jquery-1.7.2.min.js"></script> (When i remove this script slider work otherwise won't work if this script is there)
2. <scripttype="text/javascript"src="script.js"></script>

Slider script file:

1. <scripttype='text/javascript'src='js/jquery.flexslider.js'></script>

How can i solve this problem.
Slider Link : http://moghulweb.com/index2.html
Menu link that i want to work on that website: http://moghulweb.com/MENU/

 

Slider link is bad. Eitherway, I would try using different jQuery versions and see if that helps.

 

http://api.jquery.com/jquery.noconflict/

 

I ran into this where one slider conflicted with another on the same page.

Some of the slider values are being processed inside the jQuery library as well as the jquery.ui library if you are using that. jquery.ui has it's own .css which affects the look of the slider action. So putting two sliders on a page with using the same libraries causes conflicts. Creating a different instance of the libraries should probably work in principle, but that is messy and could cause other conflicts.

I fixed the second slider to behave by forcing adjusting inside the slider function to go in and change .css colors, update the ui.value for inside that one slider. So when the page loads both sliders get the original css and js states and only the 2nd slider gets the updates inside it's own action function. If you don't put any delays, it happens right away and fixes the problem.

Here is an example of the two sliders that work on the same page and have different values:

Slider One adjusts the page size.

$(function() {
    var select = $( "#zslide" );
    var slide = $( "#sls" ).slider({
        orientation: "horizontal",
        min: 50,
        max: 300,
        step: 1,
        range: "min",
        value: select[ 0 ].selectedIndex + 1,
        value: 100,
        slide: function( event, ui ) {
            select[ 0 ].selectedIndex = ui.value - 1;
        // Using the slider turns autofit off
            $(window).unbind(),
        // Adjusts the slider number value
            $("#zt").text( ui.value),
        // Adjusts the page width to match the slider
            $("#main").css("transform", "scale(" + ui.value / 100 + ")"),
         // The #sls div ares are the slider and this code makes the actual slider and controls change sizes nicely, slower than the page, so the controls don't disappear.
            $("#sls").css("left", 20 + (ui.value - 100)/2 + "px"),
            $("#sls").css("top", 116 - ((101-ui.value)*1.02) + "px"),
            $("#sls").css("transform", "scale(" + ((ui.value)+((100-ui.value)/1.6)) /100 + ")"),
            $(".zbut").css("transform", "scale(" + ((ui.value)+((100-ui.value)/1.6)) /100 + ")"),
            $(".zbut2").css("transform", "scale(" + ((ui.value)+((100-ui.value)/1.6)) /100 + ")"),
            $(".zbut").css("left", 23 - ((100-ui.value)*.5) +"px"),
            $(".zbut2").css("left", 23 - ((100-ui.value)*.5) +"px"),
            $(".zbut").css("top", 7 - ((100-ui.value)*.1) +"px"),
            $(".zbut2").css("top", 56 - ((100-ui.value)*.3) +"px"),
            $('.ui-corner-all').css('opacity','1'),
            $('.ui-corner-all').css('background-color','#222'),
            $('.ui-slider-range-min').css('background-color','#7A8CBA'),
         }
    });
    // This allows the slider to move up slightly as the browser page shrinks.
    $( "#minbeds" ).change(function() {
      sls.slider( "value", this.selectedIndex + 1 );
    });
});

Code (JavaScript):

Slider Two, takes div areas with background-color:black; that overlay computer monitor images in the page. So, changing the opacity of these divs looks like you are dimming the monitors with the slider. This slider only goes down to 30% opacity and the one div #cm8 stays a little brighter, hence the extra math /140 for that one.

    $(function() {
        var mlevel = $( "#ml" );
        var slide = $( "#slider" ).slider({
          orientation: "horizontal",
          min: 30,
          max: 100,
          step: 1,
          range: "min",
          value: mlevel[ 0 ].selectedIndex + 1,
          value: 100,
          slide: function( event, ui ) {
          mlevel[ 0 ].selectedIndex = ui.value - 1;
        // Create a global variable curmon that matches the value of ui.value inside this slider.
         curmon = ui.value
        $('.ui-corner-all').css('opacity','1'),
        $('.ui-corner-all').css('background-color','#222'),
        $('.ui-slider-range-min').css('background-color','#7A8CBA'),
          $("#mt").text( ui.value);
          $("#cmt, #cm1, #cm2, #cm3, #cm4, #cm5, #cm6, #cm7, #kbd").css("opacity", (100 - ui.value) /100),
              // Dimming over one area is not as dark.  putting in /140 makes this happen
          $("#cm8").css("opacity", (100 - ui.value) /140);
          }
      });
    });

Code (JavaScript):

Then I made a function that updated the Slider Two only, so that slider is back to the right values could relate to it's own numbers. It takes the global variable curmon found in the Slider Two above. If the cursor was never moved, the variable is undefined, so it should be at 100%, the default starting value.

If the cursor was moved, then it needs to come back to it's correct level. Remember jQuery tries to make both sliders identical. This functions finds the curmon value that was saved from a user changing the slider #2. Since it changed, curmon gets a variable and is no longer 'undefined' so the else part of the function happens.

The funny math of 100 and 30 is just to make Slider #2 come back to the right spot converting 0 - 100 to 30 - 100 scale. If Slider #2 was 0 - 100, you wouldn't need this extra math.

function msliderfix () {
        if (typeof(curmon) == 'undefined') {
             $("#slider .ui-state-default").css("left", 100 + "%");
             }
        else {
            // Now curmon variable has a value because the user must have changed it, so let's keep it.
            // The bottom level available in monitor brightness is 30, so a conversion of width slider width [0 - 100] to [30 - 100] is needed.
            $("#slider .ui-state-default").css("left", (( curmon - 30 ) / .7) + "%");
            }
};

Code (JavaScript):

The final step is to make the msliderfix happen any time the page resizes as well:

$(document).ready(function() {
    // Setup all default states
    // Needs JQuery command to adjust start state of both sliders to display none.  JQuery library has them visible.
    $('.ui-corner-all').css('display', 'none'),
    $("#fw0").css("display", "block"),
    $("#fw").css("display", "none");

    // Refresh page on browser resize
    $(window).on('resize', function(e) {
        // -17 Takes care of the right scroll bar issue in Chrome
        var iw=window.innerWidth - 17;
        var ih=window.innerHeight;
        // Causes the auto browser image resize to happen
        var slide = $( "#sls" ).slider();
        // Turns off Fit buttons, once you resize the browser, they don't work.  They pull from the last page refresh browser size
         $("#fh").css("display", "none"),
         $("#fw").css("display", "block"),
         $("#fh0").css("display", "block"),
         $("#fw0").css("display", "none"),
        // Sends correct value in percent to zoom factor number
         $("#zt").text(Math.round( iw / 14.44).toFixed(0)),
        // Does the zoom and resizes the slider itself slightly when the user changes the browser size
         $("#main").css("transform", "scale(" + iw / 1444 + ")"),
        // Moves the slider button and color width of the bar on the left of the button to match the new zoom
         $(".ui-state-default").css("left", (iw - 721) / 36.1 + "%"),
         $(".ui-widget-header").css("width", (iw - 721) / 36.1 + "%"),
        // Makes the slider slightly resize as well to match when the user uses the slider
         $(".zbut").css("transform", "scale(" + ((iw/14.44)+((100-(iw/14.44))/3)) /100 + ")"),
         $(".zbut").css("left", 38 - ((1440 / iw ) * (1440 / iw) * 15) + "px"),
         $(".zbut").css("top", 7 - ((1440 / iw ) * (1440 / iw)) + "px"),
         $(".zbut2").css("transform", "scale(" + ((iw/14.44)+((100-(iw/14.44))/3)) /100 + ")"),
         $(".zbut2").css("left", 38 - ((1440 / iw ) * (1440 / iw) * 15) + "px"),
         $(".zbut2").css("top", 57 * (iw / 1440) + "px"),
         $("#sls").css("transform", "scale(" + ((iw/14.44)+((100-(iw/14.44))/3)) /100 + ")"),
         $("#sls").css("left", 23 - ((1440 / iw ) * (1440 / iw) * 10) + "px"),
         $("#sls").css("top", (67 * (iw / 1440)) + 20  + "px"),
         $("#slider .ui-widget-header").css("width", 100 + "%"),
        // Fixes the yolk monitor brightness slider to stick to the correct level
        msliderfix ();
      });
});

Code (JavaScript):

In summary. This workaround lets you keep one instance of jQuery and jQuery.ui. It let's both sliders first sync with any action. Then readjusts Slider #2 with no delay back to it's correct value.

This gets around the problem of two similar divs that share similar jQuery code having problems where one affects the other.

Hope that helps.