Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts

    selecting two divs then calling a function

    Here is my problem, i have about 10 different divs that each have a different picture in them. What i want to do is have one div selected, by clicking on the picture and then another one, that you would click on the picture. Then once "2" are selected they change places. I have figured out how to change places, but im having trouble creating something that has to wait for two to be selected.

    Not sure if anyone knows of a site or any idea how to do this. Sorry if this is confusing, let me know if you need more information.

    Thanks!

    Also i have been messing with this, just not sure how to create a code to make this work, so it knows "2" have been selected.

    Code:
    document.getElementByID(firstClickedDivID).innerHTML = document.getElementByID(secondClickedDivID).innerHTML;
    
    document.getElementByID(secondClickedDivID).innerHTML = document.getElementByID(firstClickedDivID).innerHTML;
    Last edited by jcdevelopment; 06-17-2008 at 07:50 PM.

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    ok, this may be more important to the fact of reaching my goal

    How would i go about calling mulitple ids? Like if i have

    Code:
    pics = document.getElementById('one');
    how could i work that to where and element is selected and instead of 'one' being hard coded in, it will select the id that i click on? Like if i selected id "3" then i need it to say

    Code:
    pics = document.getElementById('three');
    how would i go about that?

  • #3
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    I just hacked this up and I think it's doing what you want, except for it being a generic tile-like game. The ugly colors and alerts are to help see what's happening.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
    <head>
    
    <style type="text/css">
        td
        {
            background-color: #ffffff;
            color: #000000;
            border: thin #000000 solid;
            padding: 1em;
        }
        td:hover
        {
            background-color: yellow;
            color: #0000ff;
        }
    </style>
    
    <script type="text/javascript">
    var selectedCount = 0;
    var firstSelectedTile;
    var secondSelectedTile;
    
    function toggleTiles(tile)
    {
        switch (selectedCount)
        {
            case 0:
                selectedCount = 1;
                firstSelectedTile = document.getElementById(tile);
                firstSelectedTile.style.backgroundColor = '#ff0000';
                break;
            case 1:
                selectedCount = 2;
                secondSelectedTile = document.getElementById(tile);
                if ( secondSelectedTile == firstSelectedTile )
                {
                    alert("don't touch that");
                    selectedCount = 1;
    
                } // end: if
                else //
                {
                    secondSelectedTile.style.backgroundColor = '#00ff00';
                    toggleTiles(null);
    
                } // end: else
                break;
            case 2:
                var swapTileContents = firstSelectedTile.innerHTML;
                firstSelectedTile.innerHTML = secondSelectedTile.innerHTML;
                secondSelectedTile.innerHTML = swapTileContents;
                alert('swapped');
                firstSelectedTile.style.backgroundColor = '';
                secondSelectedTile.style.backgroundColor = '';
                // edit: blanked the two new background colors so they would revert to default for td
                selectedCount = 0;
                break;
        }
    }
    
    </script>
    
    </head>
    
    <body>
    
    <table>
        <tr>
            <td id="tile0x0" onclick="toggleTiles(this.id);">1</td>
            <td id="tile0x1" onclick="toggleTiles(this.id);">2</td>
            <td id="tile0x2" onclick="toggleTiles(this.id);">3</td>
        </tr>
        <tr>
            <td id="tile1x0" onclick="toggleTiles(this.id);">4</td>
            <td id="tile1x1" onclick="toggleTiles(this.id);">5</td>
            <td id="tile1x2" onclick="toggleTiles(this.id);">6</td>
        </tr>
        <tr>
            <td id="tile2x0" onclick="toggleTiles(this.id);">7</td>
            <td id="tile2x1" onclick="toggleTiles(this.id);">8</td>
            <td id="tile2x2" onclick="toggleTiles(this.id);">&nbsp;</td>
        </tr>
    </table>
    
    </body>
    
    </html>
    Last edited by tomws; 06-17-2008 at 10:05 PM. Reason: minor code tweak

  • Users who have thanked tomws for this post:

    jcdevelopment (06-17-2008)

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Good god, you are a genious, thats exactly the kind i neede. I have the animation that i need, i just need to be able to differ between the two. Thank you very much!

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    ok, now my attempt to butcher your code has failed. I am trying to enable my animation with what you gave me and it keeps giving me the "alert". I added a new alert and seems to think that i am selecting the same div. not sure, here is my attempt(it includes a small animation)

    Code:
    <script type="text/javascript">
    
    var foo = null; // object
    
    function doMove() {
      foo.style.top = parseInt(foo.style.top)+3+'px';
      setTimeout(doMove,5); // call doMove in 20msec
    }
    
    function init() {
      foo = document.getElementById('title'); // get the "foo" object
      foo.style.top = '0px'; // set its initial position to 0px
      foo.style.zIndex='100';
      doMove(); // start animating
    }
    
    var selectedCount = 0;
    var firstSelectedDiv;
    var secondSelectedDiv;
    
    function toggleTiles(tile)
    {
        switch (selectedCount)
        {
            case 0:
                selectedCount = 1;
                firstSelectedTile = document.getElementById(tile);
                firstSelectedTile.style.opacity = '0.5';
                break;
            case 1:
                selectedCount = 2;
                secondSelectedDiv = document.getElementById(tile);
                if ( secondSelectedDiv == firstSelectedDiv )
                {
                    alert("Must Select Two images");
                    selectedCount = 1;
    
                } // end: if
                else //
                {
                    secondSelectedDiv.style.opacity = '0.5';
                    init(null);
    
                } // end: else
                break;
            case 2:
                var swapTileContents = firstSelectedDiv.innerHTML;
                firstSelectedDiv.innerHTML = secondSelectedDiv.innerHTML;
                secondSelectedDiv.innerHTML = swapTileContents;
                //alert('swapped');
                //firstSelectedTile.style.backgroundColor = '#ffffff';
                //secondSelectedTile.style.backgroundColor = '#ffffff';
                selectedCount = 0;
                break;
        }
    }
    
    
    //window.onload = init;
    
    </script>
    
    
    
    </head>
    
    <body>
    <div id="pictrueContainer">
    <div class="pictureOdd"  id="tile0x0"><a href="#"  onclick="toggleTiles(this.id);" > <img src="picUpload/pic1.jpg" alt="1" /></a> <a href="#" class="link_style">Listing_11.jpg</a> </div>
    <div class="pictureEven" id="tile0x1"><a href="#" onclick="toggleTiles(this.id);"><img src="picUpload/pic2.jpg" alt="2" /></a> <a href="#" class="link_style">Listing_21.jpg</a> </div>
    <div class="pictureOdd" id="tile0x2"><a href="#" onclick="toggleTiles(this.id);"><img src="picUpload/pic3.jpg" alt="3" /></a> <a href="#" class="link_style">Listing_22.jpg</a></div>
    <div class="pictureEven" id="tile0x3"><a href="#" onclick="toggleTiles(this.id);"><img src="picUpload/pic4.jpg" alt="4" /></a> <a href="#" class="link_style">Listing_23.jpg</a></div>
    <div class="pictureOdd" id="tile0x4"><a href="#" onclick="init()"><img src="picUpload/pic5.jpg" alt="5" /></a> <a href="#" class="link_style">Listing_24.jpg</a></div>
    <div class="pictureEven" id="tile0x5"><a href="#" onclick="init()"><img src="picUpload/pic6.jpg" alt="6"/></a> <a href="#" class="link_style">Listing_25.jpg</a></div>
    <div class="pictureOdd" id="tile0x6"><a href="#" onclick="init()"><img src="picUpload/pic7.jpg" alt="7" /></a> <a href="#" class="link_style">Listing_26.jpg</a></div>
    <div class="pictureEven" id="tile0x7"><a href="#" onclick="init()"><img src="picUpload/pic8.jpg" alt="8" /></a> <a href="#" class="link_style">Listing_27.jpg</a></div>
    <div class="pictureOdd" id="tile0x8"><a href="#" onclick="init()"><img src="picUpload/pic9.jpg" alt="9" /></a> <a href="#" class="link_style">Listing_28.jpg</a></div>
    <div class="pictureEven" id="tile0x9"><a href="#" onclick="init()"><img src="picUpload/pic10.jpg" alt="10" /></a> <a href="#" class="link_style">Listing_29.jpg</a></div>
    
    
    </div>
    <img src="picUpload/pic11.jpg" />
    </body>
    </html>

  • #6
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    The first thing I notice is that case 0 and case 2 still have the 'Tile' portion of their name as opposed to 'Div' used in the rest of the converted code.

  • #7
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Thanks, i didnt see that. Unfortunately it didnt do much of anything. I am still getting the 'alert'. I think it has to do with my little animation that i need to fix.

  • #8
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Oh! I think I see something else. Here's one of your original code lines followed by a suggested revision:
    Code:
    // old
    <div class="pictureOdd"  id="tile0x0"><a href="#"  onclick="toggleTiles(this.id);" > <img src="picUpload/pic1.jpg" alt="1" /></a> <a href="#" class="link_style">Listing_11.jpg</a> </div>
    // new
    <div class="pictureOdd"  id="tile0x0" onclick="toggleTiles(this.id);"><img src="picUpload/pic1.jpg" alt="1" />Listing_11.jpg</div>
    Note that the onclick event is applied to the div in the revision. The original has it applied to the anchor tag which doesn't have an ID. I completely removed the anchor assuming that you were using it to trigger an event. If you want the hand pointer to appear, too, you can achieve that with css on your div wrappers of cursor: pointer; I think.
    Last edited by tomws; 06-17-2008 at 10:13 PM. Reason: stray smiley

  • Users who have thanked tomws for this post:

    jcdevelopment (06-17-2008)

  • #9
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    ahhh, i see what you mean, unfortunately its giving me an error on line
    130 and 137

    saying, "object expected". not too sure..

  • #10
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Do you happen to have it up on a public server?

  • #11
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    sorry, i was able to get it, i took out my animation function and kept the original code. Then i forgot i had the function being called twice. So it swaps now. Now i need to figure out how to add the animation.. oh well thats part of learning JS i guess!! Thanks

    EDIT** I do the only problem is that its an intranet!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •