Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Menu: text block swap

    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.
    Attached Thumbnails Attached Thumbnails Menu: text block swap-wmtvl.jpg  

  • #2
    New Coder
    Join Date
    Jun 2009
    Posts
    35
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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>
    Live chat software - chat with your web site visitors in real time.
    Internet web directory - list of top100 sites in diffrent category

  • Users who have thanked mioot for this post:

    ayyyy (07-25-2009)

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,071
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Another version ...

    Modified version of 'mioot's code.
    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.

  • Users who have thanked jmrker for this post:

    ayyyy (07-25-2009)

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Same as jmrker's, but with minor improvements:-

    Code:
    <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
    >

  • #5
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    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."


    Code:
    <!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>
    Last edited by 12 Pack Mack; 07-25-2009 at 08:05 PM.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by 12 Pack Mack View Post
    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.

    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."


  •  

    Posting Permissions

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