I have found a similar question asked here:
Add tick marks to jQuery slider?
But this deals with the jQuery-UI library and not jQuery Mobile, I'm not sure how well it would crossover.
What I would like to do is to add 5 tick marks along the slider rail of my jQuery Mobile slider widgets- # 0%, 25%, 50 %, 75%, 100%
How would I go about doing this?
Edit:
I have implemented Sia's solution but now there are some weird line thickness issues I am noticing.
Here is a picture of my sliders with the ticks via Sia's solution:
As you can see, some of the ticks have varying thickness and they seem to repeat in this way for each slider... The css and html for these ticks is exactly the same as Sia's answer save for the inclusion of numbers below the ticks
Here is the relevant JS code:
$(document).on("pageinit",function(){
var ticks2 = "<div class='tick' id='ticka'></div>"
ticks2 += "<div class='tick' id='tickb'></div>";
ticks2 += "<div class='tick' id='tickc'></div>";
ticks2 += "<div class='tick' id='tickd'></div>";
ticks2 += "<div class='tick' id='ticke'></div>";
ticks2 += "<div class='tick' id='tickf'></div>";
ticks2 += "<div class='tick' id='tickg'></div>";
ticks2 += "<div class='tick' id='tickh'></div>";
$("div.ui-slider-track").append(ticks2);
...
}
And the CSS:
.tick {
width: 1px;
background-color:#3388cc;
height:100%;
position:absolute;
bottom:0px;
}
#ticka{
margin-left:11.1%;
}
#tickb{
margin-left:22.2%;
}
#tickc{
margin-left:33.3%;
}
#tickd{
margin-left:44.4%;
}
#ticke{
margin-left:55.5%;
}
#tickf{
margin-left:66.6%;
}
#tickg{
margin-left:77.7%;
}
#tickh{
margin-left:88.8%;
}
Sia has given you a nice solution. In addition, you can look at this blog entry for some ideas on enhancing the slider widget (full disclosure, I wrote it):
Fun with the Slider Widget
There is an example of adding tick marks and you could also consider the example of the color DIVs with labels in the slider track. Here is a fiddle with the 2 techniques included:
DEMO
<div id="tickMarks" >
<label for="theSlider2">Slider with Tick marks:</label>
<input type="range" name="theSlider2" id="theSlider2" min="0" max="100" value="60" />
</div>
<br /><br />
<div id="tickMarks2" >
<label for="theSlider3">Slider Background Ranges:</label>
<input type="range" name="theSlider3" id="theSlider3" min="0" max="100" value="55" />
</div>
The javascript dynamically creates the background DIVs and inserts them into the slider track:
$(document).on("pagecreate", "#page1", function () {
var ticks = '<div class="sliderTickmarks "><span>0%</span></div>';
ticks += '<div class="sliderTickmarks "><span>25%</span></div>';
ticks += '<div class="sliderTickmarks "><span>50%</span></div>';
ticks += '<div class="sliderTickmarks "><span>75%</span></div>';
ticks += '<div class="sliderTickmarks "><span>100%</span></div>';
$("#tickMarks .ui-slider-track").prepend(ticks);
var colorback = '<div class="sliderBackColor color1">0-24%</div>';
colorback += '<div class="sliderBackColor color2">25-50%</div>';
colorback += '<div class="sliderBackColor color3">50-75%</div>';
colorback += '<div class="sliderBackColor color4">75-100%</div>';
$("#tickMarks2 .ui-slider-track").prepend(colorback);
});
The CSS for tickmarks leaves the DIVs transparent and adds a right border to the middle DIVS for the vertical tick marks. The inner SPANS are moved using relative poritioning to below the track. For the color DIVs, we add background colors and some corner rounding to the first and last DIVs so they match the rounding of the track:
.sliderTickmarks{
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 25%;
float: left;
border-right: 1px solid #888;
}
.sliderTickmarks span{
position: relative;
left: 100%;
top: 125%;
margin-left: -10px;
font-size: 12px;
font-weight: normal;
}
.ui-slider-track > div.sliderTickmarks:first-child{
border-right: 0;
width: 0;
}
.ui-slider-track > div.sliderTickmarks:first-child span{
margin-left: -5px;
}
.ui-slider-track > div.sliderTickmarks:last-of-type{
border-right: 0;
}
.sliderBackColor{
height: 100%;
width: 25%;
float: left;
color: white;
text-align: center;
font-size: 10px;
font-weight: normal;
text-shadow: 0px 1px 2px #333;
}
.color1 { background-color: #D6AA26;}
.color2 { background-color: #93A31C;}
.color3 { background-color: #408156;}
.color4 { background-color: #30374F;}
.ui-slider-track > div.sliderBackColor:first-child{
border-top-left-radius: 0.3125em;
border-bottom-left-radius: 0.3125em;
}
.ui-slider-track > div.sliderBackColor:last-of-type{
border-top-right-radius: 0.3125em;
border-bottom-right-radius: 0.3125em;
}
This is probably not the most elegant solution but I think it's what you are looking for
Example: http://jsfiddle.net/gravitybox/5tfPj/
js
$(document).ready(function() {
$("div.ui-slider").append("<div class='tick' id='percent25'></div><div class='tick' id='percent50'></div><div class='tick' id='percent75'></div><div class='number' id='number0'>0</div><div class='number' id='number25'>25</div><div class='number' id='number50'>50</div><div class='number' id='number75'>75</div><div class='number' id='number100'>100</div>");
});
css
.tick {
width: 1px;
background-color:#999999;
height:5px;
position:absolute;
bottom:0px;
}
#number0{
margin-left:0%;
}
#percent25, #number25{
margin-left:25%;
}
#percent50, #number50{
margin-left:50%;
}
#percent75, #number75{
margin-left:75%;
}
#number100{
margin-left:100%;
}
.number {
position:absolute;
top:18px;
left:-5px;
bottom:0px;
font-size:10px;
color:#999999;
}
Related
I want to style the bar before the thumb with a different color on a range input. I'v tried looking for a solution but I havent found a proper solution. This is what I need it to look like:
Chrome doesnt seem to support input[type='range']::-webkit-slider-thumb:before anymore and I am at a loss how to style it. Here's what I have so far:
input[type='range'] {
min-width: 100px;
max-width: 200px;
&::-webkit-slider-thumb {
-webkit-appearance: none !important;
background-color: #white;
border: 1px solid #gray-4;
height: 14px;
width: 14px;
&:hover,
&:focus,
&:active {
border-color: #blue;
background-color: #gray-2;
}
}
&::-webkit-slider-runnable-track {
background-color: #gray-2;
border: 1px solid #gray-4;
}
}
document.querySelectorAll(".__range").forEach(function(el) {
el.oninput =function(){
var valPercent = (el.valueAsNumber - parseInt(el.min)) /
(parseInt(el.max) - parseInt(el.min));
var style = 'background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop('+ valPercent+', #29907f), color-stop('+ valPercent+', #f5f6f8));';
el.style = style;
};
el.oninput();
});
.__range{
margin:30px 0 20px 0;
-webkit-appearance: none;
background-color: #f5f6f8;
height: 3px;
width: 100%;
margin: 10px auto;
}
.__range:focus{
outline:none;
}
.__range::-webkit-slider-thumb{
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #29907f;
border-radius: 50%;
cursor: -moz-grab;
cursor: -webkit-grab;
}
<input class="__range" id="rng" name="rng" value="30" type="range" max="100" min="1" value="100" step="1">
The trick in the post referenced by shambalambala is clever, but I don't think it will work in this case if you want to get something that looks exactly like the image you show. The approach there is to put a shadow on the thumb to create the different coloring to the left of the thumb. Since the shadow extends in the vertical, as well as the horizontal, direction, you also have to add overflow:hidden to the range or the track in order to clip the shadow. Unfortunately, this also clips the thumb. So if you want a thumb that extends beyond the track in the vertical dimension, such as in the image you show where the thumb is a circle with a diameter larger than the track width, this won't work.
I'm not sure there's a pure CSS solution to this problem. With JavaScript, one way around this is to make two range elements that overlap exactly. For one range element, you will see only the thumb and for one you will see only the track. You can use the shadow approach on the track element to get the different color before the thumb. You can style the thumb on the thumb range however you want, and since overflow is not set to hidden for this range element, it can extend beyond the width of the track. You can then use JavaScript to yoke the two range elements together, so that when you move the thumb on the thumb-visible element, the value of the track-visible element also changes.
For example (works in webkit browsers--will need some additional styling for other browsers):
<html>
<head>
<style>
.styled_range {
position: relative;
padding: 10px;
}
input[type=range] {
-webkit-appearance: none;
width: 600px;
background: transparent;
position: absolute;
top: 0;
left: 0;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 12px;
}
.track_range {
pointer-events: none;
}
.track_range::-webkit-slider-runnable-track {
background: #D0D0D0;
border-radius: 6px;
overflow: hidden;
}
.track_range::-webkit-slider-thumb {
-webkit-appearance: none;
background: transparent;
height: 1px;
width: 1px;
box-shadow: -600px 0 0 600px #666666;
}
.thumb_range::-webkit-slider-runnable-track {
background: transparent;
cursor: pointer;
}
.thumb_range::-webkit-slider-thumb {
-webkit-appearance: none;
border: 3px solid #ffffff;
border-radius: 20px;
height: 40px;
width: 40px;
background: #1180AD;
cursor: pointer;
margin: -12px 0px 0px 0px;
}
</style>
</head>
<body>
<form>
<div class="styled_range">
<input type="range" class="track_range"/>
<input type="range" class="thumb_range"/>
</div>
<br/>
<div class="styled_range">
<input type="range" class="track_range"/>
<input type="range" class="thumb_range"/>
</div>
</form>
</body>
<script>
window.onload = function() {
var styledRanges = document.getElementsByClassName('styled_range');
for (var i=0; i<styledRanges.length; i++) {
var thumbRange = null, trackRange = null;
for (var j=0; j<styledRanges[i].children.length; j++) {
var child = styledRanges[i].children[j];
if (child.className === 'thumb_range')
var thumbRange = child;
else if (child.className === 'track_range')
var trackRange = child;
}
thumbRange.oninput = function(thumbRange, trackRange) {
return function(e) {
trackRange.value = thumbRange.value;
};
}(thumbRange, trackRange);
}
}
</script>
</html>
I am working on a site, in which I had to add screen adjustments using scrollbars and I made it using this example. You can see the code below...
HTML CODE:
<h1>Image Editor with CSS Filters and jQuery</h1>
<!--Form for collecting image URL -->
<form id="urlBox" class="center">
<input class="url-box" type="url" id="imgUrl" placeholder="Paste any image link and start playing!">
<input id="go" type="button" value="Go">
</form>
<hr color="grey">
<!--Controls for CSS filters via range input-->
<div class="sliders">
<form id="imageEditor">
<p>
<label for="gs">Grayscale</label>
<input id="gs" name="gs" type="range" min="0" max="100" value="0">
</p>
<p>
<label for="blur">Blur</label>
<input id="blur" name="blur" type="range" min="0" max="10" value="0">
</p>
<p>
<label for="br">Exposure</label>
<input id="br" name="br" type="range" min="0" max="200" value="100">
</p>
<p>
<label for="ct">Contrast</label>
<input id="ct" name="ct" type="range" min="0" max="200" value="100">
</p>
<p>
<label for="huer">Hue Rotate</label>
<input id="huer" name="huer" type="range" min="0" max="360" value="0">
</p>
<p>
<label for="opacity">Opacity</label>
<input id="opacity" name="opacity" type="range" min="0" max="100" value="100">
</p>
<p>
<label for="invert">Invert</label>
<input id="invert" name="invert" type="range" min="0" max="100" value="0">
</p>
<p>
<label for="saturate">Saturate</label>
<input id="saturate" name="saturate" type="range" min="0" max="500" value="100">
</p>
<p>
<label for="sepia">Sepia</label>
<input id="sepia" name="sepia" type="range" min="0" max="100" value="0">
</p>
<input type="reset" form="imageEditor" id="reset" value="Reset" />
</form>
</div>
<!--container where image will be loaded-->
<div id="imageContainer" class="center">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/stadium.jpg">
</div>
<p class="p">Demo by Vikas Lalwani. See article.</p>
CSS CODE:
/* General styles for the page */
* {
margin: 0;
padding: 0;
}
body {
background-color: #D2D7D3;
font-family: monospace;
margin: 0 auto;
width: 960px;
}
h1 {
margin: 25px 0 25px 0;
font-size: 40px;
text-align: center;
}
hr {
margin: 20px 0;
}
form {
text-align: center;
}
/* Styles for URL box */
.url-box {
background-color: transparent;
display: inline-block;
height: 30px;
border: none;
border-bottom: 4px solid #b3b3b1;
padding: 0px 0px 0px 20px;
margin: 0px 0px;
width: 50%;
outline: none;
text-align: center;
font-size: 15px;
font-family: monospace;
font-weight: 100;
color: #000;
}
#go {
display: inline-block;
height: 50px;
width: 50px;
background-color: transparent;
padding: 0px;
border: 4px solid #b3b3b1;
border-radius: 50%;
box-shadow: none;
cursor: pointer;
outline: none;
text-align: center;
font-size: 20px;
font-family: monospace;
font-weight: 100;
color: #000;
}
/* Styles for image container*/
#imageContainer {
border: 2px solid grey;
border-radius: 10px;
padding: 5px;
width: 65%;
max-width: 600px;
float: left;
margin: 20px;
}
#imageContainer img {
border-radius: 10px;
width: 100%;
}
/* Styles for sliders*/
.sliders {
float: left;
border: 2px solid grey;
border-radius: 10px;
margin-top: 20px;
margin-bottom: 20px;
padding-left: 10px;
}
.sliders p {
margin: 18px 0;
vertical-align: middle;
}
.sliders label {
display: inline-block;
margin: 10px 0 0 0;
width: 100px;
font-size: 16px;
color: #22313F;
text-align: left;
vertical-align: middle;
}
.sliders input {
position: relative;
margin: 10px 20px 0 10px;
vertical-align: middle;
}
input[type=range] {
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border-radius: 5px;
/*required for proper track sizing in FF*/
width: 150px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 7px;
background: #ABB7B7;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: #4B77BE;
margin-top: -6px;
vertical-align: middle;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:hover {
cursor: pointer;
}
#reset {
display: inline-block;
height: 40px;
width: 100px;
background-color: transparent;
padding: 0px;
border: 4px solid #b3b3b1;
border-radius: 10px;
box-shadow: none;
cursor: pointer;
outline: none;
text-align: center;
font-size: 20px;
font-family: monospace;
font-weight: 100;
color: #000;
margin: 0 0 10px 0;
}
.p {
clear: both;
text-align: center;
padding: 40px 0 40px;
}
JQUERY DODE:
//on click of go(submit) button, addImage() will be called
$("#go").click(addImage);
//on pressing return, addImage() will be called
$("#urlBox").submit(addImage);
// editing image via css properties
function editImage() {
var gs = $("#gs").val(); // grayscale
var blur = $("#blur").val(); // blur
var br = $("#br").val(); // brightness
var ct = $("#ct").val(); // contrast
var huer = $("#huer").val(); //hue-rotate
var opacity = $("#opacity").val(); //opacity
var invert = $("#invert").val(); //invert
var saturate = $("#saturate").val(); //saturate
var sepia = $("#sepia").val(); //sepia
$("#imageContainer img").css(
"filter", 'grayscale(' + gs+
'%) blur(' + blur +
'px) brightness(' + br +
'%) contrast(' + ct +
'%) hue-rotate(' + huer +
'deg) opacity(' + opacity +
'%) invert(' + invert +
'%) saturate(' + saturate +
'%) sepia(' + sepia + '%)'
);
$("#imageContainer img").css(
"-webkit-filter", 'grayscale(' + gs+
'%) blur(' + blur +
'px) brightness(' + br +
'%) contrast(' + ct +
'%) hue-rotate(' + huer +
'deg) opacity(' + opacity +
'%) invert(' + invert +
'%) saturate(' + saturate +
'%) sepia(' + sepia + '%)'
);
}
//When sliders change image will be updated via editImage() function
$("input[type=range]").change(editImage).mousemove(editImage);
// Reset sliders back to their original values on press of 'reset'
$('#imageEditor').on('reset', function () {
setTimeout(function() {
editImage();
}, 0);
});
// adding an image via url box
function addImage(e) {
var imgUrl = $("#imgUrl").val();
if (imgUrl.length) {
$("#imageContainer img").attr("src", imgUrl);
}
e.preventDefault();
}
What I can't aim, is to load, save or reset values of adjustments using a cookie and jquery!!! Any idea how can I do this?
EDIT
I need an example based on this part of code:
$(document).ready(function(){
function adjustments() {
var br = $("#br").val(); // brightness
var ct = $("#ct").val(); // contrast
var opacity = $("#opacity").val(); //opacity
var saturate = $("#saturate").val(); //saturate
$("#page-wrap, #preloader").css("filter", 'brightness(' + br +
'%) contrast(' + ct +
'%) opacity(' + opacity +
'%) saturate(' + saturate +
'%) ');
$("#page-wrap, #preloader").css("-webkit-filter", 'brightness(' + br +
'%) contrast(' + ct +
'%) opacity(' + opacity +
'%) saturate(' + saturate +
'%) ');
}
$("input[type=range]").change(adjustments).mousemove(adjustments);
$('#adjustments-form').on('reset', function () {setTimeout(function() {adjustments();},0);});
});
You can manage cookies (get, add,update, etc..) in your script using one of these two examples:
https://github.com/js-cookie/js-cookie
https://github.com/carhartl/jquery-cookie
Then simply:
Check for the cookie existence on page load:
If cookie is available then load properties,
If cookie don't exist - create a new cookie with the current properties.
An example (using jQuery cookie plugin)
Setting a cookie and storing some data:
// prepare and store data
var props = {
name:'John',
age:'31'
};
$.cookie('_storeProperties', JSON.stringify(props) );
Retrieve cookie and parse saved data:
var props = $.parseJSON( $.cookie('_storeProperties') );
// do something with the data..
Another approach (which I would prefer) would be using localStorage.
You can read a bit about localStorage in the following link:
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
EDIT ON OP REQUEST
This is not a complete code, just showing you how to utilize what I have explained on your own scenario, customize to fit your needs:
function adjustments() {
// creating an initial properties object
var props = {
br : $("#br").val(), // brightness
ct : $("#ct").val(), // contrast
opacity : $("#opacity").val(), //opacity
saturate : $("#saturate").val(), //saturate
};
// try to fetch stored properties from a cookie
var propsCookie = $.cookie('_storeProperties');
// we have previous settings stored
if(propsCookie){
// load them
props = $.parseJSON( propsCookie );
}else{
// no previous settings stored, lets store ours
$.cookie('_storeProperties', JSON.stringify(props) );
}
// use the props object as: props.br , props.ct, etc..
// your code
}
Hope it helps a bit!
I am trying to add a hover over effect on my boxes but it doesn't seem to show when you add a background color. I have added a border to the a: hover tag and when you hover over any box it does something odd. I was told that it is working, but for some reason its just hidden. The problem seems to be in my onlineBorders() function or css code.
Here is the link: http://codepen.io/duel_drawer8/pen/QNxyNq?editors=0001
CSS:
body {
background-color: #FF7A5A;
}
#rectangles {
margin: 3px;
}
.container {
margin: 0px auto;
width: 700px;
}
.name {
width: 80px;
padding-top: 25px;
font-weight: bold;
color: #00AAA0;
}
.img-responsive {
height: 70px;
}
#rectangles img {
margin-left: -15px;
}
.description {
padding-top: 25px;
color: #FCF4D9;
}
.topHeader {
border: 2px solid black;
margin: 10px;
}
.topOnline #rectangles {
background: #FFB85F;
}
.middleOffline #rectangles {
background: #462066;
}
.bottomClosed #rectangles {
background: #462066;
}
#allTypes {
background:
}
a:hover{
border: 2px solid;
}
Javascript:
function onlineBorders(url, format, status, displayLogo, displayName, infoStreaming) {
$(format).append('<div id="profilePic" class="col-xs-2">' + '<img class="img-responsive" src=' + displayLogo + '>' + '</div><div class="col-xs-3 text"><p class="name">' + displayName + '</p>' + '</div>' + '<div class="description col-xs-7">' + infoStreaming + '</div></div>' + '')
}
So if you are just trying to add a hover to the rectangles all you need to do is replace
a:hover{
border: 2px solid;
}
with
#rectangles:hover{
background-color: white;
border: 2px solid blue;
box-sizing: border-box
}
You can check it out here: http://codepen.io/gogojojo/pen/aZoxYq
Also I would try avoiding using ids when you have more than one of type of whatever. It would make much more sense to add a class rectangles to all of the boxes instead of an id.
You weren't very clear about what is "weird," but I think you just need to add this to your CSS:
a {
display:block;
}
Anchors are inline elements, so you need to make then block or inline-block for the border to display properly.
To clean up the style a little more, you can try:
a {
display:block;
padding:5px;
}
a:hover{
border: 2px solid;
padding:3px;
}
As Joseph mentioned, you have the same ID used for several elements in your HTML, which is not valid markup. An ID must be unique for the page.
My CSS above works by selecting all the anchors to apply the style, but you may consider adding a new CSS class to apply the style with.
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body class="w3-container">
<h2>Buttons</h2>
<input type="button" class="w3-btn w3-hover-aqua" value="Input Button">
<button class="w3-btn w3-hover-red">Button Button</button>
<a class="w3-btn w3-hover-blue" href="#">Link Button</a>
<h2>Links </h2>
Hover on the link
</body>
</html>
I'm trying to add a jquery slider to my phonegap app. Unfortunately I haven't found out how to add a scale on both sides of the slider. Something like:
"foo" ----x------ "bar"
Till now i only have the slider.
<form>
<label for="lighting">Rate us</label>
<input type="range" name="rate" id="rate" min="1" max="7" />
<input type="submit" name="go" id="go" value="Rate my app!"/>
</form>
You could add a scale with tick marks like this:
var ticks = '<div class="sliderTickmarks "><span>1</span></div>';
ticks += '<div class="sliderTickmarks "><span>2</span></div>';
ticks += '<div class="sliderTickmarks "><span>3</span></div>';
ticks += '<div class="sliderTickmarks "><span>4</span></div>';
ticks += '<div class="sliderTickmarks "><span>5</span></div>';
ticks += '<div class="sliderTickmarks "><span>6</span></div>';
ticks += '<div class="sliderTickmarks "><span>7</span></div>';
$("#rate ").closest(".ui-slider").find(".ui-slider-track").prepend(ticks);
.sliderTickmarks {
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 16.6%;
float: left;
border-right: 1px solid #888;
}
.sliderTickmarks span {
position: relative;
left: 100%;
top: 125%;
margin-left: -3px;
font-size: 12px;
font-weight: normal;
}
.ui-slider-track > div.sliderTickmarks:first-child {
border-right: 0;
width: 0;
}
.ui-slider-track > div.sliderTickmarks:first-child span {
margin-left: -5px;
}
.ui-slider-track > div.sliderTickmarks:last-of-type {
border-right: 0;
}
DEMO
For other ideas with the slider have a look at this:
https://jqmtricks.wordpress.com/2014/04/21/fun-with-the-slider-widget/
I have 4 images on the html site just two are visible . Thumbs Up and thumbs down. I have javascript code and i want the user can choose only one of the possibilities. If user click on thumbs up or down it get donker color. But my script lets allow user choose both possibilities.
i want this
Html Code:
<body>
<img id="myImage" onclick="changeImage()" src="../Image/kleindownglow.jpg">
<img id="myImage2" onclick="changeImage2()" src="../Image/kleinupglow.png">
</body>
Script
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("glow")) {
image.src = "../Image/kleindown.jpg";
} else {
image.src = "../Image/kleindownglow.jpg";
}
}
function changeImage2() {
var image2 = document.getElementById('myImage2');
if (image2.src.match("upglow")) {
image2.src = "../Image/kleinup.png";
} else {
image2.src = "../Image/kleinupglow.png";
}
}
Thank you for any help
HTML
<p>
<input type="checkbox" id="test1" />
<label for="test1">Red</label>
</p>
CSS
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 25px;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left:0; top: 2px;
width: 24px; height: 24px;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 3px;
}
[type="checkbox"]:not(:checked) + label:before
{
background-image: url('https://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/Bad%20mark.png');
}
[type="checkbox"]:checked + label:before
{
background-image: url('https://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/gif/24x24/001_18.gif') !important;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
position: absolute;
top: 0; left: 4px;
font-size: 14px;
color: #09ad7e;
transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
box-shadow: none;
border-color: #bbb;
background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
color: #999;
}
[type="checkbox"]:disabled + label {
color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
border: 1px dotted blue;
}
/* hover style just for information */
label:hover:before {
border: 1px solid #4778d9!important;
}
JQuery
$("input[type='checkbox']").change(function(){
var checkedSt=$(this).prop('checked');
alert(checkedSt ? "Like" : "UnLike");
});
DEMO
Indeterminate added
DEMO
Here's JSBin that solves your issue: http://jsbin.com/fiwadinosemi/1/edit
What it does:
If both are unselected and you press one of them - pressed item is glowed
If one item is glowed and you press it - it just removes glowing effect
If one item is glowes and you press other one - other one is glowed and old one is unglowed
So, this is normal behavior for up/downvote buttons
If you want to make your code work, you would need to add a reference to the opposite image in your code and set that image to the unselected version.
If I were to do this, it would be pure CSS with a sprite and radio buttons.
HTML:
<input type="radio" name="vote1" class="vote" id="down1" value="down" /><label for="down1"></label>
<input type="radio" name="vote1" class="vote" id="up1" value="up" /><label for="up1"></label>
<hr/>
<input type="radio" name="vote1" class="vote" id="down2" value="down" /><label for="down2"></label>
<input type="radio" name="vote1" class="vote" id="up2" value="up" /><label for="up2"></label>
CSS:
.vote { display: none; }
.vote + label {
display: inline-block;
width:55px;
height:65px;
background-image: url(http://i.imgur.com/oRg1EVq.png);
}
.vote[value="up"] + label {
background-position: 55px 66px;
}
.vote[value="up"]:checked + label {
background-position: 55px 0px;
}
.vote[value="down"] + label {
background-position: 0px 66px;
}
.vote[value="down"]:checked + label {
background-position: 0px 0px;
}
Image:
Imgur
Fiddle:
http://jsfiddle.net/coL4LhtL/