See if text input is there - javascript

So I'm trying to check if a user has inputed text through the textbox userInput. However, when I try writing an if else statement to validate input, nothing seems to work. Any help?
<div class="container">
<div class="row">
<div class="page-header">
<h1 align="center">Sub To Me <small>Easily create YouTube subscription links!</small></h1>
</div>
</div>
<script type="text/javascript">
function showLink() {
$("#linkBox").css("visibility", "visible");
$("#linkText").html("http://subto.me/"+$("#usernameInput").val())
$("#linkHref").attr("href", "http://subto.me/"+$("#usernameInput").val())
}
</script>
<div class="row">
<div class="span6 offset3">
<div class="form-inline">
<div class="input-append">
<input class="span4" type="text" id="usernameInput" placeholder="Youtube Username">
<button class="btn" onClick="showLink();">Get Link</button>
</div>
</div>
</div>
</div>
<div class="row" id="linkBox" style="visibility: hidden; margin-top: 25px;">
<div class="span12">
<div class="alert alert-success" style="width: 50%; margin: 0 auto; text-align: center; padding: 24px;">
<a id="linkHref" href="" target="_blank"><span id="linkText" style="font-size: 24pt; font-weight: bold;"></span></a>
</div>
</div>
</div>


Here Thous should stop your users from submitting blank forms, and dont forget to include the jquery library.
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript">
function showLink() {
var usernameInput = $('#usernameInput').val();
if(usernameInput != ''){
$("#linkBox").css("visibility", "visible");
$("#linkText").html("http://subto.me/"+$("#usernameInput").val())
$("#linkHref").attr("href", "http://subto.me/"+$("#usernameInput").val())
}
else{
alert('Please Enter Something');
}
}
</script>
<div class="container">
<div class="row">
<div class="page-header">
<h1 align="center">Sub To Me <small>Easily create YouTube subscription links!</small></h1>
</div>
</div>
<div class="row">
<div class="span6 offset3">
<div class="form-inline">
<div class="input-append">
<input class="span4" type="text" id="usernameInput" placeholder="Youtube Username">
<button class="btn" onClick="showLink();">Get Link</button>
</div>
</div>
</div>
</div>
<div class="row" id="linkBox" style="visibility: hidden; margin-top: 25px;">
<div class="span12">
<div class="alert alert-success" style="width: 50%; margin: 0 auto; text-align: center; padding: 24px;">
<a id="linkHref" href="" target="_blank"><span id="linkText" style="font-size: 24pt; font-weight: bold;"></span></a>
</div>
</div>
</div>


<script type="text/javascript">
function showLink()
{
if($('#usernameInput').val()!= "")
{
$("#linkBox").css("visibility", "visible");
$("#linkText").html("http://subto.me/"+$("#usernameInput").val());
$("#linkHref").attr("href", "http://subto.me/"+$("#usernameInput").val());
}
else
{
alert("enter value")
}
}
</script>

Related

How to load Images from google custom search API onclick instead of onload

var url = "https://www.googleapis.com/customsearch/v1?key= Your API Key &cx=005124428384360536924:rstfldysumw&q=funny&searchType=image&safe=high";
$(function () {
var jqxhr = $.getJSON(url, function () {
console.log("success");
}).done(function (data) {
for (var i = 0; i < 4; i++) {
var item = data.items[i];
document.getElementById("content11").innerHTML += "<br><div class='c'>"
+ "<div class='b'><img src="+ item.link +" height=200px width=200px /></div><div class='a mn-video-title'> "
+ item.title+"</div></div>";
}
}).fail(function (data) {
console.log("error");
});
});
button#findNow {
height: 40px;
width: 154px;
margin: 20px;
border-radius: 5px;
}
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#" xml:lang="en-gb" lang="en-gb" slick-uniqueid="3" xmlns="http://www.w3.org/1999/xhtml">
<?php include 'header.php'; ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="lan_flanger">
<div id="lan_musictted">
<div id="rt-showcase">
<div class="clear"></div>
<div id="rt-maintop">
<div class="rt-container">
<div class="rt-grid-10 rt-alpha">
<div class="rt-block lan_album">
<div class="module-surround">
<div class="module-title mn-vidio">
<h2 class="title">TOP IMAGES</h2>
<form id="search-form" name="search-form">
<div style="margin-left:10px;" class="col-md-10"><input type="text" class="form-control sc" placeholder="Search...." id="search1" value="Funny" /></div>
<div class="col-md-2 md">
<span class="input-group-btn">
<button class="btn btn-info btn-md sc" style="margin-left:3px;" type="button" id="findNow" value="Search" >
Search <i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</form>
</div>
<div class="module-content">
<div class="content">
<div id="content11" style="display: inline-flex; margin-bottom: 15px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<?php include 'footer.php'; ?>
<div class="gf-menu-toggle" style="display: none;"></div>
<div class="gf-menu-device-wrapper-sidemenu">
<div class="gf-menu-device-container responsive-type-panel">
<div class="gf-menu-device-container-wrapper"></div>
</div>
</div>
</body>
</html>
Hello Friends, I am new in google custom search API and jquery.
This code is perfect on page load but i want to load images on button click.
How to load images on button click i tried other peoples code but it can't do what i want.
I want to get the URL of images from custom search and display that images in html.
so, please help me

