6 replies [Last post]
Jungle Jil
Jungle Jil's picture
Offline
newbie
http://jilw.us
Last seen: 9 years 11 weeks ago
http://jilw.us
Timezone: GMT-4
Joined: 2011-03-10
Posts: 5
Points: 6

I have a situation where I have 8 menu items on the left hand side of the page. Clicking on each menu item opens a corresponding DIV in the center of the page using the process ONCLICK="menuitem1.style.display=''" (for the menu item #1) that changes the default style attribute of the DIV called "menuitem1" from "display:none". Simple.

Each of the 8 DIV that will appear in the center of the page are text inside a box with a solid background. Each DIV has an equal size and equal X/Y position so that each new box will appear in the same place as the previous... one on top of the other.

What I need is the ability for readers to click a second time on a menu item on the left that they have already clicked on in order to have a DIV that is already open jump to the top of the "pile" of DIVs that are already open on top of it so that it can be viewed again. Obviously this would be done by increasing the Z-INDEX value.

I'll need a conditional JAVASCRIPT script, this I know. I've been trying various permutations for hours now. Unfortunately, I have 2 problems: I don't know what attributes to pass and what attributes to call, and secondly I don't know how to set a Z-INDEX that will always be at least one greater than the currently highest Z-INDEX on the page.

I would appreciate any help that you can pass along.

//Mode edit: Moved to "Off Topic" as this is primarily a javascript question. ~~gt

gary.turner
gary.turner's picture
Online
Moderator
Dallas
Last seen: 5 min 4 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9760
Points: 3842

Don't make it overly complex

The onclick event handler need only

  1. make all the divs {display: none;}
  2. then make the desired div {display: block;}.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Jungle Jil
Jungle Jil's picture
Offline
newbie
http://jilw.us
Last seen: 9 years 11 weeks ago
http://jilw.us
Timezone: GMT-4
Joined: 2011-03-10
Posts: 5
Points: 6

So how do I get

So how do I get already-visible DIV #1 that is underneath already-visible DIV #2 to appear on top of DIV #2 by clicking the same button that made DIV #1 visible in the first place? I don't want to move any of the DIVs from the position they are in... only to change the ordering of them by clicking on the same menu button that makes them visible to begin with.

EXAMPLE:

A user clicks on MENU ITEM #1. It makes ARTICLE #1 visible on the page. Then, the user clicks on MENU ITEM #6. It makes ARTICLE #6 visible on the page in the exact same place where ARTICLE #1 appeared... essentially right on top of it. Then, after reading ARTICLE #6, the user decides he wants to read more of ARTICLE #1, and clicks on the MENU ITEM #1 button again: But nothing happens. The question is: In this situation, how would I get ARTICLE #1 to appear on the page again without asking anything more of the user?

Jungle Jil
Jungle Jil's picture
Offline
newbie
http://jilw.us
Last seen: 9 years 11 weeks ago
http://jilw.us
Timezone: GMT-4
Joined: 2011-03-10
Posts: 5
Points: 6

Oh... I think I get what you

Oh... I think I get what you are saying now: Each menu click closes all visible divs AS WELL AS making the target DIV visible. Oh... I never thought of that. Yes: Keep it simple... That's often my shortcoming on websites.

THANKS FOR THAT TIP!

Jungle Jil
Jungle Jil's picture
Offline
newbie
http://jilw.us
Last seen: 9 years 11 weeks ago
http://jilw.us
Timezone: GMT-4
Joined: 2011-03-10
Posts: 5
Points: 6

Just another quick question

Just another quick question that your solution brings to mind: Is there any way to address an array of IDs in CSS? Or would I just have to make seven DISPLAY:NONE entries for each of the other 7 IDs in each of the 8 ONCLICK instances?

gary.turner
gary.turner's picture
Online
Moderator
Dallas
Last seen: 5 min 4 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9760
Points: 3842

My bad

After posting, the same thought came to my mind, and I was too lazy to go back and add an answer. ;)

<div id="container">
  <div id="a">...</div>
  <div id="b">...</div>
  <div id="c">...</div>
  <div id="d">...</div>
  ...
</div>
First make #container div {display: none;} That hides all divs descended from the container. Then make the selected div visible, e.g. #container #c {display: block;}

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Jungle Jil
Jungle Jil's picture
Offline
newbie
http://jilw.us
Last seen: 9 years 11 weeks ago
http://jilw.us
Timezone: GMT-4
Joined: 2011-03-10
Posts: 5
Points: 6

Got it. Thanks very much

Got it. Thanks very much Gary.Turner. My site should be live in a few days if you want to check out the finished product. (jilw.us)