Wrap the text into the next line for Drop down - javascript

Hi i have created a drop down in which the first element length is very high and when i executed it the text in element expands more than that of drop down area . Is there any way of making the text for element into next and with the same width of drop down
var name1 = "Ajnjkbndgjkdrhgkhtgjkdrhtjkrhtukhrtjkjerthrjklthkretklejkltjrkltjekltjklejtklejrkltjerkltjklert kqh4ui3hui4h23uio4 uiheruiwhruio3h 2ruihuihw3uirh34uirhuioh e riohewiorh wioriorh weuiohriowe4",
name2 = "B",
name3 = "C";
var s = document.getElementById('names');
s.children[0].innerText = name1;
s.children[1].innerText = name2;
s.children[2].innerText = name3;
.setMyWidth{width: 5000px;}
<select id="names" style=width:500px class='setMyWidth'>
<option value="a">fill1</option>
<option value="b">fill2</option>
<option value="c">fill3</option>
</select>

It is not possible to customise width of a option, if you want to achieve this then you can use custom select plugins like
https://select2.github.io/examples.html
https://harvesthq.github.io/chosen/
See Chosen Demo in the below snippet.
var name1 = "Ajnjkbndgjkdrhgkhtgjkdrhtjkrhtukhrtjkjerthrjklthkretklejkltjrkltjekltjklejtklejrkltjerkltjklert kqh4ui3hui4h23uio4 uiheruiwhruio3h 2ruihuihw3uirh34uirhuioh e riohewiorh wioriorh weuiohriowe4",
name2 = "B",
name3 = "C";
var s = document.getElementById('names');
s.children[0].innerText = name1;
s.children[1].innerText = name2;
s.children[2].innerText = name3;
$("#names").chosen({
width: "200px"
});
/*!
Chosen, a Select Box Enhancer for jQuery and Prototype
by Patrick Filler for Harvest, http://getharvest.com
Version 1.6.2
Full source at https://github.com/harvesthq/chosen
Copyright (c) 2011-2016 Harvest http://getharvest.com
MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md
This file is generated by `grunt build`, do not edit it by hand.
*/
/* #group Base */
.chosen-container {
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 13px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.chosen-container * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.chosen-container .chosen-drop {
position: absolute;
top: 100%;
left: -9999px;
z-index: 1010;
width: 100%;
border: 1px solid #aaa;
border-top: 0;
background: #fff;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
}
.chosen-container.chosen-with-drop .chosen-drop {
left: 0;
}
.chosen-container a {
cursor: pointer;
}
.chosen-container .search-choice .group-name,
.chosen-container .chosen-single .group-name {
margin-right: 4px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: normal;
color: #999999;
}
.chosen-container .search-choice .group-name:after,
.chosen-container .chosen-single .group-name:after {
content: ":";
padding-left: 2px;
vertical-align: top;
}
/* #end */
/* #group Single Chosen */
.chosen-container-single .chosen-single {
position: relative;
display: block;
overflow: hidden;
padding: 0 0 0 8px;
height: 25px;
border: 1px solid #aaa;
border-radius: 5px;
background-color: #fff;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
background: -webkit-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
background: -moz-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
background: -o-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
background: linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
background-clip: padding-box;
box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1);
color: #444;
text-decoration: none;
white-space: nowrap;
line-height: 24px;
}
.chosen-container-single .chosen-default {
color: #999;
}
.chosen-container-single .chosen-single span {
display: block;
overflow: hidden;
margin-right: 26px;
text-overflow: ellipsis;
white-space: nowrap;
}
.chosen-container-single .chosen-single-with-deselect span {
margin-right: 38px;
}
.chosen-container-single .chosen-single abbr {
position: absolute;
top: 6px;
right: 26px;
display: block;
width: 12px;
height: 12px;
background: url('chosen-sprite.png') -42px 1px no-repeat;
font-size: 1px;
}
.chosen-container-single .chosen-single abbr:hover {
background-position: -42px -10px;
}
.chosen-container-single.chosen-disabled .chosen-single abbr:hover {
background-position: -42px -10px;
}
.chosen-container-single .chosen-single div {
position: absolute;
top: 0;
right: 0;
display: block;
width: 18px;
height: 100%;
}
.chosen-container-single .chosen-single div b {
display: block;
width: 100%;
height: 100%;
background: url('chosen-sprite.png') no-repeat 0px 2px;
}
.chosen-container-single .chosen-search {
position: relative;
z-index: 1010;
margin: 0;
padding: 3px 4px;
white-space: nowrap;
}
.chosen-container-single .chosen-search input[type="text"] {
margin: 1px 0;
padding: 4px 20px 4px 5px;
width: 100%;
height: auto;
outline: 0;
border: 1px solid #aaa;
background: white url('chosen-sprite.png') no-repeat 100% -20px;
background: url('chosen-sprite.png') no-repeat 100% -20px;
font-size: 1em;
font-family: sans-serif;
line-height: normal;
border-radius: 0;
}
.chosen-container-single .chosen-drop {
margin-top: -1px;
border-radius: 0 0 4px 4px;
background-clip: padding-box;
}
.chosen-container-single.chosen-container-single-nosearch .chosen-search {
position: absolute;
left: -9999px;
}
/* #end */
/* #group Results */
.chosen-container .chosen-results {
color: #444;
position: relative;
overflow-x: hidden;
overflow-y: auto;
margin: 0 4px 4px 0;
padding: 0 0 0 4px;
max-height: 240px;
-webkit-overflow-scrolling: touch;
}
.chosen-container .chosen-results li {
display: none;
margin: 0;
padding: 5px 6px;
list-style: none;
line-height: 15px;
word-wrap: break-word;
-webkit-touch-callout: none;
}
.chosen-container .chosen-results li.active-result {
display: list-item;
cursor: pointer;
}
.chosen-container .chosen-results li.disabled-result {
display: list-item;
color: #ccc;
cursor: default;
}
.chosen-container .chosen-results li.highlighted {
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;
}
.chosen-container .chosen-results li.no-results {
color: #777;
display: list-item;
background: #f4f4f4;
}
.chosen-container .chosen-results li.group-result {
display: list-item;
font-weight: bold;
cursor: default;
}
.chosen-container .chosen-results li.group-option {
padding-left: 15px;
}
.chosen-container .chosen-results li em {
font-style: normal;
text-decoration: underline;
}
/* #end */
/* #group Multi Chosen */
.chosen-container-multi .chosen-choices {
position: relative;
overflow: hidden;
margin: 0;
padding: 0 5px;
width: 100%;
height: auto;
border: 1px solid #aaa;
background-color: #fff;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
background-image: -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%);
background-image: -moz-linear-gradient(#eeeeee 1%, #ffffff 15%);
background-image: -o-linear-gradient(#eeeeee 1%, #ffffff 15%);
background-image: linear-gradient(#eeeeee 1%, #ffffff 15%);
cursor: text;
}
.chosen-container-multi .chosen-choices li {
float: left;
list-style: none;
}
.chosen-container-multi .chosen-choices li.search-field {
margin: 0;
padding: 0;
white-space: nowrap;
}
.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
margin: 1px 0;
padding: 0;
height: 25px;
outline: 0;
border: 0 !important;
background: transparent !important;
box-shadow: none;
color: #999;
font-size: 100%;
font-family: sans-serif;
line-height: normal;
border-radius: 0;
}
.chosen-container-multi .chosen-choices li.search-choice {
position: relative;
margin: 3px 5px 3px 0;
padding: 3px 20px 3px 5px;
border: 1px solid #aaa;
max-width: 100%;
border-radius: 3px;
background-color: #eeeeee;
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-size: 100% 19px;
background-repeat: repeat-x;
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;
}
.chosen-container-multi .chosen-choices li.search-choice span {
word-wrap: break-word;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
position: absolute;
top: 4px;
right: 3px;
display: block;
width: 12px;
height: 12px;
background: url('chosen-sprite.png') -42px 1px no-repeat;
font-size: 1px;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
background-position: -42px -10px;
}
.chosen-container-multi .chosen-choices li.search-choice-disabled {
padding-right: 5px;
border: 1px solid #ccc;
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%);
color: #666;
}
.chosen-container-multi .chosen-choices li.search-choice-focus {
background: #d4d4d4;
}
.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
background-position: -42px -10px;
}
.chosen-container-multi .chosen-results {
margin: 0;
padding: 0;
}
.chosen-container-multi .chosen-drop .result-selected {
display: list-item;
color: #ccc;
cursor: default;
}
/* #end */
/* #group Active */
.chosen-container-active .chosen-single {
border: 1px solid #5897fb;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.chosen-container-active.chosen-with-drop .chosen-single {
border: 1px solid #aaa;
-moz-border-radius-bottomright: 0;
border-bottom-right-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff));
background-image: -webkit-linear-gradient(#eeeeee 20%, #ffffff 80%);
background-image: -moz-linear-gradient(#eeeeee 20%, #ffffff 80%);
background-image: -o-linear-gradient(#eeeeee 20%, #ffffff 80%);
background-image: linear-gradient(#eeeeee 20%, #ffffff 80%);
box-shadow: 0 1px 0 #fff inset;
}
.chosen-container-active.chosen-with-drop .chosen-single div {
border-left: none;
background: transparent;
}
.chosen-container-active.chosen-with-drop .chosen-single div b {
background-position: -18px 2px;
}
.chosen-container-active .chosen-choices {
border: 1px solid #5897fb;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.chosen-container-active .chosen-choices li.search-field input[type="text"] {
color: #222 !important;
}
/* #end */
/* #group Disabled Support */
.chosen-disabled {
opacity: 0.5 !important;
cursor: default;
}
.chosen-disabled .chosen-single {
cursor: default;
}
.chosen-disabled .chosen-choices .search-choice .search-choice-close {
cursor: default;
}
/* #end */
/* #group Right to Left */
.chosen-rtl {
text-align: right;
}
.chosen-rtl .chosen-single {
overflow: visible;
padding: 0 8px 0 0;
}
.chosen-rtl .chosen-single span {
margin-right: 0;
margin-left: 26px;
direction: rtl;
}
.chosen-rtl .chosen-single-with-deselect span {
margin-left: 38px;
}
.chosen-rtl .chosen-single div {
right: auto;
left: 3px;
}
.chosen-rtl .chosen-single abbr {
right: auto;
left: 26px;
}
.chosen-rtl .chosen-choices li {
float: right;
}
.chosen-rtl .chosen-choices li.search-field input[type="text"] {
direction: rtl;
}
.chosen-rtl .chosen-choices li.search-choice {
margin: 3px 5px 3px 0;
padding: 3px 5px 3px 19px;
}
.chosen-rtl .chosen-choices li.search-choice .search-choice-close {
right: auto;
left: 4px;
}
.chosen-rtl.chosen-container-single-nosearch .chosen-search,
.chosen-rtl .chosen-drop {
left: 9999px;
}
.chosen-rtl.chosen-container-single .chosen-results {
margin: 0 0 4px 4px;
padding: 0 4px 0 0;
}
.chosen-rtl .chosen-results li.group-option {
padding-right: 15px;
padding-left: 0;
}
.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
border-right: none;
}
.chosen-rtl .chosen-search input[type="text"] {
padding: 4px 5px 4px 20px;
background: white url('chosen-sprite.png') no-repeat -30px -20px;
background: url('chosen-sprite.png') no-repeat -30px -20px;
direction: rtl;
}
.chosen-rtl.chosen-container-single .chosen-single div b {
background-position: 6px 2px;
}
.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
background-position: -12px 2px;
}
/* #end */
/* #group Retina compatibility */
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi),
only screen and (min-resolution: 1.5dppx) {
.chosen-rtl .chosen-search input[type="text"],
.chosen-container-single .chosen-single abbr,
.chosen-container-single .chosen-single div b,
.chosen-container-single .chosen-search input[type="text"],
.chosen-container-multi .chosen-choices .search-choice .search-choice-close,
.chosen-container .chosen-results-scroll-down span,
.chosen-container .chosen-results-scroll-up span {
background-image: url('chosen-sprite#2x.png') !important;
background-size: 52px 37px !important;
background-repeat: no-repeat !important;
}
}
/* #end */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<select id="names" style="width:500px" class='setMyWidth'>
<option value="a">fill1</option>
<option value="b">fill2</option>
<option value="c">fill3</option>
</select>

