Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Member
    Join Date
    Aug 2006
    Posts
    67
    Member #
    13752
    Hi.

    Basically, im looking for a way to have 3/4 divs stacked on top of each other.
    Each div will contain a small amount of text and maybe an image.

    The idea is that there will be 3/4 links at the top of the page and when you click on one of these links a javascript function will be called which changes the z-index of the associated page so that it becomes visible!

    Thus allowing for a fast navigation and prevents the need for the user to scoll down the page to view all of the content!

    Does anyone know about this or does anyone know if there are any tutorials about such a method?

    Thanks

  2.  

  3. #2
    Member
    Join Date
    Aug 2006
    Posts
    67
    Member #
    13752
    hmmm.

    I couldnt find any tutorials so i thought id have a go myself.

    Turned out to be a piece of cake!

    I wander why more people dont use this type of navigation!
    All the text is visible to search engines so i cant think of any seo probs.

    As far as accessiblity is concerned...
    Screen readers shouldnt have an issue with it.

    As for screen magnification devices...
    If the divs can somehow be assigned access keys i would have thought it would be even easier to read since they dont have to scoll down the page!


    so the only thing which i can think of is that they need javascript installed!

    Am i overlooking something important???

    Anyway, heres the very simply code if anyone is interested....

    Javacript
    Code:
    <script type="text/javascript">
    function showContentPage1()
    {
    var myDiv = document.getElementById('contentPage1');
    var myDiv2 = document.getElementById('contentPage2');
    myDiv2.style.zIndex = 0;
    myDiv.style.zIndex = 100;
    }
    
    function showContentPage2()
    {
    var myDiv = document.getElementById('contentPage1');
    var myDiv2 = document.getElementById('contentPage2');
    myDiv.style.zIndex = 0;
    myDiv2.style.zIndex = 100;
    }
    </script>
    html
    HTML Code:
    
    <a href="#contentPage1" onclick="showContentPage1()" >page1</a>
    <a href="#contentPage2" onclick="showContentPage2()" >page2</a>
    
    
    <div id="contentPage1">
    <h1>1914 translation by H. Rackham</h1>
    
    "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the 
    </div>
    
    <div id="contentPage2">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
    </div>

    css
    HTML Code:
    #contentPage1
    {
    position:absolute;
    top:50px;
    left:50px;
    border:1px solid black;
    z-index:20;
    background:green;
    width:550px;
    height:250px;
    }
    
    #contentPage2
    {
    position:absolute;
    top:50px;
    left:50px;
    border:1px solid black;
    z-index:0;
    background:blue;
    width:550px;
    height:250px;
    }

  4. #3
    Member
    Join Date
    Aug 2006
    Posts
    67
    Member #
    13752
    The only problem here is that as the number of pages increases the amount of javascript code needed grows exponentially.

    So i was wandering if someone could sugguest a way of doing this in just one function!

    so instead of...
    <a href="#contentPage1" onclick="showContentPage1()" >page1</a>
    <a href="#contentPage2" onclick="showContentPage2()" >page2</a>

    if would be..
    <a href="#contentPage1" onclick="showContentPage()" >page1</a>
    <a href="#contentPage2" onclick="showContentPage()" >page2</a>

    Now... obviously the function needs to know which div to make visible so im guessing the showContentPage() function will need to pass a variable.

    However, i dont know how to do this as i have only ever copied and pasted javascript until now.


    It needs to be something like this...
    <a href="#contentPage1" onclick="showContentPage(page_num)" >page1</a>

    Then...
    If page_num = 1
    var myDiv = document.getElementById('contentPage1');
    else if page_num=2
    ...etc...

    Does that make sense?

    i just need to know how to get a value into page_num!

    This should be a very basic task so if anyone can point me in the right direction i would greatly appreciate it!

    Thanks!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:00 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com