SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast earph's Avatar
    Join Date
    May 2004
    Location
    Austin
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Possible to target a DIV with a button?

    Is it possible to target a DIV with a button? I have a DIV with a PHP include and would like to swap the include in the DIV using a button.

    I'm just trying to figure out how to swap out information without using iFrames.

    Any suggestions?

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this the kind of thing you're after?

    Code:
    <head>
    <title>I need a whisky</title>
    <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
    <style type="text/css">
    <!--
    .visible {display:block;}
    .hidden {display:none;}
    -->
    </style>
    
    <script type="text/javascript">
    function hideShow(div) 
    {
    var option=['one','two','three'];
    for(var i=0; i<option.length; i++) 
    {	obj=document.getElementById(option[i]);
        obj.className=(option[i]==div)? "visible" : "hidden";    }
    }
    </script>
    
    </head>
    
    <body>
    <button id="b-one" onclick="hideShow('one')">one</button>
    <button id="b-two" onclick="hideShow('two')">two</button>
    <button id="b-three" onclick="hideShow('three')">three</button>
    <div id="one" class="visible">
    <p>Oh my God!</p>
    </div>
    <div id="two" class="hidden">
    <p>I can't believe they voted for that fool!</p>
    </div>
    <div id="three" class="hidden">
    <p>We're doomed!</p>
    </div>
    </body>

  3. #3
    SitePoint Enthusiast earph's Avatar
    Join Date
    May 2004
    Location
    Austin
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No.... basically I have a DIV. The DIV has a PHP include in it. I'd like to replace the PHP include in the DIV.

    I'd like to swap out a section of my page without swapping the WHOLE page.....

    Know what I mean?

    Thanks!

  4. #4
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, that's basically what's happening here. If there are 3 (or however many) different things that you might want to appear in the same place, you can give them each an id. The script hides them all except for the one you want to display first. Clicking the appropriate button will change the display property of the one that's visible to 'none' while the one you want will become visible.
    I'm pretty sure that's what you're saying you want. Only one section of the page will change. You won't have to change the whole page.

    To try to make it a little clearer, I've put it into a page. See how only the highlighted part changes?

  5. #5
    SitePoint Enthusiast earph's Avatar
    Join Date
    May 2004
    Location
    Austin
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah... I see... So, I should be able to insert a PHP include tag instead of text, right?

  6. #6
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What exactly are you including? Is it just some html? Maybe an image?

  7. #7
    SitePoint Enthusiast earph's Avatar
    Join Date
    May 2004
    Location
    Austin
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep... some images along with some text, nothing major.

  8. #8
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well then, all you need to do is give what you're including an id.

    Let's say it's something like this :

    <img src="me.jpg" height="20" width="30" alt="my pic" />
    <p>This is me!</p>

    If you just put a div wrapper around this, like so :

    <div id="one">
    <img src="me.jpg" height="20" width="30" alt="my pic" />
    <p>This is me!</p>
    </div>

    you should be fine. I don't think you can just put your php-include tag in a div because the javascript depends on events like clicking, whereas the php-include actually includes the code in your page before it reaches the browser. As that's what happens, you have the code on the page already, so if it has this div wrapper (as above) it will work just like the divs in my examples.

    Is this html in text files?

    Am I making sense here? I know what I mean, but I'm not sure if I'm explaining this very well.

  9. #9
    SitePoint Enthusiast earph's Avatar
    Join Date
    May 2004
    Location
    Austin
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I totally understand what you're saying..... I'll send you a sample after I'm done implementing it...

    Thanks for the help!

    I just wish it was as easy as telling a link to load a file in a targeted frame, like back in the day.

  10. #10
    SitePoint Enthusiast earph's Avatar
    Join Date
    May 2004
    Location
    Austin
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it working, but you have to scroll down to get to the links.... and after you click a link, it jumps back to the top of the page and you have to scroll down again.

    Is there anyway to solve this issue?

  11. #11
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you need to add "return false;" to the onclick. Something like this:

    Code:
    onclick="hideShow('one'); return false;"
    That should do it

  12. #12
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it working, but you have to scroll down to get to the links.... and after you click a link, it jumps back to the top of the page and you have to scroll down again.
    Erm.. doesn't this depend on where you put your button? If you put the button near the div that changes, then you should be OK I think.


    Quote Originally Posted by Willigogs
    you need to add "return false;" to the onclick. Something like this:

    Code:
    onclick="hideShow('one'); return false;"
    That should do it
    Why?

    I'm just learning this stuff myself. Why do you need the "return false"?


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
  •