jQuery volume UI different than what I pushed out?

Question

I recently finished the UI for a volume slider and then published the code to my website. However, the slider design that shows up on the website is different than the one I had designed.

Why is this and how can I fix this?

Original:

Final (shown on website):

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

$(function() {
  // var audioElement = $("<audio>");

  function setVolume(myVolume) {
    if (audioElement != undefined) {
      audioElement.volume = myVolume;
    }
  }

  $("#volume").slider({
    min: 0,
    max: 1,
    value: 1,
    step: 0.01,
    range: "min",
    slide: function(event, ui) {
      setVolume(ui.value);
    }
  });
});

$("#player").hover(
  function() {
    $('.ui-slider-range-min').css("background-color", "#483EF1")
    $('.ui-slider-handle').css("display", "block")
  },
  function() {
    $('.ui-slider-range-min').css("background-color", "#B3B3B3")
    $('.ui-slider-handle').css("display", "none")
  }
);

/* audioUtilities */

.audioUtilitiesDiv {
  display: inline-block;
  /* background-color: darkblue; */
  width: 350px;
  height: 100%;
  position: fixed;
  right: 0px;
}

#player {
  width: 140px;
  height: 30px;
  /* position: relative; */
  /* margin: 0 auto; */
  bottom: 40px;
  /* background: black; */
  position: fixed;
  right: 15px;
}


/* #player:hover {
  background: #483EF1;
} */

i {
  position: absolute;
  margin-top: -6px;
  color: #666;
}

i.fa-volume-down {
  margin-left: -8px;
}

i.fa-volume-up {
  margin-right: -8px;
  right: 0;
}

#volume {
  position: absolute;
  left: 24px;
  margin: 0 auto;
  height: 5px;
  width: 100px;
  background: #505050;
  border-radius: 15px;
}

.ui-slider-range-min {
  height: 5px;
  width: 300px;
  position: absolute;
  background: #B3B3B3;
  border: none;
  border-radius: 10px;
  outline: none;
}


/* .ui-slider-range-min:hover {
  background: #483EF1;
} */

.ui-slider-handle {
  width: 16px;
  height: 16px;
  border-radius: 20px;
  background: #FFF;
  position: absolute;
  margin-left: -8px;
  margin-top: -6px;
  cursor: pointer;
  outline: none;
  display: none;
}


/* Volume slider */

<div class="audioUtilitiesDiv">
  <div id="player">
    <i class="fa fa-volume-down"></i>
    <div id="volume"></div>
    <!-- <i class="fa fa-volume-up"></i> -->
  </div>
</div>

Update:

It seems like jquery ui file is not found I get this error in the console:

file://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css net::ERR_FILE_NOT_FOUND

(Do I have to do something in the terminal maybe? Install it?)

That looks like a CSS issue. Have a close look at the order of the CSS file you load. Last rule is the one applied (in most cases). — Louys Patrice Bessette, Feb 18 '20 at 02:50
So I removed the JavaScript and jQuery tags from your question. Nothing to do with it. — Louys Patrice Bessette, Feb 18 '20 at 02:52
inspect the elements and see what rules are being used - https://developers.google.com/web/tools/chrome-devtools/css — ariel, Feb 18 '20 at 03:19

score 3 · Answer 1 · answered Feb 21 '20 at 10:14

I think it's a problem in on your development environment. I think your computer can't get the jquery-ui css (with href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet").

In example below I comment this css link and the slider appeared like your original.

To solve your issue, I think you have to change the href link to https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css. And then add flag !important next to all css property of .ui-slider-handle class to overcharge the basic css of jquery-ui.

$(function() {
  var audioElement = $("<audio>");

  function setVolume(myVolume) {
    if (audioElement != undefined) {
      audioElement.volume = myVolume;
    }
  }

  $("#volume").slider({
    min: 0,
    max: 1,
    value: 1,
    step: 0.01,
    range: "min",
    slide: function(event, ui) {
      setVolume(ui.value);
    }
  });
  
  $("#player").hover(
  function() {
    $('.ui-slider-range-min').css("background-color", "#483EF1")
    $('.ui-slider-handle').css("display", "block")
  },
  function() {
    $('.ui-slider-range-min').css("background-color", "#B3B3B3")
    $('.ui-slider-handle').css("display", "none")
  }
);
});

/* audioUtilities */

.audioUtilitiesDiv {
  display: inline-block;
  background-color: darkblue;
  width: 350px;
  height: 100%;
  position: fixed;
  right: 0px;
}

#player {
  width: 140px;
  height: 30px;
  /* position: relative; */
  /* margin: 0 auto; */
  bottom: 40px;
  /* background: black; */
  position: fixed;
  right: 15px;
}


