Showing a hidden div with JavaScript
Question
I have the following code right...
<div id="viewFrame">
<iframe src="preview.php" name="previewFrame" width="100%" height="100%" style="display:none;"></iframe>
</div>
And also:
<script type="text/javascript">
function previewFrame(){
document.preview.submit();
var preview = document.getElementById('viewFrame');
preview.style.display = 'block';
}
</script>
...Oh, and I also have
<form name="preview" action="preview.php" method="post" target="previewframe">
Some more code here...
</form>
It will hide the div but when I try to submit the form, it won't show the iframe. Anyone know what is wrong?
EDIT: Ok, here is the full code for the page:
<head>
<title>EasyPage</title>
<?
session_start();
if(!session_is_registered(myusername)){
header("location:main_login.php");
}
?>
<script type="text/javascript">
function insertlink(){
var url = prompt("URL:");
var text = prompt("Text:");
var link = "<a href=" + url + ">" + text + "</a>";
var linksbox = document.getElementById("links");
linksbox.value = linksbox.value + link;
}
function insertlink2(){
var url = prompt("URL:");
var text = prompt("Text:");
var link = "<a href=" + url + ">" + text + "</a>";
var contentbox = document.getElementById("content");
contentbox.value = contentbox.value + link;
}
function insertimage(){
var url = prompt("Image URL:");
var image = "<img src=" + url + " />";
var contentbox = document.getElementById("content");
contentbox.value = contentbox.value + image;
}
function insertlineopen(){
var line = "<p>";
var contentbox = document.getElementById("content");
contentbox.value = contentbox.value + line;
}
function insertlineclose(){
var line = "</p>";
var contentbox = document.getElementById("content");
contentbox.value = contentbox.value + line;
}
function previewFrame(){
document.preview.submit();
var preview = document.getElementById('previewFrame');
preview.style.display = 'block';
}
</script>
</head>
<body style="background-color:black">
<div style="font-size:72px; text-align:center; font-family:Verdana, Arial, Times New Roman; color:lime; background-color:black;">
<b>EasyPage</b>
</div>
<div style="font-size:24px; text-align:right; font-family:Sans Serif; color:; background-color:orange;">
<a href="/index.php">Home</a> <a href="/create.php">Create</a> <a href="/logout.php">Logout</a>
</div>
<div style="font-size:18; text-align:center; font-family:Verdana, Arial, Times New Roman; color:yellow; background-color:black;">
<form name="create" action="process.php" method="post" target="_blank">
<form name="preview" action="preview.php" method="post" target="previewFrame">
<table style="color:yellow; margin:auto;">
<tr><td colspan="3"><hr /></td></tr>
<tr><td>Title: </td><td><input type="text" name="title" /> </td><td><i>This text shows in the title bar</i></td></tr>
<tr><td>Background Colour: </td><td><input type="text" name="back" /> </td><td><i>The background colour of the entire page.</i></td></tr>
<tr><td colspan="3"><hr /></td></tr>
<tr><td colspan="3" style="text-align:center;">Heading:</td></tr>
<tr><td>Text: </td><td><input type="text" name="heading" /> </td><td><i>The heading at the top of the page.</i></td></tr>
<tr><td>Size: </td><td><input type="text" name="hsize" /> </td><td><i>The size of the heading.</i></td></tr>
<tr><td>Align: </td><td><input type="radio" name="halign" value="left" /> Left <input type="radio" name="halign" value="center" /> Center <input type="radio" name="halign" value="right" /> Right </td><td><i>The alignment of the heading.</i></td></tr>
<tr><td>Font Family: </td><td><input type="text" name="hfont" /> </td><td><i>The font style for the heading.</i></td></tr>
<tr><td>Colour: </td><td><input type="text" name="hcolor" /> </td><td><i>The colour of the heading.</i></td></tr>
<tr><td>Background Colour: </td><td><input type="text" name="hback" /> </td><td><i>The background colour of the heading.</i></td></tr>
<tr><td colspan="3"><hr /></td></tr>
<tr><td colspan="3" style="text-align:center;">Link Bar:</td></tr>
<tr><td colspan="3" style="text-align:right; color:white; cursor:pointer;"><a onclick="insertlink()"><u>Insert Link</u></a></td></tr>
<tr><td>Links: </td><td><input type="text" name="links" id="links" /> </td><td><i>The links that show below the heading.</i></td></tr>
<tr><td>Size: </td><td><input type="text" name="lsize" /> </td><td><i>The size of the links.</i></td></tr>
<tr><td>Align: </td><td><input type="radio" name="lalign" value="left" /> Left <input type="radio" name="lalign" value="center" /> Center <input type="radio" name="lalign" value="right" /> Right </td><td><i>The alignment of the links.</i></td></tr>
<tr><td>Font Family: </td><td><input type="text" name="lfont" /> </td><td><i>The font style for the links.</i></td></tr>
<tr><td>Background Colour: </td><td><input type="text" name="lback" /> </td><td><i>The background colour of the link bar.</i></td></tr>
<tr><td colspan="3"><hr /></td></tr>
<tr><td colspan="3" style="text-align:center;">Content:</td></tr>
<tr><td colspan="3" style="text-align:right; color:white; cursor:pointer;"><a onclick="insertlineopen()"><u>Open New Line</u></a> <a onclick="insertlineclose()"><u>Close Line</u></a> <a onclick="insertlink2()"><u>Insert Link</u></a> <a onclick="insertimage()"> <u>Insert Image</u></a></td></tr>
<tr><td>Content: </td><td><input type="text" name="content" id="content" /> </td><td><i>The page content.</i></td></tr>
<tr><td>Size: </td><td><input type="text" name="csize" /> </td><td><i>The size of the text content.</i></td></tr>
<tr><td>Align: </td><td><input type="radio" name="calign" value="left" /> Left <input type="radio" name="calign" value="center" /> Center <input type="radio" name="calign" value="right" /> Right </td><td><i>The alignment of the content.</i></td></tr>
<tr><td>Font Family: </td><td><input type="text" name="cfont" /> </td><td><i>The font style for the text content.</i></td></tr>
<tr><td>Colour: </td><td><input type="text" name="ccolor" /> </td><td><i>The colour of the text content.</i></td></tr>
<tr><td>Background Colour: </td><td><input type="text" name="cback" /> </td><td><i>The background colour of the content.</i></td></tr></tr>
<tr><td colspan="3"><hr /></td></tr>
<tr><td colspan="3" style="text-align:center;">Footer:</td></tr>
<tr><td>Text: </td><td><input type="text" name="footer" /> </td><td><i>The footer text.</i></td></tr>
<tr><td>Size: </td><td><input type="text" name="fsize" /> </td><td><i>The size of the footer.</i></td></tr>
<tr><td>Align: </td><td><input type="radio" name="falign" value="left" /> Left <input type="radio" name="falign" value="center" /> Center <input type="radio" name="falign" value="right" /> Right </td><td><i>The alignment of the footer.</i></td></tr>
<tr><td>Font Family: </td><td><input type="text" name="ffont" /> </td><td><i>The font style for the text content.</i></td></tr>
<tr><td>Colour: </td><td><input type="text" name="fcolor" /> </td><td><i>The colour of the footer.</i></td></tr>
<tr><td>Background Colour: </td><td><input type="text" name="fback" /> </td><td><i>The background colour of the footer.</i></td></tr>
<tr><td colspan="3"><hr /></td></tr>
<tr><td>Filename: </td><td><input type="text" style="text-align:right;" value="index" name="filename" />.html </td><td><i>The name of the file. (For security reasons, file extensions cannot be changed.)</i></td></tr>
<tr><td colspan="3" style="text-align:center;"><a onclick="previewFrame()" style="color:white; cursor:pointer;"><u>Preview</u></a> <input type="submit" value="Create" /></td></tr>
</table>
<div id="viewFrame">
<iframe src="preview.php" id="previewFrame" name="previewFrame" width="100%" height="100%" style="display:none;"></iframe>
</div>
</form>
</form>
</div>
Copyright 2012, Nathan Piercy. All rights reserved.
</div>
</body>
2 answers
solution1
2 2012-02-04 01:37:22
Going off of Hristo's comment, try adding id="previewFrame" to the iframe itself, and then update getElementById to call previewFrame.
eg
<div id="viewFrame">
<iframe src="preview.php" id="previewFrame" name="previewFrame" width="100%" height="100%" style="display:none;"></iframe>
</div>
and
<script type="text/javascript">
function previewFrame(){
document.preview.submit();
var preview = document.getElementById('previewFrame');
preview.style.display = 'block';
}
</script>
Or just use a JavaScript framework to more easily select and show elements.
solution2
0 2012-02-04 01:36:29
Try removing style="display: none;" from the <iframe> ...?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Showing hidden div
trouble showing hidden div with onchange function in javascript/html select option
Javascript showing hidden element
JavaScript not showing hidden picture
Show hidden div in javascript?
Javascript to show a hidden div
show hidden div with javascript
Div not showing after being hidden
Why is this hidden div not showing in IE?
Showing hidden div if checkbox is checked
Related Tags