In one of the pages I need to have an iframe, but when the user loads the page I want it to be hidden by default. Right now I have a hide and show button to hide and show the iframe, but it is shown by default. How can I hide it by default?
Here's the code I have for the two buttons
<input type="button" value="Show Graph" onClick="$('graph').show();">
<input type="button" value="Hide Graph" onClick="$('graph').hide();">
In one of the pages I need to have an iframe, but when the user loads the page I want it to be hidden by default. Right now I have a hide and show button to hide and show the iframe, but it is shown by default. How can I hide it by default?
Here's the code I have for the two buttons
<input type="button" value="Show Graph" onClick="$('graph').show();">
<input type="button" value="Hide Graph" onClick="$('graph').hide();">
5 Answers
Reset to default 6Did you try to use CSS like this?
iframe {
display:none;}
Though that depends if you want to have the area reserved too. With a sketch it would be easier to know.
You can hide on load with jQuery, too.
function(){$('graph').hide();}
Also - since you are already using jQuery you could just simply hide the iFrame on the page load like so:
<script type="text/javascript">
$(document).ready(function()
{
$('#graph').hide();
});
</script>
Working demo : Demo
So you will need to make sure of the following changes:
Iframe :
Add id="graph" to your iframe.
onClick Events:
Add onClick="$('#graph').show();" and onClick="$('#graph').hide();" respectively
If you put this in your <head> tag, it should hide it for you
<script type="text/javascript">
$(function() {
$('graph').hide();
});
</script>
Although you might was to double-check that you're just using 'graph' - in jQuery that would refer to a <graph> element; '#graph' would refer to the iframe with the id "graph"
There are three ways I know:
You set the height and width to 0.
Set an ID for the iframe (for example "hideframe") and in the head or in external stylesheet add this
#hideframe{display: none;}Use jQuery
$(document).ready(function(){ $("#hideframe").css("display", "none"); });Or
$(document).ready(function(){ $("#hideframe").hide(); });
Make sure jQuery is actually included in the head of your page. Many times I hear people say something doesn't work in jQuery. It turns out their URLs to the jQuery library were wrong so make sure you don't fall into this situation.
Am I missing someting.. but you can make a self invoking a jQuery function as follows
(function (){
$('iframe').hide();
})();