Jump to content

.London Domains - £4
Photo

How can I load a simple static page in another page?



  • This topic is locked This topic is locked
9 replies to this topic

#1 doctorized

doctorized
  • Banned
  • Newbie
  • 5 posts

Posted 08 January 2019 - 11:36

All I want to do is to design a web page that will have a horizontal menu with submenus and all the space below the menu will be used to load some pages created by me, not any page from the web, only my pages that will have some stuff inside (some text and some tables) and that's all. What would your approach be? Just div? Div is not showing the page correctly, just a small box that I fail to resize it to have the size of the page loaded and use browser's scrollbar when needed. If I use frameset then the page is loaded just fine but submenus are lost inside the frame. What would you do? Don't just say something like "appropriate css for my tags and classes". What would be that css or whatever you are about to use?

 

I have done a huge google search and I haven't found anything that it works. All the codes posted everywhere and marked as solutions are not working properly for me, at least locally that I use them as the hole thing will be running locally.

 

A small example of the html file:

<html>
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="ISO-8859-7"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>     
      function showPage(id) {
        switch (id) {
          case "1":           
            $(".content").html('<object data="start.htm">');
            //alert("ok");
            break;
        }       
      }     
    </script>
</head>
<body>
    <div>
        <ul id="nav">
            <li><a href="#" id="1" onclick="showPage(this.id)">Home</a></li>
            <li><a href="#" target="content" class="parent">Field 1</a>
<ul>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
        </ul></li>
            <li><a href="#">Field 2</a></li>
            <li><a href="#">Field 3</a></li>
        </ul>
    </div>
<div class="content"></div>
</body>
</html>

styles.css:

/* main menu styles*/
#nav {
display:inline-block;
width:100%;
margin:0px auto;
padding:0;
/* general backround */
background:#00b57f url(bg-ABT.png) repeat-x 0 -110px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav li {
margin:10px;
float:left;
position:relative;
z-index:1;
list-style:none;
}
#nav a {
font-weight:bold;
/* xroma grammaton */
color:#ffffff;
text-decoration:none;
display:block;
padding:8px 20px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, .7);
}/* selected menu element */
#nav .current a, #nav li:hover > a {
background:#00b57f url(bg-ABT.png) repeat-x 0 -20px;
color:#000;
border-top:1px solid #f8f8f8;box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
-moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
background:none;
border:none;
color:#000;
}
#nav ul li a:hover {
/* fonto subitems */
background:#ddffdd url(bg-ABT.png) repeat-x 0 -100px;
//color:#fff;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
//text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}
#nav ul li:first-child > a {
-moz-border-radius-topleft:10px; /*some css3*/
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
-moz-border-radius-bottomleft:10px; /*some css3*/
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
}/* drop down */
#nav li:hover > ul {
opacity:1;
visibility:visible;
}
#nav ul {
opacity:0;
visibility:hidden;
padding:0;
width:100%;
position:absolute;
z-index:1;
background:#ddffdd url(bg-ABT.png) repeat-x 0 0;
border:1px solid #aa88aa;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);-moz-transition:opacity .25s linear, visibility .1s linear .1s;
-webkit-transition:opacity .25s linear, visibility .1s linear .1s;
-o-transition:opacity .25s linear, visibility .1s linear .1s;
transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
float:none;
margin:0;
}
#nav ul a {
font-weight:normal;
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
left:160px;
top:0px;
}
.options {
width: 100%;
}
.content {
    margin-left: 0px;
    margin-top: 20px;
    //padding: 1px 16px;
    height: auto;
    overflow:hidden; 
display:inline-block;  
}

In the attached file you see the result of my code. Any help would be appreciated.

Attached Files

  • Attached File  1.png   19.1KB   0 downloads

Edited by doctorized, 08 January 2019 - 11:41.

  • 0

#2 MikeChipshop

MikeChipshop
  • Overlord
  • Mini Member
  • 4,686 posts

Posted 08 January 2019 - 11:48

Welcome to the forum!

 

First off, don't use frameset at all as it's no longer supported as of HTML5.

 

The way I see it you have two options, AJAX and iframe's. AJAX allows you to load a portion of another page within a div on the main page directly, bring in only the content you want/need and placing it directly on the main page. Once it's there you can manipulate it as you need using JS, CSS etc.

 

iframe's on the other hand open up a window on your main page in which you can display another page, think of it like a hole in your page that shows another page that's underneath. This page underneath is the whole page that you point the iframe at.

 

Which one of these sounds more like what you want to do? iframes are plain HTML while AJAX (Asynchronous JavaScript and XML) uses JavaScript.


  • 0

