I am working on simple HTML web but I am stuck on something like 3 boxes I want accordingly in one line you can check the screenshot of example for that how I want I tried many times to do by every way but I failed to solve or sort out this issue kindly please help me in that
see this screenshot how it showing
Here is the screenshot of the example
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="property-wrap mb-2 row no-gutter" id="pp">
<div class="col-md-4 col-sm-20">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/smart1'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase primary-bg">for rent</span> -->
<a href="https://supershop.ng/smart1" class="image-effect overlay">
<img src="assets/images/smart1-logo.svg" alt="" style="width: 100px; height: 100px; border-radius: 100px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">SuperShopper</h4>
<div class="mb-15">
<p>Lekki Phase 1, Lekki</p>
</div>
</div>
<!--content-->
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/green_way'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase primary-bg">for rent</span> -->
<a href="https://supershop.ng/green_way" class="image-effect overlay">
<img src="assets/images/green_way.png" alt="" style="width: 100px; height: 100px; border-radius: 100px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">GreenWay Supermarket</h4>
<div class="mb-15">
<p>142 Lekki - Epe Expressway, Beside Monarch Event Center, Lekki</p>
</div>
</div>
<!--content-->
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/pjv1'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase bg-blue">for sale</span> -->
<a href="#" class="image-effect overlay">
<img src="assets/images/pjv.png" alt="" style="width: 100px; height: 100px; border-radius: 0px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">PJV Supermarket</h4>
<div class="mb-15">
<p>36b Kusenla Road, Ikate Elegushi, Lekki</p>
</div>
<!--content-->
</div>
<!--content-->
</div>
</div>
Related
I wanted to design an audio player footer for a website using HTML, CSS (Bootstrap), but I am struggling with figuring out the layout for columns to align all the assets properly. Here is the layout I want to achieve:
Here is what I have currently:
This is the following code that I have:
<div class="column-wrapper-player" style="align-items: center;">
<div class="col-left-player">
<img src="/img.png" class="track ml-5" width="60" height="60"> </img>
</div>
<div class="col-right-player">
<h5 class="bold-font"> NAME </h5>
<p> ARTIST </p>
</div>
</div>
.column-wrapper-player {
width:100%;
height:100%;
display: flex;
flex-direction: row;
}
.column-left-player {
width: 50px;
height: 100%;
flex-shrink: 0;
}
.column-right-player {
width: 100%;
}
How can I go about achieving the model layout with custom columns?
Edit: I have all the necessary assets, including the buttons and sliders. I just need to figure out how to align everything properly and cleanly in columns.
Very nice question, I really enjoyed doing this layout.
I have made a full live Youtube video on this layout. Please check the below link:
https://youtu.be/GKz6AH-e7FI
And I have added the code also here in Stackoverflow
Let me know if you have any questions.
div.progress{height:3px;}
.volume-progress{width:100px;}
.play-icons{ margin-top: 2px;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div class="container-fluid fixed-bottom bg-dark">
<div class="row">
<div class="col-3">
<div class="media">
<img src="https://organicthemes.com/demo/profile/files/2018/05/profile-pic.jpg" style="width:64px;height:64px" class="align-self-center mr-3" alt="...">
<div class="media-body text-white">
<h5 class="mt-0">Song name</h5>
<p>Artist name</p>
</div>
</div>
</div>
<div class="col-6">
<div class="play-icons text-white align-items-center d-flex justify-content-center">
<i class="material-icons text-success">shuffle</i>
<i class="material-icons ml-4">skip_previous</i>
<i class="material-icons ml-4" style="font-size:40px">play_circle_outline</i>
<i class="material-icons ml-4">skip_next</i>
<i class="material-icons ml-4 text-success">repeat</i>
</div>
<div class="progress-block mt-1 text-white d-flex justify-content-between align-items-center">
<div class="mr-2">0:00</div>
<div class="progress w-100">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="mr-2">2:59</div>
</div>
</div>
<div class="col-3 text-white d-inline-flex flex-row-reverse align-items-center">
<div class="ml-2"> <i class="material-icons">open_in_full</i> </div>
<div class="progress volume-progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="ml-2"> <i class="material-icons">volume_down</i> </div>
<div class="ml-2"> <i class="material-icons">queue_music</i> </div>
<div class="ml-2"> <i class="material-icons">playlist_play</i> </div>
</div>
</div>
</div>
I have created a gallery that gets filtered two ways. One by click of a button and the other with a search filter. Filters are working perfectly, except when divs are hidden on filter the remaining showing divs do not float next to each other.
this is what it looks like before filtered:
After filtering this is what it looks like:
How can I get it all of dancer2 to be next to each other and only start a new row every 4 dancers?
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".column").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
.column {
float: right;
display: none;
/* Hide columns by default */
}
.content {
background-color: white;
padding: 10px;
text-align: center;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row container" style="margin: auto;">
<div class="col-sm-4">
<input type="text" id="myInput" placeholder="Search for names..">
</div>
<div class="col-sm-8" style="text-align: right;">
<div id="myBtnContainer" class="container" style="padding-bottom: 2rem;">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('teachera')"> teachera</button>
<button class="btn" onclick="filterSelection('teacherb')"> teacherb</button>
<button class="btn" onclick="filterSelection('teacherc')"> teacherc</button>
</div>
</div>
</div>
<!--DANCER GALLERY-->
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer1" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer2" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer3" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer4" style="width:80%; height: 200px;">
<h4>Dancer4</h4>
<p>teachera</p>
</div>
</a>
</div>
</div>
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer1a" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer2a" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer3a" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer4a" style="width:80%; height: 200px;">
<h4>Dancer4</h4>
<p>teacherb</p>
</div>
</a>
</div>
</div>
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer1b" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer2b" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer3b" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer4b" style="width:80%; height: 200px;">
<h4 class="dancerName">Dancer4</h4>
<p>teacherc</p>
</div>
</a>
</div>
</div>
When you declare a new div with the "row" class it will start a new row. If you want all of those elements to show side-by-side, they should all be in the same "row" div. The bootstrap styles will automatically keep a maximum of 4 pictures side-by-side and wrap to a new row (because you have col-sm-3 as the class for the individual pictures). Bootstrap rows go up to 12 units long. Each time a new element is added, if it exceeds the 12, it will wrap to the next line.
I have a few HTML elements that are the same, just different text.
On click of view less I hope to have a console print out of the number (array object in the list) I clicked show less on.
However I get
[HTMLCollection(1)]
printed twice no matter what show less html section I click on.
Is there a reason for this? and how to fix it.
Objective
I want to get the current element array number so I can scroll to the top of the dynamic array number so I can have many HTML elements and the click scroll top event would only scroll to the top of its own section.
HTML
<section id="sectorpage-strengths" class="sectorpage-strengths showLess" data-desktop="3" data-mobile="3" data-tablet="3">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>
Commercial Services
</h2>
</div>
</div>
<div class="row sectorpage-strengths-list">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Datamonitor Healthcare </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Timely, In-Depth, Research And Expert Analysis Of The Biopharma Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Biomedtracker </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Real-Time Analysis Of Major Market-Moving Events In The Pharma And Biotech Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Medtrack </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Track Companies From Discovery Through Patent Expiry, Loss Of Market Exclusivity And Generic Entry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=350&la=en-US&hash=67BE069F2E47FDDB97A49883D923435DEB8382B0" class="img-responsive sector-responisve-img" width="350" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Strategic Transactions </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Not All Deals Are The Same – Rely On The Pioneer In Deal-Making Intelligence</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">
View more
<br>
<em class="informa-icon glyphicon glyphicon-plus-sign"></em>
</span>
<span class="center-block view-all-sectors-btn text-center less" role="button">
View Less
<br>
<em class="informa-icon glyphicon glyphicon-minus-sign"></em>
</span>
</div>
</div>
</section>
JavaScript
_bindShowLess = function () {
var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');
_showLess.on('click', function () {
var wrapper = $('#sectorpage-strengths');
var div = wrapper.find('.container');
var section = [];
for (var i = 0; i < div.length; i++) {
section[i] = div[i].getElementsByClassName('sectorpage-strengths-list');
}
console.log(section);
$('html, body').animate({
scrollTop: _sectorPageStrengths.offset().top
}, 700);
});
};
I'm building a web application where I want to display product like in e-commerce website. The images of random dimension have to be fit in a particular box.
I have tried following code but it distorts the image if height is more than width, but looks perfectly if it is vice versa.
<div class="panel panel-default text-center">
<div class="panel-heading" style="padding:2px;">
<img src="images/abc.jpg" style="width:100%;height:220px;" /></a>
</div>
<div class="panel-body w3-card" style="padding-top:0px;background-color:#ebebeb;">
<a href="#" class="pull-left" style=" text-decoration: none;"><h5 style="margin-bottom:0px;" ><b>Product One</b></h5>
<p class="pull-left" style="margin-top:0px;color:#6e6e6e;margin-bottom:0px;"><i class="fa fa-inr"></i> 10,000/-</p></a>
</div>
</div>
add another attributes in your style :
<div class="panel-heading" style="padding:2px;">
<img src="images/abc.jpg" style="width:100%;height:auto;max-width:100px;" /></a>
</div>
Does it work now?
The following is the answer with little modification from the comment.
<div class="panel panel-default text-center">
<div class="panel-heading" style="padding:2px;overflow:hidden;">
<img src="images/abc.jpg" style="max-width: 100%; height: 100%;" /></a>
</div>
<div class="panel-body w3-card" style="padding-top:0px;background-color:#ebebeb;">
<a href="#" class="pull-left" style=" text-decoration: none;"><h5 style="margin-bottom:0px;" ><b>Product One</b></h5>
<p class="pull-left" style="margin-top:0px;color:#6e6e6e;margin-bottom:0px;"><i class="fa fa-inr"></i> 10,000/-</p></a>
</div>
</div>
</div>
If you don't care much about Edge / IE, you can use object-fit like in the example below:
<div class="panel panel-default text-center">
<div class="panel-heading" style="padding:2px;height:200px;">
<img src="http://placehold.it/1000x1000" style="width:100%;height:100%;object-fit:cover;" />
</div>
<div class="panel-body w3-card" style="padding-top:0px;background-color:#ebebeb;">
<a href="#" class="pull-left" style=" text-decoration: none;">
<h5 style="margin-bottom:0px;"><b>Product One</b></h5>
<p class="pull-left" style="margin-top:0px;color:#6e6e6e;margin-bottom:0px;"><i class="fa fa-inr"></i> 10,000/-</p>
</a>
</div>
If you do care and if you can use background-image, i'd advise you going the way below:
div.panel-heading {
height: 200px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-image: url('http://placehold.it/1000x1000');
}
<div class="panel panel-default text-center">
<div class="panel-heading" style="padding:2px;height:200px;">
</div>
<div class="panel-body w3-card" style="padding-top:0px;background-color:#ebebeb;">
<a href="#" class="pull-left" style=" text-decoration: none;">
<h5 style="margin-bottom:0px;"><b>Product One</b></h5>
<p class="pull-left" style="margin-top:0px;color:#6e6e6e;margin-bottom:0px;"><i class="fa fa-inr"></i> 10,000/-</p>
</a>
</div>
My Code is like this
$(document).ready(function() {
$('.slides').children('.item').each(function() {
var tValue = $(this).find('#campaignValidity').val(); // "this" is the current element in the loop
tTimer = $(this).find('.timer');
alert(tTimer);
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="content apc banner no-padding" id="pos_1197">
<div class="slides slick-initialized slick-slider slick-dotted" role="toolbar">
<div class="slick-prev slick-arrow" style="display: table;"><i class="ion-chevron-left"></i>
</div>
<div aria-live="polite" class="slick-list draggable" style="height: 550px;">
<div class="slick-track" role="listbox" style="opacity: 1; width: 3000px;">
<div class="item myclass medium c5-bg odd slick-slide slick-current slick-active" style="background-image: url("/media/1006/1140x550.png?anchor=center&mode=crop&width=1600&height=700&rnd=131237861660000000"); width: 1500px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;"
data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide00">
<div class="image hidden-lg hidden-md">
<img src="/media/1006/1140x550.png?anchor=center&mode=crop&width=1140&height=600&rnd=131237861660000000" alt="Banner_Home">
</div>
<div class="table-cell">
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s">
<p class="heading main c3-text">WIn a Spectacular gift by donating through us</p>
<p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="0">Donate</a>
</p>
<h2 class="timer"></h2>
<input id="campaignValidity" type="hidden" value="11/17/2016 6:03:34 PM" tabindex="0">
</div>
</div>
</div>
</div>
<div class="item myclass medium c5-bg even slick-slide" style="background-image: url("/media/1006/1140x550.png?anchor=center&mode=crop&width=1600&height=700&rnd=131237861660000000"); width: 1500px; position: relative; left: -1500px; top: 0px; z-index: 998; opacity: 0;"
data-slick-index="1" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide01">
<div class="image hidden-lg hidden-md">
<img src="/media/1006/1140x550.png?anchor=center&mode=crop&width=1140&height=600&rnd=131237861660000000" alt="Banner_Home2">
</div>
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s">
<p class="heading main c3-text">WIn a Spectacular gift by donating through us</p>
<p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="-1">Donate</a>
</p>
<h2 class="timer"></h2>
<input id="campaignValidity" type="hidden" value="11/19/2016 6:03:34 PM" tabindex="-1">
</div>
</div>
</div>
</div>
</section>
Everything looks okay to me, but for some reason the loop is not working and I am not getting anything as Alert message. Can any one let me know what I am doing wrong here?
The id should be unique in your code so use class instead otherwise only the first element with the id can access. Although you need to use find() method instead of children() since it only selects direct child and .item is not the direct child.
$(document).ready(function() {
$('.slides').find('.item').each(function() {
var tValue = $(this).find('.campaignValidity').val();
tTimer = $(this).find('.timer');
alert(tValue);
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="content apc banner no-padding" id="pos_1197">
<div class="slides slick-initialized slick-slider slick-dotted" role="toolbar">
<div class="slick-prev slick-arrow" style="display: table;"><i class="ion-chevron-left"></i>
</div>
<div aria-live="polite" class="slick-list draggable" style="height: 550px;">
<div class="slick-track" role="listbox" style="opacity: 1; width: 3000px;">
<div class="item myclass medium c5-bg odd slick-slide slick-current slick-active" style="background-image: url("/media/1006/1140x550.png?anchor=center&mode=crop&width=1600&height=700&rnd=131237861660000000"); width: 1500px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;"
data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide00">
<div class="image hidden-lg hidden-md">
<img src="/media/1006/1140x550.png?anchor=center&mode=crop&width=1140&height=600&rnd=131237861660000000" alt="Banner_Home">
</div>
<div class="table-cell">
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s">
<p class="heading main c3-text">WIn a Spectacular gift by donating through us</p>
<p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="0">Donate</a>
</p>
<h2 class="timer"></h2>
<input class="campaignValidity" type="hidden" value="11/17/2016 6:03:34 PM" tabindex="0">
</div>
</div>
</div>
</div>
<div class="item myclass medium c5-bg even slick-slide" style="background-image: url("/media/1006/1140x550.png?anchor=center&mode=crop&width=1600&height=700&rnd=131237861660000000"); width: 1500px; position: relative; left: -1500px; top: 0px; z-index: 998; opacity: 0;"
data-slick-index="1" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide01">
<div class="image hidden-lg hidden-md">
<img src="/media/1006/1140x550.png?anchor=center&mode=crop&width=1140&height=600&rnd=131237861660000000" alt="Banner_Home2">
</div>
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s">
<p class="heading main c3-text">WIn a Spectacular gift by donating through us</p>
<p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="-1">Donate</a>
</p>
<h2 class="timer"></h2>
<input class="campaignValidity" type="hidden" value="11/19/2016 6:03:34 PM" tabindex="-1">
</div>
</div>
</div>
</div>
</section>
You selector is not able to select the .item div properly. You can always debug such issues by doing console.log() and check in the develop console.
As a resolution you can check for .item class div inside the .slides context like below.
$(document).ready(function() {
var context = $('.slides');
$('.item',context).each(function() {
var tValue = $(this).find('#campaignValidity').val(); // "this" is the current element in the loop
console.log(tValue);
tTimer = $(this).find('.timer');
alert(tTimer);
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="content apc banner no-padding" id="pos_1197">
<div class="slides slick-initialized slick-slider slick-dotted" role="toolbar">
<div class="slick-prev slick-arrow" style="display: table;"><i class="ion-chevron-left"></i>
</div>
<div aria-live="polite" class="slick-list draggable" style="height: 550px;">
<div class="slick-track" role="listbox" style="opacity: 1; width: 3000px;">
<div class="item myclass medium c5-bg odd slick-slide slick-current slick-active" style="background-image: url("/media/1006/1140x550.png?anchor=center&mode=crop&width=1600&height=700&rnd=131237861660000000"); width: 1500px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;"
data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide00">
<div class="image hidden-lg hidden-md">
<img src="/media/1006/1140x550.png?anchor=center&mode=crop&width=1140&height=600&rnd=131237861660000000" alt="Banner_Home">
</div>
<div class="table-cell">
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s">
<p class="heading main c3-text">WIn a Spectacular gift by donating through us</p>
<p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="0">Donate</a>
</p>
<h2 class="timer"></h2>
<input id="campaignValidity" type="hidden" value="11/17/2016 6:03:34 PM" tabindex="0">
</div>
</div>
</div>
</div>
<div class="item myclass medium c5-bg even slick-slide" style="background-image: url("/media/1006/1140x550.png?anchor=center&mode=crop&width=1600&height=700&rnd=131237861660000000"); width: 1500px; position: relative; left: -1500px; top: 0px; z-index: 998; opacity: 0;"
data-slick-index="1" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide01">
<div class="image hidden-lg hidden-md">
<img src="/media/1006/1140x550.png?anchor=center&mode=crop&width=1140&height=600&rnd=131237861660000000" alt="Banner_Home2">
</div>
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s">
<p class="heading main c3-text">WIn a Spectacular gift by donating through us</p>
<p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="-1">Donate</a>
</p>
<h2 class="timer"></h2>
<input id="campaignValidity" type="hidden" value="11/19/2016 6:03:34 PM" tabindex="-1">
</div>
</div>
</div>
</div>
</section>
Try this one:
$(document).ready(function() {
$('.slides').find('.item').each(function() {
var tValue = $(this).find('#campaignValidity').val(); // "this" is the current element in the loop
alert(tValue);
tTimer = $(this).find('.timer');
alert(tTimer);
});
});