I am struggling to find a solution to repeat action when user did already one time. For example, when user comes on site there is carousel which can be swiped, slided, and eventually opened in order to see full gallery. I have managed to do that but when the user made this action and closes modal box, he is not able to repeat the same action. Anyone has idea how to solve it?
Here is js
$(document).ready(function () {
// - jQuery
// Swipe feature
$('#myCarousel').swiperight(function () {
$('#myCarousel').carousel('prev');
});
$('#myCarousel').swipeleft(function () {
$('#myCarousel').carousel('next');
});
// Swipe feature for modal
$('#modal-carousel').swiperight(function () {
$('#modal-carousel').carousel('prev');
console.log('swipe_right');
});
$('#modal-carousel').swipeleft(function () {
$('#modal-carousel').carousel('next');
console.log('swipe_left');
});
// Additional toolbar with "close" button appears
$(window).on('shown.bs.modal', function () {
$('modal').modal('show');
$('#toolbar').css('display', 'block'); //.css('position','fixed')
$('.carousel-inner').css('overflow', 'visible');
// Remove entirely in final version
$('.item').css('background', 'none')
console.log('fires toolbar');
});
$(window).on('hidden.bs.modal', function () {
$('modal').modal('show');
$('#toolbar').css('display', 'none'); //.css('position','absolute')
$('.carousel-inner').css('overflow', 'hidden');
// Remove entirely in final version
$('.item').css('background', '#60b1ff')
console.log('closes toolbar when modal is closed');
});
// Closes modal on toolbar
$('.trigger').click(function () {
$('.modal').modal('hide');
});
/* Modal Carousel from version 3. adjusted to version 2.3 */
/* activate the carousel */
$("#modal-carousel").carousel({
interval : false,
});
/* when clicking a image */
$(".thumbnail").click(function () {
var content = $(".carousel-inner");
content.empty();
var id = this.id;
var repo = $('#img-repo .item');
var repoCopy = repo.filter('#' + id).clone();
var active = repoCopy.first();
var next = repoCopy.last();
active.addClass('active');
content.append(repoCopy);
// show the modal
$('#modal-gallery').modal('show');
});
// Carousel pause - prevents automatic slideshow
$('.carousel').carousel({
pause : true,
interval : false
});
// Close window
$('.modal-backdrop').modal({
show : false
});
}); //end of script
Problem is at the content.empty(); which after executed action stays empty. Any ideas how to solve this?
Fiddle
Fiddle 2 with working carousel. Just imagine that you are able to open one of those images in modal.
Related
I'm using a Bootstrap 4 modal to show a big navigation.
To open the navigation I'm using a toggle button with a CSS animation. The animation changes a hamburger menu icon to an X.
The problem is, that if you click to fast and the modal animation isn't ready, the button gets confused and shows the X even at an already closed menu/modal.
Is there any way to disable the button until the modal animation is ready?
Here's my code:
$('.menu').click(function(){
$('#burger').toggleClass('active');
});
I saw, that there is a way to listen to the modal animation:
$('#myModal').on('shown', function () {
// do something…
})
But I could not figure out how to implement it in my function.
Here's my actual code: https://codepen.io/cray_code/pen/JjjqRpN
You can just tie toggling of the burger to both show/hide modal events..
var toggleBurger = function () {
$('#burger').toggleClass('active-sandwich');
}
$('#nav-modal').on('show.bs.modal', toggleBurger)
$('#nav-modal').on('hide.bs.modal', toggleBurger)
Demo
Well you could write it like this
$(document).ready(function(){
var isShown = false;
$('#nav-modal').on('shown.bs.modal', function(){
isShown = false;
$("#burger").css("display", "block");
});
if(!isShown)
{
$('#burger').on('click', function(){
isShown = true;
$("#burger").css("display", "none");
});
}
$('#nav-modal').on('hidden.bs.modal', function () {
isShown = false;
$("#burger").css("display", "block");
});
Sorry if the code kind of messy, but I hope you could understand what I mean.
basically I only put some boolean to make sure its showing or not.
After that I validate it. If isshown is false then you can't click until isshown true.
I have an application working fine on bootstrap3 that open various modals once and i want to add another modal over an open modal (i know the issues with multiples modals on bootstrap3).
I find a jsfiddle that can i use.
The problem appears when the user press the 'ESC' key the modal on bottom is closed! and i want to close the modal on top.....
Can anyone tell me a clue for open only two modals one front other?
$(document).ready(function() {
$('#openBtn').click(function() {
$('#myModal').modal({
show: true
})
});
$(document).on({
'show.bs.modal': function() {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
},
'hidden.bs.modal': function() {
if ($('.modal:visible').length > 0) {
// restore the modal-open class to the body element, so that scrolling works
// properly after de-stacking a modal.
setTimeout(function() {
$(document.body).addClass('modal-open');
}, 0);
}
}
}, '.modal');
});
this is the code that i'm working
your help will be very appreciated!
I have a product page and for every product is a modal, and for every modal is a owl slider.
When I a product for the first time it shows up well but when I close that product and open another product the owl slider is broken.
I tried (or I feel like I tried) every solution I found on internet but still I can't figure it out.
Here is my jQuery:
var owlCarousel = $('.owl-carousel');
$('.modal').on('shown.bs.modal', function (event) {
owlCarousel.owlCarousel({
loop: true,
items: 1,
margin: 100
});
});
$('.modal').on('hidden.bs.modal', function (event) {
$('.owl-carousel').trigger('destroy.owl.carousel');
});
I hope I explained my problem well!
Note: When I open a second product this error shows up every second I wait
TypeError: null is not an object (evaluating 'this.e._checkVisibile')
On line 620 in owl.carousel.js change this:
Owl.prototype.onThrottledResize = function() {
window.clearTimeout(this.resizeTimer);
this.resizeTimer = window.setTimeout(this.e._onResize, this.settings.responsiveRefreshRate);
};
to this:
Owl.prototype.onThrottledResize = function() {
if(this.e !=null) {
window.clearTimeout(this.resizeTimer);
this.resizeTimer = window.setTimeout(this.e._onResize, this.settings.responsiveRefreshRate);
}
};
worked for me :)
Try checking for the visible owl carousel element and call owlCarousel and destroy events on it.
var owlCarousel;
$('.modal').on('shown.bs.modal', function (event) {
owlCarousel = $('.owl-carousel:visible');
owlCarousel.owlCarousel({
loop: true,
items: 1,
margin: 100
});
});
$('.modal').on('hidden.bs.modal', function (event) {
owlCarousel.trigger('destroy.owl.carousel');
});
The problem:
In the example provided below, I have a sidenav with options, you click to reveal a toggled div. If you click the third item in the menu "Dolar", you will see you get a dropdown with three options appear below the link.
This is great, but I want the dropdown to close when I click on the other links. I'm not sure how to achieve this.
jsFiddle:
http://jsfiddle.net/visualdecree/4A23Z/39/
jQuery:
Note: I know it might be messy, I'm still learning this.
$('.sn a, .sn-alt a').on('click',function(){ // Sidenav panel script
var panID = $("#" + $(this).data('panel') );
$("div[id*='sn-pan-']")
.stop()
.hide({width:'toggle'},400);
$(panID)
.css({'left' : '139px','overflow':'visible'})
.stop()
.animate
({ width: "toggle", opacity: "toggle"
}, { duration: "slow" });
$(".control-view").hide(); // Fadein menu close button
$(".control-view").not(":visible").stop().delay(400).fadeTo("fast", 0.33);
});
$('.sn, .sn-drop').click(function(e) {
$('ul.sidenav li').not(this).removeClass('active'); // Active class removal / add
$(this).stop(true, true).toggleClass("active");
});
$('.sn-alt').click(function(e) {
$('ul.additional li').not(this).removeClass('active'); // Active class removal / add
$(this).stop(true, true).toggleClass("active");
});
$(".control-view").hover( // Hover effect for menu close button
function () {
$(".control-view").stop().hide().fadeTo("fast", 1); // Hover in
},
function () {
$(".control-view").fadeTo("normal",0.33); // Fade back to previous set opacity
});
$('.control-view').click(function(e) {
$("div[id*='sn-pan-']")
.stop(true,true)
.hide({width:'toggle'}, 100);
$('ul.sidenav li').not(this).removeClass('active');
$(".control-view").stop().fadeOut("fast");
});
$(".additional").hide(); // Controls for the 'design' dropdown
$(".sn-drop").click(function(){
$(".additional").slideToggle(300);
var scrt_var = Math.random();
return false; //Prevent the browser jump to the link anchor
});
Just add this JQuery, when you click on other link in your sidebar, it will close your .additional
$(".sn").click(function(){
$(".additional").slideUp(300);
var scrt_var = Math.random();
return false; //Prevent the browser jump to the link anchor
});
​
If it's just the links in the left that you want to be the trigger to close the dropdown then you can do it simply with this:
$('.sn').click(function(){
$('.additional').slideUp();
})
The Bootstrap carousel is a strange beast. I've tried tweaking $next to prevent infinite looping but end up either breaking it or preventing the slides from going backwards when reaching the end.
I would like the carousel to only slide within the list and not infinitely loop.
Any help would be appreciated.
$next = $next.length ? $next : this.$element.find('.item')[fallback]()
if ($next.hasClass('active')) return
if ($.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$next.addClass(type)
$next[0].offsetWidth // force reflow
$active.addClass(direction)
$next.addClass(direction)
this.$element.one($.support.transition.end, function() {
$next.removeClass([type, direction].join(' ')).addClass('active')
$active.removeClass(['active', direction].join(' '))
that.sliding = false
setTimeout(function() {
that.$element.trigger('slid')
}, 0)
})
} else {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$active.removeClass('active')
$next.addClass('active')
this.sliding = false
this.$element.trigger('slid')
}
Update: This is unrelated to "autoplay" I'm specifically referring to manually pressing the left and right buttons.
For the carousel to not infinitely loop (using Bootstrap 3.0.0), and stop at the last slide unless the "next" arrow is clicked, the following is the best way to do it:
$('.carousel').carousel({
interval: 5000,
wrap: false
});
Setting the wrap option to false tells the carousel to stop cycling through the slides automatically. I hope this answers your question correctly.
You could just add some code to the page to hide the appropriate carousel controls after a slid event:
$('#myCarousel').on('slid', '', function() {
var $this = $(this);
$this.children('.carousel-control').show();
if($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
} else if($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right.carousel-control').hide();
}
});
This example assumes the markup used on the Twitter Bootstrap example carousel.
Make sure to hide the left one when you open the page.
Add attribute data-wrap="false" in Div
The easiest way to do this is as follows:
//intro slider
$('#carousel_fade_intro').carousel({
interval: 2500,
pause: "false"
})
//Stop intro slider on last item
var cnt = $('#carousel_fade_intro .item').length;
$('#carousel_fade_intro').on('slid', '', function() {
cnt--;
if (cnt == 1) {
$('#carousel_fade_intro').carousel('pause');
}
});
Not sure if this is only relevent to the newest version of Bootstrap but setting data-wrap="false" on the outermost carousel container will prevent it from proceeding past the final slide.
source: http://getbootstrap.com/javascript/#carousel-options
For people looking for a solution for Bootstrap 3 working for multiple carousels on same page try this:
$(function() {
// init carousel
$('.carousel').carousel({
pause: true, // init without autoplay (optional)
interval: false, // do not autoplay after sliding (optional)
wrap:false // do not loop
});
// init carousels with hidden left control:
$('.carousel').children('.left.carousel-control').hide();
});
// execute function after sliding:
$('.carousel').on('slid.bs.carousel', function () {
// This variable contains all kinds of data and methods related to the carousel
var carouselData = $(this).data('bs.carousel');
// get current index of active element
var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));
// hide carousel controls at begin and end of slides
$(this).children('.carousel-control').show();
if(currentIndex == 0){
$(this).children('.left.carousel-control').fadeOut();
}else if(currentIndex+1 == carouselData.$items.length){
$(this).children('.right.carousel-control').fadeOut();
}
});
Please let me now if this is not working in your case.
if you are using bootstrap 3 use this
$('.carousel').carousel({
wrap: false
});
The codes posted here have two problems: doesn't work if you have more than one carousel on the same page and doesn't work if you click on the indicator dots. Also, in Bootstrap 3 the event has changed name.
The below code is an updated version of this code. And here you can find a more detailed explanation
checkitem = function() {
var $this;
$this = $("#slideshow");
if ($("#slideshow .carousel-inner .item:first").hasClass("active")) {
$this.children(".left").hide();
$this.children(".right").show();
} else if ($("#slideshow .carousel-inner .item:last").hasClass("active")) {
$this.children(".right").hide();
$this.children(".left").show();
} else {
$this.children(".carousel-control").show();
}
};
checkitem();
$("#slideshow").on("slid.bs.carousel", "", checkitem);