Member Avatar for Ezju

I would like to open a web page with several layers on it to a specific layer depending on the link on the previous page. I know I can do this from within the same page but I would like to do this from an external page. Can I and how?

  • 4 Contributors
  • 15 Replies
  • 533 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by Ezju

Dani AI

Generated

Short, practical consolidation (builds on ’s thread and ’s comments).

If your “layers” are positioned DIVs that you show or hide, use a progressive approach so links from another page reliably open the correct panel and accessibility isn’t broken. Two practical patterns work well today: a CSS-only fragment-target method (no JS required) and a small JS initializer that reads the URL (hash or a query parameter) and toggles classes plus ARIA attributes.

CSS-only (works if you give each panel an id):

.panel { display: none; }
.panel:target { display: block; }

JavaScript (more control — avoids layout jumps, manages ARIA and focus):

document.addEventListener('DOMContentLoaded', function () {
  var id = location.hash.slice(1) || new URL(location).searchParams.get('show');
  if (!id) return;
  document.querySelectorAll('.panel').forEach(p => {
    p.classList.remove('active');
    p.setAttribute('aria-hidden','true');
  });
  var target = document.getElementById(id);
  if (target) {
    target.classList.add('active');
    target.setAttribute('aria-hidden','false');
    if (!target.hasAttribute('tabindex')) target.setAttribute('tabindex','-1');
    target.focus();
  }
});

Notes, tie-ins and troubleshooting:

  • ’s nudge about terminology is useful — treat these as id’d sections, not legacy “layers.”
  • Respect ’s readability warning: if panels overlay images, ensure sufficient contrast (semi‑opaque background, text-shadow, or move the image behind content). Test with a color-contrast checker.
  • Use display toggles (or classes) rather than only visibility if you want hidden panels removed from layout and tab order; also set aria-hidden appropriately so screen readers ignore inactive content.
  • Common gotchas: mismatched ids, URL encoding, single-page-app routers that intercept fragment changes. Test the link both with and without JavaScript enabled.

This gives a bookmarkable, linkable result and keeps the page usable and accessible for everyone.

Recommended Answers

All 15 Replies

Member Avatar for tgreer

What is a "layer"?

If you have a long page, with content divided up by use of anchor tags, you can navigate the page to a specific anchor with the URL syntax:

www.domain.com/page.html#anchorName

Member Avatar for Ezju

I would like to open a web page with several layers on it to a specific layer depending on the link on the previous page. I know I can do this from within the same page but I would like to do this from an external page. Can I and how?

I found the answer. I posted it on my SharpLogic Software Blog if you want to know. (May 25th, 2005)

Tgreer - DHTML has enables you to use web layers via the <DIV> tag.

Thanks for any and all help. I hope this helps out others with the same need.

Ezju

Member Avatar for Ezju

Tgreer - DHTML has enables you to use web layers via the <DIV> tag. I wanted to link from one page to another with the second page having several layers not visalbe. When you arrive to the page, I wanted the appropriate layer to become visable. see http://www.sharplogic.com

Member Avatar for peter_budo

Nice work, I like it.
However there is one thing you may consider and that is colour of your fonts because if any image layer displayed the text in front of it is usually unreadable.
(Just suggestion, nothing serious) Once more well done.

Member Avatar for tgreer

"Layer" is an outmoded Netscape term. I'm very fluent in DHTML. A "div" element is just that - a div element. Referring to it as a "layer" is bound to cause confusion. That's why I had to ask you want YOU meant by "layer".

Visibility of any particular element, including div elements, can be set with the appropriate CSS style applied: visibility: hidden, or visibility: visible.

Member Avatar for Ezju

“layer is a outmoded Netscape term. Silly me for using it. I’ll update my dictionary so purists who live in the “that’s so 5 minutes ago can understand.

Yes, visibility can be sent with CSS and other ways. I posted my solution to my problem, which others have had. Can you post a solution to the same problem using “appropriate CSS style applied? I’m not that fluent in CSS.

Member Avatar for Ezju

Nice work, I like it.
However there is one thing you may consider and that is colour of your fonts because if any image layer displayed the text in front of it is usually unreadable.
(Just suggestion, nothing serious) Once more well done.

Peter,

Are you refering to something you are seeing in the site I built or just in general?

Ezju

Member Avatar for tgreer

My point was simply, if you're posting a technical question in a web development forum, you have to use terminology that web developers use. The term "layer" means lots of things in lots of contexts. In the context of HTML development, "layer" was a proprietary element Netscape introduced, which was deprecated several years ago (considerably more than 5 minutes).

If you want to programmaticaly set the visibility of div elements, then it would make the most sense to ask "how do I set the visibility of a div element". People wanting to ask a similar question would be more likely to find this thread in the future, a key benefit to using a forum site.

Your originating link would contain a querystring:

<a href="myDestination.html?activeDiv=myDiv2">link</a>

The myDestination page would have an onload script which parsed the querystring, using location.search, to set the myDiv2 style visibility to "visible".

document.getElementById("myDiv2").style.visibility = visible;

Member Avatar for peter_budo

I'm referingthe to www.sharplogic.com , don't know if is your.
But yeah on that site, welcome page, when you roll over main menu, images are displayed and text in front of it (of image) is not readable.

Member Avatar for Ezju

Peter,

Yep, it’s mine (SharpLogic.com). The images attached to the menu are intentional. I figure if they are navigation the menu they really aren’t reading the body material at that time. If their attention goes to the body they will most likely figure out that if they move the mouse off of the menu it will revert to a readable state. At least that is the theory.

Ezju

Member Avatar for Ezju

Tgreer,

I do appreciate your input and help. Thank you.

My only real point is that sometimes you don’t know what the question is so it’s difficult to phrase. I used the only terminology I knew that fit the bill. I didn’t think from my description that it would have taken a huge leap to figure out what I meant. I apologies if I sounded terse I was out of line.

Again, thanks for your help your last post was very informative! I look forward to more problems to solve and learn from. I hope your around when the next one creeps up on me.

Thanks again,

Ezju

Member Avatar for alpha_foobar

you can still use layers in dhtml. however they have been deprecated... i never fully understood the use of them and am glad they have been deprecated.

Member Avatar for Ezju

I'm new to the web dev thing. I've always come up with designs that someone else had to make work. This is fun and I'm learning more every day. Thanks for all your help and comments. I like this forum.

Thanks again,

Ezju

Member Avatar for Ezju

For an eye-opening experience with CSS, browse to http://www.csszengarden.com

Yes, thank you. I found it the other day and was amazed. I will definitely spend some time there.

Thank you,


Ezju

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.