Click on links to Textbox

Hi people,

I am wanting to create a new site, with a selection on links down one side, with a box of text next to it. When a Link is clicked, I would like the corresponding text to appear in the ‘text’ box.
I have seen this done with images (slideshow), is this done the same way?
Does this have a specific name, I can hunt for code under? Should I be looking at javascript, css or flash?
A point in the right direction, would be much appreciated.

~lovelee~

Take a look at javascript. What you’ll want to do is create an onlclick=“” event for the links which trigger a function. Inside the javascript function you’ll add a string of text to the value of the textbox. If you want to add on to what’s already inside the box you’ll first need to read the value with javascript and then concatenate the two.

If you need more help let me know and I can write up a quick function. :slight_smile:

That means people like me, plus the googles, get no content at all.

You could do it with pure CSS. There are a few members here on Sitepoint who’ve made pages like that… basically uses in-page skip links (using url fragments, such as yoursite.com/mainpage.html#specialsection) to bring up content that’s simply off-screen.

Shawn of the Dead’s page does this, and someone else here recently showed one… was it Eric Watson? It had like photos of the beach and stuff.

Here’s Shawn’s page: http://forge.co.tt/ (and he does layer some JS over that but I surf without JS and I get a working page just fine)

When you click on the links on the left, the box on the right basically scrolls down. You have to kinda choose an “average” screen estimate for this to work, and you have a lot of empty space between your chunks of text so the “next” chunk doesn’t appear on most screens even when the user has scrolled to see the end of the current chunk.

The two ways to keep the sidebar from scrolling would be either
-setting the left sidebar to position: fixed, which needs some hacks to work in IE6
OR
-floating the sidebar left and having the right side be an overflow: auto box, making very very sure that the content inside is not wider than the overflow box, otherwise you’ll get a bottom scrollbar too.

IE has problems with those too if you try to use position: relative in the overflow box… however this is the source to the fix for IE6’s bug in scenario #1.

I’m sure there are some other ways but I don’t do this too often so I’m unfamiliar with them.

You CAN add some Javascript to this to make the transition more smooth or more accurate, but I believe it’s a good idea to have it work without JS first.

I’m not sure what the technique is called, really. If you want some sort of basis code to get your started I’m sure any of us could provide some… and if you also want some JS on top Jeff has offered to do that too.