Solved

Beginner need help

Posted on 2003-12-04
14
300 Views
Last Modified: 2010-04-09
I would like to write the website that has the layout.
----------------------------------------------
|Logo  |      Banner                            |
---------------------------------------------
| Navigator                                       |
---------------------------------------------
|Content                                          |
|                                                     |
|                                                     |
|                                                     |
|                                                     |
|                                                     |
---------------------------------------------
|Footer                                           |
--------------------------------------------
I want to the website to be dynamic but not allow using any scripting language such as php,perl or cgi. Only allow javascript or dhtml and table(iframe is not allow). My problem is i don't know how to display something in the content without changing the other areas such as logo, banner, navigator and footer when pressing those link buttons in the navigator bar. Someone help me to do this, thank you
0
Comment
Question by:contran
  • 4
  • 3
  • 3
  • +2
14 Comments
 
LVL 11

Expert Comment

by:Zontar
ID: 9879017
Use a frameset, then. Although serverside-includes would be much better IMO.

Personally, I would never put a site on a host that told me I could not use certain HTML tags. And I've never heard of a host that wouldn't allow you to use iframes -- who the heck are they, anyway?
0
 
LVL 15

Expert Comment

by:Timbo87
ID: 9879023
You could code it all into one HTML document and use JavaScript to switch between the pages. The downside is you need to code all the HTML in the one page. Frames or tables with scripting would be easier, but since you can only use tables and JavaScript, the method mentioned above is the only way.
0
 
LVL 15

Expert Comment

by:Timbo87
ID: 9879068
Here's an example:

<html>
<head>
<script language="JavaScript" type="text/javascript">

var content1 = "<center><h1>CONTENT 1</h1></center>"
var content2 = "<font color=red><h2>CONTENT 2</h2></font>"

function switchpage(pg)
{
      document.getElementById('page').innerHTML = pg
}
</script>
<table border=1>
<tr>
<td width=70>
<a href="#" onClick="switchpage(content1)">Link 1</a>
<br>
<a href="#" onClick="switchpage(content2)">Link 2</a>
</td>
<td width=400>
<div id="page">
Contents
</div>
</td>
</tr>
</table>
</body>
</html>
0
 
LVL 7

Expert Comment

by:TransBind
ID: 9879075
You can accomplish this without any scripting languages, just use plain HTML. Basically all you have to do is only CHANGE content and keep logo/banner/navigation menu the same. For example when user will click on (Link 1) you will load link1.html with logo/banner/navigation menu and then content of the page. When user will click on (Link 2) you will load link2.html with logo/banner/navigation menu and content for the page where LINK 2 refers and so on. Another way to do this is to use Layers. You can write your code so that it will show only specific layers and hide unneccessary layers. Make sure your javascript layer code is compatible with various browsers. Research on internet how to show up certain layers and hide certain layers. If you want to I can write a sample code for you. The last way to do this and least recommended is to create two frames and put your logo/banner/navigation in a top frame and content in a bottom frame.

----------------------------------------------
|Logo  |      Banner                         |
---------------------------------------------
| Navigator  (LINK 1) (LINK 2-Clicked)       |
---------------------------------------------
|Content of LINK 2 clicked                   |
|                                            |
|                                            |
|                                            |
|                                            |
|                                            |
----------------------------------------------
|Footer                                      |
----------------------------------------------

----------------------------------------------
|Logo  |      Banner                         |
---------------------------------------------
| Navigator  (LINK 1-Clicked) (LINK 2)       |
---------------------------------------------
|Content of LINK 1 clicked                   |
|                                            |
|                                            |
|                                            |
|                                            |
|                                            |
----------------------------------------------
|Footer                                      |
----------------------------------------------
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9879080
> The downside is you need to code all the HTML in the one page.

Not to mention an incredible amount of bloat if you coded a whole site this way...

contran... we're not doing your homework for you, are we?
0
 
LVL 15

Expert Comment

by:Timbo87
ID: 9879239
"Not to mention an incredible amount of bloat if you coded a whole site this way..."

I completely agree and I would never do a site this way. I'm just trying to find a solution with the stict limitations imposed on contran. The way I described is about the only way to do it all on one page without frames and serverside scripting.
0
 

Author Comment

by:contran
ID: 9879419
To Zontar ,i am not asking to do my homework i just need the tip/hint how to do it., since i can easy to do it in scripting language such as jsp or php using include function. But i don't know how to do in javascript. Iframe is not allow since i will have to test it with nestcape 4.6 (very old browser) and it didn't support iframe.

To Timbo87, from your way i rather code every single page and make a link to them than code all the html in one page and do the switch in javascript, it's hard to maintain but thank you for your advice

To TransBind, your first advice is good but it not the one i want to do since , everytime you have to copy all the header and the footer to the page and modify it. The last one is about using the frame, it is not recommended by the assignment specification and only table will allow to do it. The second one seem the only way but i haven't got any experience about using the layer, could you please give me an example how to use it.
Thank you
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 11

Expert Comment

by:Zontar
ID: 9879544
Place your content in absolutely-positioned elements; give each element a unique id attribute. DIV is the usual favourite, and is compatible with NS 4.X. The easiest way to track these it give them id's that differ only by a final digit.

<style type="text/css">
  div.content { position:absolute; width:550px; height:450px; left:10px; top:75px; visibility:hidden;  }

  /* adjust width, height, left, top to suit your layout... */
</style>

HTML:

<body onload="showHide(1);">

