I'm trying to have a login / create account on 1 page, stacked ontop of eachother.
But when you click on the button for "login" or "create account", then it has to hide the opposing one.
So far, I've tried this, without succes.
<script>
var toggle = function() {
var mydiv1 = document.getElementById('leftContent');
var mydiv3 = document.getElementById('leftTitle');
mydiv2.style.display = 'hidden';
mydiv4.style.display = 'hidden';
mydiv3.style.display = 'block';
mydiv1.style.display = 'block';
}
var toggle2 = function() {
var mydiv2 = document.getElementById('leftContent2');
var mydiv4 = document.getElementById('leftTitle2');
mydiv2.style.display = 'block';
mydiv4.style.display = 'block';
mydiv3.style.display = 'hidden';
mydiv1.style.display = 'hidden';
}
</script>
the mydivs equal 4 divs with 2 of each subject "login" & "create account".
you'd say, why 4 instead of 2, it's because there are also 2 different divs for the titles above them.
I hope you guys can help me out :)
I don't mind trying something entirely different, but i'm hoping to stay away from jquery, and keep it # just pure js.
Use display:none
or
style.display = 'none'
Then it will get work !
Related
my objective is to have an image hidden until a button is pressed to then show the previously hidden image.
Right now I have an image in html with an Id of "yellowrose" that is hidden with this code:
<div id="yellowrose"><img src="https://i.imgur.com/ppfhZa6.jpg" style="visibility:hidden"></div>
In JS I have several things happening with the buttonx.onclick, but I can't seem to make the image visible. Here's my JS code:
var content = document.getElementById("content");
var buttonx = document.getElementById("show-more");
let yellowrose = document.getElementById("yellowrose");
window.onload = function(){
buttonx.onclick = function () {
document.getElementById("yellowrose").style.visibility="visible";
if(content.className == "open") {
//shrink the box
content.className = "";
buttonx.innerHTML = "Continue to the Sunlit Pavillion?";
} else{
//expand the box
content.className = "open";
buttonx.innerHTML = "As you wander through the garden grounds you notice a striking Yellow Rose";
}
}
}
Do you have any suggestions on how I can make the "yellowrose" image visible through the buttonx.onclick function? Thank you.
An id cannot contain a space.
As per MDN:
id's value must not contain whitespace (spaces, tabs etc.). Browsers treat non-conforming IDs that contain whitespace as if the whitespace is part of the ID. In contrast to the class attribute, which allows space-separated values, elements can only have one single ID value.
Additionally, you are setting the visibility of #yellowrose, the container of the image, and not the image itself. To solve this, simply get the firstChild property:
var content = document.getElementById("content");
var buttonx = document.getElementById("showmore");
let yellowrose = document.getElementById("yellowrose");
window.onload = function() {
buttonx.onclick = function() {
document.getElementById("yellowrose").firstChild.style.visibility = "visible";
if (content.className == "open") {
//shrink the box
content.className = "";
buttonx.innerHTML = "Continue to the Sunlit Pavillion?";
} else {
//expand the box
content.className = "open";
buttonx.innerHTML = "As you wander through the garden grounds you notice a striking Yellow Rose";
}
}
}
.open{
visibility:visible !important;
}
<div id="yellowrose"><img src="https://i.imgur.com/ppfhZa6.jpg" style="visibility:hidden"></div>
<button id="showmore">Show More</button>
<div id="content">
content
</div>
<script>var div = document.getElementById('demo');
if (totaal > 14) {
div.style.display = 'block';
div.style.visibility='visible';
}
else {
div.style.display = 'none';
div.style.visibility='hidden';
}</script>
when using this script the div stays hidden and doesnt become bigger. Anyone know what i can do to make the div appear when var 'totaal' is bigger than 14?
Thanks
Edit1: var totaal is already set earlier in the script. Its a large script with adding and subtracting 1 from 'totaal'. That part isn't neccesary so I didn't include it.
You can use function to toggle your div based on the value of totaal :
function toggleDiv(totaal) {
var div = document.getElementById('demo');
if (totaal > 14) {
div.style.display = 'block';
} else {
div.style.display = 'none';
}
}
Now, all the time you change tootal, you can call this function with totaal as parameter to toggle the div
Using Foundation 6 as my framework, I wanted to implement a fading effect between two divs when a button is pressed.
The effect I'm trying to do is when button1 is clicked, div2 will hide and fade out (if visible) and div1 will show and fade in, and vice versa.
Here is my Javascript code:
var $button1 = $('#button1');
var $button2 = $('#button2');
var $div1 = $('#div1');
var $div2 = $('#div2');
$button1.click(function() {
if ($div2.is(':visible')) {
MotionUI.animateOut($div2, 'fadeOut');
MotionUI.animateIn($div1, 'fadeIn');
}
else {
$div1.show();
}
});
$button2.click(function() {
if ($div1.is(':visible')) {
MotionUI.animateOut($div1, 'fadeOut');
MotionUI.animateIn($div2, 'fadeIn');
}
else {
$div2.show();
}
});
I have gotten div1 and div2 to fade in/out between the two with one button, but I can't seem to get it to work when using multiple buttons.
Here's a really simple way to toggle display:none using jQuery's toggle() methods. I used fadeToggle since you mentioned wanting a fade, but you could use toggle and set a css3 transition instead.
Keeping the code super simple - to match what you have - this is how you would do it:
Fiddle: https://jsfiddle.net/f1dshffs/2/
var $button1 = $('#button1');
var $button2 = $('#button2');
var $div1 = $('#div1');
var $div2 = $('#div2');
var toggleDivs = function(){
$div1.fadeToggle();
$div2.fadeToggle();
};
$button1.click(toggleDivs);
$button2.click(toggleDivs);
Now there's some things you could do to optimize your code a little bit by selecting by a class instead of an id, and then adding only 1 event to the array of objects.
It reduces the code down to: Fiddle: https://jsfiddle.net/f1dshffs/3/
var buttons = $('.button');
var divs = $('.div');
var toggleDivs = function(){
divs.fadeToggle();
};
buttons.click(toggleDivs);
I have
var sanmigBottle = document.createElement('sanmigBottle');
sanmigBottle.id="sanmigBottle";
sanmigBottle.width="25%";
sanmigBottle.src='sanmigbottle.png';
sanmigBottle.onmousedown="showLibraryInfo()" ;
sanmigBottle.ontouchstart="showLibraryInfo()" ;
sanmigBottle.align = "middle";
sanmigBottle.style= "-webkit-transform: rotate(350.77259795507035deg) translateZ(0px);'";
It loads in my html, however I want to hide it and I want a trigger to show. When I type this,
sanmigBottle.style.visibility="hidden";
It doesn't work. How can I do this? I am new to JS thanks.
You should use
sanmigBottle.style.display = 'none';
You have to set display to none:
sanmigBottle.style.display="none";
Then set it to block or something again to make it visible again:
sanmigBottle.style.display="block";
First check the state of the image:
function showhide() {
var img = document.getElementById('someimage');
if (img.style.visibility === 'hidden') {
// Currently hidden, make it visible
img.style.visibility = "visible";
} else {
// Currently visible, make it hidden
img.style.visibility = "hidden";
}
}
then apply the visibility.
try with Jquery
//create element
var sanmigBottle = $('<img id="sanmigBottle" width="25%" src='sanmigbottle.png' onmousedown="showLibraryInfo()" ontouchstart="showLibraryInfo()" align = "middle" style= "-webkit-transform: rotate(350.77259795507035deg) translateZ(0px);"/>');
//add to document and store object in context
var context = sanmigBottle.appendTo($('Document'));
//hide object
context.fadeOut();
demo in jsfiddle
I'm making a tree structure using html and css.
This is the final structure that I should reach: http://jsfiddle.net/yrE7N/1/
What I need is, on clicking a node, its children node will appear.
I've done this till now:
JS Fiddle: http://jsfiddle.net/ZTkLg/11/
I've used this JS function
var _hidediv = null;
function showdiv(id) {
if(_hidediv)
_hidediv();
var div = document.getElementById(id);
div.style.display = 'block';
_hidediv = function () { div.style.display = 'none'; };
}
The thing is, the JS function doesn't seem to be toggling the visibility of the div stage-two.
I've used this function before on this page: http://leonardorestaurant.in/menu and it worked but I can't figure the problem out in this case.
Try
Some text here
and
var flag = true;
function showdiv(id) {
var div = document.getElementById(id);
div.style.display = flag ? 'none' : 'block';
flag = !flag;
}
Demo: Fiddle
The console in my browser prints out :
Uncaught TypeError: Cannot read property 'style' of null
Which means that here :
div.style.display = 'block';
div is not the result you think it should be... That tells us that id is not what we think here :
var div = document.getElementById(id);
Which I confirmed by using :
console.log(id);
inside your function.
The id value is actually the <div id="two">
So, basically you already have the element you're looking for.
However, you've got bigger problems, which is that you need a toggle function, I'm just guessing. Try using this :
function toggleDiv(id) {
var el = document.getElementById(id);
var newDisplayValue = "none";
if ( el.style.display && el.style.display === "none" ) {
newDisplayValue = "block";
}
el.style.display = newDisplayValue;
}
and change to this :
<a href=# onclick="toggleDiv('two');">
see it here