Is there a reason my html isn't rendering?
User2617514’s Question:
I’m completely stuck. All of my html documents are validated and properly referenced to each other, but when I load the primary html, it doesn’t render.
My objective is to have a page with two sides: The left side which displays a default image and caption, and the right side which includes a button to load a different random image of five and caption on the left side via different html documents.
I’m making different sides with “iframes.”
Also how do change the width of the iframes?
<!DOCTYPE html>
<html>
<head>
<title>Free Jokes!</title>
<meta charset="utf-8">
<meta name="author" content="Justin Partovi, CS80 1184, Summer 2013">
<link href="final%20project.css" rel="stylesheet">
</head>
<body>
<h1 id="shadow">Welcome to Free Jokes!</h1>
<iframe id="left" src="left.html"></iframe>
<iframe id="right" src="right.html"></iframe>
</body>
</html>
The left side:
(Please let me know if there is a better way to accomplish my objective other than the way I am doing now)
<!DOCTYPE html>
<html>
<head>
<title>Your Joke!</title>
<meta charset="utf-8">
<script>
var randomnumber
function clickForJoke() {
randomnumber=math.floor( 1 + Math.random() * 15);
switch ( randomnumber ) {
case 1:
window.open( "joke1.html", target="right" );
break;
case 2:
window.open( "joke2.html", target="right" );
break;
case 3:
window.open( "joke3.html", target="right" );
break;
case 4:
window.open( "joke4.html", target="right" );
break;
case 5:
window.open( "joke5.html", target="right" );
break;
default:
window.open( "joke.html", target="right" );
</script>
</head>
</html>
The right side:
(Did I make the button incorrectly?)
<!DOCTYPE html>
<html>
<head>
<title>Final project</title>
<meta charset="utf-8">
<link href="final%20project.css" rel="stylesheet">
</head>
<body>
<button type="button" id="jokeButton" name="jokeButton" onclick="clickForJoke">Click for your joking pleasure!</button>
</body>
</html>
The default image and cation:
<html>
<head>
<title>Default joke</title>
<meta charset="utf-8">
<link href="final%20project.css" rel="stylesheet">
</head>
<body>
<p><img alt src = "laughing%20gif.gif"></p>
<p><b>Click the button to the right to get a free joke!</b></p>
</body>
</html>
I didn’t make the five other html documents yet.
You cannot just control a different iframe from another iframe. You have to invoke it from the parent.
<button type="button" id="jokeButton" name="jokeButton" onclick="parent.iframes['left'].clickForJoke();">Click for your joking pleasure!</button>
Suggestion:
The purpose you are doing right now does not require you to use two iframe. It can be on the same utilizing AJAX. If you like I can show you a simple way to do this using jQuery.
