I'm creating a feature content slider using jQuery and I have hit a few snags trying to get rid of the last few bugs. It is inspired by http://kleientertainment.com/ so check it out and you'll see what im going for. Any suggestions on achieving this effect even with totally new code would be helpful!
The idea is a simple div swap, but with custom animations for each slide that fire when it is loaded. It also MUST fade to black in between each transition, whether autoplay or clicked.
lets get to the code and bugs:
$(document).ready(function () {
//START SLIDES HIDDEN
$('.slide').css({
'position': 'absolute',
'display': 'none'
});
//RUN FIRST SLIDE
runSlideShow(1);
animation1_swap();
//AUTOPLAY FUNCTION
function runSlideShow(slideNumber) {
$('#slide' + slideNumber).fadeIn(1000).delay(10000).fadeOut(1000, function () {
if (slideNumber == 4) {
animation1_swap();
runSlideShow(1);
}
if (slideNumber == 3) {
animation4_swap();
runSlideShow(4);
}
if (slideNumber == 2) {
animation3_swap();
runSlideShow(3);
}
if (slideNumber == 1) {
animation2_swap();
runSlideShow(2);
}
});
//NAVIGATION BUTTONS
$('#bullet1').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation1_swap();
runSlideShow(1);
});
});
$('#bullet2').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation2_swap();
runSlideShow(2);
});
});
$('#bullet3').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation3_swap();
runSlideShow(3);
});
});
$('#bullet4').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation4_swap();
runSlideShow(4);
});
});
}
});
CSS info: .slide sets the dimensions, and #slideX are the individual background images for each. #bulletX are the nav buttons.
Also, the animationX_swap() are the animations specific to that slide. They live in another file and would have made this post way too long.
The bugs:
Right now, the autoplay function is great, you can watch it all day and not see a hiccup. The trouble comes when the nav buttons are used, particularly #bullet1. If i click #bullet1, then go to 2, then back to 1, the autoplay seems to be sped up as the slide fades out before it is supposed to. I am a total beginner but I made it this far, can anyone help me clean this up and essentially reimagine http://kleientertainment.com/ 's slider?
Just discovered jQuery cycle plugin http://malsup.com/jquery/cycle/ from another post.
I remade my slider with that and it preforms exactly as needed. Good stuff!
Related
Is it a bad idea to use jquery's resize() event to toggle an responsive menu?
Okay it's actually not an menu but the idea is almost the same:
I have an sidebar with 4 boxes with different informations. Below a specific device-width I move the sidebar to another place. Now each box is hidden and a <selection> shows up. When the selection changes it'll show the selected box.
$("#my_selection").change(function () {
$.each(all, function () { // "all" are just my boxes
$(this).hide();
});
var val = "#my_box_" + $(this).val();
$(val).show();
});
I hope the concept is clear so far.
So but what happens when the user resizes the window? (aka changing orientation on mobile devices) Right:
Reducing width: Hide boxes
Increasing width again: Boxes are still missing
So.. that sucks. That's my solution:
$(window).resize(function () {
currentDisplay = $('#my_selection').css('display');
if (currentDisplay == lastDisplay)
return;
lastDisplay = currentDisplay;
if (currentDisplay == "none") {
$.each(all, function () {
$(this).show();
})
} else {
$.each(all, function () {
$(this).hide();
})
}
});
But I kinda have the feeling that this is a bit hacky, no? So - are there better solutions for this problem?
Here a simple sketch showing the design I've tried to explain.
I have a mobile site already, and what I want to do is add an image that shows up when you hit the page for 5 seconds. Once 5 seconds has passed it just disappears and you're at the homepage.
Is this possible for an android device? Is there a way to make the image display on the entire screen?
Thanks!
It's easier with jQuery. You can style a div to be your splash page and set a function to run when the page is loaded. After the 5 second duration, you can hide the div.
It could possibly look something like this:
$('div.introDiv').animate( {
opacity: 'toggle' // if div is hidden, it will fade in
},
{
duration: 5000, // in ms
complete: function () {
$('div.introDiv').animate(
{
opacity: 'toggle' // div will fade out
},
{
duration: 5000, // 5 seconds
complete:function () {
// hide div and show main content
}
})
}
}
);
This isn't the only way to do this, but it works.
Try something like...
<body onload="redirectMobile()">
var redirectMobile = function() {
setTimeout(function(){
window.location = 'http://www.google.com/';
},5000);
};
or skip the function and do...
<body onload="setTimeout(function(){window.location = 'http://www.google.com/'},5000)">
Like the previous answer said, jquery or another way might be easier, but this should work with pure javascript.
I've an area which I'd like to add an CSS animation to when it's clicked, and then bring it back with another animation when it's loading.
I'm using Twitter's Bootstrap's tabs and turned on the "fade" transition between the tabs, but want to specifically animate something inside of those tabs while they're switching. I don't want to mess with the root J.S. code there so I'll just settle with a work around.
Heres my code:
$(".tabit").click(function (){
//Drop Center Icon on click
if ($('.centericon').hasClass('fadeInDown')) {
$(".centericon").removeClass('fadeInDown').addClass("fadeOutDown").delay(100).queue(function(next){
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
}
else{
$(".centericon").addClass("fadeOutDown").delay(100).queue(function(next){
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
}
});
The .centericon class is repeated, so after 1 click, multiple instances will have the "fadeInDown" class. Works fine when I click one time, but if I click twice, then the .centericon only gets class .fadeOutDown.
$(".tabit").click(function (){
//Scroll to top when navigating through tabs
//Drop Center Icon on click
if ($('.centericon').hasClass('fadeInDown')) {
$(".centericon").removeClass('fadeInDown').addClass("fadeOutDown");
$(".centericon").delay(100).queue(function() {
$(this).removeClass('fadeOutDown');
$(this).dequeue();
});
$(".centericon").delay(100).removeClass('fadeOutDown').addClass("fadeInDown");
}
else{
$(".centericon").addClass("fadeOutDown");
$(".centericon").delay(100).queue(function() {
$(this).removeClass('fadeOutDown').addClass("fadeInDown");
$(this).dequeue();
});
}
});
Change click to toggle
$(".tabit").toggle(function () {
$(".centericon").removeClass('fadeInDown').addClass("fadeOutDown").delay(100).queue(function (next) {
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
}, function () {
$(".centericon").addClass("fadeOutDown").delay(100).queue(function (next) {
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
});
I'm trying to come up with the most basic example of making a JQuery slide show where you click on the current image you're viewing and you cycle through a gallery of photos. I know its probably not the most basic example, because if I want to add a new image I have to code more JQuery. Is there a more abstract approach where I don't have to code JQuery in terms of div id's and let classes take care of the work? Here is my JQuery
$(document).ready(function() {
$("#pic1").click(function() {
$("#pic1").hide();
$("#pic2").show();
});
$("#pic2").click(function() {
$("#pic2").hide();
$("#pic3").show();
});
$("#pic3").click(function() {
$("#pic3").hide();
$("#pic1").show();
});
});
The rest is here. http://jsfiddle.net/XjdTX/3/
Following code will as simple as you want,
$("#slideframe div").click(function() {
$(this).hide();
if ($(this).next().length > 0) {
$(this).next().show();
} else {
$("#slideframe div").first().show();
}
});
http://jsfiddle.net/XjdTX/5/
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);