Only showing a div with a certain id by manipulating CSS file and my Javascript file

I'm new to Javascript DOM so I need a little bit of help walking through the basics before I can get going - I have an HTML file like this:

<div id="content">

    <h1>FOREST SIMULATOR</h1>

    <div id="intro">

        starting forest (leave empty to randomize):

        <br />

        <textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>

        <br />

        <button>generate</button>

    </div>

    <div id="sim" class="hidden"></div>

    <div id="pushtray" class="overlay"></div>

</div>

I want to only show the content in the div with id="intro", making sure that the .overlay and #sim div are not displayed. I would need to make appropriate CSS rules and use Javascript's element.add, remove, and contains so I can control which CSS rules are active.

I'm not entirely sure what this means and how it would look like.

What am I doing in my CSS file exactly?

edited Nov 23 '18 at 22:17

Adriano

1,37111325

asked Nov 23 '18 at 20:07

user10366926

Possible duplicate of Show/hide 'div' using JavaScript

– estevan
Nov 23 '18 at 20:12

add a comment |

I'm new to Javascript DOM so I need a little bit of help walking through the basics before I can get going - I have an HTML file like this:

<div id="content">

    <h1>FOREST SIMULATOR</h1>

    <div id="intro">

        starting forest (leave empty to randomize):

        <br />

        <textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>

        <br />

        <button>generate</button>

    </div>

    <div id="sim" class="hidden"></div>

    <div id="pushtray" class="overlay"></div>

</div>

What am I doing in my CSS file exactly?

edited Nov 23 '18 at 22:17

Adriano

1,37111325

asked Nov 23 '18 at 20:07

user10366926

Possible duplicate of Show/hide 'div' using JavaScript

– estevan
Nov 23 '18 at 20:12

add a comment |

I'm new to Javascript DOM so I need a little bit of help walking through the basics before I can get going - I have an HTML file like this:

<div id="content">

    <h1>FOREST SIMULATOR</h1>

    <div id="intro">

        starting forest (leave empty to randomize):

        <br />

        <textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>

        <br />

        <button>generate</button>

    </div>

    <div id="sim" class="hidden"></div>

    <div id="pushtray" class="overlay"></div>

</div>

What am I doing in my CSS file exactly?

edited Nov 23 '18 at 22:17

Adriano

1,37111325

asked Nov 23 '18 at 20:07

user10366926

I'm new to Javascript DOM so I need a little bit of help walking through the basics before I can get going - I have an HTML file like this:

<div id="content">

    <h1>FOREST SIMULATOR</h1>

    <div id="intro">

        starting forest (leave empty to randomize):

        <br />

        <textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>

        <br />

        <button>generate</button>

    </div>

    <div id="sim" class="hidden"></div>

    <div id="pushtray" class="overlay"></div>

</div>

What am I doing in my CSS file exactly?

javascript html css dom client-side

edited Nov 23 '18 at 22:17

Adriano

1,37111325

asked Nov 23 '18 at 20:07

user10366926

edited Nov 23 '18 at 22:17

Adriano

1,37111325

asked Nov 23 '18 at 20:07

user10366926

edited Nov 23 '18 at 22:17

Adriano

1,37111325

edited Nov 23 '18 at 22:17

Adriano

1,37111325

edited Nov 23 '18 at 22:17

Adriano

1,37111325

asked Nov 23 '18 at 20:07

user10366926

asked Nov 23 '18 at 20:07

user10366926

asked Nov 23 '18 at 20:07

user10366926

Possible duplicate of Show/hide 'div' using JavaScript

– estevan
Nov 23 '18 at 20:12

add a comment |

Possible duplicate of Show/hide 'div' using JavaScript

– estevan
Nov 23 '18 at 20:12

Possible duplicate of Show/hide 'div' using JavaScript

– estevan
Nov 23 '18 at 20:12

add a comment |

4 Answers
4

active

oldest

votes

The following css hides all div elements in the content div. After that it will show the intro div.

Bound a click function to the "generate" button with Javascript to hide the intro div and show the sim div.

With some alterations you should be able to make it work to your liking.

