Timeline - search for ideas 1

Haybails90 · Sep 29, 2004

Hello,

I've got a request for some 'design solution' ideas. I'd appreciate any and all 'brainstorming' ideas any of you would feel like offering.

Here's the issue, the company web site has a 'timeline' (created before I started here - lol) which lists some high points in the companies 150 year history. There's a timeline made up of images which are simply the year (1855, 1912, 1986, etc). The user hovers over the year image and a little text highlight is displayed elsewhere on the page. The code behind this is very straight forward, no problems there. The main problem is finding a visually appealing way to present this timeline. It's currently a horizontal timeline with 30 highlights. Well, it's simply becoming too "wide" to display this timeline. So, I'm looking for any ideas on what might be a better way to visually present these highlights. My gut feeling is that the corporate brass likes the timeline motif, so ideas should somehow retain the timeline aspect of the current solution.

I'd appreciate any and all of your thoughts. Thank you very much in advance,

Haybails90

cLFlaVA · Sep 29, 2004

One method:

Store the timeline in it's own page. Then, include it in another page with good old [tt]<iframe>[/tt]. This way, you could make it so that the width if the iframe is, say, 600 pixels, and no wider. However, you'd be able to scroll horizontally to see what's going on in the modern era, and not just in 1850.

Hope this helps.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

Haybails90 · Sep 29, 2004

cLFlaVA,

Thanx for your comment. Yeah, I thought of that, however, I'm not too hip on horizontal scroll bars. For some reason they just detract visually for me.

I've looked into some simple DHTML horizontal scrollers, but they all have buttons or something to move the marqueed item left or right. I saw on a site many many months ago, a marquee which scrolled in the direction of where your mouse was pointed. So, for example, if I pointed my mouse left of center over the marquee, the item would scroll left. If I hovered my mouse right of center, the item would scroll to the right. However, I haven't been able to find this solution.

Haybails90

Foamcow · Sep 29, 2004

Why not just do it vertically?

http://www.foamcow.com

"I'm making time

DaRNCaT · Sep 29, 2004

use flash?
You can then use a mouseover scroll behaviour to move the timeline along, and have links within the movie to show up the text

----------------------------------------
Sometimes, when my code just won't behave, I take it outside and make it listen to britney spears music, and when it comes back it's really well behaved. I wonder if it's suffering from post tramatic stress syndrome now..

cLFlaVA · Sep 29, 2004

You could also use a mouseover to scroll with an iframe. If you ask me how, I will groan, then do my best to show you.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

Haybails90 · Sep 30, 2004

cLFlaVA,

Are you in a 'groaning' mood?!?! LOL. I'd be eternally greatful.

DaRNCaT,

I'm afraid I'm one of the last few 'flash-ophiles' left on earth #-) -- Haven't a clue %-).

Haybails90

cLFlaVA · Sep 30, 2004

And away I go...

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

cLFlaVA · Sep 30, 2004

Cory Arthus' (that's me) iFrame scroller, v.1.0.

Note: There are sure to be plenty of bugs. This is my first attempt. For me, it worked in IE 6.0.2800. It has not yet been tested in any other browser.

[tt]main.html
---------[/tt]

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
Look at this freakin' cool timeline!<br>
<iframe src="timeline.html" width="600" height="200" scrolling="no">
</iframe>
<div id="stuff"></div>
</BODY>
</HTML>

[tt]timeline.html
---------[/tt]

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<script language="javascript">
<!--

// find out if it's in IE
var IE = document.all ? true : false;
if (!IE) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = storeMouse;
var the_x;
var the_y;

var keep_scrolling = true;
var scroll_left = true;
var scroll_right = true;

function scrollIt() {
    // store the timeline div in a variable
    var tl = document.getElementById('timeline');

	// higher number makes it go faster
	var scroll_by = 5;

	// width of the iframe in the parent document
	var main_width = 600;

    // if the minimum left is reached, disable left scroll
	if (parseInt(tl.style.left) == (-parseInt(tl.style.width) + main_width)) {
	    scroll_left = false;
	}

	// if the maximum left is reached, disable right sroll
	if (parseInt(tl.style.left) == 0) {
        scroll_right = false;
	}

    // if the_x is less than 1/2 the width, scroll left
    if (the_x < main_width/2) {
	    if (scroll_left) {
	        tl.style.left = (parseInt(tl.style.left) - scroll_by) + "px";
		    scroll_right = true;
		}
	// otherwise, scroll to the right
	} else {
		if (scroll_right) {
	        tl.style.left = (parseInt(tl.style.left) + scroll_by) + "px";
		    scroll_left = true;
		}
	}

    if (keep_scrolling) {
		// re-call scrollIt()
		setTimeout("scrollIt();", 50);
	}
}

function storeMouse(e) {
    if (IE) {
        the_x = event.clientX + document.body.scrollLeft;
        the_y = event.clientY + document.body.scrollTop;
    } else {
        the_x = e.pageX;
        the_y = e.pageY;
    }  

    if (the_x < 0){the_x = 0;}
    if (the_y < 0){the_y = 0;}
    return true;
}
-->
</script>

</HEAD>

<BODY>
<div id="timeline" style="width: 1500px; left: 0px; position: absolute;" onmouseover="keep_scrolling = true; scrollIt();" onmouseout="keep_scrolling = false;">Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!  This is the timeline!  Woot Woot!</div>
</BODY>
</HTML>

Let me know what's next.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

Haybails90 · Sep 30, 2004

cLFlaVA,

Is there a way to contact you directly (Member Profile page is not currently working)?

Haybails90

cLFlaVA · Sep 30, 2004

at aol dot com. But it'd probably be better to keep the discussion on here, so that if anyone else has a similar question, or a better answer, they'll be able to see the discussion...

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

Haybails90 · Sep 30, 2004

cLFlaVA,

I understand about keeping the disussion on this forum, and that I will do. However, I just wanted to pass the URL to the actual site to you so that you could see exactly what I'm working with and how you're suggested solution would have to play with the rest of the environs.

Haybails90

cLFlaVA · Sep 30, 2004

Ok, sounds good.

It's this name at aol dot com.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

Haybails90 · Sep 30, 2004

cLFlaVA,

Log into your AIM, or, if you don't use that service, "You've Got Mail".

Haybails

Haybails90 · Sep 30, 2004

All visiting/following this thread,

'cLFlaVA' and I have chatted away from the forum and taken a look at the actual page for which this solution was requested. While cLFlaVA's solution was EXACTLY what I was looking for, we've mutually come the decision that because of other extenuating circumstances, it may not be the 'best' solution. Therefore, the slight adjustment is that I'll simply go with a simple scroller which has a left and right arrow over which the user can hover to move the timeline left and right.

None-the-less, cLFlaVA gets the 'star' for this thread. He's proven himself to be a top-notch thinker and ready and willing to help out with my plea. For that I'm very appreciative.

On a slightly related note, it was nice establishing a new professional relationship. Tek-Tips rocks!

Haybails90

cLFlaVA · Sep 30, 2004

Thanks for the kind words, and the star

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Timeline - search for ideas 1

Haybails90

Programmer

cLFlaVA

Programmer

Haybails90

Programmer

Foamcow

Programmer

DaRNCaT

Technical User

cLFlaVA

Programmer

Haybails90

Programmer

cLFlaVA

Programmer

cLFlaVA

Programmer

Haybails90

Programmer

cLFlaVA

Programmer

Haybails90

Programmer

cLFlaVA

Programmer

Haybails90

Programmer

Haybails90

Programmer

cLFlaVA

Programmer

Similar threads

Part and Inventory Search

Sponsor