What I need:
I need the button2 to appear when button1 is clicked. NEW STUFF: What I need it to do is save button2 there so if you refresh or "run" button 2 is already there how would I do that?
What I've done/Tried:
I've tried a bunch of different things such as changing it around changing the scope, as well as checking for console errors, I get none so I'm not too sure what is going on.
CODE
$(document).ready(function () {
$('#button2').hide();
window.highestLevel = 1;
$('#button1').click(function () {
Check();
highestLevel = 2;
});
if (highestLevel == 2) {
$('#button2').show();
}
function Check() {
localStorage.setItem('highestLevel', highestLevel);
}
});
WHAT WORKS
The only thing that works is it stores it correctly to the html local storage when I click $('#button1').
Link , jsFiddle
For this to work as you describe, the if-structure ...
if (highestLevel == 2) {
$('#button2').show();
}
... must be inside the click function. Try ...
$('#button1').click(function () {
Check();
highestLevel = 2;
$('#button2').show();
});
You really don't need the if-structure doing it this way ... in your code, the if-structure only runs on document-ready (ONE TIME).
You are mistaken about what is happening. This code block runs when the document is loaded, not after button1 is clicked.
You want to put it inside the click function
$('#button1').click(function () {
Check();
highestLevel = 2;
if (highestLevel == 2) {
$('#button2').show();
}
})
You will also want to prevent the default action of the button, which is to post the page causing it to reload, by adding an event object
$('#button1').click(function (e) {
e.preventDefault();
Check();
highestLevel = 2;
if (highestLevel == 2) {
$('#button2').show();
}
})
});
You don't need all of that... The problem is that
if (highestLevel == 2) {
$('#button2').show();
}
executes only once, when the document is ready.
Try this:
$(document).ready(function () {
$('#button2').hide();
$('#button1').click(function () {
$('#button2').show();
});
});
Try with this
window.highestLevel = localStorage.getItem('highestLevel');
$(document).ready(function () {
if (highestLevel == 2) {
$('#button2').show();
$('#button1').hide();
}
else {
highestLevel == 1
$('#button1').show();
$('#button2').hide();
}
$('div').click(function () {
if (highestLevel == 2) {
highestLevel = 1;
$('#button1').show();
$('#button2').hide();
}
else{
highestLevel = 2;
$('#button2').show();
$('#button1').hide();
}
Check();
});
});
function Check() {
localStorage.setItem('highestLevel', highestLevel);
}
Related
When I put setInterval(autoAdmit, 1000) just below the autoAdmit() function, it works but when I place it in the if statements of another function, it does not work. Any ideas on why this is happening? I can't find anything that's wrong with it. forgot to mention: the part not working is the autoAdmit() function. When I put a console.log in the function, it still logs but what is inside the for loop is not executed for some reason.
let clickIntervalId = null;
function autoAdmit() {
for (let element of document.getElementsByTagName('span')) {
if (element.innerHTML === 'Admit') {
console.log('There is someone waiting to join this meeting, automatically admitting them...');
element.click();
}
}
}
//setInterval(autoAdmit, 1000) (if it is placed here it works)
document.addEventListener('DOMContentLoaded', function() {
var checkbox = document.querySelector('#auto-admit .mdc-switch__native-control');
function isChecked() {
if (checkbox.checked ) {
// do this
if(clickIntervalId) clearInterval(clickIntervalId);
clickIntervalId = setInterval(autoAdmit, 1000); //(if it is placed here, it doesn't work)
console.log('checked')
} else {
// do that
clearInterval(clickIntervalId);
console.log('not')
}
}
checkbox.addEventListener('change', function() {
isChecked();
});
function check() {
isChecked();
}
setTimeout(check, 2000)
}
);
I am attempting to use Bootstrap's Collapse feature with custom icons from font-awesome. I am able to get the collapse to work but the problem I am having is that all of the icons are being triggered with Jquery's click, I want to scale this because at any given time the amount of "containers" can change. Any suggestions are appreciated.
$(document).ready(function () {
$faChevronDown = $('.fa-chevron-down');
var z = 0;
$faChevronDown.click(function () {
if (z == 0) {
turnUp();
z++;
} else {
turnDown();
z = 0;
}
});
});
function turnUp() {
$faChevronDown.removeClass('fa-chevron-down');
$faChevronDown.addClass('fa-chevron-up');
};
function turnDown() {
$faChevronDown.removeClass('fa-chevron-up');
$faChevronDown.addClass('fa-chevron-down');
};
JS Fiddle
Thank you
Edit : Thank you for the great answers!
You are clicking only one element, but your function is changing all icons, you have use $(this) instead in order to only change the icon you are clicking:
function toggleClass() {
$(this).toggleClass('fa-chevron-down fa-chevron-up');
};
and then use only one function:
$faChevronDown.click(toggleClass);
With this you avoid the use of Ifs and elses and the code is much simplier and small.
Set click handler on the parent element of a .fa-chevron-down element or if the parent element is not known on body element:
$(document).ready(function () {
var z = 0;
$("body").on("click", ".fa-chevron-down", function () {
if (z == 0) {
turnUp.call(this);
z++;
} else {
turnDown.call(this);
z = 0;
}
});
});
function turnUp() {
$(this).removeClass('fa-chevron-down');
$(this).addClass('fa-chevron-up');
};
function turnDown() {
$(this).removeClass('fa-chevron-up');
$(this).addClass('fa-chevron-down');
};
If you are using z variable only for switching classes fa-chevron-down and fa-chevron-up, the code could be simplified to:
$(document).ready(function () {
$("body").on("click", ".fa-chevron-down", function () {
$(this).toggleClass('fa-chevron-down fa-chevron-up');
});
});
You can pass in the element to perform granular toggling,
$(document).ready(function () {
$fa= $('.fa');
var z = 0;
$fa.click(function () {
if (z == 0) {
turnUp($(this));
z++;
} else {
turnDown($(this));
z = 0;
}
});
});
function turnUp(el) {
el.removeClass('fa-chevron-down');
el.addClass('fa-chevron-up');
};
function turnDown(el) {
el.removeClass('fa-chevron-up');
el.addClass('fa-chevron-down');
};
I'm not sure what the point of your z variable is, but you can reduce what you have, and fix the problem of not referencing the element by using this, by using just:
$(document).ready(function () {
$('.fa-chevron-down').click(function () {
$(this).toggleClass('fa-chevron-down fa-chevron-up')
});
});
jsFiddle example
I have 4 div bars in my home page. I'm loading those div bars by on click. But I want to load the the 1st div when page loading, then the 2nd div should load after 5 seconds. after 5 sec 3rd div should load like wise. this is my code : -
$(document).ready(function () {
$('#click1').click(function () {
$('#desc1').toggle(400);
$('#desc2').hide();
$('#desc3').hide();
$('#desc4').hide();
$('#desc5').hide();
});
});
Thnx,
var delay=5000;
$(document).ready(function () {
$('#desc1').toggle(function(){
$('#desc2').toggle(delay,function(){
$('#desc3').toggle(delay,function(){
$('#desc4').toggle(delay,function(){
$('#desc5').toggle(delay,function(){
});
});
});
});
});
});
Try this
You can show them with delay(ms);
$('#desc2').delay(5000).show();
$('#desc3').delay(10000).show();
$('#desc4').delay(15000).show();
$('#desc5').delay(20000).show();
You should consider setInterval();, cleanest way to achieve that IMHO.
Something like:
$('#click1').click(function () {
var nb = 1;
var int = setInterval( function(){
var el = $('#desc'+ nb);
el.addClass('show');
nb++;
if( nb > 5) {
clearInterval(int);
}
}, 400);
});
I copied that from an old project. Note that I use CSS to toggle the div.
Try this code
$('#click1').click(function () {
$('#desc1').fadeIn(400);
$('#desc2').delay(5000).fadeIn();
$('#desc3').delay(10000).fadeIn();
$('#desc4').delay(15000).fadeIn();
$('#desc5').delay(20000).fadeIn();
})
(function(s){
var i = 2, flag, url;
function load(){
if( i == 6){
console.log("complete output!");
clearTimeout(flag);
return ;
}
//make something
$(selector+i).load(ulr+"&index="+i, function(){
i++;
flag = setTimeout(load,5000);
})
}
load();
})('desc');
toggle can complete display or hide , i would like to use load and setTimeout
I am trying to modify the script below to click a button that looks like this on a site:
<button id="checkPrice-02070" onclick="checkPrice(02070,null); return false;" class="orangeDark">
<span>check price</span>
</button>
I am using the code below. So far, the page seems to keep reloading; nothing else happens.
Any advice to someone new?
(function () {
window.addEventListener("load", function (e) {
clickConfirmButton()
}, false);
})();
function clickConfirmButton() {
var buttons = document.getElementsByTagName('button');
var clicked = false;
for (var index = 0; (index < buttons.length); index++) {
if (buttons[index].value == "check price") {
buttons[index].click();
clicked = true;
break;
}
}
if (!clicked) {
setTimeout("window.location.reload()", 300 * 1000);
}
}
A <button>s value is not the visible text. You'd want to search textContent.
However:
If that sample HTML is correct, you'd be better off searching for ids that start with checkPrice. See the code below.
Are you sure you want to reload if the button is not found? If it is added by AJAX this is not the best approach. See this answer.
Don't use setTimeout with a string (to evaluate) argument like that. See the code below.
You do not need to wrap the code in an anonymous function.
Anyway, this should work, given the sample HTML:
window.addEventListener ("load", clickConfirmButton, false);
function clickConfirmButton (zEvent) {
var button = document.querySelector ("button[id^='checkPrice']");
if (button) {
button.click ();
}
else {
setTimeout (function () { location.reload(); }, 300 * 1000);
}
}
To check the button text anyway, use:
function clickConfirmButton (zEvent) {
var buttons = document.querySelectorAll ("button[id^='checkPrice']");
var clicked = false;
for (var index = 0, numBtn = buttons.length; index < numBtn; ++index) {
if (/check price/i.test (buttons[index].textContent) ) {
buttons[index].click();
clicked = true;
break;
}
}
if (!clicked) {
setTimeout (function () { location.reload(); }, 300 * 1000);
}
}
Please take a look at this page. I wrote click functions for each button (#signup_switch_btn and #signin_switch_btn, the big red and green ones) on this page but no one responds. http://tural.no-ip.org/ - Page in action. JS file - first.js
Js looks like this
$(document).ready(function () {
$('#signup_form').get(0).reset()
var counter = 0,
signin = $("#signin_switch_btn"),
signup = $("#signup_switch_btn"),
signin_f = $("#signin_form"),
holder = $("#holder"),
signup_f = $("#signup_form"),
f_container = $("#form_container");
function beforeAnimation() {
signin.removeClass('default_radius').addClass('right_radius');
signup.removeClass('default_radius').addClass('left_radius');
$("#container").animate({
marginTop: "-=150px",
}, 500);
}
$("#signup_switch_btn").click(function () {
if (counter === 0) {
beforeAnimation();
holder.css('backgroundColor', '#f91c06').height(275).slideDown("slow");
f_container.show();
signup_f.stop(true, true).fadeIn(1200);
} else {
holder.stop(true, true).animate({
height:"275",
backgroundColor:"#f91c06"
},1000);
signin_f.stop(true, true).fadeOut(1000);
f_container.stop(true, true).animate({
height:"260"
},1000);
signup_f.stop(true, true).fadeIn(1000);
}
counter++;
});
$("#signin_switch_btn").click(function () {
if (counter === 0) {
beforeAnimation();
holder.css('backgroundColor', '#5bd300').height(125).slideDown("slow");
f_container.show();
signin_f.stop().fadeIn(1200);
} else {
holder.stop(true, true).animate({
height:"125",
backgroundColor:"#5bd300"
},1000);
signup_f.stop(true, true).fadeOut(800);
f_container.stop(true, true).animate({
height:"110"
},1000);
signin_f.stop(true, true).fadeIn(1200);
}
counter++;
});
$('input[type="text"],input[type="password"]').focus(function () {
labelFocus(this, true);
}).blur(function () {
labelFocus(this, false);
});
function labelFocus(el, focused) {
var name = $(el).attr('name');
$('label[for="' + name + '"]').toggleClass('focused', !! focused);
}
$('input[type="text"],input[type="password"]').keypress(function () {
$(this).attr('class', 'valid');
});
});
No element with an id of signup_switch_btn exists in that page. Therefore the following binding will never work:
$("#signup_switch_btn").click
There are no buttons with id *signin_switch_btn* and *signup_switch_btn*. Your button's ids are signin and signup.
Your id on the html page are signing and signup. Change $('#signup_switch_btn') to $('#signup')