Develop Reference

How To Set Display None of <footer> tag with Console?

I'm trying to hide some fields on sites with javascript. For this, I use the console of the relevant browser and here I make that field display = "none"; with ClassName or ID, but I made a few attempts to improve these things a little more.
In these experiments, I only found a field with <footer> tag, but it has neither ClassName nor ID.
document.getElementsByClassName("footer")[0].style.display = "none";
How can I make it invisible with js code? Thank you very much if you can get back to me. I am trying to learn something new.

You can use the document.querySelector() function. This allows you to specify any valid CSS selector, meaning that in this case you can use the element's tag type to identify it.
Demo:
document.querySelector("footer").style.display = "none";
<div>Another div</div>
<footer>Hello</footer>
The code will remove the existing "Hello" message by hiding the footer element. All that's still on display is the "Another div".
Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

You can already create a class in CSS with style display: none; and later add or append that class on the footer,
let element = document.querySelector(".footer");
function hideFooter() {
element.classList.add("hide");
}
.hide {
display: none;
}
<footer class="footer">
<!-- footer code -->
<p>This Is Footer </p>
</footer>
<button onClick="hideFooter()"> Hide Footer </button>

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?

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";

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>

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")

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' ;

remove homepage content using javascript

I want to hide my homepage content after other link is clicked. My homepage content is into
<div class="active">
Homepage content
</div>
css class active and inactive
.active {
margin-top:230px;
font-size: 30px;
color:black;
}
.inactive
{
opacity:0;
}
I tried this script but it is not working.
<script src="jquery.js"></script>
<script>
$("#link-link1").click(function(){
$(this).removeClass("active").addClass("inactive");
});
</script>
I upload it to an web hosting so you can see full html code here and full css file here

$(this).removeClass("active").addClass("inactive");
Is adding and removing the class from your link (which I assume has id="#link-link1)
Instead you need to give your div an id like
<div id="homepage" class="active">
Then in your JS code reference that by id:
$('#homepage').removeClass("active").addClass("inactive");
Even better would be to use jquery's hide() method or toggle() if you wanted it to come back the next time you clicked:
$('#homepage').toggle();

Add an ID to the "Homepage content" div, so we can find it using javascript.
<div class="active" id="contentArea">
Homepage content
</div>
Try placing you jQuery code inside a document read. Optionally place it right before the closing </body> tag. Add the css classes to the "Home content" div and not to the link element addressed by $(this):
$( document ).ready(function() {
var contentArea = $("#contentArea");
$("#link-link1").click(function(){
contentArea.removeClass("active").addClass("inactive");
});
});
Consider using the jQuery function toggle() for changing contents visibility.
Take a look at the manual: http://learn.jquery.com/

Just take a look at that fiddle I make a simple example for you.
In you'r web page you must use better div elments as tabs not a elements
Code:
$("#random_link").click(function(){
//$(".active").css("display","none"); //WORKS TOOO
$(".active").fadeOut();
})

Working Fiddle
HTML
<a id="link1" href="#">Hide Home Page</a>
<a id="link2" href="#">Show Home Page</a>
<br/>
<div id="home_page">
<hr/>Homepage content
<hr/>
</div>
jQuery
$('#link1').click(function () {
$('#home_page').hide();
});
$('#link2').click(function () {
$('#home_page').show();
});
Hope this helps..!!
Update using toggle() based on #Cfreak answer
Updated Fiddle

Since you are using Jquery you can use hide method that will apply to your css of that element display: none;
$('#homepage').hide();
$('#homepage').show(); //to make it visible again
hope it help

You have to change the class for the div, in your code you are change the class of the link, add an Id or class to the div, for example:
<div class="active" id="test">
Homepage content
</div>
<script src="jquery.js"></script>
<script>
$("#link-link1").click(function(){
$('#test').removeClass("active").addClass("inactive");
});
</script>

How do I print a page using javascript and hide headers?

I have a page on my website called printUsers.html.
On it there is a button which prints the page using 'javascript:window.print()'.
I am also using '#media print' on the page to hide some buttons when the page is printed.
This is all working well and I have no problems here.
The problem is the following:
All the pages on the site, extend from the main page. So at the top of printUsers.html I have:
#{extends 'App/main.html' /}
This includes styles and a header which has buttons and drop-downs.
When the user clicks the print button, I want to hide all the header and buttons etc, which come from the main.html.
I tried wrapping it into a div, giving it an id and hiding it but this didn't work.
I have just started using javascript so any help would be much appreciated.
Thanks.

The CSS way
#media print
Use #media Print as you stated in your question, but include all the elements you don't want to see in your printed result, and put display:none to them. You can also apply some margin:0 auto; text-align:center; to your main content if you want to center it into your page.
Edit: You can hide any element, such as header this way:
header
{
display:none;
}
footer
{
display:none;
}
The Javascript way
Button's onClick
Your button's onclick:
Button onClick()
<button id="printThatText" name="printThatText" onclick="printPage();">Print this page</button>"
Your javascript code in the header (or at the end of the page)
Javascript
function printPage()
{
var myDropDown = document.getElementById('myDropDown');
myDropDown.style.display = "none";
//Whatever other elements to hide.
window.print();
myDropDown.style.display = "block";
return true;
}
You could also put all of these elements in an array and make a for ... in ... loop to show/hide them.

Wrap the contents with an element that encapsulates all of stuff you want to hide. In the print CSS, set the display to none.
The CSS:
#media print {
#myHeader, #myFooter { display: none }
}
The HTML:
<div id="myHeader">
<ul>
<li>
<a>My link</a>
</li>
</ul>
</div>
<div id="myContent">
<p>This will print fine</p>
</div>
<div id="myFooter">
<p>This will not print</p>
</div>
You could always use HTML5 header/footer elements!

Maybe try the opposite--print only a particular div--rather than hiding other divs: Print <div id=printarea></div> only?

Javascript show/hide: How to set to Show

I have the following code:
<a class="button" href="javascript:ShowHide('elaborate_1')" style="font-size:24px; padding:0 10px; margin-left:10px;">COLLAPSE</a>
<div id="elaborate_1" class="expandable-box" style="display:none;">
<div class="description"><?php //USE THIS CLASS 'description' ON A 'div' TAG FOR A GRAY BOX TO DISPLAY CONTENT ?>
<p class="nomargin nopadding">HELLO</p>
</div><!-- .descpription -->
</div>
The web page currently hides this message "hello" until I click "COLLAPSE" however I want the content to be shown automatically until I click "collapse.
How can I do this?

Change the display:none to display:block on your elaborate_1 div.

Remove the display:none from the containing element:
<div id="elaborate_1" class="expandable-box">
If your ShowHide function is correct, it should work just like that. If not, you should post the code from the function.

Just remove style="display:none;" from your html element
and add following code to your js function (for reference)
document.getElementById("elaborate_1").style.display = "block";
Personally I would suggest taking a look at JQuery. It allows you to take advantage of controlling various effects, like show, hide, toggle, fade, and custom animation, etc. Here is the link: http://api.jquery.com/category/effects/ which might be useful to you.
A little Jquery sample code:
$('a.button').click(function(){
$('#elaborate_1').toggle("slow");
});