Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    27
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Scroll Position on id call question???

    I have a issue I want to resolve for a one page template I made. The issue is I use css as a way to load the hidden sections and in order to call it I simply call the a:#id. The thing is I want the page to stay positioned at the top when calling the id instead of auto scrolling to the id's position. I figure java script will probably be the route I'll be forced to take but thought I should check with the HTML5 and css3 gurus.

    Here is my current code:

    Code:
    <!DOCTYPE html>
    <head>
    <style>
    #homePage { display:block;}
    #aboutPage { display:none;}
    #productPage { display:none;}
    #contactPage { display:none;}
    </style>
    
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?p=1202671#post1202671
    
    function $_(IDS) { return document.getElementById(IDS); }
    function checkPage(info) {
      var tmp = '';
      var sel = document.getElementsByTagName('section');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].id == info) { tmp = 'block' } else { tmp = 'none' }
        sel[i].style.display = tmp;
      }
      $_(info).style.display = 'block';
    }
    </script>
    </head>
    
    <body> 
    
    <nav>
    <a href="#" onclick="checkPage('homePage');return false">Home</a> | 
    <a href="#" onclick="checkPage('aboutPage');return false">About</a> | 
    <a href="#" onclick="checkPage('productPage');return false">Projects</a> | 
    <a href="#" onclick="checkPage('contactPage');return false">Contact</a> 
    </nav>
    
    <br><br>
    
    <section id="homePage"> I am Home! </section>
    <section id="aboutPage"> I am a fish. </section>
    <section id="productPage"> Its in a box. </section>
    <section id="contactPage"> I want to talk too! </section>
    
    </body>
    </html>
    Last edited by themindco; 03-12-2012 at 03:14 AM. Reason: Closed. Resolved

  • #2
    New Coder
    Join Date
    Mar 2012
    Posts
    27
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by themindco View Post

    Code:
    #homePage { display:block;}
    #aboutPage { display:none;}
    #productPage { display:none;}
    #contactPage { display:none;}
    </style>
    
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?p=1202671#post1202671
    
    function $_(IDS) { return document.getElementById(IDS); }
    function checkPage(info) {
      var tmp = '';
      var sel = document.getElementsByTagName('section');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].id == info) { tmp = 'block' } else { tmp = 'none' }
        sel[i].style.display = tmp;
      }
      $_(info).style.display = 'block';
    }
    </script>
    </head>
    
    <body> 
    
    <nav>
    <a href="#" onclick="checkPage('homePage');return false">Home</a> |

    Resolved by this new javascript funtion


  •  

    Posting Permissions

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