I am not very proficient in JS and would like to help me with an issue I have.
I want to make the tabs on a Drupal website automatically rotate but still the user to be able to click on them.
This is the code I have:
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$('ul.checklist-select li').click(function () {
var selectID = $(this).attr('id');
$('ul.checklist-select li').removeClass('active');
$(this).addClass('active');
$('.first-box, .second-box, .third-box, .fourth-box').fadeOut(300);
$('.' + selectID + '-box').delay(300).fadeIn(300);});
</script>
I tried few options but it wasn't working.Thanks very much! I appreciate your time and help.
Well, you want to add an interval that updates the view and rotates to the next one (or first if it's the last).
Try this (not tested):
<script type="text/javascript">
var index = 0, // Index of current tab
interval = setInterval(function () { rotate(); }, 5000), // Interval
$tabs = $('ul.checklist-select'),
$content = $('.checklist_wrap');
// Click handler
$('ul.checklist-select li').each(function (i) {
$(this).click(function () {
index = i;
switchElement();
});
});
function rotate() {
// Update index to next one
index++;
// Check if this is a valid index, or reset to 0
if (index >= $tabs.children('li').length)
index = 0;
switchElement();
}
function switchElement() {
clearInterval(interval);
// Remove class from current tab
$('ul.checklist-select li').removeClass('active');
$('.checklist_wrap .box').fadeOut(300);
// Show
$tabs.children('li').eq(index).addClass('active');
$content.children('.box').eq(index).delay(300).fadeIn(300);
// Reset interval
interval = setInterval(function () { rotate(); }, 5000);
}
</script>
Something you might want to add is that the interval is reset when someone clicks a tab.
Related
This is my JS code so far. Right now I can click on each button on the slider and it will change to the corresponding slide.
$('.slide-nav').on('click', function(e) {
e.preventDefault();
// get current slide
var current = $('.flex--active').data('slide'),
// get button data-slide
next = $(this).data('slide');
console.log(current);
$('.slide-nav').removeClass('active');
$(this).addClass('active');
if (current === next) {
return false;
} else {
$('.slider__wrapper').find('.flex__container[data-slide=' + next + ']').addClass('flex--preStart');
$('.flex--active').addClass('animate--end');
setTimeout(function() {
$('.flex--preStart').removeClass('animate--start flex--preStart').addClass('flex--active');
$('.animate--end').addClass('animate--start').removeClass('animate--end flex--active');
}, 900);
}
});
the slider I am working with looks like this one to see the html/css
https://codepen.io/mikun/pen/YWgqEX
So in addition to clicking to change slides I would like to scroll to change slides
You can simulate the click function this way:
setInterval(function () {
$(".slide-nav.active").next().click();
}, 1000);
You need to check if this is the last and try this:
setInterval(function () {
if ($(".slide-nav.active").next().length > 0)
$(".slide-nav.active").next().click();
else
$(".slide-nav").first().click();
}, 1000);
Demo: https://codepen.io/anon/pen/ZwBVzo
one quick question!
I am using the following code which does a "flip" card effect to flip a specific div element, when a certain link is mouse clicked. Is it possible to make the "flip" effect reverse after some time? Exactly as if I was clicking again with the mouse, but timed. I can do it now by cliking, but I would like to time it.
$(document).ready(function () {
$('.flip_card').click(function () {
var x = $(this).attr("id");
var i = x.substring(10);
$('.flip' + i + '').find('.card').toggleClass('flipped');
});
});
I have tried using the jquery functions delay() or settimeout, but I can only achieve that the first "flip" effect is delayed and happens after certain time. That is not what I want...
I hope my question is understanble enough.
Many thanks!
Try this.
$(document).ready(function () {
$('.flip_card').click(function () {
var x = $(this).attr("id");
var i = x.substring(10);
var ele = '.flip' + i + '';
$(ele).find('.card').toggleClass('flipped');
setTimeout(function(){
$(ele).find('.card').toggleClass('flipped');
}, 1000);
});
});
Try utilizing .queue()
$(document).ready(function () {
$(".flip_card").click(function () {
var x = this.id;
var i = x.substring(10);
$(".flip" + i).find(".card").toggleClass("flipped")
.queue("reset", function() {
setTimeout(function() {
$(".flip"+ i + " .card.flipped:eq(-1)").toggleClass("flipped");
// set duration here
}, 3000);
}).dequeue("reset");
});
});
You can use setTimeout(), but you should keep track of the timer ID so you can cancel it if the user clicks again before the timeout has executed. You can use the .data() function to store the timer ID so each card keeps track of its own timer ID.
$(document).ready(function () {
$('.flip_card').click(function () {
var i = $(this).attr('id').substring(10);
var $card = $('.flip' + i).find('.card');
// Clear the timeout if there is one.
var timerId = $card.data('timerId');
if (timerId) {
clearTimeout(timerId);
}
// Flip the card.
if (!$card.hasClass('flipped')) {
$card.addClass('flipped');
// Set the timeout so the card is flipped back after 3 seconds.
$card.data('timerId', setTimeout(function () {
$card.removeClass('flipped');
}, 3000));
} else {
$card.removeClass('flipped');
}
});
});
jsfiddle
How about something this simple. Just chaining should make it.
$(document).ready(function () {
$('.flip_card').bind('click', function() {
var x = $(this).attr("id");
var i = x.substring(10);
var ele = '.flip' + i + '';
$(ele).find('.card').toggleClass('flipped').delay(3000).toggleClass('flipped');
});
});
I have a set of divs in my HTML document and use jQuery to show them one by one after every 15000ms. I would also like to include some links inside some of the divs so I want to pause or delay the div on hover. Here is my script code. Can somebody show me how to pause on hover?
<script>
var ct = 0;
function showElem2() {
var length = $('.t1').length;
$('.t1').hide();
$('.info span').text(ct);
$('.t1').eq(ct).fadeIn(900);
(ct >= (length-1)) ? ct = 0: ct++;
setTimeout(showElem2, 1600);
}
$(document).ready(function(){
showElem2();
});
</script>
You can clear the timeout on mouseover and start it again on mouseout. I updated your code:
var ct = 0;
var myTimeout;
function showElem2() {
var length = $('.t1').length;
$('.t1').hide();
$('.info span').text(ct);
$('.t1').eq(ct).fadeIn(900);
(ct >= (length-1)) ? ct = 0: ct++;
myTimeout = setTimeout(showElem2, 1600);
}
$(document).ready(function(){
showElem2();
// $('div') is the container you want to attach the mouseover/mouseout event to.
$('div').hover(function() {
// mouseover
clearTimeout(myTimeout); // cancels the timeout
}, function() {
// mouseout
myTimeout = setTimeout(showElem2, 1600); // starts it again (or technically a new timeout)
});
});
Probably not the best solution code-wise, but the key here is clearTimeout() which let's you cancel a timeout set with setTimeout().
I believe you can tie the Timeout to a variable so you can cancel it on hover, then just reload the function on mouse out. This isn't tested but I think this should work:
:`
<script>
var ct = 0;
var timeoutvariable;
function showElem2() {
var length = $('.t1').length;
$('.t1').hide();
$('.info span').text(ct);
$('.t1').eq(ct).fadeIn(900);
$('.t1').eq(ct).hover(function(){ //on mouse enter
clearTimeout(timeoutvariable);
},
function(){ //on mouse leave
showElem2();
});
(ct >= (length-1)) ? ct = 0: ct++;
timeoutvariable = setTimeout(showElem2, 1600);
}
$(document).ready(function(){
showElem2();
});
</script>
`
I've looked all over the internet and I can't seem to find a good way to do this.
I've got an accordion menu that I've built primarily using addClass/removeClass and css. It has special functionality, the accordion tabs open after a delay on mouseover and they open and close on click. I can currently open all of them at once, but I'd like to limit this to 2 or 3 with the earliest selected panel closing after I hit that limit. So I'd either need to make the classes numbered and switch them on every action, or perhaps apply a variable that keeps track of the order in which the panels were selected and switch them.
Below is the code I have so far. I've only been able to get as far as keeping count of how many tabs there currently are open. Does anyone have an idea as to what the best way to approach this is?
var timer;
var counter = 0;
$('li.has-dropdown').mouseenter(function() {
dd_item = $(this);
if(!$(this).hasClass('expand-tab')){
timer = setTimeout ( function () {
$(dd_item).addClass('expand-tab');
counter++;
}, 200);
};
}).mouseleave(function(){
clearTimeout(timer);
console.log(counter);
}).click(function() {
if ($(this).hasClass('expand-tab')){
$(this).removeClass('expand-tab');
counter--;
console.log(counter);
}else{
$(this).addClass('expand-tab');
console.log(counter);
}
});
Add a incrementting data-index to each opened tab.
count the tabs on the end of the hover effect, if they are to many, sort them by the index, and hide the lowest/oldest.
var timer;
var index = 1;
$('li.has-dropdown').mouseenter(function() {
dd_item = $(this);
if(!$(this).hasClass('expand-tab')){
timer = setTimeout ( function () {
$(dd_item).addClass('expand-tab');
$(dd_item).attr('data-index', index++);
counter++;
}, 200);
};
}).mouseleave(function(){
clearTimeout(timer);
console.log(counter);
}).click(function() {
$(this).taggleClass('expand-tab'); // see jQuery toggleClass();
$(this).attr('data-index', index++);//this will add index on closed tabs also.. but it does not matter at the end.
});
if($('.expand-tab').length> 3){
//custom inline sorting function.
var expanded_tabs = $('.expand-tab').sort(function (a, b) {
return (parseInt( $(a).attr('data-index')) < parseInt( $(b).attr('data-index')) ? -1 : 1 ;
});
//time out .. effect etc.
expanded_tabs[0].removeClass('expand-tab');
}
P.S I don't like havving Hover and Click in the same place ... try to separate the events and call a unified collapseIfToMany function in on each event
This is a corrected version. I decided to use a variable for the maximum panels opened, this way you don't have to dig if you decide you want to change it, or if you add more to the code.
var timer;
var index = 1;
var maxOpen = 2;
$('li.has-dropdown').mouseenter(function() {
dd_item = $(this);
if(!$(this).hasClass('expand-tab')){
timer = setTimeout ( function () {
$(dd_item).addClass('expand-tab');
$(dd_item).attr('data-index', index++);
collapseIfTooMany();
}, 200);
};
}).mouseleave(function(){
clearTimeout(timer);
}).click(function() {
$(this).toggleClass('expand-tab'); // see jQuery toggleClass();
$(this).attr('data-index', index++);//this will add index on closed tabs also.. but it does not matter at the end.
});
function collapseIfTooMany(){
if($('.expand-tab').length > maxOpen){
//custom inline sorting function.
var expanded_tabs = $('.expand-tab').sort(function (a, b) {
return (parseInt( $(a).attr('data-index')) < parseInt( $(b).attr('data-index'))) ? -1 : 1 ;
});
//time out .. effect etc.
$(expanded_tabs[0]).removeClass('expand-tab');
}
};
I've made a slide show width a javascript and Jquery. But I need to reset the slide interval when the user is navigating manualy to the next or previous slide. I am relatively new to javascipt and it's syntax. Any help will be appriciated. Here is my code:
<script type="text/javascript" src="/elements/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var currentSlideId = 0;
var slidesAmount = 0;
function selectSlide(id) {
jQuery(".startpage-test.slide" + id).show().siblings(".startpage-test").hide();
jQuery(".slideshow-show-active.slide" + id).addClass("active").siblings(".slideshow-show-active").removeClass("active");
}
function nextSlide() {
currentSlideId++;
if (currentSlideId >= slidesAmount) currentSlideId = 0;
selectSlide(currentSlideId);
}
function prevSlide() {
currentSlideId--;
if (currentSlideId < 0) currentSlideId = slidesAmount - 1;
selectSlide(currentSlideId);
}
jQuery(document).ready(function() {
slidesAmount = jQuery(".startpage-test").length;
jQuery(".show_previous").click(function() {
prevSlide();
return false;
});
jQuery(".show_next").click(function() {
nextSlide();
return false;
});
window.setInterval(function() {
nextSlide();
}, 7000);
});
jQuery("object.flashContent").each(function () {
swfobject.registerObject(jQuery(this).attr("id"), "9.0.0");
});
</script>
The next-/prev-button looks like this:
<div class="show_next">
<span class="slide_nav"><img src="/elements/next.png" width="57" alt="Next"></span>
</div>
<div class="show_previous">
<span class="slide_nav"><img src="/elements/prev.png" width="57" alt="Previous"></span>
</div>
In all slides there is a link of course, and it would also be nice to stop the slide interval when hovering this a-tag. Unfortunately I don't know how to do this either.
You can assign the result of setInterval() to a variable, then call clearInterval() passing in that variable whenever you need. So in your case, change this code:
window.setInterval(function() {
nextSlide();
},
to this:
var interval = window.setInterval(function() {
nextSlide();
},
Then, in any.hover(), .mouseenter(), .click() or whatever other mouse event handler you are using, simply call:
window.clearInterval(interval);
Of course, you need to reinstate the interval when you want to restart it!