How do I remove a hover effect if the Element has focus? - javascript

I am trying to add hover and focus effects to my input boxes.
On hover the box outline will be GREEN.
On focus the box outline will be BLUE.
Currently I hit a bump where if the input box has focus, it turns BLUE, but if I hover over it, it turns GREEN.
I want to prevent the box from initiating the 'hover' effect if the box has focus.
CSS:
input[type=text],
textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input[type=text]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}
input[type=text]:hover,
textarea:hover {
box-shadow: 0 0 5px rgba(46, 255, 138, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(46, 255, 138, 1);
}
How can I prevent the hover effect from executing while the input box has a focus?
Thanks!


The effects take precedence in the order you place them, so if you put them like this, it should work
input[type=text],
textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input[type=text]:hover,
textarea:hover {
box-shadow: 0 0 5px rgba(46, 255, 138, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(46, 255, 138, 1);
}
input[type=text]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}

Related

How to get value of toggle type checkbox

I am using a toggle switch checkbox. I want to get the value of this switch when its state is changed using javascript or jQuery.
According to that value I want to highlight the text of label i.e. option1 or option2 used with the toggle switch.
Can someone help me to resolve this problem?
.checkbox.checbox-switch {
padding-left: 0;
}
.checkbox.checbox-switch label,
.checkbox-inline.checbox-switch {
display: inline-block;
position: relative;
padding-left: 0;
}
.checkbox.checbox-switch label input,
.checkbox-inline.checbox-switch input {
display: none;
}
.checkbox.checbox-switch label span,
.checkbox-inline.checbox-switch span {
width: 35px;
border-radius: 20px;
height: 18px;
border: 1px solid #dbdbdb;
background-color: gray;
border-color: gray;
box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
.checkbox.checbox-switch label span:before,
.checkbox-inline.checbox-switch span:before {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgb(255, 255, 255);
content: " ";
top: 0;
position: relative;
left: 0px;
transition: all 0.3s ease;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
top: -2px;
}
.checkbox.checbox-switch label>input:checked+span:before,
.checkbox-inline.checbox-switch>input:checked+span:before {
left: 16px;
top: -2px;
}
/* Switch Primary */
.checkbox.checbox-switch.switch-primary label>input:checked+span,
.checkbox-inline.checbox-switch.switch-primary>input:checked+span {
background-color: rgb(103, 209, 224);
border-color: rgb(103, 209, 224);
/*box-shadow: rgb(0, 105, 217) 0px 0px 0px 8px inset;*/
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-primary label>input:checked:disabled+span,
.checkbox-inline.checbox-switch.switch-primary>input:checked:disabled+span {
background-color: gray;
border-color: gray;
/* box-shadow: rgb(109, 163, 221) 0px 0px 0px 8px inset;*/
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
<div class="checkbox checbox-switch switch-primary">
<label id="option1" for="switch1">Option1</label>
<label>
<input type="checkbox" name="" checked="" id="switch1" />
<span></span>
</label>
<label id="option2" for="switch1">Option2</label>
</div>

Tell if its what you want :)
$('.checbox-switch label#option1, .checbox-switch label#option2').click(function() {
var getID = $(this).attr('id');
$('.checbox-switch label').removeClass('selected');
$(this).addClass('selected');
console.log(getID);
})
.checkbox.checbox-switch {
padding-left: 0;
}
.checkbox.checbox-switch label,
.checkbox-inline.checbox-switch {
display: inline-block;
position: relative;
padding-left: 0;
}
.checkbox.checbox-switch label input,
.checkbox-inline.checbox-switch input {
display: none;
}
.checkbox.checbox-switch label span,
.checkbox-inline.checbox-switch span {
width: 35px;
border-radius: 20px;
height: 18px;
border: 1px solid #dbdbdb;
background-color: gray;
border-color: gray;
box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
.checkbox.checbox-switch label span:before,
.checkbox-inline.checbox-switch span:before {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgb(255,255,255);
content: " ";
top: 0;
position: relative;
left: 0px;
transition: all 0.3s ease;
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
top:-2px;
}
.checkbox.checbox-switch label > input:checked + span:before,
.checkbox-inline.checbox-switch > input:checked + span:before {
left: 16px;top:-2px;
}
/* Switch Primary */
.checkbox.checbox-switch.switch-primary label > input:checked + span,
.checkbox-inline.checbox-switch.switch-primary > input:checked + span {
background-color: rgb(103, 209, 224);
border-color: rgb(103, 209, 224);
/*box-shadow: rgb(0, 105, 217) 0px 0px 0px 8px inset;*/
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-primary label > input:checked:disabled + span,
.checkbox-inline.checbox-switch.switch-primary > input:checked:disabled + span {
background-color: gray;
border-color: gray;
/* box-shadow: rgb(109, 163, 221) 0px 0px 0px 8px inset;*/
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.selected { border-bottom:1px solid cyan; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox checbox-switch switch-primary">
<label id="option1"for="switch1">Option1</label>
<label>
<input type="checkbox" name="" checked="" id="switch1"/>
<span></span>
</label>
<label id="option2" for="switch1">Option2</label>
</div>

You need to add an event listener:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
The EventTarget method addEventListener() sets up a function that will be called whenever the specified event is delivered to the target. Common targets are Element, Document, and Window, but the target may be any object that supports events (such as XMLHttpRequest).
addEventListener() works by adding a function or an object that implements EventListener to the list of event listeners for the specified event type on the EventTarget on which it's called.
example
let test = document.querySelector('#switch1');
test.addEventListener('change', function() {
if (this.checked == true) {
console.log('true');// do here what you need instead
} else {
console.log('false')// do here what you need instead
}
})
.checkbox.checbox-switch {
padding-left: 0;
}
.checkbox.checbox-switch label,
.checkbox-inline.checbox-switch {
display: inline-block;
position: relative;
padding-left: 0;
}
.checkbox.checbox-switch label input,
.checkbox-inline.checbox-switch input {
display: none;
}
.checkbox.checbox-switch label span,
.checkbox-inline.checbox-switch span {
width: 35px;
border-radius: 20px;
height: 18px;
border: 1px solid #dbdbdb;
background-color: gray;
border-color: gray;
box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
.checkbox.checbox-switch label span:before,
.checkbox-inline.checbox-switch span:before {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgb(255, 255, 255);
content: " ";
top: 0;
position: relative;
left: 0px;
transition: all 0.3s ease;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
top: -2px;
}
.checkbox.checbox-switch label>input:checked+span:before,
.checkbox-inline.checbox-switch>input:checked+span:before {
left: 16px;
top: -2px;
}
/* Switch Primary */
.checkbox.checbox-switch.switch-primary label>input:checked+span,
.checkbox-inline.checbox-switch.switch-primary>input:checked+span {
background-color: rgb(103, 209, 224);
border-color: rgb(103, 209, 224);
/*box-shadow: rgb(0, 105, 217) 0px 0px 0px 8px inset;*/
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-primary label>input:checked:disabled+span,
.checkbox-inline.checbox-switch.switch-primary>input:checked:disabled+span {
background-color: gray;
border-color: gray;
/* box-shadow: rgb(109, 163, 221) 0px 0px 0px 8px inset;*/
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
<div class="checkbox checbox-switch switch-primary">
<label id="option1" for="switch1">Option1</label>
<label>
<input type="checkbox" name="" checked="" id="switch1"/>
<span></span>
</label>
<label id="option2" for="switch1">Option2</label>
</div>
edit for futur readers, a working example toggling a class
let test = document.querySelector('#switch1');
test.addEventListener('change', function() {
if (this.checked == true) {
console.log('true'); // do here what you need instead
switchTest()
} else {
console.log('false') // do here what you need instead
switchTest()
}
})
function switchTest() {
let options = document.querySelectorAll('label[id^=option]');
for (i = 0; i < options.length; i++) {
options[i].classList.toggle('highlight');
}
}
.checkbox.checbox-switch {
padding-left: 0;
}
.checkbox.checbox-switch label,
.checkbox-inline.checbox-switch {
display: inline-block;
position: relative;
padding-left: 0;
}
.checkbox.checbox-switch label input,
.checkbox-inline.checbox-switch input {
display: none;
}
.checkbox.checbox-switch label span,
.checkbox-inline.checbox-switch span {
width: 35px;
border-radius: 20px;
height: 18px;
border: 1px solid #dbdbdb;
background-color: gray;
border-color: gray;
box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
.checkbox.checbox-switch label span:before,
.checkbox-inline.checbox-switch span:before {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgb(255, 255, 255);
content: " ";
top: 0;
position: relative;
left: 0px;
transition: all 0.3s ease;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
top: -2px;
}
.checkbox.checbox-switch label>input:checked+span:before,
.checkbox-inline.checbox-switch>input:checked+span:before {
left: 16px;
top: -2px;
}
/* Switch Primary */
.checkbox.checbox-switch.switch-primary label>input:checked+span,
.checkbox-inline.checbox-switch.switch-primary>input:checked+span {
background-color: rgb(103, 209, 224);
border-color: rgb(103, 209, 224);
/*box-shadow: rgb(0, 105, 217) 0px 0px 0px 8px inset;*/
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-primary label>input:checked:disabled+span,
.checkbox-inline.checbox-switch.switch-primary>input:checked:disabled+span {
background-color: gray;
border-color: gray;
/* box-shadow: rgb(109, 163, 221) 0px 0px 0px 8px inset;*/
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.highlight {
background: yellow;
}
<div class="checkbox checbox-switch switch-primary">
<label id="option1" class="highlight" for="switch1">Option1</label>
<label>
<input type="checkbox" name="" checked="" id="switch1"/>
<span></span>
</label>
<label id="option2" for="switch1">Option2</label>
</div>

I'm trying to figure out how to read the state/value of a slider switch that will react when moved

I've created a sliding switch that will hide or display parts of a large form. The HTML has the following code:
<fieldset class="group">
<legend>
<h1>Form Type</h1>
</legend>
<label class="switch switch-left-right">
<input class="switch-input" type="checkbox" id="formSwitch">
<span class="switch-label" data-on="Progress" data-off="Diagnostic"></span>
<span class="switch-handle"></span>
</label>
</fieldset>
The CSS behind it is the following:
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-left-right .switch-label {
overflow: hidden;
}
.switch-left-right .switch-label:before, .switch-left-right .switch-label:after {
width: 20px;
height: 20px;
top: 4px;
left: 0;
right: 0;
bottom: 0;
padding: 11px 0 0 0;
text-indent: -45px;
border-radius: 20px;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-left-right .switch-label:before {
background: #FF7F50;
text-align: left;
padding-left: 80px;
}
.switch-left-right .switch-label:after {
text-align: left;
text-indent: 9px;
background: #FF7F50;
left: -100px;
opacity: 1;
width: 100%;
}
.switch-left-right .switch-input:checked ~ .switch-label:before {
opacity: 1;
left: 90px;
}
.switch-left-right .switch-input:checked ~ .switch-label:after {
left: 0;
}
.switch-left-right .switch-input:checked ~ .switch-label {
background: inherit;
}
I'm trying to set it up so that when the switch is on Diagnostic, it will unhide a group of form fields and if it's on progress it will hide the same form fields. I've tried event listeners and onclick listeners and couldn't seem to get anything working. I just need to get it as far as "if it's in one position, do this" and "if it's in the other position, do that"
This doesn't seem like it would be a challenge, but its proving to be one!

You just need to listen to "change" on the checkbox. Then you can use the element.checked property to set classes or inline-styling as I am doing in my example below
document.querySelector("#formSwitch").addEventListener("change", e => {
const hidden = document.querySelector("#hidden")
hidden.style.display = e.target.checked ? "none" : "block";
})
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-left-right .switch-label {
overflow: hidden;
}
.switch-left-right .switch-label:before, .switch-left-right .switch-label:after {
width: 20px;
height: 20px;
top: 4px;
left: 0;
right: 0;
bottom: 0;
padding: 11px 0 0 0;
text-indent: -45px;
border-radius: 20px;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-left-right .switch-label:before {
background: #FF7F50;
text-align: left;
padding-left: 80px;
}
.switch-left-right .switch-label:after {
text-align: left;
text-indent: 9px;
background: #FF7F50;
left: -100px;
opacity: 1;
width: 100%;
}
.switch-left-right .switch-input:checked ~ .switch-label:before {
opacity: 1;
left: 90px;
}
.switch-left-right .switch-input:checked ~ .switch-label:after {
left: 0;
}
.switch-left-right .switch-input:checked ~ .switch-label {
background: inherit;
}
<fieldset class="group">
<legend>
<h1>Form Type</h1>
</legend>
<label class="switch switch-left-right">
<input class="switch-input" type="checkbox" id="formSwitch">
<span class="switch-label" data-on="Progress" data-off="Diagnostic"></span>
<span class="switch-handle"></span>
</label>
</fieldset>
<div id="hidden">
stuff that needs to be shown / hidden
</div>

Button that switches DIV content

I'm creating something for a pricing table that needs to be able to convert between Pounds and Dollars, I have the base of this down, with a sliding mechanic, unfortunately you're able to click "Sterling" more than once to produce the function of it converting between both prices, i'm wondering how I can make it so that it can only perform the function once, to get rid of this issue
var shown = 'sterling';
function swap() {
if (shown === 'sterling') {
document.getElementById('dollars-1').style.display = "inline-block";
document.getElementById('dollars-2').style.display = "inline-block";
document.getElementById('dollars-3').style.display = "inline-block";
document.getElementById('sterling-1').style.display = "none";
document.getElementById('sterling-2').style.display = "none";
document.getElementById('sterling-3').style.display = "none";
shown = 'dollars';
} else {
document.getElementById('sterling-1').style.display = "inline-block";
document.getElementById('sterling-2').style.display = "inline-block";
document.getElementById('sterling-3').style.display = "inline-block";
document.getElementById('dollars-1').style.display = "none";
document.getElementById('dollars-2').style.display = "none";
document.getElementById('dollars-3').style.display = "none";
shown = 'sterling';
}
};
body {
background-color: #707070;
}
.switch {
position: relative;
height: 26px;
width: 120px;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}
.switch-label {
position: relative;
z-index: 2;
float: left;
width: 58px;
line-height: 26px;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
cursor: pointer;
}
.switch-label:active {
font-weight: bold;
}
.switch-label-off {
padding-left: 2px;
}
.switch-label-on {
padding-right: 2px;
}
/*
* Note: using adjacent or general sibling selectors combined with
* pseudo classes doesn't work in Safari 5.0 and Chrome 12.
* See this article for more info and a potential fix:
* http://css-tricks.com/webkit-sibling-bug/
*/
.switch-input {
display: none;
}
.switch-input:checked+.switch-label {
font-weight: bold;
color: rgba(0, 0, 0, 0.65);
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
}
.switch-input:checked+.switch-label-on~.switch-selection {
left: 60px;
/* Note: left: 50% doesn't transition in WebKit */
}
.switch-selection {
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
width: 58px;
height: 22px;
background: #65bd63;
border-radius: 3px;
background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
background-image: -o-linear-gradient(top, #9dd993, #65bd63);
background-image: linear-gradient(to bottom, #9dd993, #65bd63);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
<button id="sterling-1">£100.00</button>
<button id="sterling-2">£100.00</button>
<button id="sterling-3">£100.00</button>
<button id="dollars-1" style="display:none">$131.00</button>
<button id="dollars-2" style="display:none">$131.00</button>
<button id="dollars-3" style="display:none">$131.00</button>
<br/>
<br/>
<div class="switch">
<input type="radio" class="switch-input" name="view" value="week" id="week" checked>
<label for="week" class="switch-label switch-label-off" id="swap" onclick="swap()">Sterling</label>
<input type="radio" class="switch-input" name="view" value="month" id="month">
<label for="month" class="switch-label switch-label-on" id="swap" onclick="swap()">Dollars</label>
<span class="switch-selection"></span>
</div>
Any help would be appreciated!

Rather than keeping what is shown in a variable that you manually swap every time either option is clicked, pass the price type in to the swap function and then display what you want to based off of that. This way, they can click either button as many times as they like, but it will only change when the other option is clicked. I made the changes to your example.
function swap(priceType) {
if (priceType === 'dollars') {
document.getElementById('dollars-1').style.display = "inline-block";
document.getElementById('dollars-2').style.display = "inline-block";
document.getElementById('dollars-3').style.display = "inline-block";
document.getElementById('sterling-1').style.display = "none";
document.getElementById('sterling-2').style.display = "none";
document.getElementById('sterling-3').style.display = "none";
} else {
document.getElementById('sterling-1').style.display = "inline-block";
document.getElementById('sterling-2').style.display = "inline-block";
document.getElementById('sterling-3').style.display = "inline-block";
document.getElementById('dollars-1').style.display = "none";
document.getElementById('dollars-2').style.display = "none";
document.getElementById('dollars-3').style.display = "none";
}
};
body {
background-color: #707070;
}
.switch {
position: relative;
height: 26px;
width: 120px;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}
.switch-label {
position: relative;
z-index: 2;
float: left;
width: 58px;
line-height: 26px;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
cursor: pointer;
}
.switch-label:active {
font-weight: bold;
}
.switch-label-off {
padding-left: 2px;
}
.switch-label-on {
padding-right: 2px;
}
/*
* Note: using adjacent or general sibling selectors combined with
* pseudo classes doesn't work in Safari 5.0 and Chrome 12.
* See this article for more info and a potential fix:
* http://css-tricks.com/webkit-sibling-bug/
*/
.switch-input {
display: none;
}
.switch-input:checked+.switch-label {
font-weight: bold;
color: rgba(0, 0, 0, 0.65);
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
}
.switch-input:checked+.switch-label-on~.switch-selection {
left: 60px;
/* Note: left: 50% doesn't transition in WebKit */
}
.switch-selection {
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
width: 58px;
height: 22px;
background: #65bd63;
border-radius: 3px;
background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
background-image: -o-linear-gradient(top, #9dd993, #65bd63);
background-image: linear-gradient(to bottom, #9dd993, #65bd63);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
<button id="sterling-1">£100.00</button>
<button id="sterling-2">£100.00</button>
<button id="sterling-3">£100.00</button>
<button id="dollars-1" style="display:none">$131.00</button>
<button id="dollars-2" style="display:none">$131.00</button>
<button id="dollars-3" style="display:none">$131.00</button>
<br/>
<br/>
<div class="switch">
<input type="radio" class="switch-input" name="view" value="week" id="week" checked>
<label for="week" class="switch-label switch-label-off" id="swap" onclick="swap('sterling')">Sterling</label>
<input type="radio" class="switch-input" name="view" value="month" id="month">
<label for="month" class="switch-label switch-label-on" id="swap" onclick="swap('dollars')">Dollars</label>
<span class="switch-selection"></span>
</div>

Set the swap function as a callback for the change event of the radio buttons instead, so it will only be called once the state of the switch changes.
On a side note, it would be agood idea to give your radio buttons more meaningful names. "week" and "month" doesn't seem to make much sense here. ;-) And also, you are using the id="swap" twice, but IDs must be unique.
document.getElementById('currency_sterling').addEventListener('change', swap);
document.getElementById('currency_dollars').addEventListener('change', swap);
function swap(ev) {
if (ev.target.value === 'dollars') {
document.getElementById('dollars-1').style.display = "inline-block";
document.getElementById('dollars-2').style.display = "inline-block";
document.getElementById('dollars-3').style.display = "inline-block";
document.getElementById('sterling-1').style.display = "none";
document.getElementById('sterling-2').style.display = "none";
document.getElementById('sterling-3').style.display = "none";
} else {
document.getElementById('sterling-1').style.display = "inline-block";
document.getElementById('sterling-2').style.display = "inline-block";
document.getElementById('sterling-3').style.display = "inline-block";
document.getElementById('dollars-1').style.display = "none";
document.getElementById('dollars-2').style.display = "none";
document.getElementById('dollars-3').style.display = "none";
}
};
body {
background-color: #707070;
}
.switch {
position: relative;
height: 26px;
width: 120px;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}
.switch-label {
position: relative;
z-index: 2;
float: left;
width: 58px;
line-height: 26px;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
cursor: pointer;
}
.switch-label:active {
font-weight: bold;
}
.switch-label-off {
padding-left: 2px;
}
.switch-label-on {
padding-right: 2px;
}
/*
* Note: using adjacent or general sibling selectors combined with
* pseudo classes doesn't work in Safari 5.0 and Chrome 12.
* See this article for more info and a potential fix:
* http://css-tricks.com/webkit-sibling-bug/
*/
.switch-input {
display: none;
}
.switch-input:checked+.switch-label {
font-weight: bold;
color: rgba(0, 0, 0, 0.65);
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
}
.switch-input:checked+.switch-label-on~.switch-selection {
left: 60px;
/* Note: left: 50% doesn't transition in WebKit */
}
.switch-selection {
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
width: 58px;
height: 22px;
background: #65bd63;
border-radius: 3px;
background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
background-image: -o-linear-gradient(top, #9dd993, #65bd63);
background-image: linear-gradient(to bottom, #9dd993, #65bd63);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
<button id="sterling-1">£100.00</button>
<button id="sterling-2">£100.00</button>
<button id="sterling-3">£100.00</button>
<button id="dollars-1" style="display:none">$131.00</button>
<button id="dollars-2" style="display:none">$131.00</button>
<button id="dollars-3" style="display:none">$131.00</button>
<br/>
<br/>
<div class="switch">
<input type="radio" class="switch-input" name="currency" value="sterling" id="currency_sterling" checked>
<label for="currency_sterling" class="switch-label switch-label-off">Sterling</label>
<input type="radio" class="switch-input" name="currency" value="dollars" id="currency_dollars">
<label for="currency_dollars" class="switch-label switch-label-on">Dollars</label>
<span class="switch-selection"></span>
</div>

how to animate image which is behind one image after hover that image?

basic html below i have given the basic html code.I am beginner in web development.
Here i am trying to first animate bottom class image when it hovers.Then after that animation i want to display another image and simultaneously apply bouncing effect to that image i have completed both the effects seperately.But dont know how to link that second image animation with the first one? suggest solution.
< div id="cf">
< img class="top" src="/home/animesh/Downloads/index.jpeg"/>
<img class="bottom" src="/home/animesh/Downloads/logo.jpg"/>
</div>
css code:
<style>
#cf img.top
{
height:170px;
width:170px;
margin-left:10px;
margin-top:10px;
}
#cf img.bottom
{
height:170px;
width:170px;
margin-left:10px;
margin-top:10px;
background:black;
}
#-webkit-keyframes cf
{
5%
{
box-shadow: 1px 1px 5px 1px #ffe6e6;
}
15%
{
box-shadow: 1px 1px 5px 2px #ff8080;
}
25%
{
box-shadow: 1px 1px 5px 3px #ff3333;
}
35%
{
box-shadow: 1px 1px 5px 2px #e60000;
}
75%
{
box-shadow: 1px 1px 5px 1px #cc0000;
}
85%
{
box-shadow: 1px 1px 5px 2px #ff3333;
}
95%
{
box-shadow: 1px 1px 5px 3px #ff9999;
}
100%
{
box-shadow: 1px 1px 5px 2px #ffffff;
}
}
#keyframes cf {
5%
{
box-shadow: 1px 1px 5px 1px #ffe6e6;
}
15%
{
box-shadow: 1px 1px 5px 2px #ff8080;
}
25%
{
box-shadow: 1px 1px 5px 3px #ff3333;
}
35%
{
box-shadow: 1px 1px 5px 2px #e60000;
}
50%
{
box-shadow: 1px 1px 5px 2px #990000;
}
75%
{
box-shadow: 1px 1px 5px 1px #cc0000;
}
85%
{
box-shadow: 1px 1px 5px 2px #ff3333;
}
95%
{
box-shadow: 1px 1px 5px 3px #ff9999;
}
100%
{
box-shadow: 1px 1px 5px 2px #ffffff;
}
}
#keyframes bounce {
0%, 20%, 60%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.bottom:hover {
opacity:0;
animation-name:cf;
animation-duration:1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#cf img.top:hover{
animation-name:bounce;
animation-duration:1s;
}
</style>

Splitting one Div into two css sections?

I would like some help in getting my css working.
Now what I would like to do is make a shadow appear on a div when the user starts to scroll.
At the moment I have.
HTML
<div class="head shadow"></div>
CSS
.head {
background: #edeff0;
position: fixed;
width: 70%;
height: 70px;
top: 0;
left: 85px;
right: 15px;
z-index: 100;
}
.shadow {
display:none;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
}
Javascript
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 1) {
$('.shadow').fadeIn();
} else {
$('.shadow').fadeOut();
}
});
Now if I remove
display:none;
everything will show, and if I put it back it will hide everything.
How can I get it to only hide the shadows and make the javascript work.
Here is a working (well it's not working) version
Thanks
Aled

WORKING FIDDLE - http://jsfiddle.net/andyjh07/yY4U8/
HTML:
<div class="head"></div>
jQuery:
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 1) {
$('.head').addClass('shadow');
} else {
$('.head').removeClass('shadow');
}
});
CSS:
.shadow {
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
}
The above solution adds the class of shadow to the element with the class of head if the scroll is true, else it will remove it. The reason you were having issues before is because you were using display: none; which will completely hide the entire element, not JUST the styling for that class

Here is the Working Fiddle
(Please do not forget to include jquery)
HTML
<div class="head"></div>
CSS
.head {
background: #edeff0;
position: fixed;
width: 70%;
height: 70px;
top: 0;
left: 85px;
right: 15px;
z-index: 100;
}
.shadow {
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
}
Jquery
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 1) {
$('.head').addClass("shadow");
} else {
$('.head').removeClass("shadow");
}
});

.shadow {
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-property: all
-moz-transition-property: all
-ms-transition-property: all
-o-transition-property: all
transition-property: all
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0);
}
.shadow.scrolled {
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
$(document).scroll(function () {
if ($(this).scrollTop() > 0) {
$('.shadow').addClass("scrolled");
} else {
$('.shadow').removeClass("scrolled");
}
});

Categories