If someone is coming here now, I didn't manage to make Rohan Kumar answer work (that's probably my bad), but I found another way to solve it.
One simple modification to chosen.css file:
.chosen-container .chosen-results {
overflow-x: scroll;
}
It does not wrap text into next line but I think it can be considered a solution too.

Related

How to reset the jquery-UI slider range value on click of a button

I have a Jquery UI slider, On click of reset button, I need to reset the slider value. Here I can able to reset the value but can't change the background color to initial position.I have used the slider function into script file and css into style.css for styling the slider and the contents.
I have used here jquery UI library but I am not getting the solution.
(function() {
// Helper function
var update_handle_track_pos;
update_handle_track_pos = function(slider, ui_handle_pos) {
var handle_track_xoffset, slider_range_inverse_width;
handle_track_xoffset = -((ui_handle_pos / 100) * slider.clientWidth);
$(slider).find(".handle-track").css("left", handle_track_xoffset);
slider_range_inverse_width = (100 - ui_handle_pos) + "%";
return $(slider).find(".slider-range-inverse").css("width", slider_range_inverse_width);
};
$(".trybtn").click(function() {
$("#js-slider").slider("value", $(this).val());
});
// Init slider
$("#js-slider").slider({
range: "min",
max: 100,
value: 50,
create: function(event, ui) {
var slider;
slider = $(event.target);
// Append the slider handle with a center dot and it's own track
slider.find('.ui-slider-handle').append('<span class="dot"><span class="handle-track"></span></span>');
// Append the slider with an inverse range
slider.prepend('<div class="slider-range-inverse"></div>');
// Set initial dimensions
slider.find(".handle-track").css("width", event.target.clientWidth);
// Set initial position for tracks
return update_handle_track_pos(event.target, $(this).slider("value"));
},
slide: function(event, ui) {
// Update position of tracks
return update_handle_track_pos(event.target, ui.value);
}
});
}).call(this);
.ui-slider,
.ui-slider .slider-range-inverse,
.ui-slider .ui-slider-range {
height: 14px;
border-radius: 10px;
border-width: 0;
}
body {
background: #F0F0F0;
font-family: Helvetica, Arial;
}
h1 {
text-align: center;
color: #444;
margin-top: 50px;
}
#slider-container {
width: 80%;
height: 80px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
top: 50%;
margin: 0 auto;
text-align: center;
background: #FFF;
border-radius: 5px;
padding: 35px 40px 30px 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.ui-slider {
background-color: #1ABC9C;
background-image: -webkit-linear-gradient(left, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
background-image: linear-gradient(to right, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
}
.ui-slider * {
outline: none;
}
.ui-slider .slider-range-inverse {
background: #CCC;
position: absolute;
right: 0;
}
.ui-slider .ui-slider-range {
background: transparent;
}
.ui-slider .ui-slider-handle {
width: 28px;
height: 28px;
cursor: pointer;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
background: #FFF;
top: -7px;
border-radius: 50%;
border-width: 0;
}
.ui-slider .ui-slider-handle:active {
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.5);
}
.ui-slider .ui-slider-handle .dot {
width: 18px;
height: 18px;
border-radius: 50%;
position: absolute;
top: 5px;
left: 5px;
background: transparent;
overflow: hidden;
}
.ui-slider .ui-slider-handle .dot .handle-track {
display: block;
height: 18px;
background-color: #1ABC9C;
background-image: -webkit-linear-gradient(left, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
background-image: linear-gradient(to right, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
position: absolute;
padding-right: 18px;
}
<link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="./style.css">
<div id="slider-container">
<div id="js-slider"></div>
</div>
<div class="trybtn">
<span>Reset</span>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
(function() {
// Helper function
var update_handle_track_pos;
update_handle_track_pos = function(slider, ui_handle_pos) {
var handle_track_xoffset, slider_range_inverse_width;
handle_track_xoffset = -((ui_handle_pos / 100) * slider.clientWidth);
$(slider).find(".handle-track").css("left", handle_track_xoffset);
slider_range_inverse_width = (100 - ui_handle_pos) + "%";
return $(slider).find(".slider-range-inverse").css("width", slider_range_inverse_width);
};
$(".trybtn").click(function() {
$("#js-slider").slider("value", $(this).val());
$('.slider-range-inverse').css('width', 100-$(this).val() + '%');
});
// Init slider
$("#js-slider").slider({
range: "min",
max: 100,
value: 50,
create: function(event, ui) {
var slider;
slider = $(event.target);
// Append the slider handle with a center dot and it's own track
slider.find('.ui-slider-handle').append('<span class="dot"><span class="handle-track"></span></span>');
// Append the slider with an inverse range
slider.prepend('<div class="slider-range-inverse"></div>');
// Set initial dimensions
slider.find(".handle-track").css("width", event.target.clientWidth);
// Set initial position for tracks
return update_handle_track_pos(event.target, $(this).slider("value"));
},
slide: function(event, ui) {
// Update position of tracks
return update_handle_track_pos(event.target, ui.value);
}
});
}).call(this);
.ui-slider,
.ui-slider .slider-range-inverse,
.ui-slider .ui-slider-range {
height: 14px;
border-radius: 10px;
border-width: 0;
}
body {
background: #F0F0F0;
font-family: Helvetica, Arial;
}
h1 {
text-align: center;
color: #444;
margin-top: 50px;
}
#slider-container {
width: 80%;
height: 80px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
top: 50%;
margin: 0 auto;
text-align: center;
background: #FFF;
border-radius: 5px;
padding: 35px 40px 30px 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.ui-slider {
background-color: #1ABC9C;
background-image: -webkit-linear-gradient(left, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
background-image: linear-gradient(to right, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
}
.ui-slider * {
outline: none;
}
.ui-slider .slider-range-inverse {
background: red;
position: absolute;
right: 0;
}
.ui-slider .ui-slider-range {
background: transparent;
}
.ui-slider .ui-slider-handle {
width: 28px;
height: 28px;
cursor: pointer;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
background: #FFF;
top: -7px;
border-radius: 50%;
border-width: 0;
}
.ui-slider .ui-slider-handle:active {
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.5);
}
.ui-slider .ui-slider-handle .dot {
width: 18px;
height: 18px;
border-radius: 50%;
position: absolute;
top: 5px;
left: 5px;
background: transparent;
overflow: hidden;
}
.ui-slider .ui-slider-handle .dot .handle-track {
display: block;
height: 18px;
background-color: #1ABC9C;
background-image: -webkit-linear-gradient(left, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
background-image: linear-gradient(to right, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
position: absolute;
padding-right: 18px;
}
<link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="./style.css">
<div id="slider-container">
<div id="js-slider"></div>
</div>
<div class="trybtn">
<span>Reset</span>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
A bit hacky but update the css width
U need to call your method under trybtn click event.
JS:
$(".trybtn").click(function() {
$("#js-slider").slider("value", $(this).val());
update_handle_track_pos($("#js-slider"), $(this).val());
});
Working fiddle:
https://jsfiddle.net/psx57Lc6/

JQuery - Range slider issue - changing image

I have the following issue:
I want to add an Range Slider
By moving the trigger different images should appear
The goal:
To combine the 2 Range Slider Examples to one!
I want to have the design of the first Range Slider
But with the function of the second Range Slider (the ability to change images)
Hope ya'll can help me - Cheers!
.slider{display:inline-block;vertical-align:middle;position:relative}.slider.slider-horizontal{width:50%;height:20px}.slider.slider-horizontal .slider-track{height:5px;width:100%;margin-top:-3px;top:50%;left:0; background-image: linear-gradient(to top, #D4D4D4 0%, #BDBDBD 100%);
border: 0;
content: ' ';
display: block;
height: 5px;
left: 0;
opacity: 1;
position: absolute;
right: 0;
top: 10px;
transition: height .5s ease, opacity 1s ease;
z-index: -20;}.slider.slider-horizontal .slider-selection,.slider.slider-horizontal .slider-track-low,.slider.slider-horizontal .slider-track-high{height:100%;top:0;bottom:0}.slider.slider-horizontal .slider-tick,.slider.slider-horizontal .slider-handle{margin-left:-10px}.slider.slider-horizontal .slider-tick.triangle,.slider.slider-horizontal .slider-handle.triangle{position:relative;top:50%;transform:translateY(-50%);border-width:0 10px 10px 10px;width:0;height:0;border-bottom-color:#2e6da4;margin-top:0}.slider.slider-horizontal .slider-tick-container{white-space:nowrap;position:absolute;top:0;left:0;width:100%}.slider.slider-horizontal .slider-tick-label-container{white-space:nowrap;margin-top:20px}.slider.slider-horizontal .slider-tick-label-container .slider-tick-label{padding-top:4px;display:inline-block;text-align:center}.slider.slider-horizontal.slider-rtl .slider-track{left:initial;right:0}.slider.slider-horizontal.slider-rtl .slider-tick,.slider.slider-horizontal.slider-rtl .slider-handle{margin-left:initial;margin-right:-10px}.slider.slider-horizontal.slider-rtl .slider-tick-container{left:initial;right:0}.slider.slider-vertical{height:210px;width:20px}.slider.slider-vertical .slider-track{width:10px;height:100%;left:25%;top:0}.slider.slider-vertical .slider-selection{width:100%;left:0;top:0;bottom:0}.slider.slider-vertical .slider-track-low,.slider.slider-vertical .slider-track-high{width:100%;left:0;right:0}.slider.slider-vertical .slider-tick,.slider.slider-vertical .slider-handle{margin-top:-10px}.slider.slider-vertical .slider-tick.triangle,.slider.slider-vertical .slider-handle.triangle{border-width:10px 0 10px 10px;width:1px;height:1px;border-left-color:#2e6da4;border-right-color:#2e6da4;margin-left:0;margin-right:0}.slider.slider-vertical .slider-tick-label-container{white-space:nowrap}.slider.slider-vertical .slider-tick-label-container .slider-tick-label{padding-left:4px}.slider.slider-vertical.slider-rtl .slider-track{left:initial;right:25%}.slider.slider-vertical.slider-rtl .slider-selection{left:initial;right:0}.slider.slider-vertical.slider-rtl .slider-tick.triangle,.slider.slider-vertical.slider-rtl .slider-handle.triangle{border-width:10px 10px 10px 0}.slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label{padding-left:initial;padding-right:4px}.slider.slider-disabled .slider-handle{background-image:-webkit-linear-gradient(top,#dfdfdf 0,#bebebe 100%);background-image:-o-linear-gradient(top,#dfdfdf 0,#bebebe 100%);background-image:linear-gradient(to bottom,#dfdfdf 0,#bebebe 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf',endColorstr='#ffbebebe',GradientType=0)}.slider.slider-disabled .slider-track{background-image:-webkit-linear-gradient(top,#e5e5e5 0,#e9e9e9 100%);background-image:-o-linear-gradient(top,#e5e5e5 0,#e9e9e9 100%);background-image:linear-gradient(to bottom,#e5e5e5 0,#e9e9e9 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5',endColorstr='#ffe9e9e9',GradientType=0);cursor:not-allowed}.slider input{display:none}.slider .tooltip.top{margin-top:-36px}.slider .tooltip-inner{white-space:nowrap;max-width:none}.slider .hide{display:none}.slider-track{position:absolute;cursor:pointer;background-image:-webkit-linear-gradient(top,#f5f5f5 0,#f9f9f9 100%);background-image:-o-linear-gradient(top,#f5f5f5 0,#f9f9f9 100%);background-image:linear-gradient(to bottom,#f5f5f5 0,#f9f9f9 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5',endColorstr='#fff9f9f9',GradientType=0);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);border-radius:4px}.slider-selection{position:absolute;background-image:-webkit-linear-gradient(top,#f9f9f9 0,#f5f5f5 100%);background-image:-o-linear-gradient(top,#f9f9f9 0,#f5f5f5 100%);background-image:linear-gradient(to bottom,#f9f9f9 0,#f5f5f5 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9',endColorstr='#fff5f5f5',GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:4px}.slider-selection.tick-slider-selection{background-image:-webkit-linear-gradient(top,#8ac1ef 0,#82b3de 100%);background-image:-o-linear-gradient(top,#8ac1ef 0,#82b3de 100%);background-image:linear-gradient(to bottom,#8ac1ef 0,#82b3de 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef',endColorstr='#ff82b3de',GradientType=0)}.slider-track-low,.slider-track-high{position:absolute;background:transparent;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:4px}.slider-handle{position:absolute;top:0;width:20px;height:20px;
border: 2px solid #fff;
border-radius: 4px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.31);
background: #d4d4d4;
background-image: linear-gradient(to bottom, #EFEFEF, #bbbbbb);
background-size: auto 60px;
background-repeat: no-repeat;
transition: box-shadow 0.1s linear, background-position 0.1s linear;
background-image: linear-gradient(to top, #1B1E28 15%, #e94843 100%);
height: 38px;
left: -18px;
text-align: center;
top: -6px;
width: 32px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.8);}.slider-handle.round{border-radius:}.slider-handle.triangle{background:transparent none}.slider-handle.custom{background:transparent none}.slider-handle.custom::before{line-height:20px;font-size:20px;content:'\2605';color:#726204}.slider-tick{position:absolute;width:2px;height:20px;background-image:-webkit-linear-gradient(top,#aeaeae 0,#d1d1d1 100%);background-image:-o-linear-gradient(top,#f9f9f9 0,#f5f5f5 100%);background-image:linear-gradient(to bottom,##afafaf 0,#d1d1d1 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9',endColorstr='#fff5f5f5',GradientType=0);box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;filter:none;opacity:1;border:0 solid transparent}.slider-tick.round{border-radius:}.slider-tick.triangle{background:transparent none}.slider-tick.custom{background:transparent none}.slider-tick.custom::before{line-height:20px;font-size:20px;content:'\2605';color:#726204}.slider-tick.in-selection{background-image:-webkit-linear-gradient(top,#8ac1ef 0,#d1d1d1 100%);background-image:-o-linear-gradient(top,#8ac1ef 0,#d1d1d1 100%);background-image:linear-gradient(to bottom,#afafaf 0,#82b3de 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8ac1ef',endColorstr='#afafaf',GradientType=0);opacity:1}
.slider-handle:after {
content:"";
border-left: 1px solid #17181E;
border-right: 1px solid rgba(255, 255, 255, 0.2);
display: inline-block;
height: 18px;
margin: 8px 2px;
}
.slider-handle span {
border-left: 1px solid #17181E;
border-right: 1px solid rgba(255, 255, 255, 0.2);
display: inline-block;
height: 18px;
margin: 8px 2px;
}
.slider-handle::after span {
border-left: 1px solid #17181E;
border-right: 1px solid rgba(255, 255, 255, 0.2);
display: inline-block;
height: 18px;
margin: 8px 2px;
}
.range-slider {
margin-left: 100px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/bootstrap-slider.min.js"></script>
<h3> Main Slider </h3>
<div class="range-slider">
<span id="ex18-label-1" class="hidden"></span>
<input id="ex19" type="text"
data-provide="slider"
data-slider-ticks="[1, 2, 3, 4, 5]"
data-slider-ticks-labels='["phase 1", "phase 2", "phase 3", "phase 4", "phase 5"]'
data-slider-min="1"
data-slider-max="5"
data-slider-step="1"
data-slider-value="1"
data-slider-tooltip="hide" />
</div>
<br>
<br>
<h3> Image Slider </h3>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="slider" value="0.0" min="0" max="5" step="1" />
<br /><br />
<img src="" style='width:100px;height:100px;' id='img'/>
slider value = <span id="sliderStatus">0</span>
<script>var imageUrl = new Array();
imageUrl[0] = 'https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg';
imageUrl[1] = 'https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg';
imageUrl[2] = 'http://cdn2.stylecraze.com/wp-content/uploads/2013/07/dahlia-flowers.jpg';
imageUrl[3] = 'https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg';
imageUrl[4] = 'https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg';
imageUrl[5] = 'http://cdn2.stylecraze.com/wp-content/uploads/2013/07/dahlia-flowers.jpg';
$(document).on('input change', '#slider', function() {//listen to slider changes
var v=$(this).val();//getting slider val
$('#sliderStatus').html( $(this).val() );
$("#img").prop("src", imageUrl[v]);
});</script>
Use onchange="changeslider(value)
And then
function changeslider(val) {
$('#sliderStatus').html(val);
$("#img").prop("src", imageUrl[val]);
}
Demo
var imageUrl = new Array();
imageUrl[0] = 'https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg';
imageUrl[1] = 'https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg';
imageUrl[2] = 'http://cdn2.stylecraze.com/wp-content/uploads/2013/07/dahlia-flowers.jpg';
imageUrl[3] = 'https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg';
imageUrl[4] = 'https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg';
imageUrl[5] = 'http://cdn2.stylecraze.com/wp-content/uploads/2013/07/dahlia-flowers.jpg';
$(document).on('input change', '#slider', function() { //listen to slider changes
var v = $(this).val(); //getting slider val
$('#sliderStatus').html($(this).val());
$("#img").prop("src", imageUrl[v]);
});
function changeslider(val) {
$('#sliderStatus').html(val);
$("#img").prop("src", imageUrl[val]);
}
.slider {
display: inline-block;
vertical-align: middle;
position: relative
}
.slider.slider-horizontal {
width: 50%;
height: 20px
}
.slider.slider-horizontal .slider-track {
height: 5px;
width: 100%;
margin-top: -3px;
top: 50%;
left: 0;
background-image: linear-gradient(to top, #D4D4D4 0%, #BDBDBD 100%);
border: 0;
content: ' ';
display: block;
height: 5px;
left: 0;
opacity: 1;
position: absolute;
right: 0;
top: 10px;
transition: height .5s ease, opacity 1s ease;
z-index: -20;
}
.slider.slider-horizontal .slider-selection,
.slider.slider-horizontal .slider-track-low,
.slider.slider-horizontal .slider-track-high {
height: 100%;
top: 0;
bottom: 0
}
.slider.slider-horizontal .slider-tick,
.slider.slider-horizontal .slider-handle {
margin-left: -10px
}
.slider.slider-horizontal .slider-tick.triangle,
.slider.slider-horizontal .slider-handle.triangle {
position: relative;
top: 50%;
transform: translateY(-50%);
border-width: 0 10px 10px 10px;
width: 0;
height: 0;
border-bottom-color: #2e6da4;
margin-top: 0
}
.slider.slider-horizontal .slider-tick-container {
white-space: nowrap;
position: absolute;
top: 0;
left: 0;
width: 100%
}
.slider.slider-horizontal .slider-tick-label-container {
white-space: nowrap;
margin-top: 20px
}
.slider.slider-horizontal .slider-tick-label-container .slider-tick-label {
padding-top: 4px;
display: inline-block;
text-align: center
}
.slider.slider-horizontal.slider-rtl .slider-track {
left: initial;
right: 0
}
.slider.slider-horizontal.slider-rtl .slider-tick,
.slider.slider-horizontal.slider-rtl .slider-handle {
margin-left: initial;
margin-right: -10px
}
.slider.slider-horizontal.slider-rtl .slider-tick-container {
left: initial;
right: 0
}
.slider.slider-vertical {
height: 210px;
width: 20px
}
.slider.slider-vertical .slider-track {
width: 10px;
height: 100%;
left: 25%;
top: 0
}
.slider.slider-vertical .slider-selection {
width: 100%;
left: 0;
top: 0;
bottom: 0
}
.slider.slider-vertical .slider-track-low,
.slider.slider-vertical .slider-track-high {
width: 100%;
left: 0;
right: 0
}
.slider.slider-vertical .slider-tick,
.slider.slider-vertical .slider-handle {
margin-top: -10px
}
.slider.slider-vertical .slider-tick.triangle,
.slider.slider-vertical .slider-handle.triangle {
border-width: 10px 0 10px 10px;
width: 1px;
height: 1px;
border-left-color: #2e6da4;
border-right-color: #2e6da4;
margin-left: 0;
margin-right: 0
}
.slider.slider-vertical .slider-tick-label-container {
white-space: nowrap
}
.slider.slider-vertical .slider-tick-label-container .slider-tick-label {
padding-left: 4px
}
.slider.slider-vertical.slider-rtl .slider-track {
left: initial;
right: 25%
}
.slider.slider-vertical.slider-rtl .slider-selection {
left: initial;
right: 0
}
.slider.slider-vertical.slider-rtl .slider-tick.triangle,
.slider.slider-vertical.slider-rtl .slider-handle.triangle {
border-width: 10px 10px 10px 0
}
.slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label {
padding-left: initial;
padding-right: 4px
}
.slider.slider-disabled .slider-handle {
background-image: -webkit-linear-gradient(top, #dfdfdf 0, #bebebe 100%);
background-image: -o-linear-gradient(top, #dfdfdf 0, #bebebe 100%);
background-image: linear-gradient(to bottom, #dfdfdf 0, #bebebe 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0)
}
.slider.slider-disabled .slider-track {
background-image: -webkit-linear-gradient(top, #e5e5e5 0, #e9e9e9 100%);
background-image: -o-linear-gradient(top, #e5e5e5 0, #e9e9e9 100%);
background-image: linear-gradient(to bottom, #e5e5e5 0, #e9e9e9 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5', endColorstr='#ffe9e9e9', GradientType=0);
cursor: not-allowed
}
.slider input {
display: none
}
.slider .tooltip.top {
margin-top: -36px
}
.slider .tooltip-inner {
white-space: nowrap;
max-width: none
}
.slider .hide {
display: none
}
.slider-track {
position: absolute;
cursor: pointer;
background-image: -webkit-linear-gradient(top, #f5f5f5 0, #f9f9f9 100%);
background-image: -o-linear-gradient(top, #f5f5f5 0, #f9f9f9 100%);
background-image: linear-gradient(to bottom, #f5f5f5 0, #f9f9f9 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 4px
}
.slider-selection {
position: absolute;
background-image: -webkit-linear-gradient(top, #f9f9f9 0, #f5f5f5 100%);
background-image: -o-linear-gradient(top, #f9f9f9 0, #f5f5f5 100%);
background-image: linear-gradient(to bottom, #f9f9f9 0, #f5f5f5 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 4px
}
.slider-selection.tick-slider-selection {
background-image: -webkit-linear-gradient(top, #8ac1ef 0, #82b3de 100%);
background-image: -o-linear-gradient(top, #8ac1ef 0, #82b3de 100%);
background-image: linear-gradient(to bottom, #8ac1ef 0, #82b3de 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef', endColorstr='#ff82b3de', GradientType=0)
}
.slider-track-low,
.slider-track-high {
position: absolute;
background: transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 4px
}
.slider-handle {
position: absolute;
top: 0;
width: 20px;
height: 20px;
border: 2px solid #fff;
border-radius: 4px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.31);
background: #d4d4d4;
background-image: linear-gradient(to bottom, #EFEFEF, #bbbbbb);
background-size: auto 60px;
background-repeat: no-repeat;
transition: box-shadow 0.1s linear, background-position 0.1s linear;
background-image: linear-gradient(to top, #1B1E28 15%, #e94843 100%);
height: 38px;
left: -18px;
text-align: center;
top: -6px;
width: 32px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.8);
}
.slider-handle.round {
border-radius:
}
.slider-handle.triangle {
background: transparent none
}
.slider-handle.custom {
background: transparent none
}
.slider-handle.custom::before {
line-height: 20px;
font-size: 20px;
content: '\2605';
color: #726204
}
.slider-tick {
position: absolute;
width: 2px;
height: 20px;
background-image: -webkit-linear-gradient(top, #aeaeae 0, #d1d1d1 100%);
background-image: -o-linear-gradient(top, #f9f9f9 0, #f5f5f5 100%);
background-image: linear-gradient(to bottom, ##afafaf 0, #d1d1d1 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
filter: none;
opacity: 1;
border: 0 solid transparent
}
.slider-tick.round {
border-radius:
}
.slider-tick.triangle {
background: transparent none
}
.slider-tick.custom {
background: transparent none
}
.slider-tick.custom::before {
line-height: 20px;
font-size: 20px;
content: '\2605';
color: #726204
}
.slider-tick.in-selection {
background-image: -webkit-linear-gradient(top, #8ac1ef 0, #d1d1d1 100%);
background-image: -o-linear-gradient(top, #8ac1ef 0, #d1d1d1 100%);
background-image: linear-gradient(to bottom, #afafaf 0, #82b3de 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8ac1ef', endColorstr='#afafaf', GradientType=0);
opacity: 1
}
.slider-handle:after {
content: "";
border-left: 1px solid #17181E;
border-right: 1px solid rgba(255, 255, 255, 0.2);
display: inline-block;
height: 18px;
margin: 8px 2px;
}
.slider-handle span {
border-left: 1px solid #17181E;
border-right: 1px solid rgba(255, 255, 255, 0.2);
display: inline-block;
height: 18px;
margin: 8px 2px;
}
.slider-handle::after span {
border-left: 1px solid #17181E;
border-right: 1px solid rgba(255, 255, 255, 0.2);
display: inline-block;
height: 18px;
margin: 8px 2px;
}
.range-slider {
margin-left: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/bootstrap-slider.min.js"></script>
<h3> Main Slider </h3>
<div class="range-slider">
<span id="ex18-label-1" class="hidden"></span>
<input id="ex19" type="text" data-provide="slider" data-slider-ticks="[1, 2, 3, 4, 5]" data-slider-ticks-labels='["phase 1", "phase 2", "phase 3", "phase 4", "phase 5"]' data-slider-min="1" data-slider-max="5" data-slider-step="1" data-slider-value="1" data-slider-tooltip="hide" onchange="changeslider(value)" />
</div>
<br>
<br>
<h3> Image Slider </h3>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="slider" value="0.0" min="0" max="5" step="1" />
<br /><br />
<img src="" style='width:100px;height:100px;' id='img' /> slider value = <span id="sliderStatus">0</span>

How to Widen My Website Without Recoding Everything

So, I'm not going to lie. I'm not a professional coder, I've learned everything I know from forums and I don't do things according to the book. I kind of cheat the system. Anyway, I've been editing a website on Enjin, it's a gaming platform where you can insert html/css modules that alter the layout and design. I've coded the entire thing, using divs and what-not for my friend's server. Once again I want to reiterate that I'm not a professional, I do it for fun and for free. Now, I'm in a predicament. I want to widen everything I've done, without going in and recoding all my divs since I used px to define them all. Here is my code, and I'll insert a link to the site. Any help will be appreciated..
[Here's the site] http://www.terracrafters.net/test
.m_minecraftserverstatus_new.preset_43030555 {
background-color: #1e2124;
opacity: .9;
border-radius: 0px;
border: 0px solid #ffffff;
margin-top: 10px;
}
BODY {
overflow-x:hidden;
}
.breaker {
opacity: 0;
}
.m_minecraftserverstatus_new.preset_43030555 .top-area {
background-color: #1e2124;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.body-wrap-3 {
background-repeat: no-repeat;
background-position: top;
background-image: url(https://assets-cloud.enjin.com/themes/1487945582_Background.png);
}
.body-wrap-3, #page {
min-width: 0 !important;
max-width: none !important;
}
#page-wrap {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
max-width: 1100px;
margin: 60px auto 30px;
}
.logo {
z-index: 10000000;
margin-top: -1px;
margin-left:38%;
margin-bottom: -65px;
}
.container {
margin-top: -16px;
}
body #site-body {
min-height: 750px;
max-width: 1100px !important;
margin: 0 auto;
background-image: url(https://scontent-iad3-1.xx.fbcdn.net/v/t35.0-12/17521938_1421397851215990_1860950770_o.png?oh=a7575fe8a4e2aca7bc01d19f859148e0&oe=58D973CA);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 2000px;
background-position-y: -260px;
background-position-x: 0px;
}
a, p, div, h1, h2, h3, h4, span {
font-family: MedievalSharp; sans-serif;
}
.abmpro {
background: transparent;
float: right;
margin-left: 800px;
margin-top: 105px;
z-index: 10000000;
position: absolute;
}
.navbar {
background-color: #1f4636;
height: 15px;
text-align: left;
color: black;
text-transform: uppercase;
padding: 25px;
font-size: 15px;
font-weight: 0px;
margin-bottom: -4%;
width: 67.35%;
margin-left: -.7%;
margin-top: 90px;
display: inline-block;
}
.navbar img{
left: 50%;
margin-top: -250px;
position: relative;
transform: translateX(-255.5%) translateY(40%);
}
.navbar a{
-webkit-text-emphasis-color: black;
color: white;
text-transform: uppercase;
padding: 25px;
height: 35px;
}
.navbar a:hover {
color: antiquewhite;
background-color:#1a1a1a;
text-transform: uppercase;
text-decoration:none;
width: 0;
transition: 0.4s ease-in;
-o-transition: 0.4s ease-in;
-ms-transition: 0.4s ease-in;
-moz-transition: 0.4s ease-in;
-webkit-transition: 0.4s ease-in;
overflow: hidden;
padding: 25px;
height: 35px;
}
.navbar p {
margin-bottom: -5px;
}
.abmhomeconent {
background-color: #452121;
margin-left: -11px;
margin-right: -11px;
margin-top: -5.1%;
margin-bottom: -39px;
}
.simple-ss {
border-bottom-left-radius: 5em;
border-bottom-right-radius: 5em;
width: 1100px;
height: 300px;
background-color: black;
margin-top: 23px;
margin-left: -11px;
background-image: url("http://i.imgur.com/vqs1TBE.jpg");
background-position: 0;
background-repeat: no-repeat;
background-size: cover;
animation-name: slide;
animation-duration: 10s;
animation-direction: normal;
animation-timing-function: linear;
animation-iteration-count: 1;
float: right;
margin-right: 470px;
margin-bottom:-5px;
animation-fill-mode:forwards;
}
#keyframes slide {
0% {background-position: 0 -100;}
50% {background-position: 0 -50px;}
100% {background-position: 0 0px;}
}
#enjin-bar .left {
display:inherit;
z-index:50000;
}
.m_html p {
min-height: 1.25em;
margin-bottom: -64px;
line-height: 1.25;
margin-left: 405px;
}
#enjin-bar {
right: .0%;
top: 7.55%;
text-transform: uppercase;
text-decoration: none;
font-family: 'Lato', sans-serif;
color: #8a8a8a;
position: absolute;
z-index:50000;
}
#page-footer {
display:none;
}
#page-footer left {
display: none;
}
#page-footer right {
display: none;
}
.container_body {
margin-top:-.2%;
margin-left:-.1%;
margin-right:-.1%;
}
.m_news.main {
position: relative;
margin-top: 10px;
}
.m_news {
background-color: #1e2124;
margin-left: .1%;
margin-right: 1%;
opacity: .9;
}
.m_news.main .float-manage,.m_news.main .float-rss {
margin-top:0px;
}
.m_news .heading {
background:#D8D8D8;
height:25px;
padding:20px;
}
.m_news.main .article.first .heading {
margin-right:0!important;
}
.m_news.main .heading .title, .m_news.viewarticle .heading .title {
font-size: 20px;
text-transform: uppercase;
padding-top: 2px;
margin-top: -5px;
}
.m_news .heading .title a {
color:#000;
font-weight:300!important;
}
.m_news .heading .info {
visibility:hidden;
}
.m_news .heading .info .date {
visibility:visible;
float:right;
position:relative;
top:-30px;
font-size:22px;
text-transform:uppercase;
color:#fff;
}
.m_news .article .article-content {
font-size:14px;
line-height:20px;
text-align:justify;
padding-bottom:10px;
}
.m_news.viewarticle .m_plugin_comment {
width:94%;
margin:50px auto 0 auto;
}
.m_news.viewarticle .m_plugin_comment .block-title {
background:transparent;
border-bottom:2px solid #FFA62F;
color:#FFA62F;
}
.m_news .article .heading .element_avatar {
margin-top: -2.4%;
margin-left:-6px;
}
.post_interact_like_list {
width:100px;
}
.post_interact_like_list_hidden{
width:100px;
}
#boot_admin{
margin-top:0px;
}
#boot_admin a:nth-child(1){
display:none;
}
#boot_profile{
height:30px;
}
#boot_profile .element_username{
color: black !important;
text-decoration:none !important;
}
#boot_profile span:hover{
background-color: transparent;
color: rgb(51, 51, 51) !important;
text-decoration: none;
}
/*Changes our enjin dropdown caret to something that is close to twitter's caret object(Part 2 for border)*/
#enjin-bar .arrow:after{
border-top:6px solid transparent;
border-top-color:rgba(255, 255, 255);
border-right:6px solid transparent;
border-bottom:6px solid transparent;
border-left:6px solid transparent;
top:3px;
}
/*Changes the style of our entire dropdown box to mimick Boot strap style*/
.element_dropdown_menu.element_popup.enjinbar-menu{
margin-top:26px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
border:1px solid #ccc;
border:1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
z-index:99999;
color:black;
}
/*Our inner elements of our entire enjin drop down*/
.element_popup .inner {
background-color: white !important;
margin-left:10px;
text-decroation:none;
padding:0px 0;
margin:-1px -25px 0;
list-style:none;
border:solid gray 1px;
-webkit-background-clip:padding-box;
-moz-background-clip:padding;
background-clip:padding-box;
color:black;
}
/*Text - Our inner elements of our entire enjin drop down*/
.element_popup .inner li a{
color:#333;
font-size:12px;
font-family:Arial;
padding:6px 20px !important;
}
/*Text - Hover - Our inner elements of our entire enjin drop down*/
.element_popup .inner .menu-link:hover{
text-decoration:none;
color:#ffffff;
background-color:#0081c2;
background-image:-moz-linear-gradient(top, #0088cc, #0077b3);
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);
background-image:-o-linear-gradient(top, #0088cc, #0077b3);
background-image:linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
/*Enjin Divider lines to look...better*/
.element_popup .inner .menu-divider-line{
background-color: #E5E5E5 !important;
border-bottom: 1px solid white !important;
height:1px !important;
opacity:0.4;
}
/*Profile drop down item hover events*/
.element_popup .inner .item:hover{
background-color: rgb(0, 129, 194);
background-image: linear-gradient(to bottom, rgb(0, 136, 204), rgb(0, 119, 179));
}
/*Profile drop down text style*/
.element_popup .inner .item a{
text-decoration:none;
font-weight: normal;
margin-bottom:-5px; /*Reduces some spacing..since menu is huge*/
color: rgb(51, 51, 51);
font-family:arial;
}
/*Profile drop down text style - hover*/
.element_popup .inner .item a:hover{
color: rgb(255, 255, 255);
}
/*Font,text - Our site box at bottom of profile dropdown*/
.sitebox a {
font-size:10px !important;
color:#333;
margin-left:-20px;
background-color:transparent;
}
/*Font,text, make less default space - Our site box at bottom of profile dropdown*/
.enjinbar-menu-user .sitebox{
margin-bottom:10px;
}
/*That damn gear! - Our site box at bottom of profile dropdown*/
.enjinbar-menu-user .sitebox .gear {
background-position: 40px 0px; /*Removes Enjin's mysterious extra icons*/ }
/*Text for site urls - Our site box at bottom of profile dropdown*/
.sitebox .url{
color:#333;
}
/*Our visible username text*/
#enjin-bar .element_username{
color:#000;
text-decoration:none;
}
/*Removes our likes etc.*/
#enjin-bar #enjin-bar-likes{
display:none !important;
}
/*Removes site info,site name and our admin gear*/
#enjin-bar .left a:nth-of-type(1),#enjin-bar .left a:nth-of-type(2),#enjin-bar .left a:nth-of-type(3){
display:none !important;
}
/*creates a default right position for our admin, fixed, position manually on your fixed nav*/
#enjin-bar .left{
margin-top:8px;
z-index:9999;
margin-left:530px;
position:fixed;
}
/*Our admin text on hover*/
#enjin-bar .left a:hover{
color: rgb(51, 51, 51);
text-decoration:none;
}
.sitebox {
display:none;
}
/*END Enjin bar nav positioning*/
/*profile*/
.v2_system_social .widget_owner {
padding: 5px;
font-size: 14px;
padding-bottom: 25px;
}
.v2_system_social .middle_inner, .v2_system_social .sidebar_widget_inner, .v2_system_social .profile_menu .menu_popup_inner {
border: 0px;
border-color: transparent;
padding: 1px;
}
.v2_system_social table.header .cover {
display: inline-block;
vertical-align: middle;
text-align: left;
width: 100%;
height: 173px;
max-width: 898px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border: 1px solid rgba(0, 0, 0, 0.2);
background-repeat: no-repeat;
background-position: -1px -1px;
position: relative;
}
.v2_system_social table.header .avatar {
width: 173px;
height: 173px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border: 1px solid rgba(0, 0, 0, 0.2);
background-repeat: no-repeat;
background-position: -1px -1px;
}
.v2_system_social .middle {
margin: 0 400px 0 78px;
border-radius: 0px;
min-height: 600px;
}
.v2_system_social .sidebar_widget {
width: 383px;
border-radius: 0px;
margin-bottom: 15px;
}
.sidebar_widget {
background-color: #613D41;
}
body.liquid .v2_system_social {
max-width: 1090px;
min-width: 954px;
margin: 0 auto;
width: 1067px;
}
#avatar img {
max-width: 100%;
border-style: solid;
border-width: 0px;
/* float: right; */
z-index: 1;
margin-top: -2.8%;
/* margin-left: 700px; */
float: right;
position: relative;
}
.m_pointsdisplay {
display:none;
}
.v2_system_social .wall .share_closed, .v2_system_social .wall .share, .v2_system_social .wall .share_add_container {
background-color: #ffffff;
border: 1px solid;
border-color: #1a1a1a;
width: 67%;
}
.v2_system_social .widget_owner .logo {
float: left;
width: 74px;
margin-right: 10px;
border-radius: 0px;
overflow: hidden;
}
.container_body .container_right {
/* background-image: url(https://assets-cloud.enjin.com/themes/1350633694_re.png); */
/* width: 13px; */
/* background-color: transparent; */
}
.m_shoutbox {
width: 100%;
background-color: #1e2124;
opacity: .9;
}
#media screen and (min-width: 1024px)
(index):477
#enjin-bar .left {
display:none;
}
#boot_admin{
margin-top:0px;
}
#boot_admin a:nth-child(1){
display:none;
}
#boot_profile{
height:30px;
}
#boot_profile .element_username{
color: black !important;
text-decoration:none !important;
}
#boot_profile span:hover{
background-color: transparent;
color: rgb(51, 51, 51) !important;
text-decoration: none;
}
/*Changes our enjin dropdown caret to something that is close to twitter's caret object(Part 2 for border)*/
#enjin-bar .arrow:after{
border-top:6px solid transparent;
border-top-color:rgba(255, 255, 255);
border-right:6px solid transparent;
border-bottom:6px solid transparent;
border-left:6px solid transparent;
top:3px;
}
/*Changes the style of our entire dropdown box to mimick Boot strap style*/
.element_dropdown_menu.element_popup.enjinbar-menu{
margin-top:26px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
border:1px solid #ccc;
border:1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
z-index:99999;
color:black;
}
/*Our inner elements of our entire enjin drop down*/
.element_popup .inner {
background-color: white !important;
margin-left:10px;
text-decroation:none;
padding:0px 0;
margin:-1px -25px 0;
list-style:none;
border:solid gray 1px;
-webkit-background-clip:padding-box;
-moz-background-clip:padding;
background-clip:padding-box;
color:black;
}
/*Text - Our inner elements of our entire enjin drop down*/
.element_popup .inner li a{
color:#333;
font-size:12px;
font-family:Arial;
padding:6px 20px !important;
}
/*Text - Hover - Our inner elements of our entire enjin drop down*/
.element_popup .inner .menu-link:hover{
text-decoration:none;
color:#ffffff;
background-color:#0081c2;
background-image:-moz-linear-gradient(top, #0088cc, #0077b3);
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);
background-image:-o-linear-gradient(top, #0088cc, #0077b3);
background-image:linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
/*Enjin Divider lines to look...better*/
.element_popup .inner .menu-divider-line{
background-color: #E5E5E5 !important;
border-bottom: 1px solid white !important;
height:1px !important;
opacity:0.4;
}
/*Profile drop down item hover events*/
.element_popup .inner .item:hover{
background-color: rgb(0, 129, 194);
background-image: linear-gradient(to bottom, rgb(0, 136, 204), rgb(0, 119, 179));
}
/*Profile drop down text style*/
.element_popup .inner .item a{
text-decoration:none;
font-weight: normal;
margin-bottom:-5px; /*Reduces some spacing..since menu is huge*/
color: rgb(51, 51, 51);
font-family:arial;
}
/*Profile drop down text style - hover*/
.element_popup .inner .item a:hover{
color: rgb(255, 255, 255);
}
/*Font,text - Our site box at bottom of profile dropdown*/
.sitebox a {
font-size:10px !important;
color:#333;
margin-left:-20px;
background-color:transparent;
}
/*Font,text, make less default space - Our site box at bottom of profile dropdown*/
.enjinbar-menu-user .sitebox{
margin-bottom:10px;
}
/*That damn gear! - Our site box at bottom of profile dropdown*/
.enjinbar-menu-user .sitebox .gear {
background-position: 40px 0px; /*Removes Enjin's mysterious extra icons*/ }
/*Text for site urls - Our site box at bottom of profile dropdown*/
.sitebox .url{
color:#333;
}
/*Our visible username text*/
#enjin-bar .element_username{
color:#000;
text-decoration:none;
}
/*Removes our likes etc.*/
#enjin-bar #enjin-bar-likes{
display:none !important;
}
/*Removes site info,site name and our admin gear*/
#enjin-bar .left a:nth-of-type(1),#enjin-bar .left a:nth-of-type(2),#enjin-bar .left a:nth-of-type(3){
display:none !important;
}
/*creates a default right position for our admin, fixed, position manually on your fixed nav*/
#enjin-bar .left{
margin-top:8px;
z-index:9999;
margin-left:530px;
position:fixed;
}
/*Our admin text on hover*/
#enjin-bar .left a:hover{
color: rgb(51, 51, 51);
text-decoration:none;
}
/*END Enjin bar nav positioning*/
I think it's safe to say no one is going to read allllll that css ;) but having a quick look at your site, there are two obvious things to change. This is all of course dependent on what you mean by widen everything. But you have both body #site-body and #page-wrap set to max-width:100px.
You could remove this, or alter it, and it will stretch your main content across the page. I suspect there is something for higher up the page too with the image and menu.
I would also look to reduce the amount of !importants you have in there as they can get you into all sorts of hassles with trying to work out your styling. Hope that helps!

Animate the Bar Chart Height using jQuery

I want to create an automatically animated bar chart when the user scrolls into view. Kinda look like this one http://www.adhamdannaway.com/about
I had created the chart using CSS and wanted to toggle the height percentage animation,using the jquery waypoint.
I tried to write the jquery code but it seems fail. I'm still new in jQuery and CSS so i hope someone can help enlighten me.
Here is my attempt so far.
Fiddle link : http://jsfiddle.net/C5v4t/
HTML code :
<ul class="chart">
<li class="axis">
<div class="label">MVP</div>
<div class="label">All Star</div>
<div class="label">Slugger</div>
<div class="label">Rookie</div>
<div class="label">Triple A</div>
</li>
<li id="teal" class="teal p-95" style="visibility: visible; height: 95%; opacity: 1;">
<div class="percent">"95"<span>%</span></div>
<div class="skill">Karate</div></li>
<li id="salmon" class="salmon p-90" style="visibility: visible; height: 90%; opacity: 1;">
<div class="percent">"90"<span>%</span></div>
<div class="skill">Taekwondo</div></li>
<li id="peach" class="peach p-80" style="visibility: visible; height: 80%; opacity: 1;">
<div class="percent">"80"<span>%</span></div>
<div class="skill">Nunchucks</div></li>
<li id="lime" class="lime p-75" style="visibility: visible; height: 75%; opacity: 1;">
<div class="percent">"75"<span>%</span></div>
<div class="skill">Bow Staff</div></li>
<li id="grape" class="grape p-40" style=" visibility: visible; height: 40%; opacity: 1;">
<div class="percent">"40"<span>%</span></div>
<div class="skill">Suplex</div></li>
CSS code:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800);
body {
font-family: 'Open Sans', sans-serif;
}
.chart {
clear: both;
padding: 0;
width: 100%;
}
#media (min-width: 700px) {
.chart {
background: url("http://cl.ly/QSpc/bg-chart.png") right top repeat-x;
height: 425px;
margin: 0 auto emCalc(-32px);
}
}
.chart li {
display: block;
height: 125px;
padding: emCalc(25px) 0;
position: relative;
text-align: center;
vertical-align: bottom;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px;
border-radius: 4px 4px 0 0;
-moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
}
#media (min-width: 700px) {
.chart li {
display: inline-block;
height: 425px;
margin: 0 1.8% 0 0;
width: 15%;
}
}
.chart .axis {
display: none;
top: emCalc(-45px);
width: 8%;
}
#media (min-width: 700px) {
.chart .axis {
display: inline-block;
}
}
.chart .label {
background: #cccccc;
margin: -9px 0 71px 0;
}
.chart .percent {
letter-spacing: -3px;
opacity: .4;
width: 100%;
font-size: 30px;
font-size: 1.875rem;
}
#media (min-width: 700px) {
.chart .percent {
position: absolute;
font-size: 62px;
font-size: 3.875rem;
}
}
.chart .percent span {
font-size: 30px;
font-size: 1.875rem;
}
.chart .skill {
font-weight: 800;
opacity: .5;
overflow: hidden;
text-transform: uppercase;
width: 100%;
font-size: 14px;
font-size: 0.875rem;
}
#media (min-width: 700px) {
.chart .skill {
bottom: 20px;
position: absolute;
font-size: 16px;
font-size: 1rem;
}
}
.chart .teal {
background: #4ecdc4;
border: 1px solid #4ecdc4;
background-image: -moz-linear-gradient(#76d8d1, #4ecdc4 70%);
background-image: -webkit-linear-gradient(#76d8d1, #4ecdc4 70%);
background-image: linear-gradient(#76d8d1, #4ecdc4 70%);
}
.chart .salmon {
background: #ff6b6b;
border: 1px solid #ff6b6b;
background-image: -moz-linear-gradient(#ff9e9e, #ff6b6b 70%);
background-image: -webkit-linear-gradient(#ff9e9e, #ff6b6b 70%);
background-image: linear-gradient(#ff9e9e, #ff6b6b 70%);
}
.chart .lime {
background: #97f464;
border: 1px solid #97f464;
background-image: -moz-linear-gradient(#b7f794, #97f464 70%);
background-image: -webkit-linear-gradient(#b7f794, #97f464 70%);
background-image: linear-gradient(#b7f794, #97f464 70%);
}
.chart .peach {
background: #ffcd92;
border: 1px solid #ffcd92;
background-image: -moz-linear-gradient(#ffe4c5, #ffcd92 70%);
background-image: -webkit-linear-gradient(#ffe4c5, #ffcd92 70%);
background-image: linear-gradient(#ffe4c5, #ffcd92 70%);
}
.chart .grape {
background: #ab64f4;
border: 1px solid #ab64f4;
background-image: -moz-linear-gradient(#c594f7, #ab64f4 70%);
background-image: -webkit-linear-gradient(#c594f7, #ab64f4 70%);
background-image: linear-gradient(#c594f7, #ab64f4 70%);
}
.chart .p-95{
height:95%;
}
.chart .p-90{
height:90%;
}
.chart .p-80{
height:80%;
}
.chart .p-75{
height:75%;
}
.chart .p-40{
height:40%;
}
Script code using waypoint JS:
<script>
// Animate Chart
$('.chart').waypoint(function(event, direction) {
$('#teal').css({'visibility':'visible', 'height': '0%'}).stop().delay(200).animate({'opacity':'1', 'height':'95%'}, 1000, 'easeOutExpo');
$('#salmon').css({'visibility':'visible', 'height': '0%'}).stop().delay(400).animate({'opacity':'1', 'height':'90%'}, 1000, 'easeOutExpo');
$('#lime').css({'visibility':'visible', 'height': '0%'}).stop().delay(600).animate({'opacity':'1', 'height':'80%'}, 1000, 'easeOutExpo');
$('#peach').css({'visibility':'visible', 'height': '0%'}).stop().delay(800).animate({'opacity':'1', 'height':'75%'}, 1000, 'easeOutExpo');
$('#grape').css({'visibility':'visible', 'height': '0%'}).stop().delay(1000).animate({'opacity':'1', 'height':'40%'}, 1000, 'easeOutExpo');
}, {
offset: '80%',
triggerOnce: true
});
</script>

IE8: element:first-child deosn't work (selects parent of what I actually want)

Works in chrome, not ie8: http://jsfiddle.net/a7rXZ/2/
so, when you click on accepted, decline, or open, it changes the text adjacent to the little click menu (while maintaining styling of the text on the left (this is ideal)). but in IE, it seems to be replacing the parent element (cause the styling of the text doesn't remain the same)
any ideas for how to get this to behave in IE8?
this is the code in question:
$j('.change_option').click(function() {
$j('#change_status_menu').fadeToggle("fast");
$j(".status .status_header span:first-child").attr("class", $j(this).html());
$j(".status .status_header span:first-child").html($j(this).html());
$j('#proposal_status').val($j(this).attr("name"));
unsaved_changes = true;
});
I suspect IE just has a problem with mark-up in class attributes. I wouldn't blame IE though since it's totally invalid. The solution is really a case of making the mark-up cleaner and copying only the relevant sections of text/mark-up from the options to the status header.
I've cleaned up the mark-up a little and re-worked the jQuery to select only the text() and class necessary for manipulating the status-header element. Basically, I've turned the options into an unordered list, rather than using a combination of <div> and <span>. So it might not be exactly what you are after, since I am not sure if you can change the mark-up and I have also removed the the .badge class.
The problems were mainly that the JavaScript was adding HTML content into the class attribute of the .status-header span element, but also a lot of the text in the example was outside any element, so the JavaScript was actually selecting too much content each time. The other problem I could see was that you had already duplicated the mark-up for the secondary status heading, so rather than replacing this HTML each time, it was easier to just extract the one class ('Open', 'Accepted' or 'Declined') and the text of the option.
There is more that can be done to simplify the code, for example the .class and text() being copied to the header are now exactly the same so should be simplified.
Here is a demo which is working for me in Chrome and IE8
For completeness, here is all the code:
HTML
<div class="proposal_status">
<div id="change_status_menu" style="">
<div class="change_status_menu">
<ul class="container">
<li class="Open" name="1">Open</li>
<li class="Accepted" name="2">Accepted</li>
<li class="Declined" name="3">Declined</li>
</ul>
</div>
<div class="arrow_border_2"></div>
<div class="arrow_border"></div>
<div class="arrow"></div>
</div>
<input id="proposal_status" name="proposal[status]" type="hidden" value="2">
<div class="status">
<div class="status_header">
<span class="Accepted">Accepted</span>
<div class="action_button change_status">Change Status</div>
</div>
<div class="info">
<div class="prop-status-details">
Accepted by
<strong>aoei eui</strong> from
<strong>127.0.0.1</strong>
</div>
</div>
</div>
</div>
JavaScript
$j = jQuery.noConflict();
$j(function() {
$j(".change_status").click(function() {
$j('#change_status_menu').fadeToggle("fast");
});
$j('li').click(function() {
$j('#change_status_menu').fadeToggle("fast");
$j(".status .status_header span").attr("class", $j(this).attr('class'));
$j(".status .status_header span").html($j(this).text());
$j('#proposal_status').val($j(this).attr("name"));
unsaved_changes = true;
});
});
CSS
.no_padding{
padding: 0px !important;
}
.properties-shell {
background: #f3f3f3;
width: 930px;
position: relative;
border-right: solid 10px #f3f3f3;
border-left: solid 10px #f3f3f3;
}
.properties-shell-top {
margin-top: 15px;
background: url(../images/bucket_wide_bg.gif) no-repeat;
width: 950px;
height: 10px;
overflow: hidden;
}
.properties-shell-bottom {
background: url(../images/bucket_wide_bg.gif) 0 -10px no-repeat;
width: 950px;
height: 10px;
overflow: hidden;
}
.properties-main {
background: #FFF;
display: table;
border-left: solid 1px #e5e5e5;
}
.properties_header{
border-right: solid 1px #e5e5e5;
display: block;
height: 38px;
border-top: rgb(229,229,229);
background: #e5e5e5;
background: -webkit-gradient(linear, left bottom, left top,
color-stop(0%,#e5e5e5),
color-stop(96%,#f2f2f2),
color-stop(97%,#ffffff),
color-stop(98%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* Opera11.10+ */
background: -ms-linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* W3C */
}
.properties_first_col{
padding: 20px;
width: 415px;
float: left;
display: inline-block;
}
.properties_second_col{
padding: 20px;
padding-right: 15px;
width: 210px;
float: left;
display: inline-block;
}
.properties_options{
background: #F7F7F7;
float: right;
padding: 20px;
width: 187px;
border-left: solid 1px #e1e1e1;
border-right: solid 1px #e1e1e1;
border-bottom: solid 1px #e1e1e1;
min-height: 268px;
}
.option_select{
padding: 5px;
padding-top: 0px;
padding-bottom: 10px;
font-size: 13px;
color: #747474;
}
.proposal_status {
position: absolute;
top: 266px;
right: 0px;
margin-right: 1px;
}
.change_status_menu {
border-radius: 5px;
background: rgba(235,235,235, 0.95);
border: 1px solid #d3d3d3;
width: 142px;
height: 110px;
position: absolute;
z-index: 1000;
right: 10px;
bottom: 77px;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
}
.change_status_menu .container{
border: 1px solid white;
padding: 5px;
border-radius: 4px;
}
.change_status_menu .container li {
display: block;
width: 120px;
padding:5px 0 5px 10px;
margin:0;
}
.change_status_menu .container li:hover{
background: -webkit-linear-gradient(top, #ffffff 2%, #e9e9e9 96%, #F3F3F3 85%, #e9e9e9 96%, #ffffff 98%); /* Chrome10+,Safari5.1+ */
border: 1px solid #d7d7d7;
border-radius: 3px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 9px;
}
.arrow {
z-index: 1003;
border-color: #EDEDED transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
right: 38px;
bottom: 60px;
}
.arrow_border {
z-index: 1001;
border-color: #d3d3d3 transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
right: 38px;
bottom: 58px;
}
.arrow_border_2 {
z-index: 1002;
border-color: #fff transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
right: 38px;
bottom: 59px;
}
.proposal_status .status{
width: 227px;
}
.proposal_status .status .status_header,
.proposal_status .status .Unpublished{
background: #e5e5e5;
background: -webkit-gradient(linear, left bottom, left top,
color-stop(0%,#e5e5e5),
color-stop(96%,#f2f2f2),
color-stop(97%,#ffffff),
color-stop(98%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* Opera11.10+ */
background: -ms-linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* W3C */
width: 227px;
height: 30px;
}
.proposal_status .status .status_header .change_status{
width: 88px;
font-size: 9px;
float: right;
display: inline-block;
margin: 5px;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
}
.proposal_status .Accepted,
.proposal_status .Declined,
.proposal_status .Open{
margin: 5px;
display: inline-block;
text-transform: uppercase;
font-size: 14px;
color: #848484 !important;
text-shadow:#fff 0px 1px 0, #fff 0 -1px 0;
}
.proposal_status .Accepted .badge,
.proposal_status .Declined .badge,
.proposal_status .Open .badge,
.proposal_status .Unpublished .badge{
width: 17px;
height: 17px;
display: inline-block;
position: relative;
top: 3px;
}
.proposal_status .Accepted .badge{
background: url(/images/header_status_green.png) no-repeat;
}
.proposal_status .Declined .badge{
background: url(/images/header_status_blue.png) no-repeat;
}
.proposal_status .Open .badge{
background: url(/images/header_status_grey.png) no-repeat;
}
.proposal_status .Unpublished .badge{
background: url(/images/header_status_white.png) no-repeat;
}
.proposal_status .status .info{
background: #F2F2F2;
background: -webkit-gradient(linear, left bottom, left top,
color-stop(0%,#F2F2F2),
color-stop(100%,#D6D6D6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(bottom, #F2F2F2 0%, #D6D6D6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(bottom, #F2F2F2 0%, #D6D6D6 100%); /* Opera11.10+ */
background: -ms-linear-gradient(bottom, #F2F2F2 0%, #D6D6D6 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F2F2F2', endColorstr='#D6D6D6',GradientType=0 ); /* IE6-9 */
background: linear-gradient(bottom, #F2F2F2 0%, #D6D6D6 100%); /* W3C */
box-shadow: inner 0 2px 2px #bbb;
-moz-box-shadow: inset 0 2px 2px #bbb;
-webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.2);
}
.prop-status-details {
padding: 10px;
color: #5F5F5F;
line-height: 15px;
}
.proposal_status .status .Unpublished{
margin-top: 95px;
text-transform: uppercase;
text-indent: 10px;
line-height: 30px;
font-size: 14px;
color: #818181;
text-shadow:#fff 0px 1px 0, #fff 0 -1px 0;
box-shadow: none;
}
.action_button {
font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
background: #FCFCFC;
border: 1px solid #DCDCDC;
border-radius: 4px;
padding-left: 5px;
padding-right: 5px;
font-size: 10px;
line-height: 18px;
color: #8B8B8B !important;
text-transform:uppercase !important;
/* text-shadow: #555 0px -1px 1px;*/
/* letter-spacing:1px;*/
font-size: 11px;
font-weight: bold;
line-height: 18px;
}
.action_button:hover{
text-decoration: none;
background: #f4f4f4;
border: 1px solid #ccc;
}
The problem is that you're setting the class attribute with html content. I've done a quick workaround:
http://jsfiddle.net/a7rXZ/4/
Simply changing .html() with .text(). The original returns a value that looks like the following (yes, including all the whitespace):
<div class="badge"></div>
Declined
But you're expecting just the text Declined, which is retrievable by the new version. You might like to consider a slightly stronger tactic (whitespace removal would be a start, but I'm referring to something more rigid), even though for now the new version works.

Categories