We Keep Coding

jquery - Control CSS properties of elements according to CSS properties of other elements

How do I change CSS properties of elements according to CSS properties of other elements? For instance; I want to change the default position of "bigbutton" if the color of "div1" is black. This is what I've tried:
HTML
<div> <div class="div1"> </div> <div class="div2"></div> <div class="div3"></div> <button type="button" class="bigbutton">bigbutton </button> </div>
CSS
.div1{ position:fixed; left: 10px; width:100px; height: 100px; background-color: red; } .div2{ position:fixed; left: 10px; top: 110px; width:100px; height: 100px; background-color: green; } .div3{ position:fixed; left: 10px; top: 220px; width:100px; height: 100px; background-color: teal; .bigbutton{ position: fixed; left: 15px; width: 100px; height: 30px; background-color: blue; }
JQUERY
$(document).ready(function(){ $('.div1').mouseenter(function(){ $(this).css('background','black'); }); $('.div1').mouseleave(function(){ $(this).css('background',''); }); $('.div2').mouseenter(function(){ $('.div1').css('background','yellow'); }); $('.div2').mouseleave(function(){ $('.div1').css('background',''); }); $('.div3').mouseenter(function(){ $('.div1').css('background','black'); }); $('.div3').mouseleave(function(){ $('.div1').css('background',''); }); if($('.div').css('background') == 'black'){ $('.bigbutton').css('left','200px'); } else{ $('.bigbutton').css('left','100px'); } });
Is it possible to do it without if-else?
PS:I apologise for the formating problem, as it's nearly impossible to properly format with my phone.Thank you.

When you say "change x according to y", you're basically describing an if conditional.
Given your example, you can also get the desired result by changing the button's position in the same code block where the div1 becomes black: https://codepen.io/pen/RvXQMP
Update
To get the desired result for any input that would change the color of div1, you can use Mutation observer, works like an eventListener for DOM changes: https://codepen.io/pen/PVMVzw

first of all you need to get the color of the bigbutton
var color = $('.bigbutton').css('color');
then do your check
if(color == "red"){ //example
$('.div1').css('top':'10px') // finally do your changes [for example]
}

you can try it, html code:
<div id="container">
<div class="div1"> </div>
<div class="div2"></div>
<div class="div3"></div>
<button type="button" class="bigbutton">bigbutton </button>
</div>
css code:
.div1{ position:fixed; left: 10px; width:100px; height: 100px; background-color: red; }
.div2{ position:fixed; left: 10px; top: 110px; width:100px; height: 100px; background-color: green; }
.div3{ position:fixed; left: 10px; top: 220px; width:100px; height: 100px; background-color: teal;}
.bigbutton{ position: fixed; left: 15px; width: 100px; height: 30px; background-color: blue; }
javascript code:
container.onmouseover = container.onmouseout = handler;
function handler(event){
if (event.type == 'mouseover') {
if(event.target.className=='div1'){
event.target.style.background = 'black';
moveLeft();
}
if(event.target.className=='div2'){
document.getElementsByClassName('div1')[0].style.background = 'yellow';
}
if(event.target.className=='div3'){
document.getElementsByClassName('div1')[0].style.background = 'black';
moveLeft();
}
}
if (event.type == 'mouseout') {
if(event.target.className=='div1'){
event.target.style.background = '';
}
if(event.target.className=='div2'){
document.getElementsByClassName('div1')[0].style.background = '';
}
if(event.target.className=='div3'){
document.getElementsByClassName('div1')[0].style.background = '';
}
moveRight();
}
}
function moveLeft(){
$('.bigbutton').css('left','200px');
}
function moveRight(){
$('.bigbutton').css('left','100px');
}

How do I change background-color of 2 divs when I press 1 other div?

How do I make 2 divs (header and sub-header) change color when div (change) is pressed?
The sub-header is going to be changed to another color, not the same color as header.
<div class="change">
Click this to change the background-color of the 2 headers.
</div>
<div class="header>
Header
</div>
<div class="sub-header">
sub-header
</div>

You could approach it like this...
Create a new class for each new background color you'd like:
.header {
background: grey;
}
.header-alt {
background: lightblue;
}
.sub-header {
background: lightblue;
}
.sub-header-alt {
background: grey;
}
Then use jQuery toggleClass to add/remove those classes on click of the div change
$(".change").click(function() {
$('.header').toggleClass("header-alt");
$('.sub-header').toggleClass("sub-header-alt");
});
Example
$(".change").click(function() {
$('.header').toggleClass("header-alt");
$('.sub-header').toggleClass("sub-header-alt");
});
body {
width: 600px;
margin: 0 auto;
color: #FFF;
font-family: sans-serif;
font-size: 20px;
}
div {
padding: 20px;
}
.change {
background: black;
cursor: pointer;
}
.header {
background: grey;
}
.header-alt {
background: lightblue;
}
.sub-header {
background: lightblue;
}
.sub-header-alt {
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="change">
Click this to change the background-color of the 2 headers
</div>
<div class="header">
Header
</div>
<div class="sub-header">
sub-header
</div>
Codepen if you prefer...

Onclick of div.change assign background-color to other divs $('.header').css("background-color","red");
$('.change').on('click',function(){
$('.header').css("background-color","red");
$('.sub-header').css("background-color","red");
})
Demo : https://jsfiddle.net/y5tLzbsc/

you give both of them the class 'active'
and on your css
.header.active{
background:blue;
}
.sub-header.active{
background:red;
}
and on your js:
document.querySelector('.change').onclick = function(){
document.querySelector('.header').className += " active";
document.querySelector('.sub-header').className += " active";
}

Here is a code snippet that does exactly what you described. This solution is using jquery. Look at the code below and feel free to ask if something is not clear :)
var colorChanged = false;
$('.change').click(function() {
if(!colorChanged){
$('.header').css('background-color','red');
$('.sub-header').css('background-color','blue');
colorChanged = true;
} else {
$('.header').css('background-color','transparent');
$('.sub-header').css('background-color','transparent');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="change">
Click this to change the background-color of the 2 headers.
</div>
<div class="header">
Header
</div>
<div class="sub-header">
sub-header
</div>

Just add an event listener. See demo:
document.addEventListener('click', function(e) {
if (e.target.className.indexOf('change') > -1) {
var headerEl = document.querySelector(".header");
var subHeaderEl = document.querySelector(".sub-header");
// This will toggle the color change on or off after each click
if (headerEl.className.indexOf('color') > -1) {
headerEl.className = headerEl.className.replace(" color", "");
subHeaderEl.className = subHeaderEl.className.replace(" color", "");
} else {
headerEl.className += " color";
subHeaderEl.className += " color";
}
}
})
.header.color {
background-color: red;
}
.sub-header.color {
background-color: blue;
}
<div class="change">
Click this to change the background-color of the 2 headers.
</div>
<div class="header">
Header
</div>
<div class="sub-header">
sub-header
</div>

This can be done with HTML and CSS. There is no need to use anything advanced or exotic.
The checkbox becomes the click input and it is hidden off screen. Since a connected label acts as the checkbox it becomes your input button. The label is the replacement for your original top DIV.
body {
margin: 0;
padding: 0;
}
#hidden_checkbox {
display: block;
position: absolute;
top: -50px;
right: 0;
}
#visible_label {
display: block;
height: 200px;
cursor: pointer;
background-color: rgb(200, 200, 200);
}
#hidden_checkbox:checked ~ div:nth-of-type(1) {
background-color: rgb(0, 50, 0);
}
#hidden_checkbox:checked ~ div:nth-of-type(2) {
background-color: rgb(0, 0, 50);
}
.header {
height: 200px;
background-color: rgb(0, 128, 128);
}
.sub-header {
height: 200px;
background-color: rgb(128, 0, 128);
}
<input id="hidden_checkbox" type="checkbox">
<label id="visible_label" for="hidden_checkbox">Click this to change the background-color of the 2 headers.</label>
<div class="header">Header</div>
<div class="sub-header">Sub-header</div>

