I have a series of slide shows - a tad clunky, but they work.
var Slideshow = {
paginate: function () {
var slides = $('div.slide', '.allslideshow'),
total = slides.length;
$('.slideshow-nav-total').text(total);
slides.each(function (i) {
$(this).data('index', i + 1);
});
},
moveTo: function($a) {
var slide = $($a.attr('href'));
var wrapper = $('.slideshow-wrapper');
wrapper.animate({
left: -slide.position().left
}, 300, 'linear', function () {
$('.slideshow-nav-current').text(slide.data('index'));
$a.addClass('active').siblings('a').removeClass('active');
});
},
navigate: function () {
var self = this;
$('a', '.slideshow-nav').click(function (e) {
e.preventDefault();
if (self.interval) {
clearInterval(self.interval);
self.interval = false;
}
var $a = $(this);
var slide = $($a.attr('href'));
self.moveTo($a);
});
},
autoPlay: function() {
var $alist = $('a', '.slideshow-nav');
var i = 0;
var self = this;
this.interval = setInterval(function() {
var $a = $alist.eq(i++);
i %= $alist.length;
self.moveTo($a);
}, 1000);
},
init: function () {
this.paginate();
this.navigate();
$('.slideshow-nav-current').text(1);
this.autoPlay();
}
};
$(function () {
Slideshow.init();
});
});
The problem is.. The slideshows appear within jQuery show / hide content buttons on page. So, for instance if you click one content button, and then another content button; all the slideshows are still running in the background.
PROBLEM: I need to have the slideshow RESET each time a toggle button is clicked, so the user wont see the slide show start at slide 2 or 3 but must start at slide #1 every time!!
My toggle buttons / relevant click handler codes are below. Any suggestions to have slideshow restart from slide 1 every time content toggle buttons are selected?
$(document).ready(function() {
$("#star_btn1, #star_btn2, #star_btn3, #star_btn4, #star_btn5, #star_btn6, #star_btn7, #star_btn8, #star_btn9, #star_btn10,").each(function(c) {
$(this).delay(500 * c).fadeIn(600)
})
$(".w_stars").on("click mouseout mouseover", function(c) {
var l = $(this).attr("data-name");
$("#map").usmap("trigger", l, c.type, c)
})
reset:function(){
if (this.interval) {
clearInterval(this.interval);
this.interval = false;
}
this.moveTo($('.slideshow-nav').children().first());
var slides=$('.allthestates').children(':visible');
$(slides).find('.slideshow-nav a').first().addClass('active').siblings().removeClass('active');
},
init: function() {
this.paginate();
this.navigate();
$('.slideshow-nav-current').text(1);
this.autoPlay();
}
};
//(function($) {
//Slideshow.init();
//})(jQuery);
$('.w_stars').click(function(){
Slideshow.reset();
Slideshow.init();
})
Related
Trying to run a function repeatedly while holding down the left mouse button with this code but it's not working. Any ideas to correct it will be appreciated.
var timer = 0;
document.getElementById('myButton').onmousedown = function() {
while (this.event) {
timer = setInterval(function() {c_3()}, 100);
}
clearInterval(timer);
}
you can solve this in multi way
check this https://codepen.io/hamidrezanikoonia/pen/bvarGL?editors=0011
var interval_;
document.getElementById('ele').onmousedown = function() {
interval_ = setInterval(function(){ console.log("Hello"); }, 300);;
}
document.getElementById('ele').onmouseup = function() {
clearInterval(interval_); wdsd
}
i use setInterval for doing this
Try adding mouseover and mouseup listeners when the button gets pressed down while over the button:
const button = document.querySelector('div');
button.addEventListener('mousedown', () => {
let mouseIsDown = true;
document.body.addEventListener('mouseup', () => clearTimeout(intervalLog));
document.body.addEventListener('mouseover', (e) => {
if (e.target !== button) clearTimeout(intervalLog);
});
const intervalLog = setInterval(() => console.log('mouse is down over button.'), 300);
});
<div>
button
</div>
<div>
div
</div>
I've got a problem with the last function. The goal is that when I click on the "suiv" div, the script start a loop with my div ".crea" that is out of the suiv div.
However, the loop this.div.find('.crea').each(function){} doesn't work.
$(document).ready(function(){
s = new slider(".galerie");
});
var slider = function (id) {
var self = this;
this.div = $(id);
this.nb = 0;
this.index = 0;
this.div.find(".crea").each(function () {
self.nb++;
//alert($(this).css("z-index"));
});
alert(this.nb);
this.index = 0;
this.suiv = this.div.find(".suiv");
this.prec = this.div.find(".prec");
this.suiv.click(function () {
this.div.find(".crea").each(function () {
//self.index=parseInt($(this).css("z-index"));
alert("wesh2");
}
});
}
Change find('crea') to parent('crea').children() and it will work.
find only goes downwards.
go up to the parent, then use children
this.suiv.click(function () {
this.div.parent.children(".crea").each(function () {
//self.index=parseInt($(this).css("z-index"));
alert("wesh2");
}
});
}
I have an interactive illustration where you can hover over elements and then if you click on them you can see a popover and the clicked element gets black. It works quite good, but there is a problem with the click and hover code. If one clicks on the same element twice in a row and then on another element, the first element gets black. Try for yourself: http://labs.tageswoche.ch/grafik_osze
Here is the code:
var sourceSwap = function () {
var $this = $(this);
if (!$this.hasClass('active')) {
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
}
};
var makeActive = function() {
var $this = $(this);
// bring the active back (if any) to the first state
if ($('img.active').length) {
var newSource = $('img.active').data('alt-src');
$('img.active').data('alt-src', $('img.active').attr('src'));
$('img.active').attr('src', newSource);
$('img.active').removeClass('active');
}
$this.toggleClass('active');
}
$(function() {
$('img[data-alt-src]')
.each(function() {
new Image().src = $(this).data('alt-src');
})
.hover(sourceSwap, sourceSwap);
$('img[data-alt-src]').on('click', makeActive);
});
To try for yourself: http://jsfiddle.net/8wtvvka5/
i tried this on fiddle:
function swap(e)
{
var src = e.attr('src');
var active = e.hasClass('active');
var dark = src.indexOf('_h.png', src.length - '_h.png'.length) !== -1;
e.attr('data-src-dark', dark);
if (active || e.attr('data-src-dark') == true) return;
e.attr('src', e.attr('data-alt-src'));
e.attr('data-alt-src', src);
return active;
}
var sourceSwap = function ()
{
if (!$(this).hasClass('active'))
{
swap($(this));
}
};
var makeActive = function()
{
var active = $(this).hasClass('active');
$('img.active').each(function()
{
$(this).removeClass('active'); swap($(this));
});
if (active) $(this).removeClass('active');
else $(this).addClass('active');
swap($(this));
}
$(function() {
$('img[data-alt-src]')
.each(function() {
new Image().src = $(this).data('alt-src');
})
.hover(sourceSwap, sourceSwap);
$('img[data-alt-src]').on('click', makeActive);
});
$('img.active') is a complete set of elements so you should use the 'each' function to handle them all
JUST COPY-AND-PASTE to fiddle to check it out yorself :)
I have the below slide-in menu code I put together from scratch. I'm trying to add a timeout function to prevent too many slide-ins and slide-outs due to multiple clicking. Only one click per 200ms should actually trigger the animation. I tried and tried but could not figure this out. Help! :)
var togglerWidth = $('#mobile-menu-toggler').css('min-width');
var slideLeft = function () {
var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
$('#mobile-menu-toggler').animate({
width: menuWidth
},
500,
'swing',
function () {
});
$('#mainmenu-mobile').animate({
right: "0px"
},
500,
'swing',
function () {
});
}
var slideRight = function () {
var menuWidth = $('#mainmenu-mobile').width();
$('#mobile-menu-toggler').animate({
width: togglerWidth
},
500,
'swing',
function () {
});
$('#mainmenu-mobile').animate({
right: -menuWidth
},
500,
'swing',
function () {
});
}
var activate = function () {
$('#mainmenu-mobile, #mobile-menu-toggler').addClass('active-menu');
}
var deactivate = function () {
$('#mainmenu-mobile, #mobile-menu-toggler').removeClass('active-menu').addClass('inactive-menu');
}
$("#mobile-menu-toggler").click(function () {
$(this).toggleClass('inactive-menu');
$('#mainmenu-mobile').toggleClass('inactive-menu');
if ($(this).hasClass('inactive-menu')) {
slideRight();
deactivate();
} else {
slideLeft();
activate();
}
});
$(document).mousedown(function (e) {
var container = $("#mobile-menu-wrap");
if (!container.is(e.target) && container.has(e.target).length === 0) {
slideRight();
deactivate();
}
});
FIDDLE: http://jsfiddle.net/Lam9rwLg/2/
Use This Code. Timer is set for 2 seconds. Change as per required.
//Mobile Menu Animation
var togglerWidth = $('#mobile-menu-toggler').css('min-width'); //get width of toggler
//Slide left function
var slideLeft = function () {
var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
$('#mobile-menu-toggler').animate({
width: menuWidth
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
$('#mainmenu-mobile').animate({
right: "0px"
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
}
//Slide Right Function
var slideRight = function () {
var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
$('#mobile-menu-toggler').animate({
width: togglerWidth
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
$('#mainmenu-mobile').animate({
right: -menuWidth
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
}
var activate = function () { //switch to 'active-menu' class
$('#mainmenu-mobile, #mobile-menu-toggler').addClass('active-menu');
}
var deactivate = function () { //switch back to 'inactive-menu' class
$('#mainmenu-mobile, #mobile-menu-toggler').removeClass('active-menu').addClass('inactive-menu');
}
$("#mobile-menu-toggler").click(function () {
$("#mobile-menu-toggler").unbind('click');
$(this).toggleClass('inactive-menu');
$('#mainmenu-mobile').toggleClass('inactive-menu');
$("#mobile-menu-wrap").prop("disabled",true);
if ($(this).hasClass('inactive-menu')) {
slideRight();
deactivate();
} else {
slideLeft();
activate();
}
setTimeout(function(){setFunction()},2000); //after 2 Second click. Set this variable as required.
});
var setFunction=function(){
$("#mobile-menu-toggler").bind('click',function () {
$("#mobile-menu-toggler").unbind('click');
$(this).toggleClass('inactive-menu');
$('#mainmenu-mobile').toggleClass('inactive-menu');
$("#mobile-menu-wrap").prop("disabled",true);
if ($(this).hasClass('inactive-menu')) {
slideRight();
deactivate();
} else {
slideLeft();
activate();
}
setTimeout(function(){setFunction()},2000); //after 2 Second click. Set this variable as required.
});
}
//Close menu if clicked outside the box.
$(document).mousedown(function (e) {
var container = $("#mobile-menu-wrap");
if (!container.is(e.target) && container.has(e.target).length === 0) {
slideRight();
deactivate();
}
});
Updated Link : http://jsfiddle.net/Lam9rwLg/5/
Hopefully the below code helps you. Please let me know if it's working as per your intention. Below is the updated javascript codes.
So it does:
Once the click event is clicked, the event subscription would be removed.
There would be setTimeout event to subscribe the event click again.
By doing that, the multiple clicking can be prevented.
//Mobile Menu Animation
var togglerWidth = $('#mobile-menu-toggler').css('min-width'); //get width of toggler
//Slide left function
var slideLeft = function () {
var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
$('#mobile-menu-toggler').animate({
width: menuWidth
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
$('#mainmenu-mobile').animate({
right: "0px"
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
}
//Slide Right Function
var slideRight = function () {
var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
$('#mobile-menu-toggler').animate({
width: togglerWidth
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
$('#mainmenu-mobile').animate({
right: -menuWidth
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
}
var activate = function () { //switch to 'active-menu' class
$('#mainmenu-mobile, #mobile-menu-toggler').addClass('active-menu');
}
var deactivate = function () { //switch back to 'inactive-menu' class
$('#mainmenu-mobile, #mobile-menu-toggler').removeClass('active-menu').addClass('inactive-menu');
}
$(function(){
TogglerClickSetup();
});
function TogglerClickSetup() {
$("#mobile-menu-toggler").click(function () {
$("#mobile-menu-toggler").off();
$(this).toggleClass('inactive-menu');
$('#mainmenu-mobile').toggleClass('inactive-menu');
if ($(this).hasClass('inactive-menu')) {
slideRight();
deactivate();
} else {
slideLeft();
activate();
}
window.setTimeout(TogglerClickSetup, 500);
});
}
//Close menu if clicked outside the box.
$(document).mousedown(function (e) {
var container = $("#mobile-menu-wrap");
if (!container.is(e.target) && container.has(e.target).length === 0) {
slideRight();
deactivate();
}
});
$(document).ready(function() {
elem = new Array('a1','a2','a3','a4','a5','a6','a7','a8','a9');
$('.graphic').hide();
hidden = false;
time = 0;
elem.sort(randomize);
$.each(elem, function(i, r) {
setTimeout(function() {
$('#'+r).fadeIn(400);
}, time);
time += 200;
});
time = 0;
//elem.sort(randomize);
setTimeout(function() {
$.each(elem, function(i, r) {
setTimeout(function() {
$('#'+r).fadeOut(800);
}, time);
time += 200;
});
$('.graphic').fadeIn(2400);
hidden = true;
}, 3000);
$('.graphic').mouseenter(function(){
if(hidden) {
//time = 0;
//elem.sort(randomize);
$('.graphic').fadeOut(400);
$.each(elem, function(i, r) {
/*setTimeout(function() {
$('#'+r).fadeIn(400);
}, time);
time += 200;*/
$('#'+r).fadeIn(400);
});
hidden = false;
}
});
$('.content').mouseenter(function(){
if(!hidden) {
time = 0;
//elem.sort(randomize);
$.each(elem, function(i, r) {
setTimeout(function() {
$('#'+r).fadeOut(800);
}, time);
time += 200;
});
$('.graphic').fadeIn(2400);
hidden = true;
}
});
$('.tile').click(function(t) {
$(this).fadeOut(800, function () {
window.location = $(this).attr("href");
}
);
return false;
});
function randomize(){
return (Math.round(Math.random())-0.5);
}
});
For some reason I am not able to break the effect.
When the side loads the banner is hidden. 9 elements come and go.
Everytime you enter the div, the banner fades out and the 9 divs in.
When I leave the enter, there is an random effect for fadeout.
But when I enter while that effect is going on, everything breaks.
So I need a break somewhere in there, so the fading stops and it will show my 9 divs instantly.
Any ideas? :/
Maybe try using the http://api.jquery.com/stop/, to stop the currently-running animations