Basically I am trying to use an onclick event to change an image source when image 2 button is clicked. When the image furthest right of the section is clicked, a modal will pop up. In that modal, there are two buttons down at the bottom. Image one button is intended to display the original image, and image two is intended to display a different image. Not sure what is wrong in my code, I can't see anything that I am forgetting. Or maybe I am just doing it completely wrong in the first place, help would be much appreciated.
.mDialogPhoto {
width: 95%;
display: block;
margin-left: auto;
margin-right: auto;
}
.modal-body {
padding: 0px;
}
.modal-backdrop.in {
opacity: 0.8;
}
.modal-content {
background-color: white;
}
.img-responsiveModal {
margin-top: 20px;
margin-bottom: 20px;
display: block;
width: 100%;
height: auto;
}
.modal-dialog {
margin-top: 50px;
}
<section class="contentThree">
<div class="container-fluid custom">
<div class="row">
<div class="col-md-12 hidden-xs hidden-sm">
<h2 class="text-center photographyTitle">Shop</h2>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog mDialogPhoto" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 modal3ImgPrev">
<img class="img-responsiveModal" id="myImg" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg'/>
</div>
<div class="paypal col-md-3">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="D9FWAKHUPWYXS">
<table>
<tr><td><input type="hidden" name="on0" value="Choose Size">Choose Size</td></tr><tr><td><select class="float-right" name="os0">
<option value="Size One">Size One $100.00 USD</option>
<option value="Size Two">Size Two $200.00 USD</option>
<option value="Size Three">Size Three $300.00 USD</option>
<option value="Size Four">Size Four $400.00 USD</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input class="paymentBtn1" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</div>
<div class="row">
<button onclick="document.getElementById('myImg')src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg'">Image 1</button>
<button onclick="document.getElementById('myImg')src='/CMS_Static/Uploads/313864614C6F6F/DJI_0073-Recovered.jpg'">Image 2</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
<a type="button" data-toggle="modal" data-target="#myModal1"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/photoImage1-1.jpg'/></a>
</div>
<div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
<a type="button" data-toggle="modal" data-target="#myModal2"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0073-Recovered.jpg'/></a>
</div>
<div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
<a type="button" data-toggle="modal" data-target="#myModal3"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg'/></a>
</div>
</div>
<div class="col-md-4 col-md-offset-4 hidden-xs hidden-sm">
<a class="btn defaultBtn btn-block" href="/videography#photography">View More</a>
</div>
<div class="col-sm-8 col-sm-offset-2 visible-xs visible-sm">
<a class="btn defaultBtn btn-block" href="/videography#photography">View Photos</a>
</div>
</div>
</div>
</section>
You need a dot before the src, its a property of the getElementById() method.
document.getElementById('myImg').src =
'/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg';
Related
i am new in angular i want to print a modal information i am using onclick=print() to print the data my data is shown in the print priview but i didnt align right i add the screenshot of my pgae i want to align the data enter image description here.
my css code
#media print {
#non-printable {
visibility: hidden;
}
#printable{
visibility: visible;
border: none;
position: absolute !important;
left: 0;
top: 0;
overflow-x:auto ;
float: left;
}
}
this is my html code
<div class="modal" id="dModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document" >
<div class="modal-content" style="margin-left: auto; margin-right: auto;">
<div class="modal-body" id="printable">
<div class="container" style="width:100%" >
<div class="row">
<div class="col col-md-3">
<label>Irn Number :</label>
</div>
<div class="col col-md-9">
<label>{{irn}}</label>
</div>
</div>
<div class="row">
<div class="col col-md-3">
<label>Status :</label>
</div>
<div class="col col-md-7">
<label>{{Status}}</label>
</div>
</div>
<div class="row">
<div class="col col-md-3">
<label>QR code :</label>
</div>
<div class="col col-md-7" style="text-align: left;">
<label> <qrcode [qrdata]="qr" [width]="150" [errorCorrectionLevel]="'M'"></qrcode> </label>
</div>
</div>
</div>
<div class="modal-footer" id="non-printable">
<button id="btnPrint" type="button" class="btn btn-secondary" data-dismiss="modal"onclick="print()">Print</button>
</div>
</div>
</div>
</div>
</div>
thankyou for your help.
You can try to add to the container class the attributes flex-direction: column; display: flex;
I have one leaflet map and 2 div section with some content.
<body>
<div class="row showEquipmentDetails" style="margin:10px;">
<button type="button" class="btn btn-primary" onclick="showEquipmentDetails()" style="float:right"><i class="fa fa-bars"></i></button>
</div>
<div class="EquipmentContent row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" style="float:right;background:#dff0ff;">
<section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2">
<label class="equipmentHeaderlable">Name</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-3 cl-md-3 col-lg-3">
<label class="equipmentHeaderlable">Speed</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
<button type="button" style="display: inline-block;float:right;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
</section>
</div>
</div>
<div id="map">
</div>
</body>
<script>
$('.EquipmentContent').hide();
function showEquipmentDetails(){
$('.showEquipmentDetails').hide();
$('.EquipmentContent').show();
}
function hideEquipmentDetails(){
$('.showEquipmentDetails').show();
$('.EquipmentContent').hide();
}
</script>
Am doing hide and show of 2 div section its placed on out side of the map. But I need to hide and show it above the map,so I wrote like this
<div id="map">
<div class="row" style="margin:10px;">
<button type="button" class="btn btn-primary showEquipmentDetails" onclick="showEquipmentDetails()" style="float:right"><i class="fa fa-bars"></i></button>
</div>
<div class="EquipmentContent row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" style="float:right;background:#dff0ff;">
<section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2">
<label class="equipmentHeaderlable">Name</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-3 cl-md-3 col-lg-3">
<label class="equipmentHeaderlable">Speed</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
<button type="button" style="display: inline-block;float:right;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
</section>
</div>
</div>
</div>
But click events are not working on map. when I click on first button, map is getting zoomed .click events are not fired. why? How can I achieve it?any suggestion?Thanks!!
Map is not loading to me. But check whether this solution is working for you,
var mymap = L.map('map').setView([51.505, -0.09], 13);
$('.EquipmentContent').hide();
function showEquipmentDetails(){
$('.showEquipmentDetails').hide();
$('.EquipmentContent').show();
}
function hideEquipmentDetails(){
$('.showEquipmentDetails').show();
$('.EquipmentContent').hide();
}
#container {
width: 650px;
height: 350px;
position:relative
}
#map {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.EquipmentContent {
width: 90%;
height: 90%;
position: absolute;
top:8px;
left: 45px;
}
.showEquipmentDetails {
width: 40px;
height: 40px;
position: absolute;
top:8px;
left: 45px
}
#EquipmentContent {
z-index: 10;
}
<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/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<div id="container">
<div id="map"></div>
<div class="EquipmentContent row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" style=";background:#dff0ff;">
<section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2">
<label class="equipmentHeaderlable">Name</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-3 cl-md-3 col-lg-3">
<label class="equipmentHeaderlable">Speed</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
<button type="button" style="display: inline-block;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
</section>
</div>
</div>
<button type="button" class="btn btn-primary showEquipmentDetails" onclick="showEquipmentDetails()" ><i class="fa fa-bars"></i></button>
</div>
Got solution.By adding the following style I am getting the expected result
.showEquipmentDetails,.EquipmentContent{
position:absolute;
z-index:9;
width:98%;
}
I displayed a grid items in a div which is toggled to show and hide the items,
In desktop and tablets it is working good, but in mobile devices the items button click event is not working.
In desktop when i mouse over the grid item it will change its color to blue and cursor to pointer.
sample code of this grid is as follow
<div class="items_grid" style="width: 50%; float: right; height: 320px; overflow-x: hidden; overflow-y: auto; position: absolute; z-index: 10; top: 0px; right: 0px; border: 1px solid rgb(219, 219, 219); display: block;">
<div class="col-md-12 col-sm-12 col-xs-12 div_padding">
<div class="form-group col-md-12 col-sm-12 col-xs-12" style="background-color:#DADADA;color:#000000;border:1px solid #DADADA;">
<center><form class="form-inline" style="padding:0px;margin-bottom:1px;">
<select class="form-control" name="menucategory" onchange="getbycategory(this.value)">
<option value="0">--Select Category/All--</option>
<option value="1">ABC</option>
</select>
</form></center>
</div>
</div>
<div id="menu_items">
<div class="col-md-2 col-sm-3 col-xs-6 itm">
<button class="btn btn-primary itm_btn" id="itmname" onclick="insertitem('1527')">Comma Hoox Powerbank 6000</button>
</div>
<div class="col-md-2 col-sm-3 col-xs-6 itm">
<button class="btn btn-primary itm_btn" id="itmname" onclick="insertitem('4002')">Epay</button>
</div>
<div class="col-md-2 col-sm-3 col-xs-6 itm">
<button class="btn btn-primary itm_btn" id="itmname" onclick="insertitem('2')">Fees - 1st Installment</button>
</div>
<div class="row" style="background-color:#f5f5f5;">
<div class="col-md-12 col-sm-12" style="padding-top:2px;">
<div class="col-md-6 col-sm-6" id="p_page"><button class="btn btn-primary btn-block pagenation disable" onclick="pagination(,0)"> << </button></div>
<div class="col-md-6 col-sm-6" id="n_page"><button class="btn btn-primary btn-block pagenation" onclick="pagination(12,0)"> >> </button>
</div>
</div>
</div>
</div>
sample js
function insertitem(invcode)
{
if(invcode=='')
{
alert("no item");
}
else
{
//some function
}
}
Note: Never nest col within col and cols should always be inside rows.
By the way, placing
<div class="clearfix"></div>
after the last item should clear floats and fix this issue.
I have a web page and fixed menu(display:none) and if I scroll page until rezervation form fixed menu make it appear it's good so far but if my resulution under 768px my fixed menu doesn't work when I scroll page until I refresh..
Edit: I undserstand problem..problem is top navigation menu(mega menu) if I remove it my codes work but I have to solve not removing
JS
$(function() {
if (!$(".hotel-search-box").length) {
return false; //Check if the element exist
}
$(window).scroll(function() {
if($(window).scrollTop() > $(".hotel-search-box").offset().top+$(".hotel-search-box").height() && $(".oda-otel-giris").val() == ""){
$(".sticky-checkin").fadeIn(500);
}else{
$(".sticky-checkin").fadeOut(500);
}
});
});
CSS
.sticky-checkin{
position:fixed;
top:0;
left:0;
z-index:1042;
background:#FFF;
width:100%;
padding:15px 0;
#include clearfix;
-webkit-box-shadow: -1px 10px 7px -9px rgba(61,61,61,0.36);
-moz-box-shadow: -1px 10px 7px -9px rgba(61,61,61,0.36);
box-shadow: -1px 10px 7px -9px rgba(61,61,61,0.36);
display:none;
}
.sticky-container{
width:50%;
position: relative;
margin:0 auto;
#include clearfix;
input,select{
cursor:pointer;
}
}
/**
* sticky border
*/
.oteller-sticky{
border-bottom:1px solid #faa82b;
}
HTML
<div class="sticky-checkin oteller-sticky">
<div class="sticky-container">
<div class="row mt10">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 mb10">
<input type="text" name="oda-otel-giris" class="oda-giris-cikis input-full-width sticky-oda-giris" placeholder="Giriş" data-toggle="modal" data-target="#popupCheckin">
<span class="oda-otel-giris"></span>
</div>
<div class="col-lg-2 col-md-2 col-lg-2 col-md-2 col-sm-2 col-xs-6 ">
<input type="text" name="oda-otel-cikis" class="oda-giris-cikis input-full-width sticky-oda-cikis" placeholder="Çıkış" data-toggle="modal" data-target="#popupCheckin">
<span class="oda-otel-giris"></span>
</div>
</div>
</div><!-- sticky container-->
<div class="modal fade fullscreen" id="popupCheckin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog otel-filtreleme-popup">
<div class="modal-content" style="color:#fff;">
<div class="modal-header" style="border:1px solid orange;">
<h3>OTEL BUL</h3>
<button type="button" class="close btn btn-link" data-dismiss="modal" aria-hidden="true"><i class="fa fa-close fa-lg" style="color:#faa82b;"></i></button>
<h4 class="modal-title text-center"><span class="sr-only">main navigation</span></h4>
</div>
<div class="modal-body otel-filtreleme-popup">
<div class="container-margin nomargin nopadding notopmargin">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 otel-arama">
<input type="text" name="oda-otel" id="oda-otel" class="oda-otel input-full-width" placeholder="Otel adını veya Bölgeyi yaz">
<span class="oda-otel-icon"></span>
</div>
</div><!-- otel ara-->
<div class="row mt10">
<div class="col-lg-6 col-md-6 col-xs-6 mb10">
<input type="text" name="oda-otel-giris" class="oda-giris-cikis input-full-width" placeholder="Giriş">
<span class="oda-otel-giris"></span>
</div>
<div class="col-lg-6 col-md-6 col-xs-6">
<input type="text" name="oda-otel-cikis" class="oda-giris-cikis input-full-width" placeholder="Çıkış">
<span class="oda-otel-giris"></span>
</div>
</div><!-- otel giriş çıkış-->
<div class="row ">
<div class="col-lg-6 col-md-6 col-xs-6 col-sm-6">
<select name="oda-otel-kisi" id="oda-otel-kisi" class="oda-otel-kisi" style="display: none;">
<option value="">Kişi</option>
<option value="">1 Kişi</option>
<option value="">2 Kişi</option>
<option value="">3 Kişi</option>
</select><div class="nice-select oda-otel-kisi" tabindex="0"><span class="current">Kişi</span><ul class="list"><li data-value="" class="option selected">Kişi</li><li data-value="" class="option">1 Kişi</li><li data-value="" class="option">2 Kişi</li><li data-value="" class="option">3 Kişi</li></ul></div><span class="oda-otel-kisi-icon"></span>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<input type="submit" class="btn btn-warning otel-oda-sec" value="OTEL ARA">
</div>
</div><!-- otel kişi sayısı-->
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.fullscreen -->
</div><!-- sticky checkin-->
online demo
I have HTML as shown below. Using CSS, I want to change the background-color of nth child div of every div. If I click on the first More Info button I want to change the color of first child div of every div and so on.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
HTML :
<div class="row" id="empListTable">
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-weight:bold">
Hired
</div>
<div class="col-xs-6 col-sm-3"style="padding-left: 25px;font-weight:bold">
Screened
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 15px;font-weight:bold">
Pre-Qualified
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-weight:bold">
Approved
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold">
6
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold">
2
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:12px;color:#888;">
Total Number of <br /> Employees hired
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees screened <br /> via phone or web
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Via Screened <br />employees
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees have <br />recieved tax credits
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:8px">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
</div>
So first, you get the index of the clicked button using the index method, then you can use the nth-child selector to change the background color.
View the solution in full screen mode to see what is happening
var index = 1;
$(".button-container button").on('click', function(){
// this will tell you which index you clicked
$('.to-change div:nth-child('+index+')').css('background-color', 'white');
index = $(this).index('button') + 1;
$('.to-change div:nth-child('+index+')').css('background-color', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" id="empListTable">
<div class="form-group to-change col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-weight:bold">
Hired
</div>
<div class="col-xs-6 col-sm-3"style="padding-left: 25px;font-weight:bold">
Screened
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 15px;font-weight:bold">
Pre-Qualified
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-weight:bold">
Approved
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold">
6
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold">
2
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:12px;color:#888;">
Total Number of <br /> Employees hired
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees screened <br /> via phone or web
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Via Screened <br />employees
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees have <br />recieved tax credits
</div>
</div>
<div class="form-group col-md-12 button-container" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:8px">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
</div>
Since you are using AngularJS, you can add ng-style and modify your ng-click to change the div that you want to change. To change the background of the numbers in the corresponding column of your bootstrap row when you click the more info button:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div class="row" id="empListTable" ng-app="">
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-weight:bold">
Hired
</div>
<div class="col-xs-6 col-sm-3"style="padding-left: 25px;font-weight:bold">
Screened
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 15px;font-weight:bold">
Pre-Qualified
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-weight:bold">
Approved
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold" ng-style="col0">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold" ng-style="col1">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold" ng-style="col2">
6
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold" ng-style="col3">
2
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:12px;color:#888;">
Total Number of <br /> Employees hired
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees screened <br /> via phone or web
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Via Screened <br />employees
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees have <br />recieved tax credits
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:8px">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="col0={'background-color':'red'}">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="col1={'background-color':'blue'}">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="col2={'background-color':'green'}">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="col3={'background-color':'yellow'}">More Info <i class="fa fa-arrow-down"></i></button>
</div>
</div>
Go to angular ng-style for more examples.
If you want to do the nth child and ensure that its only divs you use this selector:
div:nth-of-type(2) {
background-color: red;
}
div {
min-height: 200px;
}
div > div {
background-color: blue;
}
div > div:nth-of-type(2) {
background-color: red;
}
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
You can use CSS3 nth-child() selector.
.parent > div:nth-child(1)
{
background-color: blue;
}
For more reference, go here.
div
{
height: 50px;
background: gray;
}
.parent > div:nth-child(1)
{
background: blue;
}
<div class="parent">
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
</div>