Make a html Framework with the use of js

**ankitbnl406** · 09-17-2012 04:03 AM

Hi, I have some queries.

I want to make a framework in html5 where pages will load from the java script programming and menu also will be display according to the pages. I am attaching a screenshot of the area to be displayed. Please let me know if anybody has any idea. How can we start to make this? or Can share any experience with that. I am a new developer and don't know how can we load the page. Can we use iframe. Please suggest. I will be very thankful to you for this.main.JPG

**.lithium** · 09-17-2012 04:33 AM

function createHTML(){
alert("Creating HTML!");
var frame = document.createElement("iframe");
frame.src = "http://www.webdeveloper.com/forum/showthread.php?264871-Make-a-html-Framework-with-the-use-of-js";
frame.style.height = "500px";
frame.style.width = "500px";
frame.id = "framename";

document.body.appendChild(frame);

alert("done!");
}

that should work

You can change the link that the iframe redirects you to whatever you want by just editting the "src" tag.

**ankitbnl406** · 09-17-2012 07:15 AM

Thanx for replying me.

but i need to open iframe into the right hand side or under my div area. On the back button previous page will be open and on next button, next page will be open.

My code is below please help to correct it. This below code is working into IE but not working into the Safari, Crome please help. I want to make it for Ipad, etc. devices.

One more addition, i want to add a menu also in the left side of the pages load. The menu would be build on the basis of some javascript file.

Plmain.JPGease help

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Index page</title>
<script>

var urls = new Array('Page1.html','Page2.html','Page3.html','Page4.html');
var I=0;
function next()
{
I+=1;
if (I == urls.length-1)
{
document.getElementById("next").style.display = "none";
}
document.getElementById('links').id = urls[I];
document.getElementById('back').style.display='inherit';
}

function prev()
{
I-=1;
if(I==0)
{
document.getElementById("back").style.display = "none";
}
document.getElementById('links').id = urls[I];
document.getElementById('next').style.display='inherit';
}

</script>
</head>
<body>
<div id="main" style="border:solid #666; width:100%; height:auto;">
<div id="header" style="border:solid #F00; width:99.5%; height:50px;">
</div>
<div id="middle" style="border:solid #099; width:99.5%; height:460px;">
<div id="body_left" style="border:solid #006; width:29.50%; height:455px;">
</div>
<div id="body_right" style="border:solid #963; width:69.5%; height:455px; margin-left:auto; margin-top:-461px; position: relative;">
<iframe src="page1.html" scrolling="auto" id="frameset" name="links" width="99.5%" height="450"></iframe>
</div>
</div>
<div id="footer" style="border:solid #FF0; position: ; width:99.5%; height:auto;">
<div id="footer_left" style="border:solid #0FF; width:79.475%; height:50px;">
</div>
<div id="footer_right" style="border:solid #6F6; width:19.4375%; height:50px; margin-left:auto; margin-top:-56px;">
<div id="img_a" style="margin-top:10px; margin-left:30px;">
<img src="images/previous_01.jpg" alt="Back" id="back" align="middle" class="hover" style="cursor

ointer" onclick="prev();"/>
</div>
<div id="img_b" style="margin-top:-30px; margin-left:80px; float">
<img src="images/next_01.jpg" alt="Next" id="next" class="hover" align="middle" style="cursor

ointer" onclick="next();"/>
</div>
</div>
</div>
</div>
</body>
</html>

Thread: Make a html Framework with the use of js

Thread Tools

Display

Make a html Framework with the use of js

Html Framework

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions