Login or Register to Ask a Question and Join Our Community


Emergency UNIX and Linux Support

show div on select - range of dates

Login to Discuss or Reply to this Discussion in Our Community

 
Thread Tools Search this Thread
Homework and Emergencies Emergency UNIX and Linux Support show div on select - range of dates
# 1  
Old 02-15-2012
show div on select - range of dates
Hi,

I am sure this is simple, but I am breaking my head.

I need 1 page with at the top a range of dates, 2002, 2003, 2004 etc
If you select 2002 it will show the content of 1 div, if you select 2002 the content of another div.

this is for showing announcements on a site, right now there are 10 html files, each showing the announcement of that year, I simple like to move that all to 1 page, dates at top... and voila..

Help?
# 2  
Old 02-15-2012
First off, I think this is a decent reference site for HTML and CSS:
CSS Tutorial

Secondly, I only dabble with HTML and CSS here and there, so there might be better ways of doing this, but the example below does something similar to what you've asked about. I think it will get you started. I tested it with Opera (12.0/beta) and Chrome. It seemed to behave in both.

The key points are that there is a class for division defined which sets display to 'none' -- all of the divisions that are hidden initially are defined with this class. Each date at the top is a link which invokes a small javascript function when clicked. The javascript changes the property of the associated division to allow it to be shown while hiding the most recently shown division (should avoid any issues with needing to fiddle the z-height).

Have fun!

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<style type="text/css">
<!--
    body {
        background: #000000;
        color: #00cc90;
        margin: 10px;
        padding: 0;
        font-style: normal;
        font-size: 100%;
        font-family: sans-serif;
    }

    a:link      { color: yellow }
    a:visited   { underline: false; color: yellow }
    a:hover     { color: orange }
    a:selected  { color: red }

    div.hidden {
        position: relative; top: 0px; left: 10px;
        border: solid 1px #c0c0c0;
        margin-left: 10px;
        width: 95%;
        background: #c000c0; color: white; font: normal 14pt sans-serif;
        display: none
    }
-->
</style>

<script type="text/javascript" >
   //<![CDATA[
    showing = null;
    function showdiv( id )
    {
        if( showing != null )
        {
            var d = document.getElementById( showing );
            d.style.display = "none";
        }
        var d = document.getElementById( id );
        d.style.display = "block";
        showing = id;
    }
    // the following line closes the opending CDATA
    //]]>
</script>

<title>Test Page</title></head>
<body onload="javascript:showdiv('2010')" >
<div>
<table width=95% border=0 style="margin-left:20px" > <tr>
<td> <a href="javascript:showdiv('2008')">2008 </a> </td>
<td> <a href="javascript:showdiv('2009')">2009 </a> </td>
<td> <a href="javascript:showdiv('2010')">2010 </a> </td>
<td> <a href="javascript:showdiv('2011')">2011 </a> </td>
<td> <a href="javascript:showdiv('2012')">2012 </a> </td></tr>
</table>
</div>

<!-- container division for relative placement of hidden ones -->
<div>


<div id="2008" class="hidden">
2008:  This is some text in the division
</div>

<div id="2009" class="hidden">
2009: This is different text for another division.
<br />
more text in this division.
</div>

<div id="2010" class="hidden" >
2010: This division should be shown as the default. see the body tag.
</div>

<div id="2011" class="hidden">
2011: More prose that goes on just to fill things up a bit. 
</div>

<div id="2012" class="hidden">
2011: The final year with some breaks to extend the length.
a few more lines of text <br />
here in the last  <br />
division <br />
a few more lines of text <br />
here in the last  <br />
division
</div>

</div>
<div>
Some footer text that will always be visible; maybe date, time, revision.
</div>
</body></html>

Login or Register to Ask a Question

Previous Thread | Next Thread

8 More Discussions You Might Find Interesting

1. Shell Programming and Scripting

Display data from a range of dates

I have a data in a file called SCHED which has 5 columns: sched no, date, time, place and remarks. The image is shown below. http://dl.dropbox.com/u/54949888/Screenshot%20from%202013-01-02%2002%3A42%3A25.png Now, I want to display only the schedules which fall under a certain date range which... (2 Replies)
Discussion started by: angilulu
2 Replies

2. Shell Programming and Scripting

Select columns from a matrix given within a range in BASH

I have a huge matrix file which looks like this (example matrix): 1 2 3 5 4 5 6 7 7 6 8 9 1 2 4 2 7 6 5 1 3 2 1 9 As one can see, this matrix has 4 columns and 6 rows. But my original matrix has some 3 million rows and 6000 columns. For example, on this matrix I can define my task as... (2 Replies)
Discussion started by: shoaibjameel123
2 Replies

3. Shell Programming and Scripting

Using 'date' to list a range of dates

Hi guys, I have been trying to create a list of dates from a certain range, ie. range from 01011950 to 31122000 But when my below code reaches certain dates, it comes up with a; 'date: invalid date 'yyyy-mm-dd -d 1day' Sofar I have come up with the following, slow and ugly; ... (4 Replies)
Discussion started by: TAPE
4 Replies

4. UNIX for Dummies Questions & Answers

select nth file & range of files

Two related questions; 1. how do i select the nth file in a directory? 2. how do i select a range of files, say 2nd-5th? I have done the following but I don't think the solution is a neat one. Query 1: select nth file - say 3rd file; #!/bin/bash touch foo1 foo2 foo3 foo4 foo5 foo6... (1 Reply)
Discussion started by: Muhammad Rahiz
1 Replies

5. Shell Programming and Scripting

pull range of dates/times and put into new file

Need to pull from a range of dates/times (ex. 6:00 AM March 3 through 6:00 AM March 4) from a folder and put those file names in a new file to process later. Dates would not be hard dates but dates from the folder directory, how would I do that? (9 Replies)
Discussion started by: freddie999
9 Replies

6. Shell Programming and Scripting

Need script to select multiple files from archive directory based on the date range

hi all, here is the description to my problem. input parameters: $date1 & $date2 based on the range i need to select the archived files from the archived directory and moved them in to working directory. can u please help me in writing the code to select the multiple files based on the... (3 Replies)
Discussion started by: bbc17484
3 Replies

7. UNIX for Dummies Questions & Answers

Display dates within a given date range

Hi All, I have a requirement to display all the dates within the provided (through user input) date range. For eg: If I enter 28012009 (as From date in the format 'DDMMYYYY') and 02022009(as To date in the format 'DDMMYYYY'), the output should be all dates occuring between the from and to... (11 Replies)
Discussion started by: sunpraveen
11 Replies

8. UNIX for Advanced & Expert Users

Select entries between two dates by converting Unix timestamp in Oracle Database.

Hi, I need to select the entries between two dates from an Oracle db. The Oracle db has a column with Unix timestamps. I use the following querry, but it doesnt seem to be working as desired. select count(*) from reporter_status where to_char(FIRSTOCCURRENCE, 'mm-dd-yy') between ('08-07-06')... (1 Reply)
Discussion started by: amitsayshii
1 Replies
Login or Register to Ask a Question