So I have this code that I will put in jsfiddle link bellow. Im making hide/show divs by clicking on links. Only problem is when I want to view a div (second, third or fourth div), lets say the third one, it doesnt show up on top but benith the first and second invisible divs. Anybody got any idea how to make this right and put any selected div on the top of the page?
<body>
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked" id="menu">
<li>Felge</li>
<li>Gume</li>
<li>Branici</li>
<li>Farovi</li>
</ul>
</div>
<div class="col-md-3">
<div class="div" id="content1">
<p>BBS</p>
<p>ENKEI</p>
<p>KONIG</p>
</div>
<div class="div" id="content2">
<p>Michelin</p>
<p>Hankook</p>
<p>Sava</p>
</div>
<div class="div" id="content3">
<p>AMG</p>
<p>Brabus</p>
<p>Original</p>
</div>
<div class="div" id="content4">
<p>Angel Eyes</p>
<p>Devil Eyes</p>
<p>Original</p>
</div>
</div>
`<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
function show(id) {
if (id == 'link1') {
document.getElementById("content1").style.visibility = 'visible';
document.getElementById("content2").style.visibility = 'hidden';
document.getElementById("content3").style.visibility = 'hidden';
document.getElementById("content4").style.visibility = 'hidden';
}
else if (id == 'link2') {
document.getElementById("content1").style.visibility = 'hidden';
document.getElementById("content2").style.visibility = 'visible';
document.getElementById("content3").style.visibility = 'hidden';
document.getElementById("content4").style.visibility = 'hidden';
}
else if (id == 'link3') {
document.getElementById("content1").style.visibility = 'hidden';
document.getElementById("content2").style.visibility = 'hidden';
document.getElementById("content3").style.visibility = 'visible';
document.getElementById("content4").style.visibility = 'hidden';
}
else if (id == 'link4') {
document.getElementById("content1").style.visibility = 'hidden';
document.getElementById("content2").style.visibility = 'hidden';
document.getElementById("content3").style.visibility = 'hidden';
document.getElementById("content4").style.visibility = 'visible';
}
}
function init() {
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className == "div") {
divs[i].style.visibility = 'hidden';
}
}
var a = document.getElementsByTagName("a");
a.onclick = show;
}
window.onload = init;
`
https://jsfiddle.net/4qq6xnfr/
visibility: hidden hides element but leaves the space occupied by it. You need to hide element with display: none:
document.getElementById("content1").style.display = 'block';
document.getElementById("content2").style.display = 'none';
document.getElementById("content3").style.display = 'none';
document.getElementById("content4").style.display = 'none';
Also, you can optimize you code a little. Maybe like this:
function show(id) {
var number = id.replace('link', '');
var blocks = document.querySelectorAll("[id^=content");
for (var i = 0; i < blocks.length; i++) {
blocks[i].style.display = 'none';
}
document.querySelector('#content' + number).style.display = 'block';
}
Demo: https://jsfiddle.net/4qq6xnfr/3/
Use:
element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
The most efficient way to achieve this is as follows:
Change all the links from javascript:show('link1'), javascript:show('link2'), etc. to just #content1, #content2, etc.
You can now remove all of the javascript code.
Create a new CSS stylesheet (or use the <style> tags), and in the stylesheet, write the following -
.div {
display:none;
}
.div:target {
display:block;
}
That's it! I hope this helped you.
Related
In my electron app I want to toggle between different screens, thus I need to use block and none displays.
I have a side navbar which contain the anchor tags, whenever I click one of those I want my screen to block all the other screens and display the one which was clicked.
Required Code Below
Side NavBar -not attaching the css for it
<div class="sidebar">
Home
Tasks
TimeTable
Quick notes
Expenses
</div>
Different Displays
<div id="home" class="screen" style="display: none">
<h1 class="centertitle">Home</h1>
</div>
<div id="tasks" class="screen" style="display: none">
<h1 class="centertitle">Tasks</h1>
</div>
Script
<script>
function showtasks() {
let task = document.getElementById("tasks");
let taskbtn = document.getElementById("taskbtn");
let allnav = document.getElementsByClassName("nava");
let allscreens = document.getElementsByClassName("screen");
allscreens.style.display = "none";
task.style.display = "block";
allnav.className = "";
taskbtn.className = "active";
}
function showhome() {
let home = document.getElementById("home");
let homebtn = document.getElementById("homebtn");
let allnav = document.getElementsByClassName("nava");
let allscreens = document.getElementsByClassName("screen");
allscreens.style.display = "none";
home.style.display = "block";
allnav.className = "";
homebtn.className = "active";
}
</script>
The problem here is the allscreens variable.
getElementsByClassName returns an array of elements with the given class name. So in order to set them all to display: none, you will need to loop through the elements.
let allscreens = document.getElementsByClassName("screen");
for (var i = 0; i < allscreens.length; i++) {
allscreens[i].style.display = "none";
}
function showtasks() {
let task = document.getElementById("tasks");
let taskbtn = document.getElementById("taskbtn");
let allnav = document.getElementsByClassName("nava");
let allscreens = document.getElementsByClassName("screen");
for (var i = 0; i < allscreens.length; i++ ) {
allscreens[i].style.display = "none";
}
task.style.display = "block";
allnav.className = "";
taskbtn.className = "active";
}
function showhome() {
let home = document.getElementById("home");
let homebtn = document.getElementById("homebtn");
let allnav = document.getElementsByClassName("nava");
let allscreens = document.getElementsByClassName("screen");
for (var i = 0; i < allscreens.length; i++ ) {
allscreens[i].style.display = "none";
}
home.style.display = "block";
allnav.className = "";
homebtn.className = "active";
}
<div class="sidebar">
Home
Tasks
TimeTable
Quick notes
Expenses
</div>
<div id="home" class="screen" style="display: none">
<h1 class="centertitle">Home</h1>
</div>
<div id="tasks" class="screen" style="display: none">
<h1 class="centertitle">Tasks</h1>
</div>
I am trying to cretae an expand/collapse menu using javascript. The structure something like this.
.menu
.subItem
.subItem
this a part of css
ul.menu {
display: none
}
but menu items not expandind from the collapse
this the js file
window.onload = initAll;
function initAll() {
var allLink = document.getElementsByTagName("a");
for (var i = 0; i < allLink.length; i++) {
if (allLink[i].className.indexOf("menuLink") > -1) {
allLink[i].onclick = togle;
}
}
}
function togle() {
var startMenu = this.href.lastIndexOf("/") + 1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu, stopMenu);
var thisMenu = document.getElementById(thisMenuName).style;
if (thisMenu.display == "block") {
thisMenu.display = "none";
} else {
thisMenu.display = "block";
}
return false;
}
when I open up chrome developer tools I have realize that Its been pointed out
this line once click the menu
var thisMenu = document.getElementById(thisMenuName).style;
What am doing wrong again again again
#Edit:I forgot to add html file
<link rel="stylesheet" href="css.css">
<script src="js.js"></script>
a
</head>
<body>
<div>
trajedi
<ul class="menu" id="menu1">
<li>deneme</li>
<li>deneme</li>
</ul>
</div>
I don't know what you tried to do with the substring part in togle function. That's the only problem with your code. Change the line:
var thisMenu = document.getElementById(thisMenuName).style;
to
var thisMenu = document.getElementById('menu1').style;
and it will work. Take a look:
window.onload = initAll;
function initAll() {
var allLink = document.getElementsByTagName("a");
for (var i = 0; i < allLink.length; i++) {
if (allLink[i].className.indexOf("menuLink") > -1) {
allLink[i].onclick = togle;
}
}
}
function togle(e) {
// can't understand the use of the 3 lines below:
var startMenu = this.href.lastIndexOf("/") + 1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu, stopMenu);
var thisMenu = document.getElementById('menu1').style;
if (thisMenu.display == "block") {
thisMenu.display = "none";
} else {
thisMenu.display = "block";
}
return false;
}
ul.menu {
display: none
}
<div>
trajedi
<ul class="menu" id="menu1">
<li>deneme</li>
<li>deneme</li>
</ul>
</div>
a much simpler and modern version of your code would be:
function initAll() {
Array.from(document.getElementsByTagName("a"))
.filter((link)=>link.className.indexOf("menuLink") > -1)
.forEach((link)=>link.onclick = ()=>{
var thisMenu = document.getElementById('menu1').style;
thisMenu.display = (thisMenu.display == "block") ? 'none' : 'block';
return false;
});
}
window.onload = initAll;
ul.menu {
display: none
}
<div>
trajedi
<ul class="menu" id="menu1">
<li>deneme</li>
<li>deneme</li>
</ul>
</div>
For my website I need a function with questions and answers in loop.
After the last question the first question should come again.
I have found something but the loop does not work, it is certainly simple but I do not get that.
<!DOCTYPE html>
<html>
<body>
<div>
<div id="question" onclick="changeText()">
Start Quiz
</div>
<div id="answer" onclick="nextQuestion()">
are you ready?
</div>
</div>
<script type="text/javascript">
var details = "Question 1ans:Answer 1qst:Question 2ans:Answer 2qst:Question 3ans:Answer 3qst:Question 4ans:Answer 4qst:Question 5ans:Answer 5qst:Question 6ans:Answer 6qst:Question 7ans:Answer 7qst:Question 8ans:Answer 8qst:Question 9ans:Answer 9qst:Question 10ans:Answer 10";
var questionList = details.split("qst:");
var div = document.getElementById('question');
var ans = document.getElementById('answer');
function changeText(){
if (div.style.display !== 'none') {
div.style.display = 'none';
ans.style.display = 'block';
}
else {
div.style.display = 'block';
ans.style.display = 'none';
}
}
function nextQuestion(){
div.style.display = 'block';
ans.style.display = 'none';
var max = questionList.length;
if(max > 0){
var num = 0;
var qst = questionList[num].split("ans:");
div.innerHTML =qst[0];
ans.innerHTML = qst[1];
questionList.splice(num,1);}
else {
}
}
</script>
</body>
</html>
You must reset value of n every time reach to max so you must put n in outer scope in global variable scope and don't splice questionList because you want to iterate over that array again after reaching to end of it:
var details = "Question 1ans:Answer 1qst:Question 2ans:Answer 2qst:Question 3ans:Answer 3qst:Question 4ans:Answer 4qst:Question 5ans:Answer 5qst:Question 6ans:Answer 6qst:Question 7ans:Answer 7qst:Question 8ans:Answer 8qst:Question 9ans:Answer 9qst:Question 10ans:Answer 10";
var questionList = details.split("qst:");
var div = document.getElementById('question');
var ans = document.getElementById('answer');
//Variable n must declare here
var num = 0;
function changeText() {
if (div.style.display !== 'none') {
div.style.display = 'none';
ans.style.display = 'block';
} else {
div.style.display = 'block';
ans.style.display = 'none';
}
}
function nextQuestion() {
div.style.display = 'block';
ans.style.display = 'none';
var max = questionList.length;
if (max > 0) {
var qst = questionList[num].split("ans:");
div.innerHTML = qst[0];
ans.innerHTML = qst[1];
//there is no need to splice questionList
//questionList.splice(num, 1);
num++;
//Check for num to not to be greater than questionList.length
if (num >= max)
num = 0;
} else {
}
}
<div id="question" onclick="changeText()">
Start Quiz
</div>
<div id="answer" onclick="nextQuestion()">
are you ready?
</div>
the code so far
Now if you press a button, no matter which one, a div and a percentage will be shown. I've got that going for me, but if one div is toggled, and another one is pressed, the 66% div should be toggled and so on if two divs are shown and the third is toggled the 100% div should show up.
Basicly if you click a button, a div and a percentage div is revealed if you click aonther the percentage bar goes up. How do I do this? if two divs are toggled and if you press the button two diffrent divs are shown?
JS
function showhide()
{
var div = document.getElementById("lol");
var id3 = document.getElementById("3");
var id5 = document.getElementById("5");
if (div.style.display !== "none")
{
div.style.display = "none";
id3.style.display = "none";
}
else {
div.style.display = "block";
}
}
function showhide2()
{
var div2 = document.getElementById("lol2");
if (div2.style.display !== "none") {
div2.style.display = "none";
}
else {
div2.style.display = "block";
}
}
function showhide3()
{
var div3 = document.getElementById("lol3");
if (div3.style.display !== "none") {
div3.style.display = "none";
}
else {
div3.style.display = "block";
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div id="lol"><p>div1</p></div>
<div id="lol2"><p>div2</p></div>
<div id="lol3"><p>div3</p></div>
<button id="button" onclick="showhide()">div1</button>
<button id="button" onclick="showhide2()">div2</button>
<button id="button" onclick="showhide3()">div3</button>
<div id = "3"><p>33%</p></div>
<div id = "5"><p>66%</p></div>
<div id = "5"><p>100%</p></div>
<!-- End your code here -->
</body>
</html>
Not entirely sure what you mean but I think it might be something like this?
http://liveweave.com/PcZ7vL
HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<div id="lol1"><p>div1</p></div>
<div id="lol2"><p>div2</p></div>
<div id="lol3"><p>div3</p></div>
<button id="button" onclick="showhide()">div1</button>
<button id="button" onclick="showhide2()">div2</button>
<button id="button" onclick="showhide3()">div3</button>
<div id = "3"><p>33%</p></div>
<div id = "5"><p>66%</p></div>
<div id = "7"><p>100%</p></div>
</body>
</html>
JavaScript:
var one = 0
var two = 0
var three = 0
var id3 = document.getElementById("3");
var id5 = document.getElementById("5");
var id7 = document.getElementById("7");
var div1 = document.getElementById("lol1");
var div2 = document.getElementById("lol2");
var div3 = document.getElementById("lol3");
id3.style.display = "none";
id5.style.display = "none";
id7.style.display = "none";
div1.style.display = "none";
div2.style.display = "none";
div3.style.display = "none";
function showhide()
{
if (div1.style.display !== "none")
{
div1.style.display = "none";
one = 0
}
else {
div1.style.display = "block";
one = 1
}
showper();
}
function showhide2()
{
if (div2.style.display !== "none") {
div2.style.display = "none";
two = 0
}
else {
div2.style.display = "block";
two = 1
}
showper()
}
function showhide3()
{
if (div3.style.display !== "none") {
div3.style.display = "none";
three = 0
}
else {
div3.style.display = "block";
three = 1
}
showper()
}
function showper()
{
var sum = one + two + three
id3.style.display = "none";
id5.style.display = "none";
id7.style.display = "none";
if (sum == 1) {
id3.style.display = "block";
} else if (sum == 2) {
id5.style.display = "block";
} else if (sum == 3) {
id7.style.display = "block";
}
else {
id3.style.display = "none";
id5.style.display = "none";
id7.style.display = "none";
}
}
EDIT:
A slightly neater way to do it would be this: http://liveweave.com/YAHn55.
Also, you should take a look at jQuery, makes things like this much simpler.
EDIT:
see example
i want to replace a div by other div on button click. I have seen examples of show/hide div. But using this the second div is shown below first i.e it shows on the next line. I want to not only hide the div but replace or show the div on the same position. My code is :
<script language="javascript" type="text/javascript">
function toggleDiv(Flag)
{
if (Flag == 'one')
{
document.getElementById("one").style.visibility = "visible";
document.getElementById("two").style.visibility = "hidden";
document.getElementById("three").style.visibility = "hidden";
document.getElementById("four").style.visibility = "hidden";
}
else if (Flag == 'two')
{
document.getElementById("two").style.visibility = "visible";
document.getElementById("one").style.visibility = "hidden";
document.getElementById("three").style.visibility = "hidden";
document.getElementById("four").style.visibility = "hidden";
}
else if (Flag == 'three')
{
document.getElementById("one").style.visibility = "hidden";
document.getElementById("two").style.visibility = "hidden";
document.getElementById("three").style.visibility = "visible";
document.getElementById("four").style.visibility = "hidden";
}
else if (Flag =='four')
{
document.getElementById("one").style.visibility = "hidden";
document.getElementById("two").style.visibility = "hidden";
document.getElementById("three").style.visibility = "hidden";
document.getElementById("four").style.visibility = "visible";
}
else {
document.getElementById("one").style.visibility = "visible";
document.getElementById("two").style.visibility = "hidden";
document.getElementById("three").style.visibility = "hidden";
document.getElementById("four").style.visibility = "hidden";
}
}
</script>
<center>
<div id="one" style= " visibility:visible">
//some code
</div>
<div id="two" style= " visibility:hidden">
//some code
</div>
<div id="three" style= " visibility:hidden">
//some code
</div>
<div id="four" style= " visibility:hidden">
//some code
</div>
</center>
This code works perfectly but as i said it shows each div on next line i want it to b on same line. Any Help??
Use css and add property in the div class I.e position : absolute;