For some reason my counter isn't changing to 1 when I click again it makes the width 100% again.(Found this out using Chrome's inspect)
$(document).ready(function columnreacts1() {
var columncounter1 = 0;
if (columncounter1 == 0) {
$("#lol").click(function() {
$("#column1").animate({ width: '100%' });
});
$("#lol").click(function() {
$("#column2").hide();
});
columncounter1 = 1;
} else {
$("#lol").click(function() {
$("#column1").animate({ width: '50%' });
});
$("#lol").click(function() {
$("#column2").show();
});
columncounter1 = 0;
}
});
It seems the condition need to be checked after click event. Inside the event check the if condition.Also action on column2 & column1 is due to same event,so attaching one click event will work
$(document).ready(function columnreacts1() {
var columncounter1 = 0;
$("#lol").click(function() {
if(columncounter1 === 0) {
$("#column1").animate({width: '100%'});
$("#column2").hide();
columncounter1 = 1;
}
else {
$("#column1").animate({width: '50%'});
$("#column2").show();
columncounter1 = 0;
}
});
});
Related
How can I combine this to reduce the repetition. What is the best way so I don't have duplicate click functions and do you have any suggestions to combine the lightning functions even though the parameters are different? Thanks
$(document).ready(function(){
var headclix = 0, eyeclix = 0, noseclix = 0, mouthclix = 0;
lightning_one();
lightning_two();
lightning_three();
$("#head").click(function(){
if(headclix < 9){
$("#head").animate({left:"-=367px"}, 500);
headclix += 1;
} else{
$("#head").animate({left:"0px"}, 500);
headclix = 0;
}
})
$("#eyes").click(function(){
if(eyeclix < 9){
$("#eyes").animate({left:"-=367px"}, 500);
eyeclix += 1;
} else{
$("#eyes").animate({left:"0px"}, 500);
eyeclix = 0;
}
})
$("#nose").click(function(){
if(noseclix < 9){
$("#nose").animate({left:"-=367px"}, 500);
noseclix += 1;
} else{
$("#nose").animate({left:"0px"}, 500);
noseclix = 0;
}
})
$("#mouth").click(function(){
if(mouthclix < 9){
$("#mouth").animate({left:"-=367px"}, 500);
mouthclix += 1;
} else{
$("#mouth").animate({left:"0px"}, 500);
mouthclix = 0;
}
})
});//end doc.onready function
function lightning_one(){
$("#container #lightning1").fadeIn(250).fadeOut(250);
setTimeout("lightning_one()", 4000);
}
function lightning_two(){
$("#container #lightning2").fadeIn("fast").fadeOut("fast");
setTimeout("lightning_two()", 5000);
}
function lightning_three(){
$("#container #lightning3").fadeIn("fast").fadeOut("fast");
setTimeout("lightning_three()", 7000);
}
Something like that
var obj = {
headclix: 0,
eyesclix: 0,
noseclix: 0,
mouthclix: 0
}
var types = ['head', 'eyes', 'nose', 'mouth'];
for (var i in types) {
var type = types[i];
$("#" + type).click(function() {
if (obj[type + 'clix'] < 9) {
$("#" + type).animate({ left: "-=367px" }, 500);
obj[type + 'clix'] += 1;
} else {
$("#" + type).animate({ left: "0px" }, 500);
obj[type + 'clix'] = 0;
}
});
}
This is what I had in mind:
$(document).ready(function () {
var head = {clix: 0, id: $("#head")}, eyes = {clix: 0, id: $("#eyes")}, nose = {clix: 0, id: $("#nose")},
mouth = {clix: 0, id: $("#mouth")};
lightning_one();
lightning_two();
lightning_three();
head.click(function () {
body_clix(head.id, head.clix)
})
eyes.click(function () {
body_clix(eyes.id, eyes.clix)
})
nose.click(function () {
body_clix(nose.id, nose.clix)
})
mouth.click(function () {
body_clix(mouth.id, mouth.clix)
})
});//end doc.onready function
function body_clix(b_part_id, clix) {
if (clix < 9) {
b_part_id.animate({left: "-=367px"}, 500);
clix += 1;
} else {
b_part_id.animate({left: "0px"}, 500);
mouthclix = 0;
}
}
function lightning_one() {
$("#container").find("#lightning1").fadeIn(250).fadeOut(250);
setTimeout("lightning_one()", 4000);
}
function lightning_two() {
$("#container").find("#lightning2").fadeIn("fast").fadeOut("fast");
setTimeout("lightning_two()", 5000);
}
function lightning_three() {
$("#container").find("#lightning3").fadeIn("fast").fadeOut("fast");
setTimeout("lightning_three()", 7000);
}
You can try this:
$(document).ready(function() {
var clickCounter = [];
var types = ['head', 'eyes', 'nose', 'mouth'];
//lightning_one();
//lightning_two();
//lightning_three();
types.forEach(function(type) {
clickCounter[type] = 0;
$("#" + type).click(function() {
processClick(this, type);
});
});
function processClick(element, type) {
if (element) {
if (clickCounter[type] < 9) {
$(element).animate({left: "-=367px"}, 500);
clickCounter[type] += 1;
} else {
$(element).animate({left: "0px"}, 500);
clickCounter[type] = 0;
}
console.log(type + ': ' + clickCounter[type]);
}
}
function lightning_one() {
$("#container #lightning1").fadeIn(250).fadeOut(250);
setTimeout("lightning_one()", 4000);
}
function lightning_two() {
$("#container #lightning2").fadeIn("fast").fadeOut("fast");
setTimeout("lightning_two()", 5000);
}
function lightning_three() {
$("#container #lightning3").fadeIn("fast").fadeOut("fast");
setTimeout("lightning_three()", 7000);
}
});
div.holder > div{
display:inline-block;
border: 1px solid black;
margin:10px;
padding:5px;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click on one of these: </p>
<div class='holder'>
<div id="head">Head</div>
<div id="eyes">Eyes</div>
<div id="nose">Nose</div>
<div id="mouth">Mouth</div>
</div>
Hello all of the knowers of javascript,
I have a little problem about javascript and would like one of you to help me to solve the problem.
If you know the 'PageRevealEffects' plugin there are multiple pages that in one HTML are turning on by javascript.
Here are the plugin documentation and demo version at the bottom of documentation: https://tympanus.net/codrops/2016/06/01/multi-layer-page-reveal-effects/
So my problem is I want to connect the navbar and logo click to the plugin,
http://bagrattam.com/stackoverflow/PageRevealEffects/
Here is the code by which it works
(function() {
$('.navbar-brand').click(function(){
$(this).data('clicked', true);
});
var n;
$('#nav a').click(function () {
n = $(this).parent().index() + 1;
});
var pages = [].slice.call(document.querySelectorAll('.pages > .page')),
currentPage = 0,
revealerOpts = {
// the layers are the elements that move from the sides
nmbLayers : 3,
// bg color of each layer
bgcolor : ['#52b7b9', '#ffffff', '#53b7eb'],
// effect classname
effect : 'anim--effect-3'
};
revealer = new Revealer(revealerOpts);
// clicking the page nav
document.querySelector('.navbar-brand').addEventListener('click', function() { reveal('bottom'); });
var navli = document.getElementsByTagName("ul");
for (var i = 0; i < navli.length; i++) {
navli[i].addEventListener('click', function() { reveal('top'); });
}
// triggers the effect by calling instance.reveal(direction, callbackTime, callbackFn)
function reveal(direction) {
var callbackTime = 750;
callbackFn = function() {
// this is the part where is running the turning of pages
classie.remove(pages[currentPage], 'page--current');
if ($('.navbar-brand').data('clicked')) {
currentPage = 0;
} else {
currentPage = n;
}
classie.add(pages[currentPage], 'page--current');
};
revealer.reveal(direction, callbackTime, callbackFn);
}
})();
http://bagrattam.com/stackoverflow/PageRevealEffects/
Here is the solution
var n;
$('#navbar a').click(function(){
if($(this).attr('id') == 'a') {
n = 0;
} else if($(this).attr('id') == 'b') {
n = 1;
} else if($(this).attr('id') == 'c') {
n = 2;
} else if($(this).attr('id') == 'd') {
n = 3;
} else if($(this).attr('id') == 'e') {
n = 4;
};
});
var pages = [].slice.call(document.querySelectorAll('.pages > .page')),
currentPage = 0,
revealerOpts = {
// the layers are the elements that move from the sides
nmbLayers : 3,
// bg color of each layer
bgcolor : ['#52b7b9', '#ffffff', '#53b7eb'],
// effect classname
effect : 'anim--effect-3'
};
revealer = new Revealer(revealerOpts);
// clicking the page nav
document.querySelector("#a").addEventListener('click', function() { reveal('top'); });
document.querySelector("#b").addEventListener('click', function() { reveal('top'); });
document.querySelector("#c").addEventListener('click', function() { reveal('top'); });
document.querySelector("#d").addEventListener('click', function() { reveal('top'); });
document.querySelector("#e").addEventListener('click', function() { reveal('top'); });
// triggers the effect by calling instance.reveal(direction, callbackTime, callbackFn)
function reveal(direction) {
var callbackTime = 750;
callbackFn = function() {
classie.remove(pages[currentPage], 'page--current');
currentPage = n;
classie.add(pages[currentPage], 'page--current');
};
revealer.reveal(direction, callbackTime, callbackFn);
}
I have this code:
document.getElementById('showRtb').addEventListener('click', function () {
document.getElementById('rtb').style.display="inline-table";
});
document.getElementById('hideRtb').addEventListener('click', function () {
document.getElementById('rtb').style.display="none";
});
but now I want without jquery effect to make FadeIn animation, just with javascript. Without css3 and without jquery. Is that possible?
You can use setInterval(), getComputedStyle(). See also TheAnimationinterface
var rtb = document.getElementById("rtb"),
timer = null;
document.getElementById("showRtb").addEventListener("click", function() {
if (rtb.style.opacity != 1) {
clearTimeout(timer);
rtb.style.display = "inline-table";
timer = setInterval(function() {
rtb.style.opacity = +rtb.style.opacity + .10;
if (+getComputedStyle(rtb).getPropertyValue("opacity") >= 1) {
clearInterval(timer);
}
}, 100)
}
});
document.getElementById("hideRtb").addEventListener("click", function() {
if (rtb.style.opacity != 0) {
clearTimeout(timer);
timer = setInterval(function() {
rtb.style.opacity = +rtb.style.opacity - .10;
if (+getComputedStyle(rtb).getPropertyValue("opacity") <= 0) {
rtb.style.display = "none";
clearInterval(timer);
}
}, 100)
}
});
#rtb {
width: 100px;
height: 100px;
background: olive;
opacity: 0;
display: none;
}
<button id="showRtb">show</button>
<button id="hideRtb">hide</button>
<br>
<div id="rtb"></div>
Anyone know what is wrong with this code JS code? The function does not fire and console isn't offering any insight. This was working in the click function with minor changes but not in its own function.
//History Chart
$expanded = true;
var $parent;
function graphShowHide(parent) {
$parent = parent;
if ($expanded) {
$('#ExpandedGraphRow').hide("fast", function() {
});
if($('body').innerWidth() < 673) {
$('div.nbs-flexisel-nav-left, div.nbs-flexisel-nav-right').css('top', '415px');
$(parent).find('#ExpandedGraphRow').css({
position: 'relative',
bottom: '0'
});
$(parent).find('.animation-wrapper').animate({
height: '397px'},
200, function() {
});
}
setTimeout(function($) {
$(parent).find('.history-bar-wrapper').width('100%');
}, 200);
$(parent).find('h4 img').hide('fast');
$(parent).find('h4 span').width('100%').css('float', 'none');
$expanded = false;
$(this).text('show history');
} else {
var currentWidth = $(parent).find('h4').width();
var nthChild = $(parent).index();
if($('body').innerWidth() > 982 && nthChild == 2) {
$('.nbs-flexisel-nav-right').trigger('click');
} else if($('body').innerWidth() < 983 && nthChild == 1) {
$('.nbs-flexisel-nav-right').trigger('click');
}
$(parent).find('h4 span, .history-bar-wrapper').width(currentWidth);
$(parent).find('h4 span').css('float', 'left');
$(parent).find('h4 img').show('slow');
$('#ExpandedGraphRow').show("slow", function() {
});
if($('body').innerWidth() < 673) {
$('div.nbs-flexisel-nav-left, div.nbs-flexisel-nav-right').css('top', '748px');
$(parent).find('#ExpandedGraphRow').css({
position: 'absolute',
bottom: '66px'
});
$(parent).find('.animation-wrapper').animate({
height: '729px'},
200, function() {
});
}
$(this).text('hide history');
$expanded = true;
}
}
$('.history-button').click(graphShowHide('.BMI'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Try this:
$('.history-button').click(function() {
graphShowHide('.BMI');
});
You are calling the function, not binding it to the click. Wrap the call in another function for it to work correctly:
$('.history-button').click(function() {
graphShowHide('.BMI');
});
http://learn.jquery.com/javascript-101/functions/
You have to change this line:
$('.history-button').click(graphShowHide('.BMI'));
By this one:
$('.history-button').click(function() { graphShowHide('.BMI') });
I'm trying to make a map with repeated images, and I also want tiles on map to be clickable. Here I wrote a script but I have problem about unchecking checked images.
http://jsbin.com/aruge/edit
Please help.
here's the jQuery version of your requirement Demo : http://jsbin.com/utepi3
$(function() {
var counter = 0;
for(var i = 0;i< 5; i++) {
for(var k = 0; k < 5; k++) {
var img = $('<img />', {
id : 'i'+i+'k'+k,
src: 'http://mclightning.com/gr.jpg',
width : 30,
height : 30,
alt : 'test',
value : '0'
}).appendTo('body').wrap('<div class="hello"/>');
$('.hello').eq(counter).css({
position : 'absolute',
left: i*30,
top : k*30,
cursor : 'pointer'
});
counter++;
}
}
$('img').hover(function() {
if($(this).attr('value') != 1) {
$(this).attr('src', 'http://mclightning.com/grover.jpg');
}
},function() {
if($(this).attr('value') != 1) {
$(this).attr('src', 'http://mclightning.com/gr.jpg');
}
}).bind('click',function() {
if($(this).attr('value') !='1' ) {
$(this).attr('src', 'http://mclightning.com/grclick.jpg');
$(this).attr('value','1');
}else if($(this).attr('value') !='0' ) {
$(this).attr('src', 'http://mclightning.com/gr.jpg');
$(this).attr('value','0');
}
});
});
PS : added image toggler on re-click =)
i don't know exactly what do you want but will that help
function gotover(val) {
if(document.getElementById(val).st!='1') {
x=val.substr(1,1)*30;
y=val.substr(3,1)*30;
document.getElementById(val).src="http://mclightning.com/grover.jpg";
}
}
function gotout(val) {
if(document.getElementById(val).st!='1') {
x=val.substr(1,1)*30;
y=val.substr(3,1)*30;
document.getElementById(val).src="http://mclightning.com/gr.jpg";
}
}
function gotclicked(val) {
alert(document.getElementById(val).alt);
}
var x=0;
var y=0;
for(i=0; i<5; i++)
{
x=i*30;
for(k=0; k<5; k++)
{
y=k*30;
document.write('<div class="kutu" style="position: absolute; left: '+x+'px; top: '+y+'px;"><img onmouseover="gotover(this.id)" onclick="gotclicked(this.id)" onmouseout="gotout(this.id)" id="i'+i+'k'+k+'" src="http://mclightning.com/gr.jpg" width="30" height="30" alt="test"></div>');
}
}