www.webdeveloper.com
Results 1 to 7 of 7

Thread: Change div content while remaining on page

  1. #1
    Join Date
    Mar 2009
    Posts
    5

    Change div content while remaining on page

    What's the best way to change the content of a div while remaining on the same page?

    I want a list of links to the left, and when one of the links is clicked on, a floated right div to the right populates with the appropriate content.

    Thanks in advance.

  2. #2
    Join Date
    Mar 2007
    Posts
    946
    If you are talking about showing new content without a page refresh then you can use

    1. Javascript - where the page already has the content in the page, but is is hidden and javascript will show it by click a link.

    2. Javascript, ajax and server side code - You use javascript and ajax to call some a php, asp.net file or some other serve side language and have it return the content you are looking for. When the data is returned javascript will take that data and update the div.

  3. #3
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    I don't use JavaScript on my site. The side bars are fixed for every page and center content only changes making it appear as only the center was loaded. Most content is put on pages using SSI. Frames using the target="" attribute could be used. People don't like frames and have bad things to say about them, but they are useful when properly coded with the correct document type and syntax.

  4. #4
    Join Date
    Mar 2009
    Posts
    5
    Okay, so I'm trying to replace the div contents with javascript. It works perfectly until I try to make the replacement text clickable.

    For example, this works:


    Code:
    <div id="articles_author_copy">
    <p>Click on an author to the left to view a list of their articles</p>
    </div>
    
    <a href="#" onclick="document.getElementById('articles_author_copy').innerHTML='<p>Title of Article Here</p>';">Author name</a>
    This doesn't:


    Code:
    <div id="articles_author_copy">
    <p>Click on an author to the left to view a list of their articles</p>
    </div>
    
    <a href="#" onclick="document.getElementById('articles_author_copy').innerHTML='<a href="#">Title of article here</a>';">Author name</a>
    I'm assuming it's some kind of syntax error, I just need someone to point me to what it is.

    Any help would be great.

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,480
    Hi there inCahoots,

    Try it like this...
    Code:
    
    <div id="articles_author_copy">
    <p>Click on an author to the left to view a list of their articles</p>
    </div>
    
    <a href="#" onclick="document.getElementById('articles_author_copy').innerHTML=
    '<a href=\'#\' >Title of article here<\/a>';return false">
    Author name
    </a>
    
    coothead

  6. #6
    Join Date
    Mar 2009
    Posts
    5
    That works perfectly - Thank you so much!

  7. #7
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,480
    No problem, you're very welcome.

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