//Wait for the dom to finish loading

document.addEventListener("DOMContentLoaded", function(){

  //then bind a click event handler to all the buttons inside the div with the id intro

  document.querySelector("div#intro button").addEventListener("click", function(){

    //hide the intro div and show the sim div when the button is clicked

    document.getElementById("intro").style.display = "none";

    document.getElementById("sim").style.display = "block";

  });

});

div#content div {

  display: none;

}



div#content div#intro {

  display: block;

}

<div id="content">

    <h1>FOREST SIMULATOR</h1>

    <div id="intro">

        starting forest (leave empty to randomize):

        <br />

        <textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>

        <br />

        <button>generate</button>

    </div>

    <div id="sim" class="hidden">lalala</div>

    <div id="pushtray" class="overlay">lalala</div>

</div>

edited Nov 23 '18 at 22:41

answered Nov 23 '18 at 22:34

Mark Baijens

6,927103453

add a comment |

If you don't want to display the div elements with id "overlay" and "sim" you can write it as:

document.getElementById("sim").style.display="none";

document.getElementById("pushtray").style.display="none";

answered Nov 23 '18 at 20:17

Marko Panushkovski

111

So this goes in my Javascript file correct? How would my js file know what "document" is referring to? I'm using express-static to serve the html file, is that how it knows?

– user10366926
Nov 24 '18 at 0:26

It should be correct. Your javascript file does not have to know in which document it is used. You can attach it to every html file where it does the work correctly. In other words you can attach it this way: <head> <script src="theNameOfYourJsFile.js"></script> </head> and for every time your going to use the object document in your js file, it will always refer to the html file that it has been linked to

– Marko Panushkovski
Nov 24 '18 at 13:15

Ah right forgot about that

– user10366926
Nov 24 '18 at 18:06

Do you know why I'm getting a referenceError for document? In my html, it's written in the header <script src="sim.js"></script>. Yet when I type in node sim.js, it's giving me a referenceError at the part where I'm referencing document.

– user10366926
Nov 24 '18 at 20:16

Your html file and your javascript file have to be in the same folder, if they are not you should put them together (as well as the css and html files are together).

– Marko Panushkovski
Nov 24 '18 at 22:07

|
show 1 more comment

You should give the class hidden to any element you dont want visible (you can have any number of classes on an element), and then add a css rule that hides them:

<style>

  .hidden{

    display:none;

  }

</style>

Then if you want to show these hidden element when some sort of action is taken, you use javascript to add and remove the hidden class respectively.

var element = document.getElementById("sim");

element.classList.remove("hidden")

answered Nov 23 '18 at 20:13

SpeedOfRound

629314

add a comment |

This code hides the 'overlay' and 'pushtray' elements:

                   document.getElementById('overlay').style.display = 'none';

                  document.getElementById('pushtray').style.display =  'none' ;

This code hides only the content of the 'overlay' and 'pushtray' elements, but the elements are still "reserve" place in your page.

               document.getElementById('overlay').style.visibility = 'hidden';

              document.getElementById('pushtray').style.visibility= 'hidden' ;

edited Nov 23 '18 at 21:32

answered Nov 23 '18 at 21:26

Bálint Cséfalvay

649

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53452424%2fonly-showing-a-div-with-a-certain-id-by-manipulating-css-file-and-my-javascript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

The following css hides all div elements in the content div. After that it will show the intro div.

Bound a click function to the "generate" button with Javascript to hide the intro div and show the sim div.

With some alterations you should be able to make it work to your liking.

//Wait for the dom to finish loading

document.addEventListener("DOMContentLoaded", function(){

  //then bind a click event handler to all the buttons inside the div with the id intro

  document.querySelector("div#intro button").addEventListener("click", function(){

    //hide the intro div and show the sim div when the button is clicked

    document.getElementById("intro").style.display = "none";

    document.getElementById("sim").style.display = "block";

  });

});

div#content div {

  display: none;

}



div#content div#intro {

  display: block;

}

