We Keep Coding

Run AJAX every x seconds with different data each time [closed]

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();
});

Check content css in javascript [closed]

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 5 years ago.
Improve this question
How can I check if the content in css is equal to mobile or desktop?
var push = document.querySelector('.push-button');
var result = getComputedStyle(push).content;
if ($('.push-button').css('content') == "mobile") {
$(document).ready(function () {
$('.main').css("color", "black");
});
} else if (result === "desktop") {
$(document).ready(function () {
$(".push-button").click(function () {
$('.desktop-menu').slideToggle(1000);
$('.desktop-menu').css('display', 'block');
});
});
}

Try to do this
if ($('.push-button').css('content') == "\"mobile\"") {

Information is not sufficient but Check if this can help you
var push = document.getElementByClass(".content");
if (matchMedia) {
const mq = push.matchMedia("(min-width: 1024px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
function WidthChange(mq) {
if (mq.matches) {
$(document).ready(function() {
$(".push-button").click(function() {
$('.desktop-menu').slideToggle(1000);
$('.desktop-menu').css('display', 'block');
});
});
} else {
$(document).ready(function() {
$(".push-button").click(function() {
$('.desktop-menu').slideToggle(1000);
$('.desktop-menu').css('display', 'block');
);
});
}
}

Can i shorten this jquery code [closed]

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);
});

Add pause on hover to jQuery [closed]

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

HTML Input (Javascript) [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 11 years ago.
please help me
I have a script which works on First Page Load, And when i use the function of this script again is doesn't work until i refresh the page, Means i want this script to work always, Not only when i will refresh the page, here is the script:
$(function(){
var fullEmail = $('#email').val();
console.log(fullEmail.length);
if(fullEmail.length>15)
{
textDot = fullEmail.substr(0, 14)+'...';
$('#email').val(textDot);
}
var oldText = $('#email').val();
$('#email').bind({
mouseover : function () {
$('#email').val(fullEmail);
},
mouseout: function () {
$('#email').val(oldText);
}
});
});
thanks in advance..

I have created a JSFiddle to demonstrate this. When you type in the email and then leave the input box, it shortens. When you re-enter the input box it expands back to its full length...
$('#email').bind('change', function () {
$self = $(this);
var fullEmail = $self.val();
var shortEmail = fullEmail;
if(fullEmail.length > 15) {
shortEmail = fullEmail.substr(0, 14)+'...';
$self.val(shortEmail );
}
$self.bind({
focus: function () {
$self.val(fullEmail);
},
blur: function () {
$self.val(shortEmail);
}
});
});

var oldText;
var fullEmail;
function smt(){
fullEmail = $('#email').val();
console.log(fullEmail.length);
if(fullEmail.length>15)
{
textDot = fullEmail.substr(0, 14)+'...';
$('#email').val(textDot);
}
oldText = $('#email').val();
}
$(function(){
$('#email').bind({
mouseover : function () {
smt();
$('#email').val(fullEmail);
},
mouseout: function () {
smt();
$('#email').val(oldText);
}
});
});