www.webdeveloper.com
Results 1 to 8 of 8

Thread: Swapping backgrounds w/ Z-index

  1. #1
    Join Date
    Mar 2014
    Posts
    2

    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 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.

  2. #2
    Join Date
    Mar 2012
    Posts
    1,834
    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?

  3. #3
    Join Date
    Aug 2008
    Posts
    40
    Did you check your browser history? Do you have 'Time Machine'(Mac)?

    . . .

  4. #4
    Join Date
    Mar 2014
    Posts
    2
    Quote Originally Posted by jedaisoul View Post
    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.


    Quote Originally Posted by 13thwarrior View Post
    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.

  5. #5
    Join Date
    Mar 2011
    Posts
    1,160
    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:

    Code:
    <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.

  6. #6
    Join Date
    Apr 2014
    Posts
    34
    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

  7. #7
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    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.

  8. #8
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,033
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles