...

View Full Version : Menu: text block swap



ayyyy
07-23-2009, 07:14 PM
Please excuse my naivety. I'm attempting to design a website for a nonprofit and have very little experience. A very close friend of mine just passed away from this cancer, and I'm trying to help give their site a better image.

This is the mock outline I have now of the menu i'm trying to make:
http://kttns.org/wmtvl

I would like each one of the side buttons to change the middle text block without reloading the page (and resize if possible, but i don't know if i need/want that).

Thanks, any help would be great.

mioot
07-24-2009, 08:04 AM
Try these code.

<script language="javascript">
function changing(id)
{
if(id==1)
{
document.getElementById("content").innerHTML="is the protocol of the Web, by which Servers and Clients (typically";
}
if(id==2)
document.getElementById("content").innerHTML="Every HTTP request and response includes a message header, describingthe message. These are processed by the HTTPD, and may often be";

if(id==3)
document.getElementById("content").innerHTML="4) A GET or POST request will accept a response with or without a body,according to the header. The body of a response is typically an HTML document.";

if(id==4)
document.getElementById("content").innerHTML="3) A HEAD request does not expect a body in the response.";


}

</script>
<html>
<body>
<table>
<tr>
<td width="25%">
<table>
<tr><td onmouseover="changing(1)" style="cursor: pointer">menu1</td></tr>
<tr><td onmouseover="changing(2)" style="cursor: pointer">menu2</td></tr>
<tr><td onmouseover="changing(3)" style="cursor: pointer">menu3</td></tr>
<tr><td onmouseover="changing(4)" style="cursor: pointer">menu4</td></tr>
</table>
</td>
<td id="content">HTTP is the protocol of the Web, by which Servers and Clients (typically
browsers) communicate. An HTTP transaction comprises a Request sent by
the Client to the Server, and a Response returned from the Server to
the Client.
Every HTTP request and response includes a message header, describing
the message. These are processed by the HTTPD, and may often be
mostly ignored by CGI applications (but see below).
A message body may also be included:
1) A HEAD or GET request sends only a header. Any form data is encoded
in an HTTP_QUERY_STRING header field, which is available to the CGI
program as an environment variable QUERY_STRING.
2) A POST request sends both header and body. The body typically
comprises data entered by a user in a form.
3) A HEAD request does not expect a body in the response.
4) A GET or POST request will accept a response with or without a body,
according to the header. The body of a response is typically an
HTML document.

</td>
</tr>
</table>

jmrker
07-25-2009, 06:14 AM
Modified version of 'mioot's code.


<html>
<head>
<title>Menu Text Blocks</title>
<script type="text/javascript" language="javascript">
// Modified from: http://www.codingforums.com/showthread.php?p=843533#post843533

var MenuMessages = [
['HTTP is the protocol of the Web, by which Servers and Clients (typically '
+ 'browsers) communicate. An HTTP transaction comprises a Request sent by '
+ 'the Client to the Server, and a Response returned from the Server to the Client.<p> '
+ 'Every HTTP request and response includes a message header, describing '
+ 'the message. These are processed by the HTTPD, and may often be '
+ 'mostly ignored by CGI applications (but see below).<p> '
+ 'A message body may also be included:<br> '],

['1) A HEAD or GET request sends only a header. Any form data is encoded '
+ 'in an HTTP_QUERY_STRING header field, which is available to the CGI '
+ 'program as an environment variable QUERY_STRING.<br> '],

['2) A POST request sends both header and body. The body typically '
+ 'comprises data entered by a user in a form.<br> '],

['3) A HEAD request does not expect a body in the response.<br> '],

['4) A GET or POST request will accept a response with or without a body, according to the header. '
+ 'The body of a response is typically an HTML document. '] // No comma at end.
];

function changing(N) {
document.getElementById("content").innerHTML = MenuMessages[N];
}

</script>
<style type="text/css">
.MenuTbl {
cursor: pointer;
background-Color:cyan
}
</style>
<body> <!-- onload="changing(0)" -->
<table border="0">
<tr>
<td valign="top">
<table border="1">
<tr><td onmouseover="changing(0)" class="MenuTbl">menu0</td></tr>
<tr><td onmouseover="changing(1)" class="MenuTbl">menu1</td></tr>
<tr><td onmouseover="changing(2)" class="MenuTbl">menu2</td></tr>
<tr><td onmouseover="changing(3)" class="MenuTbl">menu3</td></tr>
<tr><td onmouseover="changing(4)" class="MenuTbl">menu4</td></tr>
</table>
</td>
<td valign="top" id="content" style="background-Color:#ffffcc"></td>
</tr>
</table>
</body>
</html>

Alter style colors to your needs. :)

Philip M
07-25-2009, 09:32 AM
Same as jmrker's, but with minor improvements:-


<html>
<head>
<title>Menu Text Blocks</title>
<script type="text/javascript">
// Modified from: http://www.codingforums.com/showthread.php?p=843533#post843533

var MenuMessages = [
[' Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum. Morbi et metus ut diam molestie ullamcorper. Suspendisse rutrum semper semper. Donec volutpat neque in lorem tempus scelerisque. Curabitur dignissim rhoncus quam ac suscipit. Donec viverra quam lobortis neque porta a sagittis urna tristique.'],

[' Suspendisse nec lacus nisi. Pellentesque fermentum massa sit amet magna hendrerit vestibulum. Sed elit libero, scelerisque eu eleifend ut, interdum gravida nunc. '],

[' Etiam ut nisi sapien, et tempus sem. Nam vel mi est. Mauris congue felis ut ante bibendum vehicula. Nullam nec sapien arcu, eget cursus lorem. Donec blandit, dolor tristique ornare dictum, arcu sapien vulputate dolor, et placerat risus odio ut magna. Ut magna mauris, pellentesque at ultricies vitae, fermentum vitae dolor. '],

[' Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus. Suspendisse at augue urna, nec tristique libero. Nulla libero elit, tempor vel aliquet id, tincidunt id ante. Etiam egestas orci in velit tristique ut ullamcorper urna egestas. Duis eget risus sem, eu aliquet arcu. Sed ac mauris et arcu interdum malesuada sed eu augue. Suspendisse quis nisi massa. Donec in egestas enim. Ut tristique luctus eros, non pretium ligula feugiat ac. '],

[' Etiam non luctus sem. Integer nibh leo, interdum a condimentum quis, consectetur in leo. In aliquet facilisis tellus, quis dapibus erat posuere sed. Cras egestas massa ut quam placerat pellentesque. Sed in magna quis lorem congue ultricies. Fusce feugiat felis neque. Proin eros tortor, feugiat sit amet laoreet iaculis, gravida non quam. Curabitur lacus libero, convallis a placerat id, feugiat vitae leo. '] // No comma at end.
];

function changing(N) {
document.getElementById("content").innerHTML = MenuMessages[N];
}

</script>
<style type="text/css">
.MenuTbl {
cursor: pointer;
background-Color:cyan;
width: 3.00cm
}
</style>

<body> <!-- onload="changing(0)" -->
<table border="0">
<tr>
<td valign="top">
<table border="1">
<tr><td onmouseover="changing(0)" class="MenuTbl"> About Us </td></tr>
<tr><td onmouseover="changing(1)" class="MenuTbl"> Products </td></tr>
<tr><td onmouseover="changing(2)" class="MenuTbl"> Directions </td></tr>
<tr><td onmouseover="changing(3)" class="MenuTbl"> Privacy Policy </td></tr>
<tr><td onmouseover="changing(4)" class="MenuTbl"> Teams </td></tr>
</table>
</td>
<td id="content" style="background-Color:#ffcc00;width:800px; vertical-align:text-top"></td>
</tr>
</table>
</body>
</html>

12 Pack Mack
07-25-2009, 03:41 PM
ayyyy:

The charitable organization probably receives, directly or indirectly, federal money. Therefore it would be required to follow federal guidelines regarding making the site content accessible to people with disabilities. This means, in general, that an effort must be made to make all of your site content visible to those who have JavaScript disabled.

The following code is "accessible."




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var prevTopic = "";

function swapContent(currTopic,topicGroup,contentGroup){

prevTopic == "" ? topicGroup[0].style.backgroundColor = "#00ced1" : prevTopic.style.backgroundColor = "#00ced1";
prevTopic = currTopic;
currTopic.style.backgroundColor = "#ff69b4";
for (i=0; i<topicGroup.length; i++)
{
if (topicGroup[i] == currTopic)
{
contentGroup[i].style.display = "";
}
else {
contentGroup[i].style.display = "none";
}
}
}

function init(){

var nContent = document.getElementById('contentContainer').getElementsByTagName('div');
for (i=1; i<nContent.length; i++)
{
nContent[i].style.display = "none";
}
var nTopic = document.getElementById('topicsContainer').getElementsByTagName('div');
nTopic[0].style.backgroundColor = "#ff69b4";
for (i=0; i<nTopic.length; i++)
{
nTopic[i].onclick = function()
{
swapContent(this,nTopic,nContent);
}
}
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
<style type="text/css">

body {background-color: #fffacd; margin-top: 60px;}
#swapContainer {width: 90%; height: 245px; border: 1px solid green; margin-left: auto; margin-right: auto;
background-color: #f0fff0; padding-top: 8px; padding-left: 5px;}
#topicsContainer {float: left; width: 18%;}
#topicsContainer div {font-family: tahoma; font-size: 12pt; font-weight: bold;
padding: 5px; background-color: #00ced1; margin-top: 5px;
width: 90%; cursor: pointer;}
#contentContainer {float: left; width: 82%; height: 240px; overflow: auto;}
.swapContent {width: 94%; float: left; border: 1px solid black; margin-left: 5px; margin-bottom: 5px;
padding: 6px; font-family: georgia; font-size: 13pt; text-align: justify;
text-indent: 15px; background-color: #add8e6; cursor: default;}

</style>
</head>
<body>
<div id="swapContainer">
<div id="topicsContainer">
<div>About The Event</div>
<div>Register</div>
<div>Directions</div>
<div>Schedule</div>
<div>Teams</div>
<div>Sponsors</div>
<div>Gallery</div>
</div>
<div id="contentContainer">
<div class="swapContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum.
Morbi et metus ut diam molestie ullamcorper. Suspendisse rutrum semper semper.
Donec volutpat neque in lorem tempus scelerisque. Curabitur dignissim rhoncus
quam ac suscipit. Donec viverra quam lobortis neque porta a sagittis urna tristique.
</div>
<div class="swapContent">
Suspendisse nec lacus nisi. Pellentesque fermentum massa sit amet magna hendrerit
vestibulum. Sed elit libero, scelerisque eu eleifend ut, interdum gravida nunc.
</div>
<div class="swapContent">
Etiam ut nisi sapien, et tempus sem. Nam vel mi est. Mauris congue felis ut ante
bibendum vehicula. Nullam nec sapien arcu, eget cursus lorem. Donec blandit,
dolor tristique ornare dictum, arcu sapien vulputate dolor, et placerat risus odio
ut magna. Ut magna mauris, pellentesque at ultricies vitae, fermentum vitae dolor.
</div>
<div class="swapContent">
Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem
gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus.
Suspendisse at augue urna, nec tristique libero. Nulla libero elit, tempor vel aliquet id,
tincidunt id ante. Etiam egestas orci in velit tristique ut ullamcorper urna egestas.
Duis eget risus sem, eu aliquet arcu. Sed ac mauris et arcu interdum malesuada sed
eu augue. Suspendisse quis nisi massa. Donec in egestas enim. Ut tristique luctus eros,
non pretium ligula feugiat ac.
</div>
<div class="swapContent">
Etiam non luctus sem. Integer nibh leo, interdum a condimentum quis, consectetur in leo.
In aliquet facilisis tellus, quis dapibus erat posuere sed. Cras egestas massa ut quam
placerat pellentesque. Sed in magna quis lorem congue ultricies. Fusce feugiat felis neque.
Proin eros tortor, feugiat sit amet laoreet iaculis, gravida non quam. Curabitur lacus
libero, convallis a placerat id, feugiat vitae leo.
</div>
<div class="swapContent">
Tincidunt id ante. Etiam egestas orci in velit tristique ut ullamcorper urna egestas.
Duis eget risus sem, eu aliquet arcu. Sed ac mauris et arcu interdum malesuada sed
eu augue. Suspendisse quis nisi massa. Donec in egestas enim. Ut tristique luctus eros,
non pretium ligula feugiat ac.
Suspendisse nec lacus nisi. Pellentesque fermentum massa sit amet magna hendrerit
vestibulum. Sed elit libero, scelerisque eu eleifend ut, interdum gravida nunc.
Etiam ut nisi sapien, et tempus sem. Nam vel mi est. Mauris congue felis ut ante
bibendum vehicula. Nullam nec sapien arcu, eget cursus lorem. Donec blandit,
dolor tristique ornare dictum, arcu sapien vulputate dolor, et placerat risus odio
ut magna. Ut magna mauris, pellentesque at ultricies vitae, fermentum vitae dolor.
</div>
<div class="swapContent">
Pellentesque fermentum massa sit amet magna hendrerit
vestibulum. Sed elit libero, scelerisque eu eleifend ut, interdum gravida nunc.
Etiam ut nisi sapien, et tempus sem. Nam vel mi est. Mauris congue felis ut ante
bibendum vehicula. Nullam nec sapien arcu, eget cursus lorem. Donec blandit,
dolor tristique ornare dictum.
</div>
</div>
</div>
</body>
</html>

Philip M
07-26-2009, 09:54 AM
The charitable organization probably receives, directly or indirectly, federal money. Therefore it would be required to follow federal guidelines regarding making the site content accessible to people with disabilities. This means, in general, that an effort must be made to make all of your site content visible to those who have JavaScript disabled.


I rather think that the expression "people with disabilities" does not mean people who have Javascript disabled in their browser. :rolleyes:

In the UK it means people with a vision impairment, dyslexia or physical problem making mouse use difficult. Cancer is a disease - not a disability.


"He who posts last, thinks slowest."



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum