Develop Reference

Make button close a div (using Wordpress)

I'm using a plug-in (PopUp Maker) to create a pop-up landing page. Inside it I have a button (made by me) that should close this pop-up.
I have no clue how to do it. I tried adding some javascript but is not working, and the thing is that I don't know if it's my code that isn't correct, Wordpress not reading my javascript file, or the plug in preventing me from doing it.
Any suggestions?
Here's the code I tried:
$(document).ready(function() {
$('.close-button').on('click', function(){
$(this).parent().fadeOut('slow', function(){
});
});
});

Here is a Native Javascript Solution to Close or open a Div by onclick.
function myFunction(){
if (document.getElementById('idofpopupdiv').style.display == "none") {
document.getElementById('idofpopupdiv').style.display = 'block';
document.getElementById('idofpopupdiv').style.visibility = 'visible';
} else {
document.getElementById('idofpopupdiv').style.display = 'none';
document.getElementById('idofpopupdiv').style.visibility = 'none';}}
and your button should have an onclick event to call the function.
<button onclick="myFunction();">Button Name</button>
Hope this helps.

Just replace #idofpopupdiv with the id of your popup div or a classname
$(function() {
$('.close-button').click(function() {
$('#idofpopupdiv').fadeOut('slow', function () {
});
});
});

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>

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

Change label text using JavaScript

Why doesn't the following work for me?
<script>
document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!';
</script>
<label id="lbltipAddedComment"></label>

Because your script runs BEFORE the label exists on the page (in the DOM). Either put the script after the label, or wait until the document has fully loaded (use an OnLoad function, such as the jQuery ready() or http://www.webreference.com/programming/javascript/onloads/)
This won't work:
<script>
document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';
</script>
<label id="lbltipAddedComment">test</label>
This will work:
<label id="lbltipAddedComment">test</label>
<script>
document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';
</script>
This example (jsfiddle link) maintains the order (script first, then label) and uses an onLoad:
<label id="lbltipAddedComment">test</label>
<script>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';
});
</script>

Have you tried .innerText or .value instead of .innerHTML?

Because a label element is not loaded when a script is executed. Swap the label and script elements, and it will work:
<label id="lbltipAddedComment"></label>
<script>
document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!';
</script>

Use .textContent instead.
I was struggling with changing the value of a label as well, until I tried this.
If this doesn't solve try inspecting the object to see what properties you can set by logging it to the console with console.dir as shown on this question: How can I log an HTML element as a JavaScript object?

Here is another way to change the text of a label using jQuery:
<script>
$("#lbltipAddedComment").text("your tip has been submitted!");
</script>
Check the JsFiddle example

Using .innerText should work.
document.getElementById('lbltipAddedComment').innerText = 'your tip has been submitted!';

Try this:
<label id="lbltipAddedComment"></label>
<script type="text/javascript">
document.getElementById('<%= lbltipAddedComment.ClientID %>').innerHTML = 'your tip has been submitted!';
</script>

Because the script will get executed first.. When the script will get executed, at that time controls are not getting loaded. So after loading controls you write a script.
It will work.