Just having a bit of difficulty with showing/hiding divs -
Basically what I'm trying to achieve is to have 3 different links, each corresponding to three different divs, only one of which shows at any one time. I've referred to this tutorial - http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/ (section headed 'Here is a new demo in response to a request where only one div is displayed at any one time')
It's all working correctly, in that when I click any of my links, the correct div shows. The only problem I'm having is the initial state - I only want the first div to show initially, but currently they all display simultaneously, until I click one of the links.
I've copied the java on the website -
<script> function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("class");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
}
else {
newboxes[x].style.display = 'none';
}
}
}
} </script>
My divs then have:
<div id="newboxes1" class="newboxes" style="width: 1124px;">
<div id="newboxes2" class="newboxes">
<div id="newboxes3" class="newboxes">
These 3 divs all contain a number of other divs, none of which have 'newboxes' in the class - but perhaps this interferes?
The links sit outside of these 3 divs:
Learn HTMLBox2Box3
As far as I can see I've copied the method shown on the tutorial exactly, but for that my initial state doesn't work correctly, whereas it does on the tutorial page.
Any ideas?
Thanks!
function showonlyone(element){
for (var i=0; i<document.getElementsByClassName("newboxes").length; i++){
var div = document.getElementById('newboxes'+i);
if(i == element){
div.style.display = 'block';
}else{
div.style.display = 'none';
}
}
}
to use:
showonlyone(1);
//This will show the div with ID="newboxes1"
is it not as simple as
<div id="newboxes1" class="newboxes" style="width: 1124px;">
<div id="newboxes2" class="newboxes" style="display:none;">
<div id="newboxes3" class="newboxes" style="display:none;">
Try this in your header
<script>
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for (var x = 0; x < newboxes.length; x++) {
name = newboxes[x].getAttribute("class");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
} else {
newboxes[x].style.display = 'none';
}
}
}
}
</script>
Followed by this for the div boxes and links
<a id="myHeader1" href="javascript:showonlyone('newboxes1');">Wall Tiles</a>
- <a id="myHeader2" href="javascript:showonlyone('newboxes2');">Floor Tiles</a>
- <a id="myHeader3" href="javascript:showonlyone('newboxes3');">Extras</a>
<div class="newboxes" id="newboxes1">
<iframe src="wall.php" width="600" height="620" frameborder="0"></iframe>
</div>
<div class="newboxes" id="newboxes2">
<iframe src="floor.php" width="600" height="620" frameborder="0"></iframe>
</div>
<div class="newboxes" id="newboxes3">
<iframe src="extras.php" width="600" height="620" frameborder="0"></iframe>
</div>
Related
So I have a simple javascript that looks like this
function myfunction(){
var a = [document.getElementById("div1"),
document.getElementById("div2"), document.getElementById("div3")];
if(a.style.display=="none"){
setTimeout(function(){a.style.display="block";},4000);
}
}
And html code looks like this
< a href="#" onclick="myfunction();" > click to show div1 and div2 after 4 seconds< /a >
< p id="div1" style="display:none;" >divv1< /p >
< p id="div2" style="display:none;" >divv2< /p >
< p id="div3" style="display:none;" >divv3< /p >
However divs are not showing after 4 seconds after I clicked.
Is there something wrong with my code?
Can someone please guide me further?
Thanks alot!
var a is the array, so you need to set the style for all the elements of the array.
function myfunction() {
var a = [document.getElementById("div1"),
document.getElementById("div2"), document.getElementById("div3")
];
if (a[0].style.display == "none" && a[1].style.display == "none" && a[2].style.display == "none") {
setTimeout(function() {
a.forEach(item => item.style.display = "block");
}, 4000);
}
}
<a href="#" onclick="myfunction();"> click to show div1 and div2 after 4 seconds
</a>
<p id="div1" style="display:none;">divv1
</p>
<p id="div2" style="display:none;">divv2
</p>
<p id="div3" style="display:none;">divv3
</p>
a is an array. It does not have a style property. You have to iterate over the array and change the display property for each.
function myfunction() {
var a = document.querySelectorAll("p") ;
a.forEach( div => {
if(div.style.display == "none"){
setTimeout(function() {
div.style.display = "block";
}, 4000);
}
});
}
I am having a problem with the code below.
The code should handle the slider and changes between them when the img is
clicked, it works only once.
when I changed the onClick event to
document.getElementById("left").onclick = function(){
console.log("0");
}
It worked fine, but when I reverted, it doesn't change the slider more than once
snippet:
var index = 0;
document.getElementById("left").onclick = function(){
console.log("0");
}
document.getElementById("left").onclick = function(){
var slider = document.getElementsByClassName("slider");
slider[index].style.display = "none";
if(index == 0){ index = slider.length;}
slider[--index].style.display = "block";
}
document.getElementById("right").onclick = function(){
var slider = document.getElementsByClassName("slider");
slider[index].style.display = "none";
if(index >= slider.length){ index = 0;}
slider[++index].style.display = "block";
};
<div class="slider" style="display: block">
<div id = "left"><img src="Images/arrow-left.png" alt=""></div>
<div class="text">
<h2>welcome to the <span>classic</span></h2>
<p>Lorem ipsum is a name for a common type of placeholder text. Also known as filler or dummy text, this is simply copy that serves to fill a space</p>
</div>
<div id = "right"><img src="Images/arrow-right.png" alt=""></div>
</div>
thanks guys, the problem was that I gave multiple div the same ID which made the onclick event only fire once (with the first div only)
I am working on a project right now. When you click on one item the info below appears, i wanted to know how to make it disappear when you click on the next item without reclicking the same item....For example I have pizza's in my project, I want to click meat pizza to see the toppings then click on cheese pizza to see the toppings and the meat toppings disappear.
Here is my Html code....
<table align="center">
<tr>
<td><fieldset style="border:1px solid red;padding:5px;
margin-bottom:10px;width:200px; height:150px">
<a onclick ="javascript:ShowHide('HiddenDiv')" href="#Meat">Meat Pizza</a>
</fieldset></td>
<td><fieldset style="border:1px solid red;padding:5px;
margin-bottom:10px; width:200px; height:150px">
<a onclick ="javascript:ShowHide('HiddenDiv2')" href="#Cheese">
Cheese Pizza</a>
</fieldset></td>
<td><fieldset style="border:1px solid red;padding:5px;
margin-bottom:10px; width:200px; height:150px;">
<a onclick ="javascript:ShowHide('HiddenDiv3')" href="#Veggie">
Veggie Pizza</a>
</fieldset></td>
</tr>
</table>
<div class="mid" id="HiddenDiv" style="DISPLAY: none" align="center">
<a name="Meat">
<table>
<tr><td width="220">Meat Toppings</td></tr>
</table>
</a>
</div>
<div class="mid" id="HiddenDiv2" style="DISPLAY: none" align="center">
<a name="Cheese">
<table>
<tr><td width="220">Cheese Toppings</td></tr>
</table>
</a>
</div>
<div class="mid" id="HiddenDiv3" style="DISPLAY: none" align="center">
<a name="Veggie">
<table>
<tr><td width="220">Veggie Toppings</td></tr>
</table>
</a>
</div>
Here is my javascript......
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
function showApp(a) {
var aside = document.getElementById('aside');
var arr = aside.getElementsByTagName('span');
for (i = 0; i < arr.length; i++) {
if (arr[i].getAttribute('id') != a) {
arr[i].style.visibility = 'hidden';
}
}
x = document.getElementById(a);
var state;
if (x.style.visibility == 'visible') {
state = 'hidden';
}
else {
state = 'visible';
}
x.style.visibility = state;
}
Some solutions for example:
You may create global JS element which will contain current showed element and update it every click.
You may on every click hide all elements at first and then show required element.
Add for loop in ShowHide() function like this :
UPDATED
ShowHide = function(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
var alltexts = document.getElementsByClassName('mid');
for(var i=0;i<alltexts.length;i++)
alltexts[i].style.display = 'none';
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
In ShowHide we have to hide all texts before showing the clicked item text .
Find Working Fiddle HERE.
I have a page with p tags and div element, the div element is set with display:none in the starting so, I just want to display the different divs as shown below inside the body tag on the click of the p tag but i got stuck in fetching the different id of the divs. Please do help me out from this situation.Below is my code. Thanks
<script>
function toggle(id)// here is the function which gets the different ids of the div
{ var element = document.getElementById(id);
for(i=1; i<3; i++)
{
if(element[i].style.display == "none")
{
element[i].style.display = "block";
}
else
{
element[i].style.display = "none"
}
}
}
</script>
<body>
<p onclick="toggle('div1')">Sentence1</p>
<p onclick="toggle('div2')">Sentence2</p>
<div id="div1" name="Name 1" style="display:none; width:400px; height:300px; border:1px solid black; background-color:yellow;" id="div1">Barun Ghatak</div>
<div id="div2" style="display:none; width:400px; height:300px; border:1px solid black; background-color:black;" id="div2">Bhoopi</div>
</body>
You only have one of each div, so you don't need the loop. Just use
function toggle(id)// here is the function which gets the different ids of the div
{
var element = document.getElementById(id);
if(element.style.display == "none")
{
element.style.display = "block";
}
else
{
element.style.display = "none"
}
}
document.getElementById returns a single object and not an array.
If you want to get both the divs, I suggest using a class to get them.
If you wanted to only show one at a time, for example if you were building a tabs, then you could use this code to hide all the other divs first, then show only the one you want to toggle. Otherwise, if you're happy to toggle them, you can use the code posted by the others.
JS Fiddle demo: http://jsfiddle.net/ecs77e9a/
HTML
<p onclick="toggle('div1');">Sentence1</p>
<p onclick="toggle('div2');">Sentence2</p>
<div id="content">
<div id="div1" name="Name 1" style="display:none; width:400px; height:300px; border:1px solid black; background-color:yellow;" id="div1">Barun Ghatak</div>
<div id="div2" style="display:none; width:400px; height:300px; border:1px solid black; background-color:black;" id="div2">Bhoopi</div>
</div>
JS
function toggle(id)
{
//Hide all other divs first
var divs = document.getElementById('content').childNodes;
for ( var i = 0; i < divs.length; i++ ) {
if ( divs[i].nodeName == "DIV" ) {
var div = document.getElementById(divs[i].id);
div.style.display = "none";
}
}
//Show the one that's being requested
var element = document.getElementById(id);
element.style.display = "block";
}
Sorry for the unclear question title...couldn't think how to put the question in a shirt summary.
I have css to change the background-color of a link when hovered over (with css transistion to fade the color in).
Due the nature of the requirement, I use JS to change the background color of the link which is in use (I have tabs, the selected one's background is selected using JS - getElementById('foo').style.backgroundColor = 'red';).
Even after a tab has been selected, I want the others to change color when hovering.
It works initially but once I have clicked on a tab (JS then changes that tab's color), the hover css style does not work - the other links no longer change color when hovering.
Has anyone else had the same problem?
HTML:
<div class="software_section_selects_wrapper">
<a id="a1" onclick="displayArrow('1')">OVERVIEW</a>
<a id="a2" onclick="displayArrow('2')">SPECS</a>
<a id="a3" onclick="displayArrow('3')">COMMENTS</a>
<div style="clear: both;"></div>
</div>
<div class="section_selects_arrow_wrapper">
<img id="red1"alt="" src="images/red_arrow.png" width="40px" height="20px"/>
<img id="red2"alt="" src="images/red_arrow.png" width="40px" height="20px"/>
<img id="red3"alt="" src="images/red_arrow.png" width="40px" height="20px"/>
</div>
<div id="overview" class="software_overview">
</div>
<div id="specs" class="software_overview">
</div>
<div id="comments" class="software_overview">
</div>
JS:
function displayArrow(arrow) {
var which_arrow = arrow;
if (which_arrow == '1') {
document.getElementById('a1').style.backgroundColor = 'red';
document.getElementById('a2').style.backgroundColor = 'black';
document.getElementById('a3').style.backgroundColor = 'black';
document.getElementById('red1').style.display = 'block';
document.getElementById('red2').style.display = 'none';
document.getElementById('red3').style.display = 'none';
document.getElementById('overview').style.display = 'block';
document.getElementById('specs').style.display = 'none';
document.getElementById('comments').style.display = 'none';
} else if (which_arrow == '2') {
document.getElementById('a2').style.backgroundColor = 'red';
document.getElementById('a1').style.backgroundColor = 'black';
document.getElementById('a3').style.backgroundColor = 'black';
document.getElementById('red2').style.display = 'block';
document.getElementById('red1').style.display = 'none';
document.getElementById('red3').style.display = 'none';
document.getElementById('specs').style.display = 'block';
document.getElementById('overview').style.display = 'none';
document.getElementById('comments').style.display = 'none';
} else {
document.getElementById('a3').style.backgroundColor = 'red';
document.getElementById('a2').style.backgroundColor = 'black';
document.getElementById('a1').style.backgroundColor = 'black';
document.getElementById('red3').style.display = 'block';
document.getElementById('red1').style.display = 'none';
document.getElementById('red2').style.display = 'none';
document.getElementById('comments').style.display = 'block';
document.getElementById('overview').style.display = 'none';
document.getElementById('specs').style.display = 'none';
}
}
This line of code:
document.getElementById('a2').style.backgroundColor = 'black';
adds an inline style which is stronger than :hover styling coming from the stylesheet.
Instead of adding the inline style, reset it to nothing:
document.getElementById('a2').style.backgroundColor = '';
I think his is what you are looking for
<div class="software_section_selects_wrapper">
<a id="a1" onclick="displayArrow('1')" onmouseover="MouseHoverMethod(this)" onmouseout="MouseOutMethod(this)">OVERVIEW</a>
<a id="a2" onclick="displayArrow('2')" onmouseover="MouseHoverMethod(this)" onmouseout="MouseOutMethod(this)">SPECS</a>
<a id="a3" onclick="displayArrow('3')" onmouseover="MouseHoverMethod(this)" onmouseout="MouseOutMethod(this)">COMMENTS</a>
<div style="clear: both;"></div>
</div>
Add following javascript functions and change the color as you need.
function MouseHoverMethod(x) {
x.style.backgroundColor = 'green';
}
function MouseOutMethod(x) {
x.style.backgroundColor = 'black';
}
Your code is far to complicated. You are breaking rule #1 of programming: DRY - Don't repeat yourself.
Also there is no need to set the color with JavaScript, instead set a class to to selected item and use that to style it.
Example: (without the red arrow stuff, because without the style sheet it's difficult to see what you are doing there, and it probably could be replaced with some pure CSS, too):
<div class="software_section_selects_wrapper">
<a onclick="displayTab(this, 'overview')">OVERVIEW</a>
<a onclick="displayTab(this, 'specs')">SPECS</a>
<a onclick="displayTab(this, 'comments')">COMMENTS</a>
<div style="clear: both;"></div>
</div>
<div class="tabs">
<div id="overview" class="software_overview">
</div>
<div id="specs" class="software_overview">
</div>
<div id="comments" class="software_overview">
</div>
</div>
JS:
<script>
function clearClass(elements) {
for (var i = 0; i < elements.length; i++) {
elements[i].className = '';
}
}
function displayTab(link, tabId) {
var links = link.parentNode.getElementsByTagName('a');
clearClass(links);
link.className = 'active';
var tab = document.getElementById(tabId);
var tabs = tab.parentNode.getElementsByTagName('div');
clearClass(tabs);
tab.className = 'active';
}
</script>
CSS:
.tabs > div {
display: none;
}
.tabs > div.active {
display: block;
}
.software_section_selects_wrapper > a {
color: white;
background-color: black;
}
.software_section_selects_wrapper > a.active {
color: white;
background-color: red;
}
Live: http://jsfiddle.net/d9ffnw46/1/
BTW, you should look into using a framework library such as jQuery. As a beginner it makes code such as this much simpler.
EDIT: Here's an example with jQuery: http://jsfiddle.net/d9ffnw46/2/