#3 doctorized

doctorized
  • Banned
  • Newbie
  • 5 posts

Posted 08 January 2019 - 12:27

Which one of these sounds more like what you want to do? iframes are plain HTML while AJAX (Asynchronous JavaScript and XML) uses JavaScript.

I want to use the one that is simpler, smaller and browser's scrollbars are used when needed. With AJAX do I need to have xml files? If yes, then iframe.


  • 0

#4 doctorized

doctorized
  • Banned
  • Newbie
  • 5 posts

Posted 08 January 2019 - 12:53

Also, I have seen many pages posting codes like this in the attached file. I do not understand why they post a code like this as no one will use it that way. It needs enhancement. How will somebody enhance it if no one shows how?

Attached Files

  • Attached File  2.png   174.69KB   0 downloads

  • 0

#5 MikeChipshop

MikeChipshop
  • Overlord
  • Mini Member
  • 4,686 posts

Posted 09 January 2019 - 11:08

Not sure what you mean by it needs enhancement? I'm assuming there's a language barrier between us?

 

The second example you show is using JavaScript to change the SRC value of the iframe, meaning the iframe load new content from whatever the src was changed too. 


  • 0

#6 doctorized

doctorized
  • Banned
  • Newbie
  • 5 posts

Posted 09 January 2019 - 12:08

Not sure what you mean by it needs enhancement? I'm assuming there's a language barrier between us?

 

The second example you show is using JavaScript to change the SRC value of the iframe, meaning the iframe load new content from whatever the src was changed too. 

Help me understand where is the language barrier. Is it the word "enhancement"? I mean that the code needs improvement, needs to get better. In both cases, my first post with the div and the second example with the iframe, as you see, the page appears in a small (let say it) box. Is it normal? No, it isn't. So, what is the solution for this? In my case, the pages that will be loaded will have some text and a table only. No flash, no nothing.


Edited by doctorized, 09 January 2019 - 12:10.

  • 0

#7 MikeChipshop

MikeChipshop
  • Overlord
  • Mini Member
  • 4,686 posts

Posted 10 January 2019 - 08:52

Oh I see. The reason people post code like that is so that you can learn from it. Nobody knows exactly what you expect the end result to look like and nobody is inclined to provide this code to you for free. What they're giving you is the methods you need to get where you're going.

 

Post the code from the above screenshot and I'll have a look. It looks to me like you just want to make it wider and taller.


  • 0

#8 doctorized

doctorized
  • Banned
  • Newbie
  • 5 posts

Posted 10 January 2019 - 15:52

Oh I see. The reason people post code like that is so that you can learn from it. Nobody knows exactly what you expect the end result to look like and nobody is inclined to provide this code to you for free. What they're giving you is the methods you need to get where you're going.

Post the code from the above screenshot and I'll have a look. It looks to me like you just want to make it wider and taller.

You must be joking. All the code above the screenshot is invisible? What more should I say? I said that the pages are loaded in a small box and not in real size. I posted the screenshot to see how small it is. Of course that size was the problem. You read it, you saw it. What was not clear enough for all of you? You really didn't understand my expectations? Does that small box 2 by three inches appears logical and good enough to show a entire web page? Obviously, you didn't read my initial post carefully. The code that I wanted was not more than 10 lines. Obviously, I wanted a small fix for my code to show pages in full size. If payment is needed for less than 10 lines then delete my account right now. Thank you for trying to help me but do not bother. I managed to answer my own question.

Edited by doctorized, 10 January 2019 - 15:53.

  • 0

#9 Gibson

Gibson
  • Hefty Member
  • Flogging Gibbo
  • 1,814 posts

Posted 11 January 2019 - 03:26   Best Answer

You must be joking. All the code above the screenshot is invisible? What more should I say? I said that the pages are loaded in a small box and not in real size. I posted the screenshot to see how small it is. Of course that size was the problem. You read it, you saw it. What was not clear enough for all of you? You really didn't understand my expectations? Does that small box 2 by three inches appears logical and good enough to show a entire web page? Obviously, you didn't read my initial post carefully. The code that I wanted was not more than 10 lines. Obviously, I wanted a small fix for my code to show pages in full size. If payment is needed for less than 10 lines then delete my account right now. Thank you for trying to help me but do not bother. I managed to answer my own question.

 

61EJfbbElYL._SX450_.jpg


  • 1

#10 MikeChipshop

MikeChipshop
  • Overlord
  • Mini Member
  • 4,686 posts

Posted 11 January 2019 - 09:10

--Snip--

 

:bye:  There's always one isn't there? Thread closed but left up here in case anyone needs to know how not to get their question answered.


  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users