Develop Reference

Second Show Div Function Not Working

I am trying to use show div on click. But First One is working properly but not second one.
<script type="text/livescript">
function showDiv() {
div = document.getElementById('change_pass');
div.style.display = "block";
}
function showDiv1() {
div = document.getElementById('invite-friend_now');
div.style.display = "block";
}
</script>
And Using links onclick :
Change Password
Invite Friend
On clicking Change Password, That division pop ups properly. But when we click on Invite Friend link, Page go to top and url shows www.example.com/# only.(....trailing # only)

You could be passing some parameter to use just one function. Also, you can use preventDefault() to prevent the page from scrolling up:
<script type="text/livescript">
function showDiv(e, divName) {
div = document.getElementById(divName);
div.style.display = "block";
e.preventDefault();
}
</script>
Change Password
Invite Friend
Also, check on this invite-friend_now ID as I think you might have misspelled it.

I think it is going to be easier by using jQuery this way:
<button id="show_div">show div</button>
<div id="To_be_shown" style="display: none;"><p>some text</p></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$("#show_div").click(function () {
$("#To_be_shown").fadeIn(100);
});
</script>

Changing CSS Styles with javascript for a phone app

I have a page that will be displayed on a phone. On the page I have a link
when clicked runs a javascript script. In the script I want to hide a
with the class name, content and display the with the class name, sidebar1. I put an alert in the script to show that the script runs when the
link is clicked. It will come out when I get the script running. Right now the
commands after the alert do not work. Can someone help? Here is my script:
<script type="text/javascript">
function displaymenu() {
alert("I'm the menu");
document.className.content.style.display = 'none';
document.className.sidebar1.style.display = '!important';
};
</script>

If you want to update a style on a particular element, you should use the element id:
document.getElementById("myDIV").style.display = 'none';

Try using getElementsByClassName()
document.getElementsByClassName('content');
https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName
or with jQuery
$('.className').hide();

Change your code to this
<script type="text/javascript">
function displaymenu() {
alert("I'm the menu");
var content = document.querySelector(".content"),
sidebar1 = document.querySelector(".sidebar1")
content.style.display = 'none';
sidebar1.style.display = 'block';
};
</script>

Try something like this,
document.getElementsByClassName("myClassName").style.display = "none";
document.getElementsByClassName("sidebar1").style.cssText = 'display:inline !important';

Hide/Show DIV from a href

I have a div which contains a google map, when the page loads I want to have the div hidden until I click the link to view. My problem is that the div always shows when the page loads. I can't for the life of me figure out why it wont show as hidden until clicked.
View on Map <i class="fa fa-map-marker"></i>
This is my div which holds the map (haven't included as no need to)
<div id="showmap">
</div>
javascript
<script language="JavaScript">
function toggle(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
</script>
I've swapped the block & none around and still no joy,
How is it possible?
I did have it working through using a submit button, but I have more code that uses submit button to update a form to my db and everytime I clicked on the Show/Hide div it uploaded data, so I'm trying it this way unless you can have multiple submit on a page?

You can hide the element with CSS on initial page load:
#showmap {
display: none;
}

The div will have the style display set to block by default so it will always be shown when the page is loaded as it is now. Preferable set the display property to none
<div id="showmap" style="display:none;"></div>
Or you can set it in javascript on when the page has been loaded
window.onload(function () {
document.getElementById("showmap").style.display = "none";
}
But doing it by css is the way to go here.

Better to use jquery but your code is not working because you need to do in this style
<script language="JavaScript">
$(document).ready(function(){
toggle('map');
})
function toggle(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
return false;
}
</script>
<style>
#map{display:none}
</style>
or
<script>
$(document).ready(function(){
$('#map').toggle();
})
</script>
But the best way is to use css for hide(initial)
And ATTENTION FOR return false in your way of using

div appear on load, disappear on click

I am a newbie with javascript therefore I am requesting a little bit of help here.
Basically I have a very simple HTML page and inside it I will need a DIV to appear on window load and disappear when a user clicks on 'Close'.
At this moment, onload event works perfectly, but when I click on 'Close' the DIV is still there ( I think because windows loads again ).
Here is my javascript code:
function popup() {
document.getElementById("pop_up_main").style.display = "block";
}
document.getElementById("asd").onclick = function() {
document.getElementById("pop_up_main").style.display = "none";
};
BODY calls popup() function
<body onload="popup()">
pop_up_main is my DIV and inside it I have the anchor that needs to hide the div.
<div id="pop_up_main">
Close
Any help will be highly appreciated. If there is something that I've missed please let me know. Many Thanks!

Try This
function popup() {
setTimeout(function(){
document.getElementById("pop_up_main").style.display = "block";
},5000);
}
function hidePopup() {
document.getElementById("pop_up_main").style.display = "none";
};
<div id="pop_up_main" style="display:none;">
<a href="javascript:void(null);" onClick="hidePopup()" >Close</a>

Check the fiddle Demo Fiddle
<div id="pop_up_main">
Close
</div>
and Javascript
document.getElementById("asd").onclick = function () {
document.getElementById("pop_up_main").style.display = "none";
};

a tag reload the page and as you said it is the problem,use something other than a tag and style it like a :
cursor:pointer;
text-decoration:underline

Why is my element null?

Why when I do an alert of the value (see below) it returns null? When an element with that ID exists?
// make reference to divs
var countdown_timer = document.getElementById("countdown_timer");
var countdown_image = document.getElementById("countdown_image");
// For element manipulation
if (type == 'image') {
var element = countdown_image;
} else if (type == 'timer') {
var element = countdown_timer;
}
alert(countdown_timer);
The div is as below..
<div class="timer" id="countdown_timer"></div>

It's possible that the javascript is being executed before the elements on your page are not loaded, thus the selector isn't finding anything. Is your javascript above the <body> tag? Try putting it after </body> and see how that works for you.
Another solution is to do:
window.onload = function () {
//put all your JS here
}

onload = function() {
// put you code here
}

Your call to document.getElementById needs to be after the markup for the div.
<div class="timer" id="countdown_timer"></div>
<script type="text/javascript">
var countdown_timer = document.getElementById("countdown_timer");
...
</script>
Alternatively, you could use the window.onload event, which would be the better way to go.