Add the json calling function inside the button click.And passing the input string to the URL
$('#findNow').on('click',function(){
document.getElementById("content11").innerHTML ="";
var a =$('#search1').val();
var url = "https://www.googleapis.com/customsearch/v1?key= Your API Key &cx=005124428384360536924:rstfldysumw&q="+a+"&searchType=image&safe=high";
var jqxhr = $.getJSON(url, function() {
console.log("success");
}).done(function(data) {
for (var i = 0; i < 4; i++) {
var item = data.items[i];
document.getElementById("content11").innerHTML += "<br><div class='c'>" + "<div class='b'><img src=" + item.link + " height=200px width=200px /></div><div class='a mn-video-title'> " + item.title + "</div></div>";
}
}).fail(function(data) {
console.log("error");
});
})
button#findNow {
height: 40px;
width: 154px;
margin: 20px;
border-radius: 5px;
}
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#" xml:lang="en-gb" lang="en-gb" slick-uniqueid="3" xmlns="http://www.w3.org/1999/xhtml">
<?php include 'header.php'; ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="lan_flanger">
<div id="lan_musictted">
<div id="rt-showcase">
<div class="clear"></div>
<div id="rt-maintop">
<div class="rt-container">
<div class="rt-grid-10 rt-alpha">
<div class="rt-block lan_album">
<div class="module-surround">
<div class="module-title mn-vidio">
<h2 class="title">TOP IMAGES</h2>
<form id="search-form" name="search-form">
<div style="margin-left:10px;" class="col-md-10"><input type="text" class="form-control sc" placeholder="Search...." id="search1" value="Funny" /></div>
<div class="col-md-2 md">
<span class="input-group-btn">
<button class="btn btn-info btn-md sc" style="margin-left:3px;" type="button" id="findNow" value="Search" >
Search <i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</form>
</div>
<div class="module-content">
<div class="content">
<div id="content11" style="display: inline-flex; margin-bottom: 15px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<?php include 'footer.php'; ?>
<div class="gf-menu-toggle" style="display: none;"></div>
<div class="gf-menu-device-wrapper-sidemenu">
<div class="gf-menu-device-container responsive-type-panel">
<div class="gf-menu-device-container-wrapper"></div>
</div>
</div>
</body>
</html>

Angularjs : how to write options code for quiz pallet?

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];
}
});

How can I make bootstrap rows closer together?

I'm trying to create a footer with bootstrap rows and columns, and I want to make the footer smaller by reducing the space between rows. I've tried changing the margin and padding of the rows to no avail.
<footer class="footerClass">
<div class="row footerRow">
<div class="col-md-4">
<b>Content</b>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-4">
</div>
</div>
<div class="row footerRow">
<div class="col-md-4">
<p>Content</p>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-4">
<p> </p>
</div>
</div>
<div class="row footerRow">
<div class="col-md-4">
<p>Content</p>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-2">
<p><b>Content</b></p>
</div>
<div class="col-md-3">
<p><b>Content</b></p>
</div>
</div>
<div class="row footerRow table-condensed">
<div class="col-md-4">
<p> </p>
</div>
<div class="col-md-3">
<p>www.Content.org</p>
</div>
<div class="col-md-4">
<p> </p>
</div>
</div>
</footer>

