dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Make a html Framework with the use of js

  1. #1
    Join Date
    Sep 2012
    Location
    Delhi
    Posts
    5

    Question Make a html Framework with the use of js

    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

  2. #2
    Join Date
    Sep 2012
    Posts
    1
    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.

  3. #3
    Join Date
    Sep 2012
    Location
    Delhi
    Posts
    5

    Question Html Framework

    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="cursorointer" 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="cursorointer" onclick="next();"/>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles