Develop Reference

Scrolling not working in the mobile version - javascript

I'm working on a Javascript project. I created a div with an overflow and I would scroll that div using the mouse only (without the bar). I followed this working example both on the browser and both on the mobile versions. Here is my HTML code:
<div id="wrapper">
<div id="scroller">
... divs, boxes generated by jQuery ...
</div>
</div>
And here's the CSS:
#wrapper {
margin-left: 45px;
position: absolute;
width: 900px;
overflow: hidden;
}
#scroller {
width: 100%;
height: 100px;
margin: 0px auto;
overflow: auto;
}
Now the problem is that this works on the browser but does not in the mobile (no scrolling).
EDIT:
#scroller div.line {
position: absolute;
margin-left: 2.5px;
margin-top: 39px;
border-bottom: 3px solid;
border-color: #dd4b39;
}
#scroller div.ranges {
position: absolute;
width: 90%;
text-align:left;
margin-left: 5px;
margin-top: 70px;
}
#scroller box.range {
position:absolute;
display: inline-block;
width: 30px;
height: 15px;
border-radius: 15%;
-moz-box-shadow:0px 0px 10px 1px #777777;
-webkit-box-shadow:0px 0px 10px 1px #777777;
-ms-box-shadow:0px 0px 10px 1px #777777;
-o-box-shadow:0px 0px 10px 1px #777777;
box-shadow:0px 0px 10px 1px #777777;
background-image: -ms-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
background-image: -moz-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
background-image: -o-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #A8A8A8), color-stop(1, #BFBFBF));
background-image: -webkit-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
background-image: linear-gradient(to bottom right, #A8A8A8 0%, #BFBFBF 100%);
z-index: 2;
}
#scroller div.lrange {
position:absolute;
display: inline-block;
width: 15px;
height: 100px;
margin-top: -70px;
border-right: 1px dotted;
border-color: #dd4b39;
}
#scroller div.circle_small {
position: absolute;
cursor: pointer;
display: inline-block;
margin: 0 3px;
margin-top: 32.5px;
width: 15px;
height: 15px;
border-radius: 50%;
background: #CC3524;
background: -webkit-linear-gradient(top, #d14836, #dd4b39);
background: -moz-linear-gradient(top, #d14836, #dd4b39);
background: -ms-linear-gradient(top, #d14836, #dd4b39);
background: -o-linear-gradient(top, #d14836, #dd4b39);
background: -linear-gradient(top, #d14836, #dd4b39);
}
#scroller div.circle_big {
position: absolute;
cursor: pointer;
display: inline-block;
margin: 0px 3px;
width: 40px;
height: 40px;
margin-top: 20px;
border-radius: 50%;
background: #CC3524;
background: -webkit-linear-gradient(top, #d14836, #dd4b39);
background: -moz-linear-gradient(top, #d14836, #dd4b39);
background: -ms-linear-gradient(top, #d14836, #dd4b39);
background: -o-linear-gradient(top, #d14836, #dd4b39);
background: -linear-gradient(top, #d14836, #dd4b39);
}
#scroller div.circle_label {
cursor: pointer;
text-align: center;
font-size: 20px;
padding: 8px;
}

Might be late but still useful - i faced the same problem with scroll in mobile version of a website and found out that it's the position: absolute; that breaks it.
BUT! There is a solution - http://iscrolljs.com/
I found this very very helpful.
Basicly you just initialize the plugin on wrapper element without any changes to DOM and everything works.

by adding this style into your div tag it will solve your problem.
<div style="-webkit-overflow-scrolling: touch;overflow-y: scroll;">

Related

I am using Jquery Select2 to have Multiselect with Checkbox. I want to remove the selected Item from the dropdown. I am using the below code. It is removing the item. But I am getting the gap between the Input and drop down after selecting the Item.
My codes are,
Javascript,
$('.js-select2'): {
closeOnSelect: false,
placeholder: "Placeholder",
allowHtml: true,
tags: true,
allowClear: true,
minimumResultsForSearch: -1,
}
$("select").on("select2:select", function (evt) {
var element = evt.params.data.element;
var $element = $(element);
$element.detach();
$(this).append($element);
$(this).trigger("change");
});
CSS,
.select2-container {
min-width: 100%;
}
.select2-results__option {
padding-right: 20px;
vertical-align: middle;
}
.select2-results__option:before {
content: "";
display: inline-block;
position: relative;
height: 20px;
width: 20px;
border: 2px solid #e9e9e9;
background-color: #fff;
margin-right: 20px;
vertical-align: middle;
}
.select2-container--default .select2-selection--multiple {
background-color: #FFFFFF;
border: 1px solid #CBD5DD;
border-radius: 2px;
cursor: text;
height: auto !important;
margin: 0;
min-height: 30px;
overflow: hidden;
padding: 2px;
position: relative;
width: 100%;
}
.select2-results__option[aria-selected=true] {
display: none;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: #fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #3875d7;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%);
background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%);
background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%);
background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
color: #fff;
}
.select2-container--default .select2-selection--multiple {
margin-bottom: 10px;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
border-radius: 4px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border: 1px solid #5897fb;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.select2-container--default .select2-selection--multiple {
border-width: 1px;
}
.select2-container--open .select2-dropdown--below {
border-radius: 6px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.select2-selection .select2-selection--multiple:after {
content: 'hhghgh';
}
/* select with icons badges single*/
.select-icon .select2-selection__placeholder .badge {
display: none;
}
.select-icon .placeholder {
display: none;
}
.select-icon .select2-results__option:before,
.select-icon .select2-results__option[aria-selected=true]:before {
display: none !important;
/* content: "" !important; */
}
.select-icon .select2-search--dropdown {
display: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
position: relative;
margin: 3px 0 3px 5px;
padding: 3px 3px 3px 5px;
border: 1px solid #aaa;
border-radius: 3px;
background-color: #e4e4e4;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-clip: padding-box;
box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
color: #333;
line-height: 13px;
cursor: default;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
list-style: none;
width: auto !important;
}
.select2-remove-right {
float: right;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
float: right;
margin-left: 5px;
}
ul.select2-choices {
padding-right: 30px !important;
}
ul.select2-choices:after {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
border-top: 5px solid #333;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.select2-container--default .select2-search--inline .select2-search__field{
width:initial!important;
}
.select2-dropdown {
border-radius: 0px;
background-color: white;
border: 1px solid #DDD;
box-sizing: border-box;
display: block;
position: absolute;
left: -100000px;
width: 100%;
z-index: 1051;
}
/* line 43, ../scss/_dropdown.scss */
.select2-container--open .select2-dropdown--above {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.select2-container--open .select2-dropdown--below {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.select2-container--open .select2-dropdown {
left: 0;
}
.select2-search--dropdown {
display: block;
padding: 7px;
}
.select2-search--dropdown .select2-search__field {
padding: 4px;
width: 100%;
box-sizing: border-box;
}
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.select2-search--dropdown.select2-search--hide {
display: none;
}

Try this
https://stackoverflow.com/a/56195248/4208247
OR THIS
https://select2.org/selections#clearable-selections
Clearable selections
When set to true, causes a clear button ("x" icon) to appear on the select box when a value is selected. Clicking the clear button will clear the selected value, effectively resetting the select box back to its placeholder value.
$('select').select2({
placeholder: 'This is my placeholder',
allowClear: true
});

I have this video player here and I'm having trouble with something.
I'm Trying to make the seekslider show a different color after the slider thumb.
This is What I'm trying to achive
I looked everywhere and cannot find one that works and matches a the style I'm looking for, Is there any possible way to do this.
var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider, fullscreenbtn;
function intializePlayer(){
// Set object references
vid = document.getElementById("my_video");
playbtn = document.getElementById("playpausebtn");
seekslider = document.getElementById("seekslider");
curtimetext = document.getElementById("curtimetext");
durtimetext = document.getElementById("durtimetext");
mutebtn = document.getElementById("mutebtn");
volumeslider = document.getElementById("volumeslider");
fullscreenbtn = document.getElementById("fullscreenbtn");
// Add event listeners
playbtn.addEventListener("click",playPause,false);
seekslider.addEventListener("change",vidSeek,false);
vid.addEventListener("timeupdate",seektimeupdate,false);
mutebtn.addEventListener("click",vidmute,false);
volumeslider.addEventListener("change",setvolume,false);
fullscreenbtn.addEventListener("click",toggleFullScreen,false);
}
window.onload = intializePlayer;
function playPause(){
if(vid.paused){
vid.play();
playbtn.style.background = "url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/pause.png)";
playbtn.style.backgroundSize="100% 100%";
} else {
vid.pause();
playbtn.style.background = "url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/play.png)";
playbtn.style.backgroundSize="100% 100%";
}
}
function vidSeek(){
var seekto = vid.duration * (seekslider.value / 100);
vid.currentTime = seekto;
}
function seektimeupdate(){
var nt = vid.currentTime * (100 / vid.duration);
seekslider.value = nt;
var curmins = Math.floor(vid.currentTime / 60);
var cursecs = Math.floor(vid.currentTime - curmins * 60);
var durmins = Math.floor(vid.duration / 60);
var dursecs = Math.floor(vid.duration - durmins * 60);
if(cursecs < 10){ cursecs = "0"+cursecs; }
if(dursecs < 10){ dursecs = "0"+dursecs; }
if(curmins < 10){ curmins = "0"+curmins; }
if(durmins < 10){ durmins = "0"+durmins; }
curtimetext.innerHTML = curmins+":"+cursecs;
durtimetext.innerHTML = durmins+":"+dursecs;
}
function vidmute(){
if(vid.muted){
vid.muted = false;
mutebtn.style.background = "url(file:///H:/SSEmery/player/unmute.png) no-repeat";
mutebtn.style.backgroundSize="100% 100%";
} else {
vid.muted = true;
mutebtn.style.background = "url(file:///H:/SSEmery/player/mute.png) no-repeat";
mutebtn.style.backgroundSize="100% 100%";
}
}
function setvolume(){
vid.volume = volumeslider.value / 100;
}
function toggleFullScreen(){
if(vid.requestFullScreen){
vid.requestFullScreen();
} else if(vid.webkitRequestFullScreen){
vid.webkitRequestFullScreen();
} else if(vid.mozRequestFullScreen){
vid.mozRequestFullScreen();
}
}
video#my_video {
top: 0px;
position: relative;
width: 100%;
height: 56.2225%;
}
div.time {
font-family: monospace;
color: #ffffff;
text-shadow: 1px 1px 0.5px #0000ff;
background: #4b4b4b;
background: -webkit-linear-gradient(top, #4b4b4b 0%,#1e1e1e 25%,#000000 44%,#000000 100%);
background: -webkit-gradient(linear, left top, left bottom, from(#4b4b4b),color-stop(25%, #1e1e1e),color-stop(44%, #000000),to(#000000));
background: -o-linear-gradient(top, #4b4b4b 0%,#1e1e1e 25%,#000000 44%,#000000 100%);
background: linear-gradient(to bottom, #4b4b4b 0%,#1e1e1e 25%,#000000 44%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b4b4b', endColorstr='#000000',GradientType=0 );
margin-left: 2px;
display: inline-block;
background-color: black;
padding: 2px 2px 2px 2px;
border: 1px solid white;
border-radius: 5px;
}
div#video_player_box {
background-repeat: no-repeat;
background-size: 100% 85%;
max-width: 787px;
max-height: 787px;
border-top: 5px solid #646464;
border-right: 5px solid #000000;
border-left: 5px solid #646464;
border-bottom: 5px solid #000000;
margin: 0px auto;
background: #000000;
}
div#video_controls_bar {
background: #9d9d9d;
background: -webkit-linear-gradient(top, #9d9d9d 0%,#8d8d8d 10%,#4f4f4f 43%,#474747 51%,#1e1e1e 51%,#000000 100%);
background: -webkit-gradient(linear, left top, left bottom, from(#9d9d9d),color-stop(10%, #8d8d8d),color-stop(43%, #4f4f4f),color-stop(51%, #474747),color-stop(51%, #1e1e1e),to(#000000));
background: -o-linear-gradient(top, #9d9d9d 0%,#8d8d8d 10%,#4f4f4f 43%,#474747 51%,#1e1e1e 51%,#000000 100%);
background: linear-gradient(to bottom, #9d9d9d 0%,#8d8d8d 10%,#4f4f4f 43%,#474747 51%,#1e1e1e 51%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#000000',GradientType=0 );
border-top: 5px solid #000;
border-right: 5px solid #646464;
border-left: 5px solid #000;
border-bottom: 5px solid #646464;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
color: #fff;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
button#playpausebtn.playpausebtn {
right: 4px;
border-radius: 100%;
background-size: 100% 100%;
border: none;
outline: none;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnon.png) no-repeat;
float: left;
width: 44px;
height: 44px;
cursor: pointer;
opacity: 1;
}
button#playpausebtn:hover {
width: 44px;
height: 44px;
background-size: 100% 100%;
border: none;
outline: none;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnonhover.png) no-repeat;
}
button#playpausebtn:active {
width: 44px;
height: 44px;
background-size: 100% 100%;
border: none;
outline: none;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnonclick.png) no-repeat;
}
button#fullscreenbtn {
border-radius: 100%;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/fullscreen.png) no-repeat;
border-style: solid;
background-size: 100% 100%;
border-top: 2px solid #000;
border-right: 2px solid #646464;
border-left: 2px solid #000;
border-bottom: 2px solid #646464;
width: 25px;
float: right;
height: 25px;
cursor: pointer;
opacity: 1;
border: none;
outline: none;
}
button#fullscreenbtn:hover {
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/fullscreenhover.png) no-repeat;
border-style: solid;
background-size: 100% 100%;
border-top: 2px solid #000;
border-right: 2px solid #646464;
border-left: 2px solid #000;
border-bottom: 2px solid #646464;
width: 25px;
float: right;
height: 25px;
cursor: pointer;
opacity: 1;
border: none;
outline: none;
}
button#fullscreenbtn:active {
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/fullscreenclick.png) no-repeat;
border-style: solid;
background-size: 100% 100%;
border-top: 2px solid #000;
border-right: 2px solid #646464;
border-left: 2px solid #000;
border-bottom: 2px solid #646464;
width: 25px;
float: right;
height: 25px;
cursor: pointer;
opacity: 1;
border: none;
outline: none;
}
button#mutebtn.mutebtn {
position: fixed;
background-size: 100% 100%;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/unmute.png) no-repeat;
width: 25px;
height: 25px;
cursor: pointer;
opacity: 1;
border: none;
outline: none;
border-radius: 100%;
}
button#mutebtn:hover {
background-size: 100% 100%;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volhover.png) no-repeat;
width: 25px;
height: 25px;
cursor: pointer;
opacity: 1;
border: none;
outline: none;
}
button#mutebtn:active {
background-size: 100% 100%;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volclick.png) no-repeat;
width: 25px;
height: 25px;
cursor: pointer;
opacity: 1;
border: none;
outline: none;
}
input#seekslider {
margin-bottom: 13px;
float: right;
-webkit-box-shadow: inset 0 0 1px 0.1px white;
box-shadow: inset 0 0 1px 0.1px white;
outline: none;
max-height: 5px;
height: 100%;
width: 100%;
max-width: 707px;
float: top;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.61)),color-stop(10%, rgba(255,255,255,0.55)),color-stop(43%, rgba(255,255,255,0.3)),color-stop(50%, rgba(255,255,255,0.27)),color-stop(51%, rgba(255,255,255,0.11)),to(rgba(255,255,255,0))), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/seek.png") no-repeat center;
background: -webkit-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/seek.png") no-repeat center;
background: -o-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/seek.png") no-repeat center;
background: linear-gradient(to bottom, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/seek.png") no-repeat center;
background-size: 100% 100%;
}
input#volumeslider {
margin-left: 30px;
-webkit-box-shadow: inset 0 0 1px 0.1px white;
box-shadow: inset 0 0 1px 0.1px white;
outline: none;
max-width: 128px;
width: 100%;
height: 100%;
max-height: 10px;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.61)),color-stop(10%, rgba(255,255,255,0.55)),color-stop(43%, rgba(255,255,255,0.3)),color-stop(50%, rgba(255,255,255,0.27)),color-stop(51%, rgba(255,255,255,0.11)),to(rgba(255,255,255,0))), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volume.png") no-repeat center;
background: -webkit-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volume.png") no-repeat center;
background: -o-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volume.png") no-repeat center;
background: linear-gradient(to bottom, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volume.png") no-repeat center;
background-size: 100% 100%;
}
input[type='range'] {
-webkit-appearance: none !important;
border-width: 1px;
border-style: solid;
border-color: #000;
}
input[type='range']::-webkit-slider-thumb {
border-radius: 100%;
-webkit-appearance: none !important;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/timeslider.png) no-repeat;
background-size: 100% 100%;
height: 15px;
width: 15px;
cursor: pointer;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
input[type='range']::-webkit-slider-thumb:hover {
-webkit-appearance: none !important;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/timesliderhover.png) no-repeat;
background-size: 100% 100%;
height: 18px;
width: 18px;
cursor: pointer;
}
input[type='range']::-webkit-slider-thumb:active {
-webkit-appearance: none !important;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/timesliderclick.png) no-repeat;
background-size: 100% 100%;
height: 18px;
width: 18px;
cursor: pointer;
}
input[type='range'].vol {
-webkit-appearance: none !important;
border-width: 1px;
border-style: solid;
border-color: hsl(0, 0%, 0%);
}
input[type='range'].vol::-webkit-slider-thumb {
border-radius: 100%;
-webkit-appearance: none !important;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/vol.png) no-repeat;
background-size: 100% 100%;
height: 15px;
width: 15px;
cursor: pointer;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
input[type='range'].vol::-webkit-slider-thumb:hover {
-webkit-appearance: none !important;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volhover.png) no-repeat;
background-size: 100% 100%;
height: 18px;
width: 18px;
cursor: pointer;
}
input[type='range'].vol::-webkit-slider-thumb:active {
-webkit-appearance: none !important;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volclick.png) no-repeat;
background-size: 100% 100%;
height: 18px;
width: 18px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="video_player_box">
<video id="my_video" width="100%" height="56.2225%" controlslist="nodownload">
<source src="https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/test.mp4" >
</video>
</head>
<body>
<div id="video_controls_bar">
<input id="seekslider" type="range" min="0" max="100" value="0" step="1">
<button id="playpausebtn" class="playpausebtn" style= "background-size: 100% 100%;" "background-image: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnon.png);"></button>
<div class="time">
<span id="curtimetext">SSEmery</span> / <span id="durtimetext">Player</span>
</div>
<button id="mutebtn" class="mutebtn" style= "background-size: 100% 100%;" "background-image: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/unmute.png) no-repeat;"></button>
<input id="volumeslider" class="vol" type="range" min="0" max="100" value="100" step="1">
<button id="fullscreenbtn"></button>
</div>
</div>
</body>
</html>