It's likely that your additional classes have caused the spacing issues that you're seeing. I would rewrite your footer in the following way to see if it resolves your issue:
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<b>Content</b>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-4">
</div>
</div>
<div class="row">
<div class="col-md-4">
<p>Content</p>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-4">
<p> </p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<p>Content</p>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-2">
<p><b>Content</b></p>
</div>
<div class="col-md-3">
<p><b>Content</b></p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<p> </p>
</div>
<div class="col-md-3">
<p>www.Content.org</p>
</div>
<div class="col-md-4">
<p> </p>
</div>
</div>
</div>
</footer>
Also, typically when using bootstrap grids, your column width would add up to 12 for each row. This may have been intentional.
I use the following classes to handle vertical spacing in my designs:
.voffset { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }
.boffset { margin-bottom: 2px; }
.boffset1 { margin-bottom: 5px; }
.boffset2 { margin-bottom: 10px; }
.boffset3 { margin-bottom: 15px; }
.boffset4 { margin-bottom: 30px; }
.boffset5 { margin-bottom: 40px; }
.boffset6 { margin-bottom: 60px; }
.boffset7 { margin-bottom: 80px; }
.boffset8 { margin-bottom: 100px; }
.boffset9 { margin-bottom: 150px; }

The minimum width of the media query "col-md-xx" is 992px , Try to apply class with "col-sm-xx". May be You are asking this.

Change divs through onclick function

Currently I have some code that looks like so;
<div id="welcome">
<div style="text-align: center;">
<h1 style="margin-bottom: 0;">Welcome</h1>
<hr>
<p>Hi, would you like to sign up or keep watching?</p>
<button id="intro_signup_button" type="text" onclick="**HERE**">SIGN UP</button>
<button id="intro_back_button" type="text" onclick="document.getElementById('welcome').style.display='none'">KEEP WATCHING</button>
</div>
</div>
<div id="signup">
<div style="text-align: center;">
<p>texttextext</p>
</div>
</div>
So when I click the sign up button, I want the div to change to the signup div below, but using the same coding type (if possible) that I used for closing the window. I know it's obvious that I'm a beginner, but I've been searching everywhere and playing around with different techniques but I just can't figure it out!

Really as simple as this:
#signup {
display: none;
}
<div id="welcome">
<div style="text-align: center;">
<h1 style="margin-bottom: 0;">Welcome</h1>
<hr>
<p>Hi, would you like to sign up or keep watching?</p>
<button id="intro_signup_button" type="text" onclick="document.getElementById('signup').style.display='block';">SIGN UP</button>
<button id="intro_back_button" type="text" onclick="document.getElementById('welcome').style.display='none';">KEEP WATCHING</button>
</div>
</div>
<div id="signup">
<div style="text-align: center;">
<p>texttextext</p>
</div>
</div>
And if you want a version that hides the Welcome layer before show the Signup layer:
#signup {
display: none;
}
<div id="welcome">
<div style="text-align: center;">
<h1 style="margin-bottom: 0;">Welcome</h1>
<hr>
<p>Hi, would you like to sign up or keep watching?</p>
<button id="intro_signup_button" type="text" onclick="document.getElementById('signup').style.display='block';document.getElementById('welcome').style.display='none'">SIGN UP</button>
<button id="intro_back_button" type="text" onclick="document.getElementById('welcome').style.display='none';">KEEP WATCHING</button>
</div>
</div>
<div id="signup">
<div style="text-align: center;">
<p>texttextext</p>
</div>
</div>

Use Jquery :
$("#intro_signup_button").click(function() {
$("#signup").show();
});
$("#intro_back_button").click(function() {
$("#signup").hide();
});
$("#intro_signup_button").click(function() {
$("#signup").show();
});
$("#intro_back_button").click(function() {
$("#signup").hide();
});
#signup {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="welcome">
<div style="text-align: center;">
<h1 style="margin-bottom: 0;">Welcome</h1>
<hr>
<p>Hi, would you like to sign up or keep watching?</p>
<button id="intro_signup_button">SIGN UP</button>
<button id="intro_back_button">KEEP WATCHING</button>
</div>
</div>
<div id="signup">
<div style="text-align: center;">
<p>show sign up</p>
</div>
</div>

Toggle each <div> tag with different color [closed]

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.

Categories

Resources