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);
});
});
Related
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>
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.
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 4 years ago.
I have some HTML that has the same section repeated a few times, I am trying to get the array of sections to print out in console.log in the JavaScript bellow.
I cant see where I have gone wrong and I get a console error on click of close of
wrapper.getElementsByClassName is not a function
Can anyone help me get this cosole.log to print the amount of arrays please.
JavaScript
_bindShowLess = function () {
var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');
// Not working
// End not working
_showLess.on('click', function () {
var wrapper = document.getElementsByClassName('sectorpage-strengths');
var div = wrapper.getElementsByClassName('container');
var section = [];
for (i = 0; i < div.length; i++) {
section[i] = div[i].getElementsByClassName('sectorpage-strengths-list');
}
console.log(section);
// Removed to stop onscroll to parent div
$('html, body').animate({
scrollTop: _sectorPageStrengths.offset().top
}, 700);
// End
});
};
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>
wrapper is a collection in your code.
Instead of
var wrapper = document.getElementsByClassName('sectorpage-strengths');
Try
var wrapper = document.getElementById('sectorpage-strengths');
Also your i variable is not defined, So instead of
for (i = 0; i < div.length; i++) { // ...
Try
for (var i = 0; i < div.length; i++) { // ...
When you are using jquery you can use jquery class selector, If you want to use document.getElementsByClass you need to get the element by passing index. Also you will like to push values in the section array ike this
section.push(div[i].find('.sectorpage-strengths-list'));
_bindShowLess = function() {
var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');
// Not working
// End not working
_showLess.on('click', function() {
var wrapper = $('#sectorpage-strengths');
var div = wrapper.find('.container');
var section = [];
for (let i = 0; i < div.length; i++) {
section.push(div[i].find('.sectorpage-strengths-list'));
}
console.log(section);
// Removed to stop onscroll to parent div
$('html, body').animate({
scrollTop: _sectorPageStrengths.offset().top
}, 700);
// End
});
};
<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>
Unfortunately the controls that Owl Carousel render will not help me with my current project so I am trying to change a slide with a jQuery click event however I am having no luck.
I have been following the documentation on the Owl Carousel website.
This is the jQuery that I have managed to formulate:
var owl = $('.owl-carousel');
owl.owlCarousel();
$('.car-hub-header-learn-more').click(function() {
owl.trigger('next.owl.carousel');
})
Here is my a tag html:
<i class="fa fa-phone" aria-hidden="true"></i> Request Callback
All carousel html as requested:
<div id="owl-new-car-main" style="position: relative; margin-bottom: -3px; opacity: 1; display: block;" class="owl-carousel owl-theme">
<div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 7612px; left: 0px; display: block; transform: translate3d(0px, 0px, 0px);"><div class="owl-item" style="width: 1903px;"><div class="item">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Scirocco</h1>
</div>
</div>
<div class="row middle-xs">
<div class="car-hub-header-image-box col-lg-12">
<div class="row middle-lg center-lg">
<div class="col-lg-3">
Learn More <i class="fa fa-angle-right" aria-hidden="true"></i>
</div>
<div class="col-lg-6">
<img src="/img/new-car-template/scirocco-transparent.png" alt="Scirocco GT">
</div>
<div class="col-lg-3">
<i class="fa fa-phone" aria-hidden="true"></i> Request Callback
</div>
</div>
</div>
<div class="car-hub-header-info-container col-lg-12">
<div class="row start-lg">
<div class="col-lg-12 car-hub-header-info-box">
<h2>FEATURED DEAL <i class="fa fa-star-o" aria-hidden="true"></i></h2>
<span class="medium-underline"></span>
<h3 class="car-hub-header-model-variant">GT Black Edition - 1.4 TSI Manual</h3>
<div class="row center-lg car-hub-offer-container">
<div class="col-lg-3 car-hub-header-offer-1">
<h2>£198 <span>Monthly</span></h2>
</div>
<div class="col-lg-3 car-hub-header-offer-2">
<h2>£1500 <span>Deposit Contribution</span></h2>
</div>
<div class="col-lg-3 car-hub-header-offer-3">
<h2>£198 <span>Customer Deposit</span></h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div><div class="owl-item" style="width: 1903px;"><div class="item item-2">
<div class="container">
</div>
</div></div></div></div>
</div>
I was hoping that when I click my a tag that the carousel would go to the next slide however this is not the case, I get no errors in my console either.
Any idea where I might be going wrong?
Thanks, Nick
Try this one:
var $dots = $('.owl-dot');
function goToNextCarouselPage() {
var $next = $dots.filter('.active').next();
if (!$next.length)
$next = $dots.first();
$next.trigger('click');
}
$('.car-hub-header-learn-more').click(function () {
goToNextCarouselPage();
});
So I have this jQuery which allows me to click on a element and it will extended something that is hidden. But you can click on multiple elements and they will all be extended. I only want one to be extended at any one point... Could someone help me out?
if( $(window).width() >= 991 ) {
$('.brands-supply .single').click(function() {
$id = $(this).attr('href');
$($id).stop().slideDown('fast');
}, function() {
$($id).stop().slideUp('fast');
});
}
HTML
<div class="brands-supply hidden-sm hidden-xs">
<h2> Our Consultancy Services </h2>
<div class="container">
<div class="row">
<a class="col-md-3 single collapsed" data-toggle="collapse" href="#collapseExample0" style="background: #464648;" aria-expanded="false">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/cookies.png">
</a>
<a class="col-md-3 single collapsed" data-toggle="collapse" href="#collapseExample1" style="background: #5e5e5e;" aria-expanded="false">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/Brian.jpg">
</a>
<a class="col-md-3 single" data-toggle="collapse" href="#collapseExample2" style="background: #9a9a9a;">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/11/Executive_proection_services.jpg">
</a>
<a class="col-md-3 single" data-toggle="collapse" href="#collapseExample3" style="background: #cccccc;">
<img src="">
</a>
</div>
<div class="row">
<div class="col-md-12 collapse" id="collapseExample0" style="height: 0px; background: rgb(70, 70, 72);" aria-expanded="false">
<div class="text">
<div class="row">
<div class="col-md-4">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
</div>
<div class="col-md-7">
<p>Reviews</p>
<p> </p>
<p>This si a p tag</p>
</div>
</div>
</div>
</div>
<div class="col-md-12 collapse" id="collapseExample1" style="height: 0px; background: rgb(94, 94, 94);" aria-expanded="false">
<div class="text">
<div class="row">
<div class="col-md-4">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
</div>
<div class="col-md-7">
<p>Testing</p>
<p> </p>
<p>This is a ap tag</p>
</div>
</div>
</div>
</div>
<div class="col-md-12 collapse" id="collapseExample2" style="background: #9a9a9a;">
<div class="text">
<div class="row">
<div class="col-md-4">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
</div>
<div class="col-md-7">
<p>Projects</p>
<p> </p>
<p>This is a p tag</p>
</div>
</div>
</div>
</div>
<div class="col-md-12 collapse" id="collapseExample3" style="background: #cccccc;">
<div class="text">
<div class="row">
<div class="col-md-4">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
</div>
<div class="col-md-7">
<p>Services</p>
<p> </p>
<p>This is a Ptag</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Any help appreciated!
First click doesn't take two functions as parameters. You should use slideToggle.
if( $(window).width() >= 991 ) {
$('.brands-supply .single').click(
function() {
var id = $(this).attr('href');
$('.brands-supply .single').each(
function () {
var href = $(this).attr('href');
if (href == id) return;
$(href).slideUp('fast');
}
);
$(id).stop().slideToggle('fast');
}
);
}
So on click select all the elements you attached the click to and iterate over them sliding them up if they are not the current clicked href. Then just use slideToggle on the clicked one and it will slide it up or down based on how its currently displayed.
Fiddle: http://jsfiddle.net/AtheistP3ace/xkv31rop/
JS:
same as above
CSS:
div > div {
height: 100px;
width: 100%;
display: none;
}
#id1 {
background: red;
}
#id2 {
background: blue;
}
#id3 {
background: orange;
}
HTML:
<div class="brands-supply">
<a class="single" href="#id1">id1</a>
<a class="single" href="#id2">id2</a>
<a class="single" href="#id3">id3</a>
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
</div>