SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,380
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Navigate among div pages with show/hide CSS

    If I have a series of divs labeled page1, page2, page3, page4, then how do you use the show/hide div method to turn on/off the correct pages?

    Specifically, how does a button on one of the page divs turn on one page while turning off all the other pages?

    There are many web page explaining how to show/hide divs, or make "navigation bars" to show/hide nav links, but the ones really discussing navigating across several pages use Jquery. But I don't want the overhead of Jquery for this simple function, because this will be in a mobile phone app.
    Steve Husting

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,380
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Tabs? In my case, the page contents should replace all other content. No tabs allowed.
    Steve Husting

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    The example shows tabs but the functionality is the same, no?
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #5
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,380
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I will implement and adapt, then. Thanks!
    Steve Husting

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by StevenHu View Post
    No tabs allowed.
    How do people then switch from page to page? I'm confused. You can also use accordions for this, but I'm not clear on what you are picturing. Show/hide functionality normally relates to content that's all on one page.

  7. #7
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,380
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    How do people then switch from page to page? I'm confused. You can also use accordions for this, but I'm not clear on what you are picturing. Show/hide functionality normally relates to content that's all on one page.
    Indeed, I want all the content on one page. The user will navigate back from a page div just like with a Jquery-type Back button at top and/or bottom.

    My page will have a pre-populated database; on body load, all the page divs will be populated with content, but the content won't be seen until the page div is visible for that section.
    Steve Husting

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,580
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    But I don't want the overhead of Jquery for this simple function, because this will be in a mobile phone app.
    But you don't mind if the users on their mobile phones sustain the overhead of loading hidden data that they may not want to see?

  9. #9
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,380
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Are you saying that Jquery will not load items when they are all on one page as hidden divs?
    Steve Husting

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,580
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Not at all. I am commenting about priorities.

    The "friendly" method is to serve one page at a time, therefore the users on mobiles who do not want to see the whole show do not use up their bandwith unnecessarily.

    If the amount of hidden data is relatively small, then no problem; but if it is large, sending all of it to an unsuspecting user is unkind. Serving one page at a time would be more considerate of the mobile user's bandwidth usage.

    Hiding and showing divs can be accomplished with a fairly simple JavaScript (not jQuery) and with css.

  11. #11
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    This is what your after no? If different then say how. http://www.visibilityinherit.com/cod...ading-tabs.php


Bookmarks

Posting Permissions

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