Swapping backgrounds w/ Z-index
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 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.
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).
Did you check your browser history? Do you have 'Time Machine'(Mac)?
. . .
Or least don't put your back-up in the same folder.
Originally Posted by jedaisoul
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.
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.
Originally Posted by 13thwarrior
<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 />
<iframe id="theFrame" src="page1.html" width="something" height="something"></iframe>
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'?
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.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)