/* #player:hover {
  background: #483EF1;
} */

i {
  position: absolute;
  margin-top: -6px;
  color: #666;
}

i.fa-volume-down {
  margin-left: -8px;
}

i.fa-volume-up {
  margin-right: -8px;
  right: 0;
}

#volume {
  position: absolute;
  left: 24px;
  margin: 0 auto;
  height: 5px;
  width: 100px;
  background: #505050;
  border-radius: 15px;
}

.ui-slider-range-min {
  height: 5px;
  width: 300px;
  position: absolute;
  background: #B3B3B3;
  border: none;
  border-radius: 10px;
  outline: none;
}


/* .ui-slider-range-min:hover {
  background: #483EF1;
} */

.ui-slider-handle {
  width: 16px ;
  height: 16px ;
  border-radius: 20px ;
  background: #FFF ;
  position: absolute ;
  margin-left: -8px ;
  margin-top: -6px ;
  cursor: pointer ;
  outline: none ;
  display: none ;
}


/* Volume slider */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<!-- COMMENT THIS LINE -->
<!--<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>-->

<div class="audioUtilitiesDiv">
  <div id="player">
    <i class="fa fa-volume-down"></i>
    <div id="volume"></div>
    <!-- <i class="fa fa-volume-up"></i> -->
  </div>
</div>

deblocker · Answer 2 · 2020-02-26T13:13:00.857

There are two issues.

The first issue:

file://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css net::ERR_FILE_NOT_FOUND

Explanation:

If the protocol is defaulted, the protocol of the current page is used. So, You are starting Your development page directly from the file system, without using a local web-server or a development web server, and the reference to //code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css is defaulted to file: . The other files are downloaded from Your local internet connection, because You provided the full link.

Here is a great answer on SO: html - links without http protocol

The second issue:

the slider design that shows up on the website is different than the one I had designed

Explanation:

From Your remote web site the default protocol will be of course https and the reference to the jquery-ui theme CSS will be correctly resolved and the styles are therefore applied to Your slider widget.

Now, to customize the base theme, there are two possibilities:

If Your custom style isn't already specified in the jquery-ui base theme CSS, You need to define it in some way and this will be correctly applied with nothing else to do
If Your custom style is already defined in the jquery-ui base theme CSS, You need to override it by using specificity. You can either use !important (see here: What does !important mean in CSS?) or use a deeper role. Here is a reference: CSS Specificity

Here is an example how to customize Your slider by including the jquery base theme and overriding the needed styles:

#volume .ui-slider-handle {
  width: 16px;
  height: 16px;
  top: -6px;
  border-radius: 16px;
  background: #FFF;
  position: absolute;
  margin-left: -8px;
  cursor: pointer;
  outline: none;
  display: none;
}

#volume.ui-widget.ui-widget-content {
  border: none;
}

How do You check if Your custom style is already defined inside the jquery-ui base theme?

The object inspector of the developer tools in Your browser is Your friend here.

Example: the gray border around the slider is defined inside the jquery-ui CSS at line 1298 as follows:

.ui-widget.ui-widget-content {
    border: 1px solid #c5c5c5;
}

Now, You know that You need to override that style.

Full example:

https://plnkr.co/edit/Mh8yFxz7TthnkIKz370F?p=preview

score -1 · Answer 3 · edited Feb 25 '20 at 06:37

-1

try this:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

instead of this:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

edited Feb 25 '20 at 06:37

ROOT

11,363
5
30
45

answered Feb 18 '20 at 20:46

mustafa

400
1
9

I tried this and although the error went away, the UI on the non-production web went from the original to the ugly final... – Feb 18 '20 at 20:52

jQuery volume UI different than what I pushed out?

3 Answers3