Dots for Children in div. A jQuery headache - PART 2 - javascript

So this is part 2 of my previous question (was advised to start a new question for this one).Just for reference here is my previous post: Dots for Children in div. A jQuery headache
My question now is: How does one go about adding an "active" class/id to the "imgdots" div for styling purposes?For example:Say I'm on image 4 then I want the 4th "imgdots" div to be another colour.Again, any help would be much appreciated! EDITI have set up a fiddle containing what I have thus far. The initial image slider was from a tutorial I followed and kinda pieced it all together from there. Here is the link: jsfiddle.net/Reinhardt/cgt5M/8/

Have you seen nth child css?
http://www.w3schools.com/cssref/sel_nth-child.asp
#showContainer:nth-child(4)
{
background:#ff0000;
}

Try
/* The jQuery plugin */
(function ($) {
$.fn.simpleShow = function (settings) {
var config = {
'tranTimer': 5000,
'tranSpeed': 'normal'
};
if (settings) $.extend(config, settings);
this.each(function () {
var $wrapper = $(this),
$ct = $wrapper.find('.showContainer'),
$views = $ct.children();
var viewCount = $views.length;
var $imgdotholder = $('<div class="imgdotholder"></div>').appendTo('.wrapper');
for (var i = 0; i < viewCount; i++) {
$('<div class="imgdots"></div>').appendTo($imgdotholder);
}
var $imgdots = $imgdotholder.children();
var timer, current = 0;
function loop() {
timer = setInterval(next, config.tranTimer);
}
function next(idx) {
$views.eq(current).hide();
current = idx == undefined ? current + 1 : idx;
if (isNaN(current) || current < 0 || current >= viewCount) {
current = 0;
}
$views.eq(current).fadeIn(config.tranSpeed);
$imgdots.removeClass('current').eq(current).addClass('current');
}
$imgdots.click(function(){
clearInterval(timer);
next($(this).index());
})
$wrapper.find('.btn_nxt').click(function(){
clearInterval(timer);
next();
});
$ct.hover(function(){
clearInterval(timer);
}, loop);
$views.slice(1).hide();
$imgdots.eq(0).addClass('current');
loop();
});
return this;
};
})(jQuery);
/* Calling The jQuery plugin */
$(document).ready(function () {
/**/
$(".wrapper").simpleShow({
'tranTimer': 3000,
'tranSpeed': 800
});
});
Demo: Fiddle

Related

How can I add autoplay to this this Slice Slider?