<div id="content">

    <h1>FOREST SIMULATOR</h1>

    <div id="intro">

        starting forest (leave empty to randomize):

        <br />

        <textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>

        <br />

        <button>generate</button>

    </div>

    <div id="sim" class="hidden">lalala</div>

    <div id="pushtray" class="overlay">lalala</div>

</div>

edited Nov 23 '18 at 22:41

answered Nov 23 '18 at 22:34

Mark Baijens

6,927103453

add a comment |

The following css hides all div elements in the content div. After that it will show the intro div.

Bound a click function to the "generate" button with Javascript to hide the intro div and show the sim div.

With some alterations you should be able to make it work to your liking.

//Wait for the dom to finish loading

document.addEventListener("DOMContentLoaded", function(){

  //then bind a click event handler to all the buttons inside the div with the id intro

  document.querySelector("div#intro button").addEventListener("click", function(){

    //hide the intro div and show the sim div when the button is clicked

    document.getElementById("intro").style.display = "none";

    document.getElementById("sim").style.display = "block";

  });

});

div#content div {

  display: none;

}



div#content div#intro {

  display: block;

}

<div id="content">

    <h1>FOREST SIMULATOR</h1>

    <div id="intro">

        starting forest (leave empty to randomize):

        <br />

        <textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>

        <br />

        <button>generate</button>

    </div>

    <div id="sim" class="hidden">lalala</div>

    <div id="pushtray" class="overlay">lalala</div>

</div>

edited Nov 23 '18 at 22:41

answered Nov 23 '18 at 22:34

Mark Baijens

6,927103453

add a comment |

The following css hides all div elements in the content div. After that it will show the intro div.

Bound a click function to the "generate" button with Javascript to hide the intro div and show the sim div.

With some alterations you should be able to make it work to your liking.

//Wait for the dom to finish loading

document.addEventListener("DOMContentLoaded", function(){

  //then bind a click event handler to all the buttons inside the div with the id intro

  document.querySelector("div#intro button").addEventListener("click", function(){

    //hide the intro div and show the sim div when the button is clicked

    document.getElementById("intro").style.display = "none";

    document.getElementById("sim").style.display = "block";

  });

});

div#content div {

  display: none;

}



div#content div#intro {

  display: block;

}

<div id="content">

    <h1>FOREST SIMULATOR</h1>

    <div id="intro">

        starting forest (leave empty to randomize):

        <br />

        <textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>

        <br />

        <button>generate</button>

    </div>

    <div id="sim" class="hidden">lalala</div>

    <div id="pushtray" class="overlay">lalala</div>

</div>

edited Nov 23 '18 at 22:41

answered Nov 23 '18 at 22:34

Mark Baijens

6,927103453

The following css hides all div elements in the content div. After that it will show the intro div.

Bound a click function to the "generate" button with Javascript to hide the intro div and show the sim div.

With some alterations you should be able to make it work to your liking.

//Wait for the dom to finish loading

document.addEventListener("DOMContentLoaded", function(){

  //then bind a click event handler to all the buttons inside the div with the id intro

  document.querySelector("div#intro button").addEventListener("click", function(){

    //hide the intro div and show the sim div when the button is clicked

    document.getElementById("intro").style.display = "none";

    document.getElementById("sim").style.display = "block";

  });

});

div#content div {

  display: none;

}



div#content div#intro {

  display: block;

}

<div id="content">

    <h1>FOREST SIMULATOR</h1>

    <div id="intro">

        starting forest (leave empty to randomize):

        <br />

        <textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>

        <br />

        <button>generate</button>

    </div>

    <div id="sim" class="hidden">lalala</div>

    <div id="pushtray" class="overlay">lalala</div>

</div>

//Wait for the dom to finish loading

document.addEventListener("DOMContentLoaded", function(){

  //then bind a click event handler to all the buttons inside the div with the id intro

  document.querySelector("div#intro button").addEventListener("click", function(){

    //hide the intro div and show the sim div when the button is clicked

    document.getElementById("intro").style.display = "none";

    document.getElementById("sim").style.display = "block";

  });

});

div#content div {

  display: none;

}



div#content div#intro {

  display: block;

}

