Results 1 to 7 of 7

Thread: Target DIV?

  1. #1
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Question Target DIV?

    Hey, I'm already pretty sure that this isn't possible... But there's no harm is asking to be sure.

    Is it possible to "target" a DIV or other container such as SPAN or something?

    Like this:
    Code:
    <div id="nav">
    <a href="blank.html" target="content">Content</a>
    </div>
    <div id="content" name="content">
    This is where the content goes...
    </div>
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  2. #2
    Join Date
    Jun 2006
    Posts
    182
    Thanks
    0
    Thanked 14 Times in 14 Posts

    Default

    Nope, the only way to do that is through XMLHttpRequest.
    DD has plenty of scripts for this purpose, eg. http://www.dynamicdrive.com/dynamici...jaxcontent.htm

  3. #3
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    PERFECT!

    Thanks, I kinda thought it was going to be an ajax thing... but I wasn't sure.
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  4. #4
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Quote Originally Posted by Nyne Lyvez View Post
    PERFECT!

    Thanks, I kinda thought it was going to be an ajax thing... but I wasn't sure.
    Look into using something like jQuery. It's super-duper-simple to do Ajax calls with it.

    From the documentation:
    Retrieve the latest version of an HTML page.
    $.ajax({
    url: "test.html",
    cache: false,
    success: function(html){
    $("#results").append(html);
    }
    });
    Edit:
    Also just noticed that DD has some scripts that might be of interest here:

    http://www.dynamicdrive.com/dynamici...jaxcontent.htm
    http://www.dynamicdrive.com/dynamici...axincludes.htm
    Last edited by Medyman; 08-09-2008 at 04:52 PM. Reason: edit-add

  5. The Following User Says Thank You to Medyman For This Useful Post:

    TheJoshMan (08-09-2008)

  6. #5
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    Thanks Medyman, I'm already attempting to use one of those scripts.
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  7. #6
    Join Date
    Jul 2013
    Location
    Romania
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I know it is a very old topic but like myself anyone can land on this page searching for an answer, a solution.
    Well it is possible to navigate to a section of the content from the same page or from content posted on external page
    HTML Code:
    <div id="nav">
    <a href="#content">Content</a>
    </div>
    <div id="content" name="content">
    This is where the content goes...
    </div>
    If the above example the content div is in the same page as the navigation element

    HTML Code:
    <div id="nav">
    <a href="http://www.dynamicdrive.com/forums/#footer_time">Content</a>
    </div>
    <div id="content" name="content">
    This is where the content goes...
    </div>
    The above example is using this forum's footer div as targeted link. The target link attribute is used as tab , _blank, _new, _top and not to call or define the html element

    This link goes to the footer section from another page
    Last edited by css-mfc-pro; 02-29-2016 at 11:13 AM. Reason: add clickable link

  8. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,876
    Thanks
    49
    Thanked 264 Times in 256 Posts
    Blog Entries
    56

    Default

    Not tested:
    jQuery:
    Code:
    <head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    
    <body>
    <div id="nav">
    <a href="javascript: void(0)" onclick="$('#content').load('yourfile.html'); return false">Content</a>
    </div>
    <div id="content" >
    This is where the content goes...
    </div>
    </body>
    Without jQuery:
    Code:
    <head>
    ...
    </head>
    
    <body>
    <div id="nav">
    <a href="javascript: void(0)"  onclick="document.getElementById('content').innerHTML=frames.content.document.body.innerHTML; return false">Content</a>
    </div>
    <div id="content" >
    <iframe name="content" src="yourfile.html" style="position: absolute; width:0; height:0; left: -100%"></iframe>
    This is where the content goes...
    </div>
    </body>

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
  •