I tried to count an element clicks, and, in the right number call some action.
var count = 0;
document.getElementById("rolarbaixo").onClick = function(e) {
if( count >= 3 ) {
var elem = document.getElementById("noticia");
elem.setAttribute("style","top: 0px;");
}
else {
count ++;
}
};
When i clicked 3 times in the link "rolarbaixo" the div "noticia" set the "top: 0px;", but this doesn't work.
Why?
count ++ should be count++. If you press F12, you will be able to get to the developer tools and debug the javascript.
It's onclick in lowercase
var count = 0;
document.getElementById("rolarbaixo").onclick = function (e) {
if (count >= 2) {
var elem = document.getElementById("noticia");
elem.style.top = "0px";
} else {
count++;
}
};
FIDDLE
And it's >= 2 for three clicks (zero based and all).
AS the question is tagged jQuery, this would be it
$('#rolarbaixo').on('click', function() {
var clicked = $(this).data('clicked') || 0;
if (clicked >= 2) $('#noticia').css('top', 0);
$(this).data('clicked', ++clicked);
});
FIDDLE
Misprint in else statement and change onclick to lowercase:
var count = 0;
document.getElementById("rolarbaixo").onclick = function(e) {
if( count >= 3 ) {
var elem = document.getElementById("noticia");
elem.setAttribute("style","top: 0px;");
} else {
count++;
}
};
Related
I'm working on some web pages that use a button to scroll to the next div. I can get it to work on every page, except in this particular instance (see jsfiddle).
My problem is that the buttons don't work on loading the page, the user first has to start scrolling manually, before the buttons work. I'm assuming that's because of some fault in my jQuery coding, which I've looked over and over, but I can't seem to find the problem. Is there anyone who is a bit more familiar with jQuery than I am who can offer me a solution?
http://jsfiddle.net/y5wx7nst/3/
$(document).ready(function () {
var currentElement = $("#bodytext > div:nth-child(1)");
var onScroll = function () {
var container = $("#bodytext");
var children = $(".section");
for (var i = 0; i < children.length; i++) {
var child = $(children[i]);
var childLeft = container.offset().left < child.offset().left;
if (childLeft) {
currentElement = child;
console.log(currentElement);
return;
}
}
};
var scrollToElement = function ($element) {
var container = $("#bodytext");
var children = $(".section");
var width = 0;
for (var i = 0; i < children.length; i++) {
var child = $(children[i]);
if (child.get(0) == $element.get(0)) {
if (i === 0) {
width = 0;
}
container.animate({
scrollLeft: width
}, 500);
onScroll();
}
if (child.next().length > 0) {
width += child.next().offset().left - child.offset().left;
} else {
width += child.width();
}
}
};
var buttonright = function (e) {
scrollToElement(currentElement.next());
};
var buttonleft = function (e) {
var container = $("#bodytext");
if (currentElement.prev().length > 0) {
if (container.offset().left == currentElement.prev().offset().left) {
currentElement = currentElement.prev().prev().length > 0 ? currentElement.prev().prev() : currentElement.prev();
} else {
currentElement = currentElement.prev();
}
}
scrollToElement(currentElement);
};
$("#bodytext").scroll(onScroll);
$("#buttonright").click(buttonright);
$("#buttonleft").click(buttonleft);
});
You are only calling the onScroll() function after you initially scroll:
$("#bodytext").scroll(onScroll);
I added this before that declaration and it all worked:
onScroll();
jsfiddle: http://jsfiddle.net/y5wx7nst/5/
When code run value of currentElement is not correct. So you should calculate it calling a function onScroll();
...
$("#bodytext").scroll(onScroll);
$("#buttonright").click(buttonright);
$("#buttonleft").click(buttonleft);
onScroll();
});
How can setTimeout save and load data for select form inputs? I tried to get it working with event listeners. I checked the capture and bubble which I am still trying to wrap my head around.
I need it to set or get values assigned it to respective elements from the input field depending if there is changes such as focus or blur on the fields.
Is there a feature or step I missed and where should I start looking?
answers = document.getElementsByName('answers[]');
for(var i = 0; i < answers.length; i++) {
nodeIndex = 'answer' + i;
if(answers[i] == ''){
answers[i].addEventListener('blur', function(){
localStorage.setItem(nodeIndex, answers[i].value);
});
}
else {
answers[i].addEventListener('focus', function(){
answers[i].value = localStorage.getItem(nodeIndex);
localStorage.setItem(nodeIndex, answers[i].value);
});
answers[i].addEventListener('blur', function(){
localStorage.setItem(nodeIndex, answers[i].value);
answers[i].value = localStorage.getItem(nodeIndex);
});
} // end if
} // end forloop
REVISED
I noticed only the last element is affected. When I enter text in answers[0] to answers[14], their values are saved and set/copied to only the last element. How am I using this incorrectly? I read up and seem to follow the rules...
function processAnswers(i, answers) {
setTimeout(function() {
nodeIndex = 'answer' + i;
if(localStorage.getItem(nodeIndex) === null) {
answers[i].addEventListener('blur', function(){
localStorage.setItem(nodeIndex, answers[i].value);
});
} // end if
else {
answers[i].addEventListener('focus', function(){
answers[i].value = localStorage.getItem(nodeIndex);
localStorage.setItem(nodeIndex, answers[i].value);
});
answers[i].addEventListener('blur', function(){
localStorage.setItem(nodeIndex, answers[i].value);
answers[i].value = localStorage.getItem(nodeIndex);
});
} // end else
}, 100); // end setTimeout()
} // end processAnswers();
answers = document.getElementsByName('answers[]');
for(var i = 0; i < answers.length; i++) {
processAnswers(i, answers);
}
My code was getting out of hand. I decided to start over and keep it simple... and it worked!
var answers;
var clearAnswersBtn;
var clearAnswers;
var MainLoop = function MainLoopFunction(){
answers = document.getElementsByName('answers[]');
clearAnswersBtn = document.getElementsByTagName('body')[0];
clearAnswersBtn.innerHTML = clearAnswersBtn.innerHTML + '<button id="clearanswers" style="position:fixed;bottom:0;right:0;padding:5px;margin:0 10px 10px 0;z-index:99999">Clear Saved Answers</button>';
clearAnswers = document.getElementById('clearanswers');
clearAnswers.addEventListener("click", function(){
localStorage.clear();
alert("Answers Cleared!");
});
function saveAnswers(i, answer){
if(localStorage.getItem(i)) {
answer.value = localStorage.getItem(i);
}
else {
answer.addEventListener("blur", function(){
if(!localStorage.getItem(i)) {
localStorage.setItem(i, answer.value);
}
});
}
} // end saveAnswers()
setTimeout(function(){
for( var i = 0; i < answers.length; i++) {
saveAnswers(i, answers[i]);
}
}, 0)
}();
I use code from HERE (Stackoverflow.com)
I do it for my stuff like this
var i = 0;
var links = ["http://www.example.com/page","http://www.example.com/anotherpage"];
var renew = setInterval(function(){
document.getElementById("changelink").href = links[i];
if(links.length==i){
i=0;
}else{
i++;
}
},5000);
<a id='changelink' href='http://google.bg/'>test</a>
but when the link change it writes me undefined, I try with the same code with iframe and also gives me undefined whats going on ?
Your count is off by one
var i = 0;
var links = ["http://www.example.com/page", "http://www.example.com/anotherpage"];
var renew = setInterval(function () {
document.getElementById("changelink").href = links[i];
if (links.length - 1 == i) {
i = 0;
} else {
i++;
}
}, 5000);
When links.length == i you're actually trying to get an array index that doesn't exists, so you'll have to subtract one and do links.length - 1 == i
I am not that strong when it comes to JS. However I have written a little bit of code that does exactly what I want it to do.
function showDiv(divName)
{
var divnameids = new Array();
divnameids[0] = "accessories";
divnameids[1] = "connections";
divnameids[2] = "features";
divnameids[3] = "phones";
divnameids[4] = "services";
for (var i=0;i<divnameids.length;i++)
{
if (divnameids[i] == divName) divnameids.splice(i, 1);
}
for (var i=0;i<divnameids.length;i++)
{
document.getElementById(divnameids[i]).style.display='none';
document.getElementById('but' + divnameids[i]).className = "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only";
}
document.getElementById('but' + divName).className = "quotebutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only";
document.getElementById(divName).style.display='block';
}
This works but the corresponding buttons triggering the opening and closing of divs like tabs.
However I now wish to use another button to skip through these divs in order (the same order as the JS array)
could somebody suggest the best approach to doing this?
This code should open each div, and then close the previous one:
var currentPos = 0;
$('#yourButtonId').on('click', function () {
if (currentPos > 0)
$('#' + divnameids[currentPos - 1]).hide();
if (currentPos == 0) // hide the last tab when coming back to the start
$('#' + divnameids[divnameids.length - 1]).hide();
$('#' + divnameids[currentPos]).show();
currentPos += 1;
// Reset the current position to 0
if (currentPos >= divnameids.length)
currentPos = 0;
});
Assuming that you wanted a pure Javascript solution, this works (assuming that I was in the ballpark on your HTML):
function nextDiv() {
var divnameids = new Array();
divnameids[0] = document.getElementById("accessories");
divnameids[1] = document.getElementById("connections");
divnameids[2] = document.getElementById("features");
divnameids[3] = document.getElementById("phones");
divnameids[4] = document.getElementById("services");
var len = divnameids.length;
for(var i=0; i < len; i++) {
if(i == (len - 1)) {
divnameids[len-1].style.display = 'none';
divnameids[0].style.display = '';
break;
}
else {
if(divnameids[i].style.display == '') {
divnameids[i].style.display = 'none';
divnameids[i+1].style.display = '';
break;
}
}
}
}
JSFiddle: http://jsfiddle.net/yjf8w/
$(document).ready(function(){
$(".content-box-front").click(function(){
$(".full-content-back").fadeIn("slow");
$(".full-content-front").fadeIn("slow");
$(".content-box-front").fadeOut("slow");
$(".content-box-back").fadeOut("slow");
});
});
$(document).ready(function(){
$(".full-content-front").click(function(){
$(".full-content-back").fadeOut("slow");
$(".full-content-front").fadeOut("slow");
$(".content-box-front").fadeIn("slow");
$(".content-box-back").fadeIn("slow");
});
});
this should help put the name of the divs in where full-content.... is
I am trying to use Javascript to disable a button after it is clicked x amount of times. For simplicity sake lets say x = 2 for now. I cannot seem to get the counter to increment. Thank You for any help!
var $ = function (id) {
return document.getElementById(id);
}
window.onload = function () {
coke.onclick = function(){
var count =0;
if (count >= 1)
{
coke.disabled = true;
}
else
count++;
};
}
Where "coke" is the element ID. If i get rid of the if statement and just have coke.disabled = true, of course it works and disables after one click. I'm sure there is a core concept I am missing.
Thank You
This is happening because each time the onclick event is fired, your var count is being assigned to 0, so it will never be greater than or equal to one in your function. If you initialize the count var outside of the onclick function, it will behave as expected.
window.onload = function () {
var count = 0;
coke.onclick = function(){
if (count >= 1)
{
coke.disabled = true;
}
else
count++;
};
}
You need to define count outside the scope of your onclick function:
var $ = function (id) {
return document.getElementById(id);
}
var count = 0; // set initial count to 0
window.onload = function () {
coke.onclick = function(){
if (count >= 1)
{
coke.disabled = true;
}
else
count++;
};
}