<div id="content">

    <h1>FOREST SIMULATOR</h1>

    <div id="intro">

        starting forest (leave empty to randomize):

        <br />

        <textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>

        <br />

        <button>generate</button>

    </div>

    <div id="sim" class="hidden">lalala</div>

    <div id="pushtray" class="overlay">lalala</div>

</div>

//Wait for the dom to finish loading

document.addEventListener("DOMContentLoaded", function(){

  //then bind a click event handler to all the buttons inside the div with the id intro

  document.querySelector("div#intro button").addEventListener("click", function(){

    //hide the intro div and show the sim div when the button is clicked

    document.getElementById("intro").style.display = "none";

    document.getElementById("sim").style.display = "block";

  });

});

div#content div {

  display: none;

}



div#content div#intro {

  display: block;

}

<div id="content">

    <h1>FOREST SIMULATOR</h1>

    <div id="intro">

        starting forest (leave empty to randomize):

        <br />

        <textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>

        <br />

        <button>generate</button>

    </div>

    <div id="sim" class="hidden">lalala</div>

    <div id="pushtray" class="overlay">lalala</div>

</div>

edited Nov 23 '18 at 22:41

answered Nov 23 '18 at 22:34

Mark Baijens

6,927103453

edited Nov 23 '18 at 22:41

answered Nov 23 '18 at 22:34

Mark Baijens

6,927103453

answered Nov 23 '18 at 22:34

Mark Baijens

6,927103453

answered Nov 23 '18 at 22:34

Mark Baijens

6,927103453

add a comment |

If you don't want to display the div elements with id "overlay" and "sim" you can write it as:

document.getElementById("sim").style.display="none";

document.getElementById("pushtray").style.display="none";

answered Nov 23 '18 at 20:17

Marko Panushkovski

111

So this goes in my Javascript file correct? How would my js file know what "document" is referring to? I'm using express-static to serve the html file, is that how it knows?

– user10366926
Nov 24 '18 at 0:26

It should be correct. Your javascript file does not have to know in which document it is used. You can attach it to every html file where it does the work correctly. In other words you can attach it this way: <head> <script src="theNameOfYourJsFile.js"></script> </head> and for every time your going to use the object document in your js file, it will always refer to the html file that it has been linked to

– Marko Panushkovski
Nov 24 '18 at 13:15

Ah right forgot about that

– user10366926
Nov 24 '18 at 18:06

Do you know why I'm getting a referenceError for document? In my html, it's written in the header <script src="sim.js"></script>. Yet when I type in node sim.js, it's giving me a referenceError at the part where I'm referencing document.

– user10366926
Nov 24 '18 at 20:16

Your html file and your javascript file have to be in the same folder, if they are not you should put them together (as well as the css and html files are together).

– Marko Panushkovski
Nov 24 '18 at 22:07

|
show 1 more comment

If you don't want to display the div elements with id "overlay" and "sim" you can write it as:

document.getElementById("sim").style.display="none";

document.getElementById("pushtray").style.display="none";

answered Nov 23 '18 at 20:17

Marko Panushkovski

111

So this goes in my Javascript file correct? How would my js file know what "document" is referring to? I'm using express-static to serve the html file, is that how it knows?

– user10366926
Nov 24 '18 at 0:26

It should be correct. Your javascript file does not have to know in which document it is used. You can attach it to every html file where it does the work correctly. In other words you can attach it this way: <head> <script src="theNameOfYourJsFile.js"></script> </head> and for every time your going to use the object document in your js file, it will always refer to the html file that it has been linked to

– Marko Panushkovski
Nov 24 '18 at 13:15

Ah right forgot about that

– user10366926
Nov 24 '18 at 18:06

Do you know why I'm getting a referenceError for document? In my html, it's written in the header <script src="sim.js"></script>. Yet when I type in node sim.js, it's giving me a referenceError at the part where I'm referencing document.

– user10366926
Nov 24 '18 at 20:16

Your html file and your javascript file have to be in the same folder, if they are not you should put them together (as well as the css and html files are together).

– Marko Panushkovski
Nov 24 '18 at 22:07

|
show 1 more comment