Currently, there are not any standardized specifications that targeting on the styling of different components inside of a slider (input of range type). To implement this effect, you can use one of the following two approaches:
Use non-standard and experimental vendor-specific pseudo-element
Even though there are no standard way to achieve this, all major browser
vendors are using some pseudo-element to provide control of style of slider.
Chrome / Safari / Opera:
There is no direct means to control the style of input of range type
in WebKit. A similar approach is use <progress /> element as slider.
::-webkit-progress-value controls the style of track before the thumb
(MDN ::-webkit-progress-value);
Firefox:
::-moz-range-progress controls the style of track before the thumb
(MDN ::-moz-range-progress);
Edge / IE:
::-ms-fill-lower and ::-ms-fill-upper controls the left and right
side (or lower and upper for vertical slider) of the track of the thumb
respectively. (MDN ::-ms-fill-lower and MDN ::-ms-fill-upper).
You can check each page respectively to apply style rules to specific
portion of the track of a slider.
This approach requires you to maintain lots of style across different
browsers. And your style may break in the future when browser changed
their interpretation of these CSS rules. But this can be achieve in pure
CSS.
Use a set of DOM nodes to compose a slider
Since a slider is purely a control to indicate current progress and provide
interface for user to change the progress, you can use a set of DOM nodes to
achieve this and register related event listener to handle the interaction
with user.

