I took a custom carousel and I tried to make the slides change automatically. However, whatever I try to do I can't find any mistakes. I would much appreciate some help...
I imported bootstrap.min.css and I followed the bootstrap-carousel instructions but still I couldn't make the carousel automatically change after some set time.
https://codepen.io/Ale3andr0s/pen/ExYPWgQ?editors=1100
HTML:
<div class="slider carousel slide" data-ride="carousel">
<input type="radio" name="slider" title="slide1" checked="checked" class="slider__nav active"/>
<input type="radio" name="slider" title="slide2" class="slider__nav"/>
<input type="radio" name="slider" title="slide3" class="slider__nav"/>
<input type="radio" name="slider" title="slide4" class="slider__nav"/>
<div class="slider__inner data-interval=100">
<div class="slider__contents active"><i class="slider__image fa fa-codepen"></i>
<h2 class="slider__caption">codepen</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-newspaper-o"></i>
<h2 class="slider__caption">newspaper-o</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-television"></i>
<h2 class="slider__caption">television</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-diamond"></i>
<h2 class="slider__caption">diamond</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
</div>
</div>
According to Bootstrap documentation, you will need to add
$('.carousel').carousel({
interval: 2000
})
to your code in order to make the carousel cycling through the slides.
If it still doesn't work, you need to change it to
$(document).ready(function() {
$('.carousel').carousel({
interval: 1200
})
});
Of course, you are going to also need to import both jquery and bootstrap.js, which your code doesn't do.
Related
Is there a way to to make the images of the carousel to go viewport centered when click?
It will only center if you click the bullet navigations, I need it to center if you click the object itself (li)
Here is my html currently, 5 image carousel with content showing below on hover/click
Thanks
<div uk-slider="center: true">
<div class="uk-position-relative">
<div class="uk-slider-container">
<ul class="uk-slider-items uk-grid-collapse uk-grid-small uk-child-width-1-2 uk-child-width-1-2#s uk-child-width-1-5#m company-slider" align="center">
<li><img src="images/image1.jpg""></li>
<li><img src="images/image2.jpg""></li>
....
....
</ul>
</div>
<a class="uk-position-center-left-out slide-ars" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right-out slide-ars" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center"></ul>
</div>
<div>
<ul class="uk-subnav uk-hidden">
<li>Item</li>
<li>Item</li>
...
...
</ul>
<ul class="uk-switcher uk-margin company-content">
<li>
<div>
<h3>Slide Title 1</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam sed facere voluptates, repudiandae atque, rem quia recusandae nisi ducimus voluptatem quo explicabo omnis.</p>
</div>
</li>
<li>
<div>
<h3>Slide Title 2</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam sed facere voluptates, repudiandae atque, rem quia recusandae nisi ducimus voluptatem quo explicabo omnis.</p>
</div>
</li>
...
...
</ul>
</div>
here is the jquery to switch content below the slider when hover or click
var $switch = UIkit.switcher('.uk-subnav', { animation: 'uk-animation-fade', swiping: false });
$('.uk-slider-items li').bind('click mouseover',function(event){
var idVal = $(this).index();
$switch.show(idVal);
});
I'm struggling to create my own simple modal experience for my portfolio. All I'm trying to do is let the user click an image and have a modal box pop up with the information that correlates to the image clicked. Thats all well and fine, however I can't seem to get Jquery to do this programmatically. I'm rusty with my Javascript and something isn't clicking in my brain, i know this shouldn't be hard.
Here is my html
<div class="projects">
<div class="projects__grid">
<a class="modal-trigger" data-target="modal1">
<div class="projects__image">
<div class="modal" id="modal1">
<div class="project__desc modal-content">
<p class="text">1st modal test --- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptas laborum, porro dignissimos quis quod eius. Cupiditate, laborum, eligendi eaque magni maiores placeat, sint voluptate quos dicta ad fugit corporis.
</p>
</div>
</div>
</div>
</a>
<a class="modal-trigger" data-target="modal2">
<div class="projects__image">
<div class="modal" id="modal2">
<div class="project__desc modal-content">
<p class="text">2nd modal test --- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptas laborum, porro dignissimos quis quod eius. Cupiditate, laborum, eligendi eaque magni maiores placeat, sint voluptate quos dicta ad fugit corporis.
</p>
</div>
</div>
</div>
</a>
</div>
</div>
sure I could just create custom classes or id's for every modal trigger, but I want to keep my code DRY. I've tried:
$(this, '.modal-trigger').click(function() {
$(this, '.modal').toggle();
})
and many other similar attacking angles. What am I missing here? I just need to retrieve the nested ID for the related modal content from whichever modal-trigger is clicked. I know I have to use 'this' somehow but I can't seem to figure it out.
Thanks for any insight, sorry if this has been posted before, I couldn't find anything that answered my question..somehow.
I have made a fiddle, where this should work
jsfiddle
$('.modal-trigger').click(function(event) {
let modalExample = $(this).find('.modal');
modalExample.toggle();
});
You have to remove this in your click-event
I have combined a pure CSS tab with a pure CSS accordion. Here are the sources:
Accordion: https://codepen.io/raubaca/pen/PZzpVe
Tabs: https://css-tricks.com/css3-tabs/
I have a pure CSS accordion on the first tab.
The problem is when the accordions are opened in the first tab and another tab is selected, the user can see the opened accordion underneath. How do I collapse the accordions when another tab is selected?
https://jsfiddle.net/Lance_Bitner/ybtqm1hq/
<div class="w3c">
<div id="tab16">
Tab 16
<div>
<div class="tab">
<input id="tab-one" type="checkbox" name="tabs">
<label for="tab-one">Introduction to SharePoint</label>
<div class="tab-content">
<div>
<div class="column2">
<img src="../images/classroom1.png">
<img src="../images/document1.png">
<img src="../images/presentation1.png">
<img src="../images/video1.png">
</div>
</div>
</div>
</div>
<div class="tab">
<input id="tab-two" type="checkbox" name="tabs">
<label for="tab-two">Label Two</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab">
<input id="tab-three" type="checkbox" name="tabs">
<label for="tab-three">Label Three</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
</div>
</div>
<div id="tab17">
Tab 17
<div>... 30 lines of CSS is rather a lot, and...</div>
</div>
<div id="tab18">
Tab 18
<div>... that 2 should have been enough, but...</div>
</div>
</div>
Use input type radio instead of checkbox.
<input id="tab-four" type="radio" name="tabs2">
You can see the example here: https://codepen.io/raubaca/pen/PZzpVe
Cheers.
I'm trying to do something simple with jQuery but having a hard time. I would like to do the following
Loop through each li element and check whether it has a specific class applied 'timeline-inverted'
If the class I'm looking for exists on the li then I would like to apply some further classes 'visible animated fadeInRight'
If the class doesn't exist, then I want to apply an alternative class 'visible animated fadeInLeft'
Here is what I have so far...
HTML Output
<ul class="timeline">
<li class="hidden">
<div class="timeline-image">
<img class="img-circle img-responsive" src="assets/img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2009-2010</h4>
<h4 class="subheading">Our Humble Beginnings</h4>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
</div>
</div>
</li><!-- /timeline item -->
<li class="timeline-inverted hidden">
<div class="timeline-image">
<img class="img-circle img-responsive" src="assets/img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>March 2011</h4>
<h4 class="subheading">An Agency is Born</h4>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
</div>
</div>
</li><!-- /timeline item -->
<li class="hidden">
<div class="timeline-image">
<img class="img-circle img-responsive" src="assets/img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>July 2014</h4>
<h4 class="subheading">Phase Two Expansion</h4>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
</div>
</div>
</li><!-- /timeline item -->
<li class="timeline-inverted hidden">
<div class="timeline-image">
<img class="img-circle img-responsive" src="assets/img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>December 2014</h4>
<h4 class="subheading">Another great month</h4>
</div>
<div class="timeline-body">
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</li><!-- /timeline item -->
<li class="timeline-inverted">
<div class="timeline-image">
<h4>
Be Part
<br>Of Our
<br>Story!
</h4>
</div>
</li><!-- /.timeline -->
</ul>
Jquery
$('.timeline li').each(function () {
if ($(this).hasClass("timeline-inverted")) {
$('.timeline li').removeClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInRight', offset: 100
});
} else {
$(this).removeClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInLeft', offset: 100
});
}
});
If the li item has the timeline-inverted class i want it to fly in from the right and if it doesnt have the timeline-inverted class i want it to fly in from the left!
Thanks paul
*Edit - This code works for me :)
$(function () {
$('.timeline li').each(function () {
if ($(this).hasClass("timeline-inverted")) {
$(this).removeClass("hidden").viewportChecker({
classToAdd:'visible animated fadeInRight', offset: 100
});
} else {
$(this).removeClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInLeft', offset: 100
});
}
});
});
You don't need to use each(). You can do it like following.
$('.timeline li.timeline-inverted').removeClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInRight',
offset: 100
});
$('.timeline li').not('.timeline-inverted').removeClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInLeft',
offset: 100
});
TRy this : put your script inside $(function(){..}); and use $(this) instead of $('.timeline li').
$(function(){
$('.timeline li').each(function () {
if ($(this).hasClass("timeline-inverted")) {
$(this).removeClass("hidden").addClass('visible animated fadeInRight').viewportChecker({
offset: 100
});
} else {
$(this).removeClass("hidden").addClass('visible animated fadeInLeft').viewportChecker({
offset: 100
});
}
});
});
I have a small difficulty with the Bootstrap tabs.
Basically I am using these tabs for a demo site and I have the following HTML structure.
HTML :
<ul class="nav nav-tabs" id="myTab">
<li class="active">General fitness</li>
<li>Cardio</li>
<li>weight training</li>
<li>weight loss</li>
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade in active">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right animated bounceInLeft">
</div>
<div class="col-md-5 animated bounceInRight" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
<div id="sectionB" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
</div>
<div class="col-md-5" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
<div id="sectionC" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
</div>
<div class="col-md-5" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
<div id="sectionD" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
</div>
<div class="col-md-5" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
</div>
Now this works perfectly fine, I have used this tabs feature for a lot of old sites of mine, but this time I decided to add some css-3 animations, so let's focus on the part that I am having difficulty with. Basically, every time a tab is clicked I want the <img> and the <div class="col-md-5"> to be added with the classes animated bounceInLeft and animated bounceInRight respectively.
Now, what did I do to achieve this, basically every time the tabs are clicked an event fires, hidden.bs.tab and every time a tab is shown an event fires shown.bs.tab. Now I wrote the below code :
$('#myTab').on('hidden.bs.tab' , function(){
// console.log('tab hidden');
$('.tab-content img').removeClass('animated bounceInLeft');
$('.tab-content .col-md-5').removeClass('animated bounceInRight');
});
$('#myTab').on('shown.bs.tab' , function(){
// console.log('tab hidden');
if ($('.tab-pane').hasClass('active')) {
$('.tab-content img' ).addClass('animated bounceInLeft');
$('.tab-content .col-md-5').addClass('animated bounceInRight');
}
});
There is a big flaw with the above code I have written though, what I wanted to achieve is when I click on a tab I only want the <img> and the <div class="col-md-5"> of that particular tab to be added with the classes animated bounceInLeft and animated bounceInRight respectively. But what the above code is really doing is removing the classes from all the elements and immediately re-adding them.
I am thinking the this keyword maybe needs to be used, but am I not sure how to implement this; can somebody tell me what am I missing?
I don't know if Bootstrap has animated classes?
However you could use this repo to achieve the preferred animation you want.
Add this:
<link rel="stylesheet" href="animate.min.css">
I've updated the HTML slightly(added class text-content to every col-md-5).
<div id="sectionD" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="http://lorempixel.com/400/200/" alt="stretching exercise" class="pull-right">
</div>
<div class="col-md-5 text-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
And this jQuery
$(document).ready(function(){
//make first tab active
$("#myTab li:eq(0) a").tab('show');
$('#myTab').on('hidden.bs.tab' , function(){
$('.text-content').removeClass('animated bounceInRight');
$('img').removeClass('animated bounceInLeft');
});
$('#myTab').on('shown.bs.tab' , function(){
$('.active').find('.text-content').addClass('animated bounceInRight');
$('.active').find('img').addClass('animated bounceInLeft');
});
});
Using a little setTimeout magic, I found the solution:
$('#myTab').on('click' , 'li a' , function(){
$this = $(this);
var str_href = $this.attr('href');
str_image = str_href + ' ' + 'img';
str_contentdiv = str_href + ' ' + '.add-animation';
setTimeout(function(){
$(str_image).addClass('animated bounceInLeft');
$(str_contentdiv).addClass('animated bounceInRight');
setTimeout( function(){
$(str_image).removeClass('animated bounceInLeft');
$(str_contentdiv).removeClass('animated bounceInRight');
}, 2000);
}, 100);
});
Note: to the col-md-5 that I add the animated bounceInRight class I also add the class add-animation as a hook, could have used a css selector, but never mind.
Drawback of this method : if the user turns out to be a click maniac, the animations will not show, because that's the way setTimeout works :D