I would like to be able to drag/sort elements among multiple grids. Pretty much like on the following snippet/image.
However, problem is, that when i am dragging element outside of the grid, it will begin to jump/hide unexpectedly and act messy. Is there any better way (can also be some plugin), that can help me achieve this behaviour?
Thank you very much.
$( document ).ready(function() {
$(".sortable-grid").sortable({
revert: true
});
$(".sortable-element").draggable({
connectToSortable: ".sortable-grid",
revert: "invalid"
});
});
.sortable-grid {
padding: 15px;
border: 1px dashed;
}
.sortable-element {
background-color: #DDD;
margin-bottom: 5px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="sortable-grid">
<div class="sortable-element">Some content</div>
<div class="sortable-element">Some content</div>
<div class="sortable-element">Some content</div>
<div class="row">
<div class="col-md-4">
<div class="sortable-grid">
<div class="sortable-element">Some content</div>
</div>
</div>
<div class="col-md-4">
<div class="sortable-grid">
<div class="sortable-element">Some content</div>
</div>
</div>
<div class="col-md-4">
<div class="sortable-grid">
<div class="sortable-element">Some content</div>
</div>
</div>
</div>
</div>
enter image description here
It's not clear why you need the Draggable. Since all the items are under the Sortable, they can already be dragged.
Example:
$(function() {
$(".sortable-grid").sortable({
revert: true
});
});
.sortable-grid {
padding: 15px;
border: 1px dashed;
}
.sortable-element {
background-color: #DDD;
margin-bottom: 5px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="sortable-grid">
<div class="sortable-element">Some content</div>
<div class="sortable-element">Some content</div>
<div class="sortable-element">Some content</div>
<div class="row">
<div class="col-md-4">
<div class="sortable-grid">
<div class="sortable-element">Some content</div>
</div>
</div>
<div class="col-md-4">
<div class="sortable-grid">
<div class="sortable-element">Some content</div>
</div>
</div>
<div class="col-md-4">
<div class="sortable-grid">
<div class="sortable-element">Some content</div>
</div>
</div>
</div>
</div>
Related
I want to show the "hide_show" section when I scroll down and the "three" section appears on the screen. I want to hide the "hide_show" section when I scroll up and the "three" section disappears from the screen. I want to use JS with "fade in / face out" effect. Please help
.hide_show {
height: 50px;
background-color: #cfcfcf;
margin-top: -50px;
}
#two {
background-color: cyan;
}
#three {
background-color: red;
}
#four {
background-color: yellow;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<section class="hide_show">
<div class="container">
<div class="row">
<div class="col-12">
one
</div>
</div>
</div>
</section>
<section id="two">
<div class="container">
<div class="row">
<div class="col-12">
two
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
</section>
<section id="three">
<div class="container">
<div class="row">
<div class="col-12">
three
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
</section>
<section id="four">
<div class="container">
<div class="row">
<div class="col-12">
four
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
</section>
</body>
https://jsfiddle.net/czyjg2tu/1/
It was a bit difficult to fully understand the question, but this should hopefully get you started.
Let me know if you have any other questions on what each part of this does.
let three = document.querySelector('#three')
let hideShow = document.querySelectorAll('.hide_show')
document.addEventListener('scroll', () => {
// If the user has scrolled to the three section
if (window.pageYOffset >= three.offsetTop) {
hideShow.forEach((item) => {
item.style.display = 'block'
})
// If the user has not reached the three section
} else {
hideShow.forEach((item) => {
item.style.display = 'none'
})
}
})
.hide_show {
/* Force the hideShow section to always be at the top */
position: sticky;
top: 0;
display: none;
height: 50px;
background-color: #cfcfcf;
margin-top: -50px;
}
#two {
background-color: cyan;
}
#three {
background-color: red;
}
#four {
background-color: yellow;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<section class="hide_show">
<div class="container">
<div class="row">
<div class="col-12">
one
</div>
</div>
</div>
</section>
<section id="two">
<div class="container">
<div class="row">
<div class="col-12">
two
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
</section>
<section id="three">
<div class="container">
<div class="row">
<div class="col-12">
three
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
</section>
<section id="four">
<div class="container">
<div class="row">
<div class="col-12">
four
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
</section>
</body>
In the process of making a quiz website, I have prepared a Question pallet of 25.In that, if I select option 1 on a question and moving to another it seems to be option 1 for rest of the questions.I used radio buttons for the options but I can't figure it out how to prepare answers to individual questions.I used angular js for this and bootstrap also.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<head>
<title>quizzzzzz</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
background-color: khaki;
}
.navbar-custom {
background-color: black;
padding: 0px;
}
.navbar-custom .navbar-brand {
font-family: Geneva;
font-size: 30pt;
color: white;
}
.toggleButton {
width: 160px;
height: 60px;
line-height: 60px;
margin: 0 auto;
background: #D35400;
color: #fff;
border: 3px solid rgba(255, 255, 255, 0.5);
text-align: center;
cursor: pointer;
user-select: none;
text-transform: uppercase;
}
</style>
</head>
<body ng-app="mainModule">
<nav class="navbar navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="ex.html">Quiz</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<form class="navbar-form navbar-right">
</form>
</div>
</div>
</nav>
<div ng-hide="p1">
<div class="input-field col s12 m6 14">
<center>
<i class="fa fa-search"></i>
<input id="search" type="text" style="width:350px" ng-model='search'>
<label for="search">Search</label>
</center>
</div>
<section class="pannel-1">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default p1">
<div class="panel-body">
Please Read The Following Instruction Carefully
</div>
</div>
</div>
</div>
</div>
</section>
<section class="technologies" ng-controller="techlistcon">
<center><button class="btn btn-primary" ng-click="fun()">START</button></center>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" ng-repeat="tech in techlist|filter:search">
<div class="box box-block bg-white tile tile-1 mb-2">
<div class="t-content">
<h1 class="mb-1">{{tech.name}}</h1>
More>>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="login-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{tech_full.name}}</h4>
</div>
<table class="table">
<tr>
<td><img ng-src="{{tech_full.img}}" width="100"></td>
<td>{{tech_full.desc}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div ng-show="p1">
<section class="pannel-1">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default p1">
<div class="panel-body">
Online Exam : You Can Test Your Skills
</div>
</div>
</div>
</div>
</div>
</section>
<section class="questions" ng-controller="questionlistcon">
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="q-box">
<div class="question">
<h4>{{currentIndex+1}}.{{currentque.question}}</h4>
</div>
<div class="options">
<ul>
<li><input type="radio" name="{{$index+1}}" value="{{$currentIndex+1}}">{{currentque.o1}}</li>
<li><input type="radio" name="{{$index+1}}" value="{{$currentIndex+1}}">{{currentque.o2}}</li>
<li><input type="radio" name="{{$index+1}}" value="{{$currentIndex+1}}">{{currentque.o3}}</li>
<li><input type="radio" name="{{$index+1}}" value="{{$currentIndex+1}}">{{currentque.o4}}</li><br>
</ul>
<button class="btn btn-warning" ng-hide="b" ng-click="next()">Next</button>
<button class="btn btn-warning" ng-hide="b" ng-click="prev()">prev</button>
<button class="btn btn-warning" ng-show="b">Finish</button>
</div>
</div>
</div>
<div class="col-md-5">
<div class="q-box">
<h4>Question Palette</h4>
<div id="main_right">
<div class="questionpallat">
<ul>
<li ng-repeat="x in questions">
<a class="btn btn-danger buttons" ng-click="currentq($index)" style="width:35px">{{$index+1}}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<section class="pannel-1">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default p1">
<div class="panel-body">
<center> Here comes your RESULT>>>>>>>>>>>>></center>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/techlist.js"></script>
</body>
</html>
Javascript :
var vm=angular.module("quizApp",[]);
vm.controller("technologies",function($scope){
$scope.technologyar=["HTML5","PHP"];
});
vm.controller("questions",function($scope){
var index=0;
$scope.questionar=[
{
question:'What does HTML stand for?',
o1:'client side',
o2:'serverside',
o3:'database',
o4:'none'
},
{
question:'PHP is?',
o1:'client side',
o2:'serverside',
o3:'database',
o4:'none'
},
{
question:'Java is?',
o1:'client side',
o2:'serverside',
o3:'database',
o4:'none'
},
{
question:'css is?',
o1:'client side',
o2:'serverside',
o3:'database',
o4:'none'
}
];
$scope.currentque=$scope.questionar[index];
$scope.next=function(){
if(index<$scope.questionar.length-1){
index++;
$scope.currentque=$scope.questionar[index];
}
}
$scope.prev=function(){
if(index>0){
index--;
$scope.currentque=$scope.questionar[index];
}
}
$scope.currentq=function(code){
index=code;
$scope.currentque=$scope.questionar[index];
}
});
I searched a lot on Stackoverflow, solution for my question, but no one of them helped me. I have a multiple show/hide (toggle) content, with same id's and I want to make, that the only one of them, what I need, opens, not all of them. There's my JSFiddle You can test it.
This is my JavaScript
$("#view").click(function(){
$('.hidden-content').slideToggle(500).toggleClass("active");
});
You cannot have duplicate id attributes within a single document. When you do only the first element with the given id is recognised; hence the issue you've seen.
Instead change the view elements to use a class, then use the this reference within the click event handler to traverse the DOM to find the related .hidden-content element and toggle it. Try this:
$(".view").click(function() {
$(this).closest('.div').find('.hidden-content').slideToggle(500).toggleClass("active");
});
.div {
width: 400px;
}
.content {
padding: 10px;
}
.view {
color: red;
cursor: pointer;
}
.hidden-content {
display: none;
}
.hidden-content .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
It is a bad practice to use same id for more than one elements.
You can try the following
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
and your jquery will look like the following
$(".view").click(function(){
$(this).parent('.content').next('.hiddencontent').slideToggle(500).toggleClass("active");
});
You should replace the id to class. And for accordion, you can use like below.
HTML,
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
Js,
<script>
$(document).ready(function(){
$(".hidden-content").hide();
$(".view").on('click', function(){
$(this).parents().parents().find(".hidden-content").slideToggle(500).toggleClass("active");
if($(this).parents().parents().siblings().find(".hidden-content").hasClass('active')){
$(this).parents().parents().siblings().find(".hidden-content").removeClass('active');
$(this).parents().parents().siblings().find(".hidden-content").hide();
}
});
});
</script>
You can change your click event as follows to make it work.
$("div[id='view']").click(function() {
$(this).parent().next().slideToggle(500).toggleClass("active");
});
Note: You shouldn't have the same id for multiple elements, id attribute value should be unique why because the id attribute is used to identify an element uniquely in the DOM. You can have the same class name for different elements.
Please refer this answer it provides more information on how things work when multiple elements have the same id attribute value.
$("div[id='view']").click(function() {
$(this).parent().next().slideToggle(500).toggleClass("active");
});
.div {
width: 400px;
}
.content {
padding: 10px;
}
#view {
color: red;
cursor: pointer;
}
.hidden-content {
display: none;
}
.hidden-content .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
$(".view").click(function() {
$(this).closest('.div').find('.hidden-content').slideToggle(200).toggleClass("active");
});
.div {
width: 400px;
}
.content {
padding: 10px;
}
.view {
color: red;
cursor: pointer;
}
.hidden-content {
display: none;
}
.hidden-content .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
I'm looking for a way to change the background color of multiple columns based on a range of numeric values. I know of the Colorjizz PHP library but not sure if it's what I need for my purpose. I need the columns in the code below to change their background color to the respective shade of green/red/orange based on a range of numeric values. For example from 1-100 or 0.1 to 10.0.
.green-bg {
background-color: green!important;
color: white;
}
.red-bg {
background-color: red!important;
color: white;
}
.orange-bg {
background-color: orange!important;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well green-bg">1
</div>
</div>
<div class="col-md-12">
<div class="well red-bg">3
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well orange-bg">2
</div>
</div>
<div class="col-md-12">
<div class="well green-bg">4
</div>
</div>
</div>
</div>
</div>
</div>
You could try grabbing the innerHTML of each div with the "well" class and then assuming that is a number between 0 and 10, set the opacity of the div to be that number divided by 10. So if the innerHTML is 2, then the opacity is set to 0.2.
I've added some Javascript to your snippet to make this happen.
You could change the math in this to make it 1-100 or something else.
function wellColorShade() {
var wells = document.getElementsByClassName("well");
for(var i = 0; i < wells.length; i++) {
var well = wells[i];
well.style.opacity = (well.innerHTML / 10);
}
};
wellColorShade();
.green-bg {
background-color: green!important;
color: white;
}
.red-bg {
background-color: red!important;
color: white;
}
.orange-bg {
background-color: orange!important;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well green-bg">1
</div>
</div>
<div class="col-md-12">
<div class="well red-bg">3
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well orange-bg">2
</div>
</div>
<div class="col-md-12">
<div class="well green-bg">4
</div>
</div>
</div>
</div>
</div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have a requirement of toggling the color of a clicked <div> from red to green & green to red. I am using jquery in my page. Please suggest me the best possible code to fulfill the requirement.
My code is as follows:
<htmL>
<head>
<script src="jquery-1.10.2.js">
window.onload = initPage;
function initPage() {
}
function tileclick() {
}
</script>
<style>
div.table{
display: table;
}
div.row{
display: table-row;
border-style:solid;
border-color: black;
border-width:15px;
padding-top:35px;
padding-bottom:35px;
padding-right:50px;
padding-left:50px;
margin-top:25px;
margin-bottom:25px;
margin-right:50px;
margin-left:50px;
}
div.cell{
display: table-cell;
border-style: solid;
border-width:15px;
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
padding-bottom: 30px;
font-weight:5000;
font-size:200%;
background: #00FF00;
}
</style>
</head>
<body>
<div id="table" class="table">
<div id="r1" class="row">
<div id="sys55" class="cell">55
</div>
<div id="sys56" class="cell">56
</div>
<div id="sys57" class="cell">57
</div>
<div id="sys58" class="cell">58
</div>
<div id="sys59" class="cell">59
</div>
<div id="sys60" class="cell">60
</div>
<div id="sys61" class="cell">61
</div>
<div id="sys62" class="cell">62
</div>
<div id="sys63" class="cell">63
</div>
<div id="sys64" class="cell">64
</div>
<div id="sys65" class="cell">65
</div>
</div>
<div id="r2" class="row">
<div id="sys54" class="cell">54
</div>
<div id="sys53" class="cell">53
</div>
<div id="sys52" class="cell">52
</div>
<div id="sys51" class="cell">51
</div>
<div id="sys50" class="cell">50
</div>
<div id="sys49" class="cell">49
</div>
<div id="sys48" class="cell">48
</div>
<div id="sys47" class="cell">47
</div>
<div id="sys46" class="cell">46
</div>
<div id="sys45" class="cell">45
</div>
<div id="sys44" class="cell">44
</div>
</div>
<div id="r3" class="row">
<div id="sys33" class="cell">33
</div>
<div id="sys34" class="cell">34
</div>
<div id="sys35" class="cell">35
</div>
<div id="sys36" class="cell">36
</div>
<div id="sys37" class="cell">37
</div>
<div id="sys38" class="cell">38
</div>
<div id="sys39" class="cell">39
</div>
<div id="sys40" class="cell">40
</div>
<div id="sys41" class="cell">41
</div>
<div id="sys42" class="cell">42
</div>
<div id="sys43" class="cell">43
</div>
</div>
<div id="r4" class="row">
<div id="sys32" class="cell">32
</div>
<div id="sys31" class="cell">31
</div>
<div id="sys30" class="cell">30
</div>
<div id="sys29" class="cell">29
</div>
<div id="sys28" class="cell">28
</div>
<div id="sys27" class="cell">27
</div>
<div id="sys26" class="cell">26
</div>
<div id="sys25" class="cell">25
</div>
<div id="sys24" class="cell">24
</div>
<div id="sys23" class="cell">23
</div>
<div id="sys22" class="cell">22
</div>
</div>
<div id="r5" class="row">
<div id="sys11" class="cell">11
</div>
<div id="sys12" class="cell">12
</div>
<div id="sys13" class="cell">13
</div>
<div id="sys14" class="cell">14
</div>
<div id="sys15" class="cell">15
</div>
<div id="sys16" class="cell">16
</div>
<div id="sys17" class="cell">17
</div>
<div id="sys18" class="cell">18
</div>
<div id="sys19" class="cell">19
</div>
<div id="sys20" class="cell">20
</div>
<div id="sys21" class="cell">21
</div>
</div>
<div id="r6" class="row">
<div id="sys10" class="cell">10
</div>
<div id="sys09" class="cell">09
</div>
<div id="sys08" class="cell">08
</div>
<div id="sys07" class="cell">07
</div>
<div id="sys06" class="cell">06
</div>
<div id="sys05" class="cell">05
</div>
<div id="sys04" class="cell">04
</div>
<div id="sys03" class="cell">03
</div>
<div id="sys02" class="cell">02
</div>
<div id="sys01" class="cell">01
</div>
</div>
</div>
</body>
</html>
My initial page should appear green in color as shown below.
Each block should toggle green to red when clicked & vice-versa.
Please help me achieve this requirement.
You can use a start with selector to match all you divs that id starts with sys and then use toggleClass to switch the classes.
Code:
$("div[id^='sys']").click(function(){
$(this).toggleClass("cell cell2");
});
Demo: http://jsfiddle.net/IrvinDominin/tsL8a/
Use toggleClass() in jquery
<style>
.red{
background : red;
}
</style>
$(function() {
$(".cell").on("click" , function(e) {
$(this).toggleClass("cell red");
});
});
You can use jQuery toggleClass method (See the doc).
Add a class for red cells like :
.red_cell {
background-color: red;
}
Then something like :
$('.cell').click(function() {
$(this).toggleClass('red_cell');
});
use:
$(".cell").click(function(){
var clr = $( this ).css("background-color").toString();
var clr = (clr == "rgb(0, 255, 0)" ? "rgb(255,0,0)" : "rgb(0, 255, 0)");
$(this).css({
"background":""+clr+""
});
});
without changing css markup.
DEMO. hope it'll help you. cheers !
$(".cell").click(function(){
if($(this).hasClass('red')) {
$(this).removeClass('red');
}else{
$(this).addClass('red');
}
});
and simply add a class to CSS.