I have two buttons that are divs and two paragraph, they each match up to each other. So you click button one, button one rotates 45 degrees and toggleslides paragraph one open, button two does the same except for paragraph two. For some reason though if you click the first button it opens both paragraphs, and if you click button two nothing happens, and I can't figure out why. I'm going to need to set up multiple buttons and paragraphs eventually.
var epidural_analgesia_INFO = document.images[0];
epidural_analgesia_INFO.style.setProperty("-webkit-transition", "-webkit-transform 0.3s ease-in-out");
var epidural_analgesia_DEG = 0;
epidural_analgesia_INFO.addEventListener('click', function() {
$("p#epidural_analgesia_TEXT").slideToggle("fast");
epidural_analgesia_DEG += 45;
epidural_analgesia_INFO.style.setProperty('-webkit-transform', 'rotateZ('+epidural_analgesia_DEG+'deg)');
});
var effects_of_yoga_INFO = document.images[0];
effects_of_yoga_INFO.style.setProperty("-webkit-transition", "-webkit-transform 0.3s ease-in-out");
var effects_of_yoga_DEG = 0;
effects_of_yoga_INFO.addEventListener('click', function() {
$("p#effects_of_yoga_TEXT").slideToggle("fast");
effects_of_yoga_DEG += 45;
effects_of_yoga_INFO.style.setProperty('-webkit-transform', 'rotateZ('+effects_of_yoga_DEG+'deg)');
});
I have a fiddle setup, but it's large and so I've pulled out the specific parts here, but if you want to see teh fiddle it's here: http://jsfiddle.net/loriensleafs/AM2a2/12/ thanks very much for helping me.
You're assigning your click handlers to the elements referenced by these two variables:
epidural_analgesia_INFO
effects_of_yoga_INFO
but both variables are initialised to reference document.images[0]. So clicking that image triggers both handlers. Should the second one perhaps use an index of 1 to get the second image?
(As an aside, why use addEventListener() when you seem to be using jQuery?)
got it, in teh first line
var epidural_analgesia_INFO = document.getElementById('epidural_analgesia_INFO');
instead of
var effects_of_yoga_INFO = document.images[0];
Related
I have following code working so far: JSFIDDLE DEMO
The relevant JS is here:
// Define classes & background element.
var classes = ['bg1','bg2','bg3','bg4'],
$bg = document.getElementById('blah');
// On first run:
$bg.className = sessionStorage.getItem('currentClass') || classes[0];
// On button click:
$('.swapper').mousedown(function () {
// (1) Get current class of background element,
// find its index in "classes" Array.
var currentClassIndex = classes.indexOf($bg.className);
// (2) Get new class from list.
var nextClass = classes[(currentClassIndex + 1)%classes.length];
// (3) Assign new class to background element.
$bg.className = nextClass;
// (4) Save new class in sessionStorage.
sessionStorage.setItem('currentClass', nextClass);
});
For my purposes, this functionally working great -- I can click a single button to continually swap between those four classes while also storing the current class to sessionStorage, so that when I click links on my website, the currentClass is loaded right away. (Note: on my website the setup is the same, but the classes bg1, bg2, bg3, and bg4 contain background images.)
What I'd like it to do:
When swapping from one class to another, I'd like it to do a quick/short cross-fade. Right now it just snaps from one class/background to another.
My thinking was: is there a way I can trigger a CSS class transition or animation that contains the fade, perhaps as a parent class? I know there's a jQuery fade function, but I haven't been able to get it working with my setup so that it triggers on mouseClick.
Here's an updated jsfiddle based on your comment where you said you've sort of having it work.
I've added the timeout functions
setTimeout(function(){$bg.className = nextClass}, 500);
setTimeout(function(){$($bg).fadeIn(500)}, 500)
The first timeout makes it so that the image is swapped right after the first image fades out. The second timeout gives it a bit of time to load in so it's not so jittery.
You can play with the }, 500); number to get it timed just like you want, 500 is half a second, 1000 is a second etc.
I'm working on something where multiple functions will add various Event listeners to an initially hidden div, let's just call it secretBlock. Only one will ever be active at any given point, but all said functions will manipulate it by:
First cloning sercetBlock to ensure no previous listeners are still attached
Then setting the display to flex
HTML:
<div id="secretBlock" hidden>Secret</div>
JavaScript:
function exampleFuction() {
var secretBlock = document.getElementById('secretBlock');
var secretClone = secretBlock.cloneNode(true);
secretBlock.parentNode.replaceChild(secretClone, secretBlock);
secretBlock.style.display = 'flex';
....
}
but the last part, setting the display, is not firing.
I assumed this had something to do with async-ness, but
setTimeout(function(){ secretBlock.style.display = 'flex' }, 999);
also had no effect.
However, one of the functions appends the div inside of another div right after setting the display, causing it to fire properly:
secretBlock.parentNode.replaceChild(secretClone, secretBlock);
secretBlock.style.display = 'flex';
otherDiv.appendChild(secretBlock);
After a bit of testing, I found out it doesn't matter when I set the display (now vs later) or where it is in the code, as long as secretBlock gets appended to another div, the display change will register, otherwise staying hidden.
.......which sorta left me clueless as to what's going on, any insight would thus be much appreciated~~
Was a reference issue.
After .replaceChild() replaces secretBlock, the initial reference:
var secretBlock = document.getElementById('secretBlock')
becomes obsolete as it still points to the old, original element which is not apart of the html document anymore. Thus you need to redirect the reference to the cloned element:
secretBlock.parentNode.replaceChild(secretClone, secretBlock);
secretBlock = document.getElementById('secretBlock');
secretBlock.style.display = 'flex';
Thanks Dr.Molle!
function clearObjects() {
var co = document.getElementsByClassName("clearable");
var i;
alert("function runs");
for (i = 0; i < co.length; i++) {
alert("for loop runs 1/3");
alert("for loop runs 2/3, time to erase");
co[i].style.backgroundColor = "#FFFFFF";
alert("for loop runs 1, erased 1");
};
};
clearObjects();
This function that I has here is suppose to change the color of all divs with the class of clearable to a background color of white, where they are "Erased." The function runs inside of my other code, but my issue is that the for loop stops running when it gets to:
co[i].style.backgroundColor = "#FFFFFF";
I put alerts in there to see what parts of the function run, and the final alert "for loop runs 1, erased 1" does not alert, and the for loop does not run again. I have looked and could not find a problem similar to mine. Does anyone know what I am doing wrong? I will post all of my code if neccessary. Thanks!
I fixed my problem by setting the visibility to hidden instead of background to white, and by setting the class of the new divs with jquery's attr() function instead of what I had. It works perfectly now, thanks for all the input!
The issue you were running into is that you were attempting to set the class of each drawn object in CSS. The change to fix that is changing this:
var div = $('<div>').css({
'class': 'clearable'
});
To this:
var div = $('<div>').css({
...
}).addClass('clearable');
You can also remove the element easily by using co[i].parentNode.removeChild(co[i]) instead of changing the background color (frees up memory). I've reversed the direction of the loop in my example because you're dealing with removing elements (and that shifts the array one element backwards causing you to skip an item each time if going forwards).
See my code pen: http://codepen.io/anon/pen/BNYRWE
Have been trying to learn some basics of web designing involving some simple HTML, CSS, JS/Jquery and have been coming up to certain obstacles that I haven't been able to find a way to work around.
One of the things I'm trying to implement is rotating a small number of divs. At the lack of some proper manner for it, what I rigged up was to .toggle off one of them while toggling on another div that was hidden from page load.
Not the prettiest thing, but it kind of works though oddly enough it only works twice before for some reason the cycle stops working.
function moveSide(){
var intervalId;
var childCount = 2;
var preLast = childCount + 2;
var newLast = childCount + 3;
intervalId = setInterval(function () {
$(".column:nth-of-type(" + childCount + ")").toggle("slide", function(){
$(".column:nth-of-type(" + preLast + ")").removeClass("last").delay(1, function(){
$(".column:nth-of-type(" + newLast + ")").addClass("last").delay(1).toggle("slide", function(){
childCount++;
preLast = childCount + 2;
newLast = childCount + 3;
//alert(childCount);
});
});
});
},5000);
}
I'm not sure if using nth-of-type is the right choice, but it seemed to be allowing me to pick amongst the divs. childCount is to pick which div is to be the first to be toggled off, pre(vious)Last is to identify what was the last div of those displayed in order to remove a class used for some properties, newLast is to identify the div that will become visible and give it the class to add CSS properties.
The alert cycle runs twice entirely (increasing childCount), but doesn't process a third time.
Any ideas what I'm doing wrong?
i don't now, if it's my not cured cold or the fact, that i just got up a few hours ago, but i don't understand your code.
what i understand, is what you want to achieve - and i suggest another method:
$(".column:gt(0)").hide(); //first of all, hide all columns but the first one
setInterval(function() {
$('.column:first') //select the first column
.toggle("slide") //slide it out
.next().next() //select the 3rd column
.toggleClass("last") //remove class "last"
.next() //select first invisible column
.toggleClass("last") //add class last
.toggle("slide") //slide it in
.end().end().end() //end the chain, to reselect the first element
// since we used .next() three times, we have to end it three times
.appendTo('#column-content'); //move the first element inside the dom to the end
}, 5000);
your interval should be running infinite now - always sliding out the first element, sliding in the next element end appending the first element to the end. therefore, the current element is always the first one...
see the fiddle: http://jsfiddle.net/sv5j85df/2/
Is is possible to do change display: block; to none; with javascript. I would like to show 2 of them everytime page opens. But I want it to be random and change everytime page opens.
Anybody can help me with this ?
http://jsfiddle.net/WcxdR/1/
The below one will hide two of them randomly each time. You could reuse this to show only two instead.
window.onload = function() {
var ran = Math.round(Math.random() * 6);
document.getElementById("" + ran).style.display = 'none';
ran = Math.round(Math.random() * 6);
document.getElementById("" + ran).style.display = 'none';
};
P.S: From top of my head. Not tested.
P.S: Will need to put a check if both call to random gives same number
First the id of your form elements always has to begin with a letter, something like this:
<div id="i1">Line 1</div>
Then you can access to the style properties in this way:
document.getElementById("i1").style.display
As explained in this link.
Try with this demo.
EDIT:
What you want is simple, review the links that I have write for you for more info.
EDIT2:
Jared Farrish has made a better solution that my in the comments of the anwser of Suraj Chandran, only to emphasize that what we really need is this and using some function to load multiples function on body-onload event.
And I think he is right in what he says.