I have a slider here and I cannot figure out how to implement the autoplay functionality. Can I set this up quickly in the var settings?
I tried to fill in the setInterval(spin, 3000); command before and after the init lines but so far it didn't work out.
(function($) {
$.fn.sliceSlider = function(options) {
var settings = {
speed : '500',
easing : 'cubic-bezier(0.8, 0, 0.2, 1)',
};
if(options) {
$.extend(settings, options);
}
return this.each(function() {
var $this = $(this),
$rightColumn = $this.find('.slice-slider-right-column'),
$rightWrapper = $this.find('.slice-slider-right-column .slice-slider-wrapper'),
$rightSlide = $this.find('.slice-slider-right-column .slice-slider-slide'),
$length = $rightSlide.length,
$settings = settings,
mousewheelFinish = 0,
$leftColumnContent = "";
$rightSlide.each(function(){
$leftColumnContent = '<div class="slice-slider-slide">'+$(this).html()+'</div>' + $leftColumnContent;
});
$('<div class="slice-slider-left-column"><div class="slice-slider-wrapper">'+$leftColumnContent+'</div></div>').insertBefore($rightColumn);
if($length>1) $this.append('<div class="pagination"><div class="point active"></div>'+'<div class="point"></div>'.times($length-1)+'</div>');
var $leftWrapper = $this.find('.slice-slider-left-column .slice-slider-wrapper'),
$leftSlide = $this.find('.slice-slider-left-column .slice-slider-slide');
$leftSlide.filter(':last').addClass('active').prevAll().addClass('prev');
$rightSlide.filter(':first').addClass('active').nextAll().addClass('next');
$this.find('.slice-slider-wrapper, .slice-align-animation').css({'transition':'all '+$settings.speed+'ms '+$settings.easing, '-webkit-transition':'all '+$settings.speed+'ms '+$settings.easing});
function init(){
setActiveSlice($leftWrapper, $leftSlide.filter('.active').index());
setActiveSlice($rightWrapper, $rightSlide.filter('.active').index());
}
function setActiveSlice(foo, index){
foo.css({'top':$this.height()*(-1)*index});
}
init();
$('.rotate').css({'width':$('.rotate:visible').parent().height()});
$this.on('mousewheel', function(event) {
if(!mousewheelFinish && !$('body').hasClass('min-height')){
mousewheelFinish = 1;
setTimeout(function(){mousewheelFinish = 0;}, $settings.speed);
if(event.deltaY>0) {
$leftSlide.filter('.active:not(:last-child)').removeClass('active prev next').addClass('prev').next().removeClass('prev next').addClass('active');
$rightSlide.filter('.active:not(:first-child)').removeClass('active prev next').addClass('next').prev().removeClass('prev next').addClass('active');
$this.find('.pagination .point.active:not(:first-child)').removeClass('active').prev().addClass('active');
}
else {
$leftSlide.filter('.active:not(:first-child)').removeClass('active prev next').addClass('next').prev().removeClass('prev next').addClass('active');
$rightSlide.filter('.active:not(:last-child)').removeClass('active prev next').addClass('prev').next().removeClass('prev next').addClass('active');
$this.find('.pagination .point.active:not(:last-child)').removeClass('active').next().addClass('active');
}
init();
}
});
$this.find('.pagination .point').on('click', function(){
$(this).parent().find('.active').removeClass('active');
$(this).addClass('active');
var index = $this.find('.pagination .point').filter('.active').index(),
activeSlideLeft = $leftSlide.eq($length-1-index),
activeSlideRight = $rightSlide.eq(index);
$leftSlide.removeClass('active prev next');
$rightSlide.removeClass('active prev next');
activeSlideLeft.addClass('active').prevAll().addClass('prev');
activeSlideLeft.nextAll().addClass('next');
activeSlideRight.addClass('active').prevAll().addClass('prev');
activeSlideRight.nextAll().addClass('next');
init();
});
I would like to have the slider start when the page is fully loaded...
Welcome, if I understood you well, you can easily create a function for that with the code that you already have. Add this code at the end of your snippet:
const changeSlide = () => {
$leftSlide.filter('.active:not(:first-child)').removeClass('active prev next').addClass('next').prev().removeClass('prev next').addClass('active');
$rightSlide.filter('.active:not(:last-child)').removeClass('active prev next').addClass('prev').next().removeClass('prev next').addClass('active');
$this.find('.pagination .point.active:not(:last-child)').removeClass('active').next().addClass('active');
init();
}
let myAutoplay = setInterval(changeSlide, 3000);
Notice that it will stop in the last slider, if you want you can jump and start again from the beginning.
To avoid any issue with your mousewheel you just need to clear and set again the interval every time the user interacts with it. Something like this:
$this.on('mousewheel', function(event) {
clearInterval(myAutoplay);
myAutoplay = setInterval(changeSlide, 3000);
// The rest of the code
});
Hope this help or at least point you to the right direction :)

jQuery extending my vertical tabs

Im new to jQuery and wanting to make this a little cleaner and also add functionality but not sure on how rto do it so hoping someone could give me a hand.
tabs (working) so far
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("active");
$(this).parent().siblings().removeClass("active");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).show();
});
At the moment only works on click event but want to add something so i can add auto changing of tabs like using
hokTabs.pause();
etc.. this is mainly for when you hover an iutem it will pause and start again when you hover of button.
Anyone have any ideas?
// New Veritcal Tabs JS
(function (hokTabs, $) {
var internal = '5000'; // Internal
// start auto tabs
hokTabs.start = function () {
console.log('started');
}
// start auto tabs
hokTabs.stop = function () {
console.log('started');
}
// start auto tabs
hokTabs.pause = function () {
console.log('started');
}
}(window.hokTabs, jQuery));
These are simple start and stop functions, you just simply link them to hover events:
$(document).ready(function($) {
var activateTab = function(index) {
var tab = $(".tabs-menu li:eq(" + index + ")"),
tabContent = $(".tab div:eq(" + index + ")");
tab.addClass("current");
tab.siblings().removeClass("current");
tabContent.siblings().css("display", "none");
tabContent.show();
}
var automation = {
start: function() {
this.current = setInterval(function() {
var currentIndex = $(".tabs-menu li.current").index(),
max = $(".tabs-menu li.current").parent().children().length;
activateTab(currentIndex + 1 < max ? currentIndex + 1 : 0);
}, 2000);
},
stop: function() {
if (this.current) {
clearInterval(this.current);
}
}
}
$(".tabs-menu a").click(function(event) {
event.preventDefault();
activateTab($(event.currentTarget).parent().index());
});
automation.start();
});
JS Fiddle: https://jsfiddle.net/5zmcn3h2/10/

Applying transitions to preloaded images

I'm using the jQuery plugin Images-rotation in order to create a slideshow that plays when hovering over an image. I'd like to add transitions between the images, such as jQuery's fadeIn. The images are preloaded, which is why I think what I've attempted so far hasn't been successful.
I've also created this (http://jsfiddle.net/Lydmn2xn/) to hopefully easily show what's being used, although all of the code is found in the Javascript plugin itself. So far I've tried adding variations of the line $this.fadeIn("slow"); in various spots with no luck. Below is the code for the Javascript plugin with changes I've tried to make. Not sure how to point them out as I can't bold the text in the code. (Note: said changes are not in the Jfiddle, as they don't produce any changes).
$.fn.imagesRotation = function (options) {
var defaults = {
images: [], // urls to images
dataAttr: 'images', // html5 data- attribute which contains an array with urls to images
imgSelector: 'img', // element to change
interval: 1500, // ms
intervalFirst: 1500, // first image change, ms
callback: null // first argument would be the current image url
},
settings = $.extend({}, defaults, options);
var clearRotationInterval = function ($el) {
clearInterval($el.data('imagesRotaionTimeout'));
$el.removeData('imagesRotaionTimeout');
clearInterval($el.data('imagesRotaionInterval'));
$el.removeData('imagesRotaionInterval');
},
getImagesArray = function ($this) {
var images = settings.images.length ? settings.images : $this.data(settings.dataAttr);
return $.isArray(images) ? images : false;
},
preload = function (arr) { // images preloader
$(arr).each(function () {
$('<img/>')[0].src = this;
$this.fadeIn("slow");
});
},
init = function () {
var imagesToPreload = [];
this.each(function () { // preload next image
var images = getImagesArray($(this));
if (images && images.length > 1) {
imagesToPreload.push(images[1]);
}
});
preload(imagesToPreload);
};
init.call(this);
this.on('mouseenter.imagesRotation', function () {
var $this = $(this),
$img = settings.imgSelector ? $(settings.imgSelector, $this) : null,
images = getImagesArray($this),
imagesLength = images ? images.length : null,
changeImg = function () {
var prevIndex = $this.data('imagesRotationIndex') || 0,
index = (prevIndex + 1 < imagesLength) ? prevIndex + 1 : 0,
nextIndex = (index + 1 < imagesLength) ? index + 1 : 0;
$this.data('imagesRotationIndex', index);
if ($img && $img.length > 0) {
if ($img.is('img')) {
$img.attr('src', images[index]);
$this.fadeIn('slow');
}
else {
$img.css('background-image', 'url(' + images[index] + ')');
$img.fadeIn('slow');
}
}
if (settings.callback) {
settings.callback(images[index]);
}
preload([images[nextIndex]]); // preload next image
};
if (imagesLength) {
clearRotationInterval($this); // in case of dummy intervals
var timeout = setTimeout(function () {
changeImg();
var interval = setInterval(changeImg, settings.interval);
$this.data('imagesRotaionInterval', interval); // store to clear interval on mouseleave
}, settings.intervalFirst);
$this.data('imagesRotaionTimeout', timeout);
}
}).on('mouseleave.imagesRotation', function () {
clearRotationInterval($(this));
}).on('imagesRotationRemove', function () {
var $this = $(this);
$this.off('.imagesRotation');
clearRotationInterval($this);
});
};
$.fn.imagesRotationRemove = function () {
this.trigger('imagesRotationRemove');
};
Would that do the trick if it was in the right spot, or does fadeIn/Out not apply to preloaded images? Any help or tips are appreciated.
Thanks.