im creating Vertical tab element by using css and jquery, but i need to show first tab content on page load. i use following line to show first element but its not working.
$('#v-nav>div.tab-content:first-child').show();
im get Vertical tab code from below link, please refer
http://jsfiddle.net/frabiacca/7pM7h/5/
please correct this code to show first tab-content to be default/ onload.
thanks in advance.

Added a default active class to the div and styling display:block; to the .active class.
$(function() {
var items = $('#v-nav>ul>li').each(function() {
$(this).click(function() {
//remove previous class and add it to clicked tab
items.removeClass('current');
$(this).addClass('current');
//hide all content divs and show current one
$('#v-nav>div.tab-content').hide().eq(items.index($(this))).show('fast');
window.location.hash = $(this).attr('tab');
});
});
if (location.hash) {
showTab(location.hash);
}
else {
showTab("tab1");
}
function showTab(tab) {
$("#v-nav ul li:[tab*=" + tab + "]").click();
}
// Bind the event hashchange, using jquery-hashchange-plugin
$(window).hashchange(function() {
showTab(location.hash.replace("#", ""));
})
// Trigger the event hashchange on page load, using jquery-hashchange-plugin
$(window).hashchange();
});
body
{
background-color: #f7f7f7;
}
.wrapper
{
width: 960px;
margin: 0px auto;
padding-top: 20px;
min-height: 600px;
}
.wrapper h1, .wrapper h4, .wrapper p, .wrapper pre, .wrapper ul, .wrapper li
{
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
}
.wrapper h1 {
vertical-align:middle;
padding-bottom:20px;
}
.wrapper li
{
outline: 0;
text-decoration: none;
-webkit-transition-property: background color;
-moz-transition-property: background color;
-o-transition-property: background color;
-ms-transition-property: background color;
transition-property: background color;
-webkit-transition-duration: 0.12s;
-moz-transition-duration: 0.12s;
-o-transition-duration: 0.12s;
-ms-transition-duration: 0.12s;
transition-duration: 0.12s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#v-nav
{
height: 100%;
margin: auto;
color: #333;
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
}
#v-nav >ul
{
float: left;
width: 210px;
display: block;
position: relative;
top: 0;
border: 1px solid #DDD;
border-right-width: 0;
margin: auto 0 !important;
padding:0;
}
#v-nav >ul >li
{
width: 180px;
list-style-type: none;
display: block;
text-shadow: 0px 1px 1px #F2F1F0;
font-size: 1.11em;
position: relative;
border-right-width: 0;
border-bottom: 1px solid #DDD;
margin: auto;
padding: 10px 15px !important;
background: whiteSmoke; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* W3C */
}
#v-nav >ul >li.current
{
color: black;
border-right: none;
z-index: 10;
background: white !important;
position: relative;
moz-box-shadow: inset 0 0 35px 5px #fafbfd;
-webkit-box-shadow: inset 0 0 35px 5px #fafbfd;
box-shadow: inset 0 0 35px 5px #fafbfd;
}
#v-nav >ul >li.first.current
{
border-bottom: 1px solid #DDD;
}
#v-nav >ul >li.last
{
border-bottom: none;
}
#v-nav >div.tab-content
{
margin-left: 210px;
border: 1px solid #ddd;
background-color: #FFF;
min-height: 400px;
position: relative;
z-index: 9;
padding: 12px;
moz-box-shadow: inset 0 0 35px 5px #fafbfd;
-webkit-box-shadow: inset 0 0 35px 5px #fafbfd;
box-shadow: inset 0 0 35px 5px #fafbfd;
display: none;
padding: 25px;
}
#v-nav >div.tab-content.active {
display: block;
}
#v-nav >div.tab-content >h4
{
font-size: 1.2em;
color: Black;
text-shadow: 0px 1px 1px #F2F1F0;
border-bottom: 1px dotted #EEEDED;
padding-top: 5px;
padding-bottom: 5px;
}
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://benalman.com/code/projects/jquery-hashchange/jquery.ba-hashchange.js"></script>
<section id="wrapper" class="wrapper">
<h1 class="title">I servizi offerti da Evermind</h1>
<div id="v-nav">
<ul>
<li tab="tab1" class="first current">Fatti il sito</li>
<li tab="tab2">Rifatti il look</li>
<li tab="tab3">Organizzati</li>
<li tab="tab4" class="last">Parla di te</li>
</ul>
<div class="tab-content active">
<h4>Fatti il sito</h4>
</div>
<div class="tab-content">
<h4>Rifatti il look</h4>
</div>
<div class="tab-content">
<h4>Organizzati</h4>
</div>
<div class="tab-content">
<h4>Parla di te</h4>
</div>
</div>
</section>