<div id="content1" class="content">Content...</div>
<div id="content2" class="content">Content...</div>
<div id="content3" class="content">Content...</div>
<div id="content4" class="content">Content...</div>

<!--  (etc.)  -->
</body>
Then from your links, call a javascript funciton to show and hide the various elements by setting their visibility properties.

First, to make this cross-browser compatible:

function getStyleRef(elemId)
{
  value = null;

  if(document.layers)
    value = document.layers[elemId];
  else
  {
    if(document.getElementById)
      value = document.getElementById(elemId);
    else
      if(document.all)
        value = document.all[elemId];

    if(value != null)
      value = value.style;
  }

  return value;
}

Now write a function that displays one layer and hides the rest:

showHide(index)
{
  if(getStyleRef("content" + 1) == null)
  {
    alert("Sorry... Only version 4+ browsers supported.")
    return;
  }

  max = 4;  //  change this to needed value; highest number for the content divs

  for(var i = 1; i <= max; i++)
    getStyleRef("content" + i).visibility = "hidden";

  getStyleRef("content" + index).visibility = "visible";
}

links:

<a href="javascript:showHide(1);">#1</a>
<a href="javascript:showHide(2);">#2</a>
<a href="javascript:showHide(3);">#3</a>
<a href="javascript:showHide(4);">#4</a>

etc.
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9879660
Also, there is a way to "fake" an iframe in NS4. NS4 supports a src attribute for the <div> tag:

<div id="contentDiv" src="page.html"></div>

document.layers.contentDiv.src = "page.html";

You can test for the document.layers object, then write a div or an iframe depending upon the result, if you want to go this route.
0
 
LVL 7

Accepted Solution

by:
TransBind earned 50 total points
ID: 9880092
I wrote a sample javascript/css/html code for you which should be compatible with most browsers, test it out for yourself and buzz back to me if you have any questions on how to modify it. I also defined some extra styles for you to make everything look nice and neat.
Just copy and paste it and save it as html.


<html>
<head>
<title>Showing and Hiding Layers</title>
<style type="text/css">
body      { font-family: Verdana, arial, helvetica, sans-serif;  
      font-size:12px; margin:20px; padding:0 }
h1      { font-size:16px }      
h2      { font-size:14px }
a:link { color:#33c }      
a:visited { color:#33c }

/* defining absolute position of layers */      
#lyr1, #lyr2, #lyr3 { position:absolute; visibility:hidden;left:20px; top:100px; width:400px; z-index:100 }
</style>

<script type="text/javascript">

var origWidth, origHeight;
if (document.layers) {
      origWidth = window.innerWidth; origHeight = window.innerHeight;
      window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
}

var cur_lyr;      // holds id of currently visible layer
function swapLayers(id) {
  if (cur_lyr) hideLayer(cur_lyr);
  showLayer(id);
  cur_lyr = id;
}

function showLayer(id) {
  var lyr = getElemRefs(id);
  if (lyr && lyr.css) lyr.css.visibility = "visible";
}

function hideLayer(id) {
  var lyr = getElemRefs(id);
  if (lyr && lyr.css) lyr.css.visibility = "hidden";
}

function getElemRefs(id) {
      var el = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? document.layers[id]: null;
      if (el) el.css = (el.style)? el.style: el;
      return el;
}
</script>
</head>
<!-- onload function which loads layer: lyer1 which is a first layer -->
<body onload="swapLayers('lyr1')">
<h1>Showing and Hiding Layers</h1>

<p>

      <a href="javascript://" onclick="swapLayers('lyr1')" onmouseover="window.status='Show Layer1'; return true" onmouseout="window.status=''">layer 1</a>
      &nbsp;|&nbsp;
      <a href="javascript://" onclick="swapLayers('lyr2')">layer 2</a>
      &nbsp;|&nbsp;
      <a href="javascript://" onclick="swapLayers('lyr3')">layer 3</a>
</p>

<div id="lyr1">
      Content of layer 1
</div>

<div id="lyr2">
      Content of layer 2
</div>

<div id="lyr3">
      Content of layer 3
</div>

</body>
</html>
0
 

Expert Comment

by:langjt
ID: 9882264
I agree with the first suggestion, to use server side includes. it just makes things so much easiers, and it updates all the pages by just chaning one thing. it also doesnt require any crazy massive scripts or complications with browsers that comes with it. however, not every homepage hosting service will let you do it for free. if you cant do that, you are just gonna have to go the way of the template or the copy-paste.

Jody
0
 
LVL 7

Expert Comment

by:TransBind
ID: 9882743
copy paste technique or including files in a MAIN file is not bad. Most proffessional web sites use it. You download your logo/banner/menus only once. Second time you access a page which contains the same items its already in your browsers cache. BUT if your assignment requires for you to use javascript to accomplish this then look at my posted solution code.
0
 

Expert Comment

by:langjt
ID: 9882765
yeah, i agree. if it has to be with scripting, then do the script. just be aware of the overhead of loading the whole website at once, as this could potentially cause problems with the speed at which the site loads. with that script, i would look into differnet ways to load the seperate layers only when they are needed.
0
 

Author Comment

by:contran
ID: 9883665
I completely agree that serverside scripting is the best and the professional way to build the dynamic website, however this is just the basic html/javascript assignment and there are some restriction that i can't do in php or other scripting languages but anyway thank you guys, that's help me so much, i will try and let's you know if there is a problem.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jquery, html5 UI 1 48
Convert a Master Page to HTML 16 60
Powershell output to HTML 1 28
Link SQL table to Webpage 9 38
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now