Create a custom select box dropdown using jQuery

I am trying to style the input[text] and ul list to function as select-option. However, my below code breaks after I selected an option. As the code below, if I select an option from a list, the value of the input[text] change but the list doesn't hide itself. If I uncomment the line in the javascript, the list will hide after I select an option, the list won't show again if I click on the input again. Could anyone help me to fix this problem? I don't know much about jquery and javascript, so I spend couple hours trying to debug but it doesn't fix at all.
$(document).ready(function() {
selecta("#a", "#b")
$("#a").click(function() {
$("#b").show();
});
});
function selecta(a, b) {
$(b + " li").click(function() {
$(b).hide();
/*$(b + " ul").hide();*/
var v = $(this).text();
$(a + " input").val(v);
});
}
.cselect {
position: relative;
}
.cselect input[type]:disabled {
background: #fff;
}
.cselect-menu {
display: none;
position: absolute;
/* top: 0px;*/
left: 0px;
width: 100%;
background: #fff;
}
.cselect-menu ul {
border: 1px solid #d6d6d6;
width: 100%;
}
.cselect-menu li {
padding: 10px 5%;
width: 90%;
}
.cselect-menu li:hover {
background: rgba(41, 128, 185, 0.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a" class="cselect">
<input type="text" disabled placeholder="Select"/>
<div id="b" class="cselect-menu">
<ul >
<li>Business</li>
<li>Hair</li>
</ul>
</div>
</div>

jsBin demo
Use event.stopPropagation(); to prevent clicks on #b propagate to the parent #a
function selecta(a, b) {
$(b + " li").click(function( event ) {
event.stopPropagation(); // HERE!
$(b).hide();
/*$(b + " ul").hide();*/
var v = $(this).text();
$(a + " input").val(v);
});
}
Frankly... I'f I wanted to use your code on multiple custom-dropdowns of yours I'd go mad with that jQuery...
Here I've simplified HTML, CSS and jQuery:
$(function() { // DOM ready
$(".cselect").each(function(){
var $input = $(this).find("input");
var $dropDown = $(this).find("ul");
$(this).on("click", function(){
$dropDown.stop().slideToggle();
});
$dropDown.on("click", "li", function(){
$input.val( $(this).text() );
});
});
});
*{margin:0; padding:0;} /* ugly reset */
.cselect {
position: relative;
}
.cselect input{
background: #fff;
}
.cselect ul{
display: none;
position: absolute;
z-index:999;
left: 0;
top: 1.2rem;
margin:0;
width: 100%;
background: #fff;
border: 1px solid #d6d6d6;
}
.cselect li {
padding: 10px 5%;
list-style:none;
}
.cselect li:hover {
background: rgba(41, 128, 185, 0.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cselect">
<input type="text" disabled placeholder="Select n1">
<ul>
<li>Business</li>
<li>Hair</li>
</ul>
</div>
<div class="cselect">
<input type="text" disabled placeholder="Select n2">
<ul>
<li>Something</li>
<li>Else</li>
</ul>
</div>

How do I manipulate the same function in javascript for two different classes

I have to use two different sizes of checkbox on the same page. I will determine which size to use based on the checkbox name. If name='room' I will use the big image of class 'custom-checkbox'. Else if name='request', I will use small image of class custom-checkbox2.
Now, how do I modify the below script so that it can determine which class to use based on the name of the checkbox?
CSS:
.custom-checkbox{
width: 50px;
height: 50px;
display: inline-block;
position: relative;
z-index: 1;
top: 3px;
background: url("../img/big-check-nopass.png") no-repeat;
}
.custom-checkbox:hover{
background: url("../img/big-check-pass.png") no-repeat;
}
.custom-checkbox.selected{
background: url("../img/big-check-pass.png") no-repeat;
}
.custom-checkbox input[type="checkbox"]{
margin: 0;
position: absolute;
z-index: 2;
cursor: pointer;
outline: none;
opacity: 0;
/* CSS hacks for older browsers */
_noFocusLine: expression(this.hideFocus=true);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
}
/* Let's Beautify Our Form */
label{
display: block;
padding: 2px 0;
}
/*for small cehckbox*/
.custom-checkbox2{
width: 20px;
height: 20px;
display: inline-block;
position: relative;
z-index: 1;
top: 3px;
background: url("../img/small-check-nopass.png") no-repeat;
}
.custom-checkbox2:hover{
background: url("../img/small-check-pass.png") no-repeat;
}
.custom-checkbox2.selected{
background: url("../img/small-check-pass.png") no-repeat;
}
.custom-checkbox2 input[type="checkbox"]{
margin: 0;
position: absolute;
z-index: 2;
cursor: pointer;
outline: none;
opacity: 0;
/* CSS hacks for older browsers */
_noFocusLine: expression(this.hideFocus=true);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
}
/* Let's Beautify Our Form */
label2{
display: block;
padding: 2px 0;
}
Javascript:
function customCheckbox(checkboxName){
var checkBox = $('input[name="'+ checkboxName +'"]');
$(checkBox).each(function(){
$(this).wrap( "<span class='custom-checkbox'></span>" );
if($(this).is(':checked')){
$(this).parent().addClass("selected");
}
});
$(checkBox).click(function(){
$(this).parent().toggleClass("selected");
});
}
$(document).ready(function (){
customCheckbox("room[]");
})
HTML
<div class="row">
<div class="large-3 right columns">
<label><input type="checkbox" name="room[]" value="" /></label>
</div>
</div>
<div class="row">
<div class="large-3 right columns">
<label><input type="checkbox" name="request[]" value="" /></label>
</div>
</div>
EDIT**
Removed function and modified script:
<script>
$(document).ready(function (){
$("input:checkbox").each(function(){
if($(this).attr("name") == "room[]") {
$(this).wrap( "<span class='custom-checkbox'></span>" );
if($(this).is(':checked')){
$(this).parent().addClass("selected");
}
} else if($(this).attr("name") == "request[]") {
$(this).wrap( "<span class='custom-checkbox2'></span>" );
if($(this).is(':checked')){
$(this).parent().addClass("selected");
}
}
});
})
</script>

You can use the "each" jQuery function, which will check every inputs of the checkbox type on the page. So, you simple get it's name, if it's "room[]", add the custom-checkbox-big-size class to the span wrap, if it's name is "request[]", add the custom-checkbox-small-size class to the span wrap (I changed your CSS to make the things simple).
JS:
var wrapSpan = $('<span class="custom-checkbox-span"</span>');
$('input:checkbox').each(function() {
if ($(this).is(':checked')) {
wrapSpanspan.addClass('checked');
}
if($(this).attr("name") == "room[]") {
wrapSpan.addClass("custom-checkbox-big-size");
}
if($(this).attr("name") == "request[]") {
wrapSpan.addClass("custom-checkbox-small-size");
}
$(this).wrap(wrapSpan).hide();
});
$(".custom-checkbox-span").on("mouseup",function(){
checkSpan($(this));
});
function checkSpan(el) {
if(el.hasClass("selected")) {
el.removeClass("selected");
el.children().prop("checked",false);
} else {
el.addClass("selected");
el.children().prop("checked",true);
}
}
CSS:
.custom-checkbox-big-size {
background:red;
width: 50px;
height: 50px;
display: inline-block;
}
.custom-checkbox-big-size:hover, .custom-checkbox-big-size.selected {
background:yellow;
}
.custom-checkbox-small-size {
background:blue;
width: 20px;
height: 20px;
display: inline-block;
}
.custom-checkbox-small-size:hover, .custom-checkbox-small-size.selected {
background:green;
}
Check the jsFiddle. I did it with colors, because I don't have your original images, you have to change the background: color; rules.

This is handled in the selector, assuming you are using CSS3,like so...
input[type*='checkbox'][name*='room'] {
... styles here
}

Create a simple jQuery content slider

Im trying to create a simple content slider with jQuery and css.
The slider has two columns :
the right one acts as a slider pager
the left one contains current content
I've managed to create html, css and jQuery function which changes active tab and related content. but I want function to repeat itslef and by hovering to pagers slider stop paging, then by mouseout slider continue.
HTML
<div id="slider">
<div id="rightcol">
<div class="content" id="content1">
</div>
<div class="content" id="content2">
</div>
<div class="content" id="content3">
</div>
</div>
<div id="leftcol">
<ul>
<li id="1" class="active">a</li>
<li id="2">b</li>
<li id="3">c</li>
</ul>
</div>
</div>
CSS
#slider
{
width: 600px;
height: 300px;
}
#leftcol
{
width: 300px;
height: 300px;
float: left;
}
#rightcol
{
width: 300px;
height: 300px;
float: right;
background-color: #F0F0F0;
}
#leftcol ul li
{
width: 300px;
height: 100px;
}
#leftcol ul li.active
{
background-color: #F0F0F0;
}
.content
{
width: 300px;
height: 300px;
display: none;
}
jQuery
$(document).ready(function () {
sd(3);
});
function sd(currentId) {
var currentcontent = "content";
s = "#" + String(currentcontent) + String(currentId);
$("#leftcol ul li").removeClass("active");
$(".content").hide();
$("#" + String(currentId)).addClass("active");
$(s).show();
}
What should be added to js?
jsfiddle demo

I have tried in simple jQuery content slider in the below way & its working even in responsive.
Demo link: jsfiddle.net/b54c38hj/1/
<div class="container">
<div class="slider">
<ul>
<li>Slider-1</li>
<li>Slider-2</li>
<li>Slider-3</li>
</ul>
</div>
<a class="prev" href="javascript:void(0)">Prev</a>
<a class="next" href="javascript:void(0)">Next</a>
body{
margin:0;
padding:0;
}
.container{
width: 100%;
height: 300px;
background: rgba(0,0,0,.45);
margin: 0 auto;
}
.container .slider{
overflow: hidden;
height: 300px;
}
.container .slider ul{
position: relative;
padding:0;
margin:0;
list-style-type: none;
height: 300px;
}
.container .slider ul li{
background: #efefef;
float: left;
color: #000;
font-size: 22px;
text-align: center;
height: 300px;
line-height: 300px;
}
.container a{
text-decoration: none;
position: absolute;
}
.container a.prev{
left: 0;
}
.container a.next{
right: 0;
}
var Slider = {};
Slider = {
_globalvar: function(){
var self = this;
self.Ele = $('.slider');
self.EleList = this.Ele.find('li');
self.Elelength = this.EleList.length;
self.Elewidth = this.Ele.outerWidth(true);
self.EleSetUl = this.Elelength * this.Elewidth;
self.current = 0;
},
_assignvar: function(){
Slider.Ele.find('ul').width(Slider.EleSetUl);
Slider.EleList.width(Slider.Elewidth);
Slider.Ele.find('li:first-child').addClass('active');
},
_prev: function(){
var prevlength = Slider.Ele.find('li.active').prev().length;
console.log(prevlength)
if(prevlength != 1){
Slider.current = null;
}
else{
Slider.Ele.find('li.active').removeClass('active').prev().addClass('active');
Slider.current = "+="+Slider.Elewidth;
}
Slider.Ele.find('ul').animate({
left: Slider.current
});
return false;
},
_next: function(){
var nextlength = Slider.Ele.find('li.active').next().length;
if(nextlength){
Slider.Ele.find('li.active').removeClass('active').next().addClass('active');
Slider.current = "-="+Slider.Elewidth;
}
else{
Slider.current = null;
Slider.Ele.find('li.active').removeClass('active').parent().find('li:first-child').addClass('active');
}
Slider.Ele.find('ul').animate({
left: Slider.current
});
return false;
},
_bind: function(){
$('.prev').on('click', function(){
Slider._prev();
});
$('.next').on('click', function(){
Slider._next();
});
},
_init: function(){
var self = this;
self._globalvar();
self._assignvar();
self._bind();
}
};
$(document).ready(function(){
Slider._init();
});
https://jsfiddle.net/b54c38hj/1/

To make it to reapeat you can use the setTimeout() and to make it stop whenever your mouse goes over the content you can use the hover() jquery event! Here's a Demo