Allow chaining in jQuery plugin

it's been a long day and I can't seem to figure out why one of my custom jQuery plugins won't chain.
What i'm trying to do is write a line of characters out one at a time in an element then when done remove the text then write the next line
The plugin:
(function($) {
$.fn.writeDialogue = function(content) {
var contentArray = content.split(""),
current = 0,
elem = this,
write = setInterval(function() {
if(current < contentArray.length) {
elem.text(elem.text() + contentArray[current++]);
} else {
clearInterval(write);
return this;
}
}, 100);
};
})(jQuery);
Pretty much i'm trying to chain it in this way:
$('#element').writeDialogue(textLine1).empty().writeDialogue(textLine2);
Can't get it to work, any ideas?
This is because your code is async. so you have to move return this:
(function($) {
$.fn.writeDialogue = function(content) {
var contentArray = content.split(""),
current = 0,
elem = this,
write = setInterval(function() {
if(current < contentArray.length) {
elem.text(elem.text() + contentArray[current++]);
} else {
clearInterval(write);
}
}, 100);
return this; // THERE
};
})(jQuery);

Best way to fade and loop through a set of divs

Let's say I have the following divs:
<div class="a">You are funny.</div>
<div class="b">You are smart.</div>
<div class="c">You are cool.</div>
What is the best way to show div.a for 5 seconds, then fade out and fade in div.b for 5 seconds and then to div.c and then back to div.a and continue looping for an infinite amount of time?
Thanks :)
You can use an array of values and loop thru them.
var div = $('div').hide(),
news = ['news1', 'news2', 'news3'],
count = 0;
function changeNews() {
div.fadeIn().delay(500).fadeOut(function() {
changeNews();
}).text(news[count++])
if (count == news.length) {
count = 0;
}
}
changeNews();
Check working example at http://jsfiddle.net/qJa3h/
How about a jQuery plugin? I haven't tested it but something like this should get you started:
(function($) {
$.fn.keepFadingToNext = function(options) {
var defaults = {
duration: 5000
};
var settings = $.extend({}, defaults, options);
var original = this;
var doAnimations = function(element) {
element.fadeIn(settings.duration, function() {
element.fadeOut(settings.duration, function() {
var next = element.next();
if (next.length === 0) {
next = original;
}
doAnimations(next);
});
});
};
doAnimations(original);
return original;
};
})(jQuery)
$('.a').keepFadingToNext();
// or
$('.a').keepFadingToNext({ duration: 3000 });

Categories