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
Related
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 () {
});
});
});
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>
I'm trying to create a button which will show a div if it is hidden, or hide the div if it is already shown (doing it in javascript). I've written this code to be used onclick but it doesn't seem to work and I can't see why. Can someone see what I have done wrong?
if (document.getElementById('Hidey').style.display == 'none') {
document.getElementById('Hidey').style.display = 'inline'
}
else {
document.getElementById('Hidey').style.display = 'none'
}
EDIT:
HTML
<div id="Button" onclick="javascript posted above here"><h2>Click</h2></div>
<div id="Hidey">Content Inside</div>
That's the HTML being effected, nothing else in my code effects these. I'm simply confused.
I've set up a plunker here http://plnkr.co/edit/EkuW8nEIV22vmuaDM9JR?p=preview.
<script>
var toggle = function(){
if (document.getElementById('Hidey').style.display == 'none') {
document.getElementById('Hidey').style.display = 'inline'
}
else {
document.getElementById('Hidey').style.display = 'none'
}
}
</script>
<h1 id="Hidey">Hello Plunker!</h1>
click me
Your code seems good. I think you maybe weren't setting up the function correctly or calling the function correctly.
Use jQuery and just use this:
$("button").onclick( function() {("#Hidey").toggle();});
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';
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