Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed last year.
Improve this question
I have the below code whichs executes every 5 seconds. However i would like to return different data each time.
For example:
First interval = top level data (level.php)
Second interval = top skill data (skill.php)
Third interval = top magic data (magic.php)
And once the third interval is done... return to level.php to start the sequence again
Can someone tell me how would i modify the code to achieve what i want?
<script>
var text = "";
var toplevel = function() {
$.ajax({
type : 'GET',
url : '/pages/level.php',
success : function(data){
text = data;
$("#tops").fadeOut( "normal", function() {
$('#tops').html(data);
$("#tops").fadeIn( "normal", function() {});
});
},
});
};
$(document).ready(function(){
setInterval(toplevel, 5000);
toplevel();
});
</script>
You could have an array of URLs, always send the request to the first one, and rotate the array order on success:
function toplevel(urls) {
return function () {
$.get(urls[0]).done(function (data) {
urls.push(urls.shift());
$("#tops").fadeOut("normal", function () {
$('#tops').html(data).fadeIn( "normal");
});
});
}
};
$(function () {
var switcher = toplevel(['/pages/level.php', '/pages/skill.php', '/pages/magic.php']);
setInterval(switcher, 5000);
switcher();
});
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I need to customize single click event to double click. And it have to work if second click is clicked in 300 ms.
Something like this should work. Basically you can save the first click, and set a timer to reset that click if no other click is there.
I'm sure there are plenty of better ways to do this, but this works:
let clicked = false;
const timeout = 300;
let timer;
function onClickHandler(e) {
console.log('click');
document.querySelector('#result').innerText = '';
if (timer) window.clearTimeout(timer);
if (!clicked) {
console.log('first time');
clicked = true;
timer = window.setTimeout(() => clicked = false, timeout);
} else {
console.log('double click');
clicked = false;
document.querySelector('#result').innerText = 'Double click!';
}
}
#result{background:red;}
<div onclick="onClickHandler(event)">Click me twice</div>
<div id="result"></div>
Description
Here is an example using the Timeout built into JavaScript
Example:
// the double click time amount
const doubleClickTimeout = 300
// timer variable used to store our timeout pointer
let timer = undefined
// clear function that kills the timeout/timer and variable
let clear = () => {
if (timer) clearTimeout(timer)
timer = undefined
}
// starts the timeout/timer
let clickStart = () => {
timer = setTimeout(clear, doubleClickTimeout)
}
// gets the area you want to monitor
const doubleClick = document.getElementById("doubleClick")
// set up a onclick event on the doubleClick variable that points to the doubleClick div
doubleClick.onclick = () => {
// if timer isn't undefined then we have a double click
if (timer) {
console.log("double click detected")
// call the clear function: clear the timer
clear()
} else {
// call the clickStart function: start a timer
clickStart()
}
}
<div id="doubleClick">this is a clickable area with custom double clicking</div>
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
Take a look at my files, the one thing that is bothering me for the moment is the repeated section and panel. I must not be able to see the bigger picture, so can anyone tell me a better and dryer method to code?
$(function() {
let pent = {
init : function () {
this.cacheDom();
this.bindEvents();
},
cacheDom: function () {
this.$el = $('#naver');
this.$button = this.$el.find('#xCancel');
this.$set = this.$el.find(".setting");
this.$section = [
this.$sectionA = this.$el.find('#set1'),
this.$sectionB = this.$el.find('#set2'),
this.$sectionC = this.$el.find('#set3'),
this.$sectionD = this.$el.find('#set4')
];
this.$panelA = this.$el.find('#settbox1');
this.$panelB = this.$el.find('#settbox2');
this.$panelC = this.$el.find('#settbox3');
this.$panelD = this.$el.find('#settbox4');
},
bindEvents: function () {
this.$button.on('click', this.hidePanel.bind(this));
this.$sectionA.on('click', this.showPanelA.bind(this));
this.$sectionB.on('click', this.showPanelB.bind(this));
this.$sectionC.on('click', this.showPanelC.bind(this));
this.$sectionD.on('click', this.showPanelD.bind(this));
},
showPanelA: function () {
this.$button.show();
this.$panelA.slideDown(100);
},
showPanelB: function () {
this.$button.show();
this.$panelB.slideDown(100);
},
showPanelC: function () {
this.$button.show();
this.$panelC.slideDown(100);
},
showPanelD: function () {
this.$button.show();
this.$panelD.slideDown(100);
},
hidePanel : function () {
this.$set.slideUp(100);
this.$button.hide();
},
};
pent.init();
});
Better code would be:
$('#xCancel').on('click', function() {
$('.setting').slideUp(100);
$(this).hide();
});
$('.set1').on('click', function() {
$('#xCancel').show();
$('.settbox').slideDown(100);
});
Just follow DRY principle and make things easier. I mean if you need to do the same operation for more elements, why you can't use class as universal selector?
On youtube are lots of tutorials or you can visit jQuery documentation website.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I have around 20 buttons that view different type av boxes when clicked, so my JS code is really long. The function works perfect but im wondering if there is a way to shorten this code or make it more cleaner?
// Content lvl 1
function show(sel) {
var el = $(sel);
el.fadeToggle();
$('.showmore-1').not(el).fadeOut("slow");
}
$('.showmore-1').hide();
$('#click-1a').click(function () {
show('#showmore-1a');
});
$('#click-1b').click(function () {
show('#showmore-1b');
});
// Content lvl 2
function show(sel) {
var el = $(sel);
el.fadeToggle();
$('.showmore-2').not(el).fadeOut("slow");
}
$('.showmore-2').hide();
$('#click-2a').click(function () {
show('#showmore-2a');
});
$('#click-2b').click(function () {
show('#showmore-2b');
// Content lvl 3
function show(sel) {
var el = $(sel);
el.fadeToggle();
$('.showmore-3').not(el).fadeOut("slow");
}
$('.showmore-3').hide();
$('#click-3a').click(function () {
show('#showmore-3a');
});
$('#click-3b').click(function () {
show('#showmore-3b');
});
And this will continue to click 20 i maybe will do even more.
YES
$("[id^=click]").click(function (e) { //match elements with ID's starting with "click"
oldSelector = e.target.id; //get the ID of the clicked element
newSelector = oldSelector.replace("click", "showmore"); //replace string
show(newSelector);
});
Advantage is that the code keeps working if you add more or less buttons the same way. No need to update this code for it, nor the HTML itself.
Body as 1 liner:
$("[id^=click]").click(function (e) {
show(e.target.id.replace("click", "showmore"));
});
If your HTML is editable, try something like this:
<button class="clickable" data-for="#showmore-1">Click</button>
Then your jQuery becomes:
$(function() {
$(document.body).on("click",".clickable",function(e) {
e.preventDefault();
show(this.getAttribute("data-for"));
});
function show(sel) { ... }
});
If your elements are like:
<div id="click-1">click me</div>
make them like:
<div class="showing-trigger" data-target-id="showmore-1">click me</div>
and then your handlers could be:
$('.showing-trigger').on('click', function () {
show('#' + $(this).data('target-id'));
});
Note that with this code your triggers can show a div with any id.
for ( var counter = 0; counter < 20; counter++)
{
$('#click-' + counter).click(function () {
var idCounter = $( this ).attr( "id" ).split( "-" )[1];
show('#showmore-' + idCounter );
});
}
or better yet, bind a click event to a class rather than on id
Try this:
for(var i=1,l=21; i<l; i++){
(function(i){ // closure scopes off i so it's not at end of loop when Event occurs
$('#click-'+i).click(function(){
$('.showmore').fadeOut('slow', function(){ // fade showmore class out
$('#showmore-'+i).show(); // show just the one you want
});
});
})(i);
}
It can be shortened to this:
$("[id^= click]").click(function (e) {
oldSelector = e.target.id; //get the ID of the clicked element
newSelector = oldSelector.replace("click", "showmore");
show(newSelector);
});
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Why bind won't work after setInterval?
var i = 0;
$('.click').bind('click').click(function(){
var thisclick = $(this);
var move = setInterval(function(){
if(i < 30){
i++;
thisclick.unbind('click');
}
else{
thisclick.bind('click');
clearInterval(move);
}
},3000)
})
As of jQuery 1.7 .on() method is preferred, but the actual issues you have are
you are not providing handler for the second binding ( in case you want to rebind the click with the same handler )
you need to reset/clear the counter, since it's a closure variable it'll always be in 30 once reached.
$('.click').on('click', handler);
var i = 0;
function handler(e) {
e.preventDefault();
var thisclick = $(this);
var move = setInterval(function () {
if (i < 10) {
i++;
thisclick.off('click');
} else {
thisclick.on('click', handler);
i = 0; // reset here
clearInterval(move);
}
}, 1000);
};
DEMO
You have to pass function and time to setInterval. Like following example and you are missing time is your code.
setInterval(function(){alert("Hello")}, 3000);
So Change would be
setInterval(function(){
if(i < 30){
i++;
thisclick.unbind('click');
}
else{
thisclick.bind('click');
clearInterval(move);
}
},3000)//Give your value here
Binding to the click event has nothing to do with the issue.
setInterval() expects two parameters: the function to call when triggered, and the time interval in which to trigger said function (in milliseconds)
For example:
var myInterval = setInterval(myFunction, 200);
This will trigger the "myFunction" method every 200 milliseconds.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Can someone assist me in trying to get pause on hover working with this example. Essentially I need it to do the following.
Pause interval On Hover
Highlight item hovered over
on hover out resume rotate
Code (fiddle demo):
var $f = $('ul').find('.frame');
function recursive(i) {
$f.removeClass('showing').eq(i).addClass('showing');
setTimeout(function () {
recursive(++i % $f.length)
}, 1000);
}
recursive(0);
Working DEMO
You might need to tweak this a bit to fit into your requirements. Basically the idea is to clear interval on mouse over and resume recursion on mouseout & keep a reference to count.
var $f = $('ul').find('.frame'),
timeOut,
count;
function recursive(i) {
count = i;
$f.removeClass('showing').eq(i).addClass('showing');
timeOut = setTimeout(function () {
recursive(++i % $f.length)
}, 1000);
}
$('ul li').hover(function(){
clearTimeout(timeOut);
});
$('ul li').mouseout(function(){
recursive(count);
});
recursive(0);
Add this
$(".frame").hover(function () {
clearTimeout(t);
console.log(this);
$(this).addClass("showing");
}, function () {
recursive(0);
});
Fiddle
Try this:
var $f = $('ul').find('.frame');
$('ul li').hover(function(){
$f.removeClass('showing');
$(this).addClass('showing');
clearTimeout(timer);
}, function(){
recursive($(this).index());
});
function recursive(i) {
$f.removeClass('showing').eq(i).addClass('showing');
timer = setTimeout(function () {
recursive(++i % $f.length)
}, 1000);
}
recursive(0);
demo