SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    austin
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onclick change contents of DIV layer

    I have some content I would like to load into a Div layer when an onclick event happens. Can someone how me to understand how this can be done? Content would be other html file.

  2. #2
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by georgietexan
    Content would be other html file.
    Hi,

    You don't even need any javascript. Though can use the onclick to do the same thing - and more if you need cross-frame scripting capabilities.

    Here's the simplest way to do it, without any javascript.

    HTML Code:
    <div>
    <iframe style="width:300px; height: 144px; 
    border: 1px solid #ddd;"
    frameborder="0" scrolling="1" 
    src="_blank" name="f"></iframe>
    </div>
    <p>
    <a href="http://www.google.com/" target="f">dsfdsf</a>
    </p>
    -xDev

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    austin
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh sorry can't use Iframe. but I need that same function as what you have done.

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by georgietexan
    ....when an onclick event happens.
    That's pretty vague. An 'onclick' - where?

    If you can't use an iframe - or a 'hidden' frame (in a frameset) - or the <object> tag, because of incomplete browser support - you have a problem. HTML elements, like <div>, aren't windows, and can't, by themselves, load external content.
    ::: certified wild guess :::

  5. #5
    ********* Janitor levik's Avatar
    Join Date
    Jan 2003
    Location
    New York
    Posts
    885
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you want to do is really complicated.

    You cannot load an HTML file into the DIV this way.

    What you can do is load a .JS file that will put a bunch of text into some variable, then find the DIV you need and set its innerHTML property the the value of your contents.

    Loading a new .JS file is also a pain after the page has finished opening.

    Are you sure you need to do so complicated a thing?

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    austin
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah this is what I have so far working. I guess I could have just used php/mysql

    http://www.capitalcityfanzine.com/webdesign.html (not completed yet)

    I would like not to use iframes maybe go table less.

  7. #7
    ********* Janitor levik's Avatar
    Join Date
    Jan 2003
    Location
    New York
    Posts
    885
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For this, you do not need to do much complicated scripting. You essentially have 6 options for the content to be shown in the div. I would say that you could pre-load the 6 text blocks into a javascript array:
    Code:
    var code = new Array();
    code[0] = 'Text text text <img src="..."> more text';
    code[1] = 'Other text <img src="..."> isn\'t this fun?';
    ....
    Then give some ID to the DIV you need the text to appear in

    In the 6 images on the side, make the onclick call some function switchContent:
    Code:
    function switchContent(index) {
        var targetDiv = [code to get DIV reference];
        targetDiv.innerHTML = code[index];
    }
    Easy.

  8. #8
    SitePoint Wizard Dangermouse's Avatar
    Join Date
    Oct 2003
    Posts
    1,024
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use it similar to:

    var submenu = new Array();
    submenu[0] = 'Sub menu item 1';
    submenu[1] = 'Sub menu item 2';
    submenu[2] = 'Sub menu item 3';

    function getMenu(thediv,themenu) {
    thediv.innerHTML = submenu[themenu];
    }


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
  •