Swapping backgrounds w/ Z-index

This site is best viewed in a modern browser with JavaScript enabled.

EZor

An introduction to my query:
I found a web page with pieces of code and a tutorial for what I will later describe, but did not bookmark it and the project I made containing this code was deleted by a two year old. Being something of a novice I did not completely understand the code but knew enough to use and modify it. As such, I do not remember it and cannot find it online.

The tutorial:
The product of this tutorial was a single HTML document that created the illusion of having multiple pages by using divs and Z-index to change the background and page contents when you navigated within the document. To further explain, there were a given number of divs which had links in the navigation bar. When you clicked a link, the current page contents and background would appear swap with another, though in reality it was just being hidden. There was absolutely no JS or JQuery involved.

What I need:
If anyone has a link to this tutorial or another like it that would be fantastic. Otherwise, I can get by with an explanation of how to change/hide backgrounds using divs and Z-index.

I hope this all makes sense. Any help is appreciated.

Thanks.

jedaisoul

The moral of the story is:
1. Always back-up your code!
2. Keep a link to resources that you find useful (or better still; download a copy).

Sorry I cannot be more helpful but there is no way known to me to achieve this without javascript (or PHP). There may be a feature in HTML5/CSS3 that I'm not aware of, but, if so, how widely is it supported?

13thwarrior

Did you check your browser history? Do you have 'Time Machine'(Mac)?

. . .

EZor

jedaisoul;1323105 wrote:
The moral of the story is:
1. Always back-up your code!
2. Keep a link to resources that you find useful (or better still; download a copy).

Sorry I cannot be more helpful but there is no way known to me to achieve this without javascript (or PHP). There may be a feature in HTML5/CSS3 that I'm not aware of, but, if so, how widely is it supported?

Or least don't put your back-up in the same folder.

I'm not sure how widely it is supported. I didn't see anything that would indicate it to be exclusive, but I'll have to do some more research.

13thwarrior;1323129 wrote:
Did you check your browser history? Do you have 'Time Machine'(Mac)?

. . .

Indeed I have. My history is saved rather sporadically for some reason and it was not among the few entries there. The only thing to do is find it again or learn how to make it myself.

rtrethewey

There's no facility in HTML and CSS to take the kind of action you describe based on a user click. The only aspects of HTML that respond to clicks are form-related elements and the <a>nchor tag. The only way I can think of to achieve the effect you describe without using JavaScript would be using <frame>s or an <iframe>. The code would be something like:

<nav>
<a href="page1.html" target="theFrame">Page 1</a><br />
<a href="page2.html" target="theFrame">Page 2</a><br />
<a href="page3.html" target="theFrame">Page 3</a><br />
</nav>
<iframe id="theFrame" src="page1.html" width="something" height="something"></iframe>

If all you saw were <div>s, then I can only suggest that there was some inline JavaScript you didn't notice that changed the 'z-index' or other CSS property.

Don't make yourself nuts by trying to avoid JavaScript. Search for examples of "show/hide content" in JavaScript and I'm sure you'll find many choices.

webdev_monkey

Couldn't you use JS to change the display property of each div after its clicked. So you hide all but one by setting the css property display to 'none' and the one you want to show you set to 'block'?

webdev_monkey
www.online-webdev-tools.com

Error404

After some googling, there are apparently some nice toolkits, although I'm not sure if it's possible purely with CSS, which was quite a surprise to me. For example, you could use the -moz-user, -ms-user and -webkit-user toolkits to set whether an HTML element can be selected by a user, whether it takes user input, and whether it's given focus. It's much easier and faster to write using JavaScript, jQuery or even a server-side language. I guess it may be possible through CSS but it seems mostly an academic exercise to me.

Sup3rkirby

I was almost certain this was possible, but I simply could not remember how this (or something similar) was done. Then I found something that led to this: http://css-tricks.com/functional-css-tabs-revisited/

Essentially this is like the 'checkbox hack' in CSS, but with radio buttons (since we want one of many options to take effect at a time). To be fair the example is for tabs, however with the proper styling you can make those tabs look like links instead and adjust their individual content divs accordingly to look like typical pages. Hopefully this puts you back on track but if not I can try tweaking this to look more like what you described and less like the tabbed example.