If you don't want to display the div elements with id "overlay" and "sim" you can write it as:

document.getElementById("sim").style.display="none";

document.getElementById("pushtray").style.display="none";

answered Nov 23 '18 at 20:17

Marko Panushkovski

111

If you don't want to display the div elements with id "overlay" and "sim" you can write it as:

document.getElementById("sim").style.display="none";

document.getElementById("pushtray").style.display="none";

answered Nov 23 '18 at 20:17

Marko Panushkovski

111

answered Nov 23 '18 at 20:17

Marko Panushkovski

111

answered Nov 23 '18 at 20:17

Marko Panushkovski

111

answered Nov 23 '18 at 20:17

Marko Panushkovski

111

So this goes in my Javascript file correct? How would my js file know what "document" is referring to? I'm using express-static to serve the html file, is that how it knows?

– user10366926
Nov 24 '18 at 0:26

It should be correct. Your javascript file does not have to know in which document it is used. You can attach it to every html file where it does the work correctly. In other words you can attach it this way: <head> <script src="theNameOfYourJsFile.js"></script> </head> and for every time your going to use the object document in your js file, it will always refer to the html file that it has been linked to

– Marko Panushkovski
Nov 24 '18 at 13:15

Ah right forgot about that

– user10366926
Nov 24 '18 at 18:06

Do you know why I'm getting a referenceError for document? In my html, it's written in the header <script src="sim.js"></script>. Yet when I type in node sim.js, it's giving me a referenceError at the part where I'm referencing document.

– user10366926
Nov 24 '18 at 20:16

Your html file and your javascript file have to be in the same folder, if they are not you should put them together (as well as the css and html files are together).

– Marko Panushkovski
Nov 24 '18 at 22:07

|
show 1 more comment

So this goes in my Javascript file correct? How would my js file know what "document" is referring to? I'm using express-static to serve the html file, is that how it knows?

– user10366926
Nov 24 '18 at 0:26

It should be correct. Your javascript file does not have to know in which document it is used. You can attach it to every html file where it does the work correctly. In other words you can attach it this way: <head> <script src="theNameOfYourJsFile.js"></script> </head> and for every time your going to use the object document in your js file, it will always refer to the html file that it has been linked to

– Marko Panushkovski
Nov 24 '18 at 13:15

Ah right forgot about that

– user10366926
Nov 24 '18 at 18:06

Do you know why I'm getting a referenceError for document? In my html, it's written in the header <script src="sim.js"></script>. Yet when I type in node sim.js, it's giving me a referenceError at the part where I'm referencing document.

– user10366926
Nov 24 '18 at 20:16

Your html file and your javascript file have to be in the same folder, if they are not you should put them together (as well as the css and html files are together).

– Marko Panushkovski
Nov 24 '18 at 22:07

So this goes in my Javascript file correct? How would my js file know what "document" is referring to? I'm using express-static to serve the html file, is that how it knows?

– user10366926
Nov 24 '18 at 0:26

It should be correct. Your javascript file does not have to know in which document it is used. You can attach it to every html file where it does the work correctly. In other words you can attach it this way: <head> <script src="theNameOfYourJsFile.js"></script> </head> and for every time your going to use the object document in your js file, it will always refer to the html file that it has been linked to

– Marko Panushkovski
Nov 24 '18 at 13:15

Ah right forgot about that

– user10366926
Nov 24 '18 at 18:06

Do you know why I'm getting a referenceError for document? In my html, it's written in the header <script src="sim.js"></script>. Yet when I type in node sim.js, it's giving me a referenceError at the part where I'm referencing document.

– user10366926
Nov 24 '18 at 20:16

Your html file and your javascript file have to be in the same folder, if they are not you should put them together (as well as the css and html files are together).

– Marko Panushkovski
Nov 24 '18 at 22:07

|
show 1 more comment

You should give the class hidden to any element you dont want visible (you can have any number of classes on an element), and then add a css rule that hides them:

<style>

  .hidden{

    display:none;

  }

</style>

Then if you want to show these hidden element when some sort of action is taken, you use javascript to add and remove the hidden class respectively.

var element = document.getElementById("sim");