Im having trouble with this Javascript popup. It works fine expect for one important thing, when I scroll down the page on my Home Screen if i click the sign in button this pop-up seems to hide up at the top. It does't cater for the scroll.
I have added screenshots to show it what I mean. the first one shows it looking fine, and the other one shows the when I scroll down a little bit and press the button.
It also seems to hide the menu bar at the top.. which is fixed
I have no idea how to fix these things. Any one have an idea?
<script src="js/jquery.avgrund.js"></script>
<script>
$(function() {
$('#show').avgrund({
height: 700,
holderClass: 'custom',
showClose: true,
showCloseText: 'close',
onBlurContainer: '.containerrr',
template: '<section id="conntent">' +
'<form form name="login" action="loginprocess.php" method="post" accept-charset="utf-8">' +
'<img src="images/logopop.png">' +
'<h1></h1>' + '<div>' + '<input type="text" name="email" placeholder="example#example.com" required id="username" />' + '</div>' + '<div>' + '<input type="password" name="password" placeholder="Password" required id="password" />' + '</div>' + '<div>' + '<input type="submit" id="submit" name="submit" value="Log In">' + '</div>' + '</form>' + '</section>'
});
});
</script>
My CSS
.containerrr {
position: fixed;
width: 900px;
opacity: 0.95;
filter: alpha(opacity=95);
margin-bottom: 12%;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
}
#conntent {
background-color: rgba(250,250,250,1.0);
padding: 25px 0 0;
position: fixed;
text-align: center;
text-shadow: 0 1px 0 #fff;
width: 350px;
margin-bottom: 0;
margin-left: 3%;
margin-right: 0;
margin-top: 1px;
}
#conntent h1 {
color: #7E7E7E;
font: bold 25px Helvetica, Arial, sans-serif;
letter-spacing: -0.05em;
line-height: 20px;
margin: 10px 0 30px;
}
#conntent h1:before,
#conntent h1:after {
content: "";
height: 1px;
position: absolute;
top: 10px;
width: 27%;
}
#conntent h1:after {
background: rgb(126,126,126);
background: -moz-linear-gradient(left, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
right: 0;
}
#conntent h1:before {
background: rgb(126,126,126);
background: -moz-linear-gradient(right, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
left: 0;
}
#conntent form { margin: 0 20px; position: relative }
#conntent form input[type="text"],
#conntent form input[type="password"] {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: #eae7e7 url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) no-repeat;
border: 1px solid #c8c8c8;
color: #777;
font-family:'Source Sans Pro', sans-serif;
font-size:15px;
margin: 0 0 10px;
padding: 15px 10px 15px 40px;
width: 80%;
}
#conntent form input[type="text"]:focus,
#conntent form input[type="password"]:focus {
-webkit-box-shadow: 0 0 2px #00bbe0 inset;
-moz-box-shadow: 0 0 2px #00bbe0 inset;
-ms-box-shadow: 0 0 2px #00bbe0 inset;
-o-box-shadow: 0 0 2px #00bbe0 inset;
box-shadow: 0 0 2px #00bbe0 inset;
background-color: #fff;
border: 1px solid #00bbe0;
outline: none;
}
#username { background-position: 10px 10px !important }
#password { background-position: 10px -53px !important }
#conntent form input[type="submit"] {
border: 1px solid #00a2e2;
background: -webkit-linear-gradient(top, #00a2e2 0%,#00a2e2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00a2e2 0%,#00a2e2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00a2e2 0%,#00a2e2 100%); /* IE10+ */
background: linear-gradient(to bottom, #00a2e2 0%,#00a2e2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64c8ef', endColorstr='#00a2e2',GradientType=0 ); /* IE6-9 */
color: #fff;
float: right;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
height: 35px;
position: fixed;
width: 120px;
margin-bottom: 35px;
margin-left: 15px;
margin-top: 25px;
margin-right: 0px;
}
#conntent form input[type="submit"]:hover {
cursor:pointer;
border-color:rgba(71, 186, 255, 1);
background: rgba(71, 186, 255, 1);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 );
}
#conntent form div a {
color: #004a80;
float: right;
font-size: 12px;
text-decoration: underline;
margin-bottom: 0;
margin-left: 0;
margin-right: 15px;
margin-top: 25px;
}

Use position: fixed both in the header of the page and the container of the popup. Then you'll be able to scroll everything else and those elements will remain fixed respect to the browser window.

how can i apply the yellow gradient to the white arrow?
here is the fiddle link:
http://jsfiddle.net/VNnKR/
$('.white').hover(function() {
$(this).addClass('gradient');
})

I found a solution, note that it only works with a solid background.
HTML:
<div class="arrow">
START HERE!
</div>
CSS:
body {
background: #6cc5c3;
}
.arrow {
margin-top: 150px;
position: relative;
font-weight: bold;
margin-bottom: 5px;
height: 20px;
padding: 10px 30px 10px 10px;
width: 140px;
color: #6cc5c3;
background: #fff;
text-align: center;
}
.arrow:after {
content:'';
height: 0;
width: 0;
display: block;
border-color: #6cc5c3 #6cc5c3 #6cc5c3 transparent;
border-width: 20px;
border-style: solid;
position: absolute;
top: 0;
right: -20px;
}
.gradient {
background: #ffe632;
background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
background: -moz-linear-gradient(top, #fffe8d, #f6d23e);
}
DEMO
The arrow is transparent, and the rest of the "arrow" is the same as the body background color.