SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can i do this ?

    Hey,

    I was hoping you guys could help me out..

    Take a look at this page:

    http://www.freemanholland.com/babies/

    On the right panel where you can see "Already a member? Click here to login" i want the content inside the box to change.. only within the box once this link is clicked.

    Is this possible?

    Thanks again
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,096
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Yes, put a div below it with display: none, and then use javascript to set the one that's currently visible to display: none when you click the link, and the hidden one below to display: block;
    That visually swaps the both
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I'd use the off-screen positioning method instead. If you're using a screen reader that does not update the virtual buffer, the clicking won't seem to do anything because in the virtual buffer the div is still display: none which the reader will ignore.

    If the div is positioned off-screen, then it doesn't matter so much if the buffer doesn't update (newer readers with virtual buffers can update, but since they're expensive, it's likely older readers are still in use) because the reader can access the "new" div either way.

    So, onload, a class gets added to the div, and CSS styles that class to make the div position: absolute and left: - a gazillion units. Clicking on the button removes the class, which puts the div back in place and visible on the screen. So, you're just adding/removing classes with JS.


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
  •