element.classList.remove("hidden")

answered Nov 23 '18 at 20:13

SpeedOfRound

629314

add a comment |

You should give the class hidden to any element you dont want visible (you can have any number of classes on an element), and then add a css rule that hides them:

<style>

  .hidden{

    display:none;

  }

</style>

Then if you want to show these hidden element when some sort of action is taken, you use javascript to add and remove the hidden class respectively.

var element = document.getElementById("sim");

element.classList.remove("hidden")

answered Nov 23 '18 at 20:13

SpeedOfRound

629314

add a comment |

You should give the class hidden to any element you dont want visible (you can have any number of classes on an element), and then add a css rule that hides them:

<style>

  .hidden{

    display:none;

  }

</style>

Then if you want to show these hidden element when some sort of action is taken, you use javascript to add and remove the hidden class respectively.

var element = document.getElementById("sim");

element.classList.remove("hidden")

answered Nov 23 '18 at 20:13

SpeedOfRound

629314

You should give the class hidden to any element you dont want visible (you can have any number of classes on an element), and then add a css rule that hides them:

<style>

  .hidden{

    display:none;

  }

</style>

Then if you want to show these hidden element when some sort of action is taken, you use javascript to add and remove the hidden class respectively.

var element = document.getElementById("sim");

element.classList.remove("hidden")

answered Nov 23 '18 at 20:13

SpeedOfRound

629314

answered Nov 23 '18 at 20:13

SpeedOfRound

629314

answered Nov 23 '18 at 20:13

SpeedOfRound

629314

answered Nov 23 '18 at 20:13

SpeedOfRound

629314

add a comment |

This code hides the 'overlay' and 'pushtray' elements:

                   document.getElementById('overlay').style.display = 'none';

                  document.getElementById('pushtray').style.display =  'none' ;

This code hides only the content of the 'overlay' and 'pushtray' elements, but the elements are still "reserve" place in your page.

               document.getElementById('overlay').style.visibility = 'hidden';

              document.getElementById('pushtray').style.visibility= 'hidden' ;

edited Nov 23 '18 at 21:32

answered Nov 23 '18 at 21:26

Bálint Cséfalvay

649

add a comment |

This code hides the 'overlay' and 'pushtray' elements:

                   document.getElementById('overlay').style.display = 'none';

                  document.getElementById('pushtray').style.display =  'none' ;

This code hides only the content of the 'overlay' and 'pushtray' elements, but the elements are still "reserve" place in your page.

               document.getElementById('overlay').style.visibility = 'hidden';

              document.getElementById('pushtray').style.visibility= 'hidden' ;

edited Nov 23 '18 at 21:32

answered Nov 23 '18 at 21:26

Bálint Cséfalvay

649

add a comment |

This code hides the 'overlay' and 'pushtray' elements:

                   document.getElementById('overlay').style.display = 'none';

                  document.getElementById('pushtray').style.display =  'none' ;

This code hides only the content of the 'overlay' and 'pushtray' elements, but the elements are still "reserve" place in your page.

               document.getElementById('overlay').style.visibility = 'hidden';

              document.getElementById('pushtray').style.visibility= 'hidden' ;

edited Nov 23 '18 at 21:32

answered Nov 23 '18 at 21:26

Bálint Cséfalvay

649

This code hides the 'overlay' and 'pushtray' elements:

                   document.getElementById('overlay').style.display = 'none';

                  document.getElementById('pushtray').style.display =  'none' ;

This code hides only the content of the 'overlay' and 'pushtray' elements, but the elements are still "reserve" place in your page.

               document.getElementById('overlay').style.visibility = 'hidden';

              document.getElementById('pushtray').style.visibility= 'hidden' ;

edited Nov 23 '18 at 21:32

answered Nov 23 '18 at 21:26

Bálint Cséfalvay

649

edited Nov 23 '18 at 21:32

answered Nov 23 '18 at 21:26

Bálint Cséfalvay

649

answered Nov 23 '18 at 21:26

Bálint Cséfalvay

649

answered Nov 23 '18 at 21:26

Bálint Cséfalvay

649

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk