jQuery addClass example

Change class name on click in jQuery

by Dhanck

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div><input type="number" placeholder="Font size"></div>
<div><input type="color"></div>
<div><select>
<option>North East</option>
<option>North West</option>
<option>South East</option>
<option>South West</option>
</select></div>


<span class="glyphicon stackNW txt30">
  <span class="glyphicon-list-alt"></span>
  <span class="glyphicon-ok-circle"></span>
</span>

<span class="glyphicon stackNE txt60">
  <span class="glyphicon-list-alt"></span>
  <span class="glyphicon-ok-circle"></span>
</span>

<span class="glyphicon stackSE">
  <span class="glyphicon-list-alt"></span>
  <span class="glyphicon-ok-circle"></span>
</span>

<span class="glyphicon stackSW  txt120">
  <span class="glyphicon-list-alt"></span>
  <span class="glyphicon-ok-circle"></span>
</span>

CSS

*{
  margin:0;
  padding:0;
}
html, body{
  margin:30px;
  font-size:21px;
}
.txt30{font-size: 50px;}
.txt60{font-size: 60px;}
.txt90{font-size: 90px;}
.txt120{font-size: 120px;}


.stackNW span{
  position:relative;
}
.stackNW span:first-child{
  font-size:120%;
}
.stackNW span:last-child{
  font-size:30%;
  background:#fff;
  border-radius:50%;
  position:absolute;
}
.stackNE span{
  position:relative;
}
.stackNE span:first-child{
  font-size:120%;
}
.stackNE span:last-child{
  font-size:30%;
  background:#fff;
  border-radius:50%;
  position:absolute;
}
.stackSE span{
  position:relative;
}
.stackSE span:first-child{
  font-size:120%;
}
.stackSE span:last-child{
  font-size:30%;
  background:#fff;
  border-radius:50%;
  position:absolute;
}
.stackSW span{
  position:relative;
}
.stackSW span:first-child{
  font-size:120%;
}
.stackSW span:last-child{
  font-size:30%;
  background:#fff;
  border-radius:50%;
  position:absolute;
}

.stackSW, .stackSE, .stackNW, .stackNE {
    display: inline-block;
    margin: 1%;
}

JavaScript

//North East
var obj =  $('.stackNE span:first-child').css("font-size");
var objArray =  obj.toString(obj).replace('px', ' ');
$('.stackNE span:last-child').css({'font-size': objArray / 2, 'top': objArray * -0.08, 'right': objArray * -0.08});

//North West
var obj =  $('.stackNW span:first-child').css("font-size");
var objArray =  obj.toString(obj).replace('px', ' ');
$('.stackNW span:last-child').css({'font-size': objArray / 2, 'top': objArray * -0.08, 'left': objArray * -0.08 });


//South East
var obj =  $('.stackSE span:first-child').css("font-size");
var objArray =  obj.toString(obj).replace('px', ' ');
$('.stackSE span:last-child').css({'font-size': objArray / 2, 'bottom': objArray * -0.08 , 'right': objArray * -0.08 });

//South West
var obj =  $('.stackSW span:first-child').css("font-size");
var objArray =  obj.toString(obj).replace('px', ' ');
$('.stackSW span:last-child').css({'font-size': objArray / 2, 'bottom': objArray * -0.08, 'left': objArray * -0.08 });