Web Analytics Made Easy -
StatCounter display and position div next to td in js - CodingForum

Announcement

Collapse
No announcement yet.

display and position div next to td in js

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • display and position div next to td in js

    Hello everyone.

    I am an html/css/php professional who dabbles a bit in javascript and many other languages. I must say up front however that I absolutely despise javascript. However, it is necessary for the work I do, so I get by.

    I have been working for roughly 5 hours trying to find a solution to this. What I do doesnt work, even though I believe it should. Here is my problem:

    I have a 'menu', based inside of a table. There is one particular td, that when clicked, displays a menu of the users online friends. The friends box is in a div.

    The td is name 'online' and the friends box is named 'menufriends'. (with id's, of course.)

    My problem is that I need the friends box to display next to the td. So what when you click the td, it shows up to the right of it instead of below the menu. I have tried all sorts of different methods and cant even get it to change its position.

    Can anyone help me write a script that will do this?


    here is my script:
    Code:
    function showMenu(f){
    if(f){visi="visible";
    document.getElementById("menufriends").style.top = '200px';
    document.getElementById("menufriends").style.left = '200px';
    }
    else{visi="hidden";}
    if(document.layers){document.menufriends.visibility=visi;}
    if(document.all){document.all.menufriends.style.visibility=visi;}
    if(document.getElementById){document.getElementById("menufriends").style.visibility=visi;}
    }
    and here is my td and friends box. (placeholder stuff for now.)

    td:
    Code:
    <tr><td name="online" id="online" style="border-color: #2222AA; border-width:1px;border-bottom-color:#000000;border-style:solid;" onmouseover="this.style.border='1px solid white';" onmouseout="this.style.border='#2222AA 1px solid';this.style.borderBottom='#000000 1px solid';" onclick="showMenu(1);">Friends Online</td></tr>
    friend box:
    Code:
    <div id="menufriends" style="visibility:hidden;">
    <table width="100px" bgcolor="blue">
    <tr><td colspan="2" onclick="showMenu(0);">Close</td></tr>
    <tr><td><img src="" width="50px" height="50px"></td><td><img src="" width="50px" height="50px"></td></tr>
    <tr><td><img src="" width="50px" height="50px"></td><td><img src="" width="50px" height="50px"></td></tr>
    </table>
    </div>

    Before anyone decides to bash the cleanliness of my code, please note that I am writing this up to get the visual effects and functionality down before I clean the code and make it look finalized. Also note that I am an absolute javascript noob.




    Edit: Im not asking someone to write it for me. I just cannot for the life of me figure out how to move the div, let alone put it jsut to the right of the Online Friends td. Any help would be appreciated.
    Last edited by Fariel; Apr 3, 2009, 01:17 AM.

  • #2
    you were close

    Code:
    <script>
    
    function showMenu(f){
    
    if(f==1){visi="visible";
    document.getElementById("menufriends").style.visibility=visi;
    document.getElementById("menufriends").style.position = 'absolute';
    document.getElementById("menufriends").style.top = '200px';
    document.getElementById("menufriends").style.left = '200px';
    }
    else{visi="hidden";}
    if(document.layers){document.menufriends.visibility=visi;}
    if(document.all){document.all.menufriends.style.visibility=visi;}
    if(document.getElementById){document.getElementById("menufriends").style.visibility=visi;}
    }
    </script>
    <table width="100px" >
    <tr><td name="online" id="online"   onclick="showMenu(1);">Friends Online</td></tr>
    </table>
    <div id="menufriends" style="visibility:hidden">
    <table width="100px" bgcolor="blue">
    <tr><td colspan="2" onclick="showMenu(0);">Close</td></tr>
    <tr><td><img src="" width="50px" height="50px"></td><td><img src="" width="50px" height="50px"></td></tr>
    <tr><td><img src="" width="50px" height="50px"></td><td><img src="" width="50px" height="50px"></td></tr>
    </table>
    </div>
    the opener wouldn't work unless you put it in a table, being that it's a td used to trigger it.

    And the if statement was missing a variable to be tested against

    and to position an element it has to be relative or absolute.
    plus we wanted it to be visible when f==1

    document.getElementById("menufriends").style.visibility=visi;
    document.getElementById("menufriends").style.position = 'absolute';
    Last edited by TinyScript; Apr 3, 2009, 01:26 AM.

    Comment


    • #3
      Okay. Thank you, very much. that fixed the first part. I didnt realize I had to change the position on it to change its location. haha.
      [ Edit: God, now that I think about it, it was so simple. I cant believe Ive spent all day trying to figure that out. D: ]

      Now the second question..

      Is there a way to get the position of the td, add its width to the position, and display the friends box there? This is where im totally clueless.

      get the position of td 'online'
      add the width of td 'online' (which is 150px) to its x position
      display the friends box at that position
      Last edited by Fariel; Apr 3, 2009, 01:33 AM.

      Comment


      • #4
        Done!

        Code:
        <script>
        
        function showMenu(f){
        
        if(f==1){visi="visible";
        var newx=document.getElementById("online").style.left;
        var newy=document.getElementById("online").style.top;
        
        document.getElementById("menufriends").style.visibility=visi;
        document.getElementById("menufriends").style.position = 'absolute';
        document.getElementById("menufriends").style.top = newy ;
        document.getElementById("menufriends").style.left = newx + 100;
        }
        else{visi="hidden";}
        if(document.layers){document.menufriends.visibility=visi;}
        if(document.all){document.all.menufriends.style.visibility=visi;}
        if(document.getElementById){document.getElementById("menufriends").style.visibility=visi;}
        }
        </script>
        <br><br><br><br><br><br>
        <table width="100px" >
        <tr><td name="online" id="online"   onclick="showMenu(1);">Friends Online</td></tr>
        </table>
        <div id="menufriends" style="visibility:hidden">
        <table width="100px" bgcolor="blue">
        <tr><td colspan="2" onclick="showMenu(0);">Close</td></tr>
        <tr><td><img src="" width="50px" height="50px"></td><td><img src="" width="50px" height="50px"></td></tr>
        <tr><td><img src="" width="50px" height="50px"></td><td><img src="" width="50px" height="50px"></td></tr>
        </table>
        </div>

        Comment


        • #5
          I added 100px because your table was 100px

          holy cow! it even works in IE!!

          UPDATE:
          I made the friends window positioned relative which makes more sense since you want to position relative to the table and the TD that triggers it. I estimated the text offset to be 25px and moved the friends window up 25 px so the texts line up between tables. And I added a width into the styling of the TD so we could know it's width. (It wasn't giving me a value before that.) then I used that width to move the friends table x position instead of having to add a number ourselves.
          Code:
          <script>
          
          function showMenu(f){
          
          if(f==1){visi="visible";
          var newx=document.getElementById("online").style.left;
          var newy=document.getElementById("online").style.top;
          var addWidth=document.getElementById("online").style.width;
          
          document.getElementById("menufriends").style.visibility=visi;
          document.getElementById("menufriends").style.position = 'relative';
          document.getElementById("menufriends").style.top = newy-25 ;
          document.getElementById("menufriends").style.left = newx + addWidth;
          }
          else{visi="hidden";}
          if(document.layers){document.menufriends.visibility=visi;}
          if(document.all){document.all.menufriends.style.visibility=visi;}
          if(document.getElementById){document.getElementById("menufriends").style.visibility=visi;}
          }
          </script>
          <br><br><br><br><br><br>
          <table width="100px" >
          <tr><td style="width:100px;" name="online" id="online"   onclick="showMenu(1);">Friends Online</td></tr>
          </table>
          <div id="menufriends" style="visibility:hidden">
          <table width="100px" bgcolor="blue">
          <tr><td colspan="2" onclick="showMenu(0);">Close</td></tr>
          <tr><td><img src="" width="50px" height="50px"></td><td><img src="" width="50px" height="50px"></td></tr>
          <tr><td><img src="" width="50px" height="50px"></td><td><img src="" width="50px" height="50px"></td></tr>
          </table>
          </div>
          Last edited by TinyScript; Apr 3, 2009, 02:21 AM.

          Comment


          • #6
            thanks. I havent put it in and tested it yet. Ive been busy writing your tutorial. Im going to go ahead and post it here, since its like 1000 characters too long for the private message. Then ill pop in the js and see how it works. :]

            PHP in 15 minutes:

            Okay, like I said, you already know a programming language, which means you should have a general idea on the vocabulary. So teaching you the actual language should be easy.

            Start with the basics: Variables.
            Variables are declared with dollar signs. $variableName is a variable. They cant start with numbers or symbols. Simple. You dont have to declare datatype or anything else with them.

            Writing a php file is just like writing an html file. The only difference is the extension, and that all php code gets wrapped in <?php and ?> tags. There is a shorthand for the <?php tag that is just simply <? . I use <? all the time. lol. I just want to teach you right.

            Every line in php is ended with a ;

            echo is used to display information on the page.

            comparison operators are:
            == is equals
            > is greater than
            < is less than
            >= greater than or equal to
            <= less than or equal to

            Here is a small script to show you everything ive said:

            PHP Code:
            <?php

            $variable 
            "Hello world!";

            echo 
            $variable;

            ?>
            that will say "Hello world!" in the browser.

            You can wrap containment things (such as strings) in either ' or ". However, if you have an echo statement that is contained with ' and need to put a semicolin in the word don't, you need to backslash it. This keeps the server from thinking youre ending your string. example:

            PHP Code:
            <?
            echo 'Hey, don\'t do that!';
            ?>
            I typically use ' rather than " because in html, you use " all of the time. It saves a lot of backslashing.

            Now, to display both variables and strings in an echo statement, you use a period. example:

            PHP Code:
            <?
            $variable 
            "Hello ";
            echo 
            $variable "world!";
            ?>
            this will also show "Hello world!", but use both a string and a variable.
            As for math, here are the operators:
            * = multiply
            + = addition
            - = subtration
            / = division

            example:

            PHP Code:
            <?
            $variable1 
            5*5;
            $variable2 10-5;
            $variable3 50/5;
            $total $variable1 $variable2 $variable3;
            ?>
            Also, if you shouldnt wrap numbers in container quotes. This makes them a string. php is usually smart enough to figure it out, but you might get an error somewhere and spend 5 hours debugging it. Ive totally never ever done this in my entire life. haha.

            Loops. Use while. Also, incrementing will be shown here.

            PHP Code:
            <?
            $number 
            0;
            while(
            $number 10) {
                echo 
            $number;
                
            $number++;
            }
            ?>
            ++ is used for incrementing and -- is used for decrementing. This bit of code will display numbers 0 - 9.

            comparison, use if:

            PHP Code:
            <?
            $thisIsTrue
            =True;
            if(
            $thisIsTrue == FALSE) {
                echo 
            "this should never be said";
            }elseif(
            $thisIsTrue == TRUE) {
                echo 
            "This should always be said";
            }else{
                echo 
            "what?  its neither true or false?  how?";
            }
            ?>
            thats a good example of else, elseif, and if.
            Now, as I said before, you write php files just like you write html files. Heres an example.

            PHP Code:
            <?
            echo '<b>This is bold font.</b>';
            echo 
            '<i>This is italic font.</i>';
            echo 
            '<b><i>This is bold and italic font.</i></b>';

            $num=10;
            while(
            $num>0) {
            echo 
            "<u>This is underlined font displayed 10 times.</u>";
            $num--;
            }
            ?>

            Here is a list of helpful functions.
            isset($variable) This tells you if a varaible is set or not.
            time() gets the time. This has a particular format. look it up in the php documentation.
            strtolower($variable) makes all of the characters in a string lowercase
            strtoupper() same as strtolower, but uppercase instead
            rand($startNumber, $endnumber) gets a random number between the listed numbers.

            these are just a few simple ones.
            Now, there is something a little more complex. Forms.
            There are two different submit methods on forms.. Post, and Get.
            Get puts the information from the form in the URL.
            Post runs it directly to the server.
            you define the post type in the <form> tag.
            <form method="post" action="process.php">
            you use post or get in there.

            here is an example of how to get the information from the form. assume this form:
            <form method="post" action="process.php">
            <input type="text" name="testbox">
            <input type="submit">
            </form>

            here is the php in process.php:

            PHP Code:
            <?
            $testbox 
            $_POST['testbox'];
            echo 
            'You entered '.$testbox.' in the box!';
            ?>
            You use the same thing to acquire the GET method, except the variable is _GET instead of _POST.
            Notice the brackets after the name of the variable. Thats because the data is sent in an array.
            arrays are used like such: $arrayname[arraypiece]
            In php, the 'arraypiece' can be a number, or text.



            This is everything I can think of at the moment. If I have more ideas, I might add them later. This concludes your php in 15 minutes lesson! lmao. Tell me what you think, and if you have any questions, id be happy to answer them. Remember, the php documentation is your friend. You can do anything with php with the proper manipulation. Just check the documentation on how, and keep google by your side.

            Also, do you mind if I post this quick tutorial elsewhere? I think its pretty nifty, and goes over a lot very quickly. Good for beginners, I think.

            Comment


            • #7
              Im going to double post for 2 reasons. First, that last post is MASSIVE, and it wouldnt do much good to edit it. Second, it doesnt have much to do with that last post.

              Okay. For everyone else reading this topic and seeing that massive php tutorial.. He asked me to write it form him in exchange for some js knowledge. php for js is fair in my opinion, and I hope you dont mind me using a forum post to enlighten this knowledgeable exchange.

              I dropped the JS in and it did everything it was supposed to, minus a position error. I can fix that, though, as its just a change of numbers.

              I want it to display to the right of the td that gets clicked. The td comes from a table that is 170 px (i thought it was 150) in width. I also need to offset it up about 15 px to compensate for it being below the td. Works like a charm, minus that. :]

              Comment


              • #8
                Okay. Now its a triple post. lol.

                The edite ALMOST worked. It got the vertical offset fixed. However, it didnt add the width of the td to the x location. Maybe if we get the width of the table instead?

                Edit: No, the table didnt work. The width line doesnt work.

                Edit 2: I added the style="100px" in that i missed before. This fixed it. I aligned it up to being exactly 154px. So, problem solved.

                Now. Why is there a bottom scroll bar appearing when I click on it? o.o
                Last edited by Fariel; Apr 3, 2009, 02:31 AM.

                Comment


                • #9
                  Originally posted by Fariel View Post
                  Okay. Now its a triple post. lol.

                  The edite ALMOST worked. It got the vertical offset fixed. However, it didnt add the width of the td to the x location. Maybe if we get the width of the table instead?

                  Edit: No, the table didnt work. The width line doesnt work.

                  Edit 2: I added the style="100px" in that i missed before. This fixed it. I aligned it up to being exactly 154px. So, problem solved.

                  Now. Why is there a bottom scroll bar appearing when I click on it? o.o

                  are you sure? Here's the output with the addWidth version

                  Comment


                  • #10
                    Now. Why is there a bottom scroll bar appearing when I click on it? o.o


                    scatches head... I'm going to have to figure that one out. It has to be the table layout. This will be fun. I've never really dealt with tables. heheh

                    Edit:not the tables

                    add this
                    document.getElementById("menufriends").style.width = 100 ;
                    just below the rest of the others
                    Last edited by TinyScript; Apr 3, 2009, 02:48 AM.

                    Comment


                    • #11
                      Well, im only testing this on FF for now, simply because I know there are a few layout glitches in IE. (i have the corners of the tables set to float to the right, so they look rounded. its a simple fix, but i havent gotten around to it.)

                      Here is what it looks like on mine:

                      [resized, reposted for future reference.]




                      Anyone have any ideas as to why the scroll bar pops up?



                      Edit: Thats a HUGE image. sorry! ps. im on dialup, so im a little slow at getting back to you. lol. whatd you think of the tut?

                      edit2: that fixed it. ohh wow. What was happening?
                      Last edited by Fariel; Apr 3, 2009, 03:04 AM.

                      Comment


                      • #12
                        tut was great. I had seen most of that on the rascal999 tuts but I'll need your help placing the correct scripts in the correct directories at ripway, the free host I'm using to learn on, if that's cool.

                        BTW, lemme see the whole script and I'll sort the problems out. All i have is the little snippet. I had that scroll bar too, but it went aw3ay once I gave the div a width.

                        Comment


                        • #13
                          okay. heres the code:

                          Code:
                          <body bgcolor="#000000">
                          
                          <head>
                          <script language="javascript">
                          <!--
                          
                          function showMenu(f){
                          
                          if(f==1){visi="visible";
                          var newx=document.getElementById("online").style.left;
                          var newy=document.getElementById("online").style.top;
                          var addWidth=document.getElementById("online").style.width;
                          
                          document.getElementById("menufriends").style.visibility=visi;
                          document.getElementById("menufriends").style.position = 'relative';
                          document.getElementById("menufriends").style.top = newy-25 ;
                          document.getElementById("menufriends").style.left = newx + addWidth;
                          document.getElementById("menufriends").style.width = 100 ;
                          
                          }
                          else{visi="hidden";}
                          if(document.layers){document.menufriends.visibility=visi;}
                          if(document.all){document.all.menufriends.style.visibility=visi;}
                          if(document.getElementById){document.getElementById("menufriends").style.visibility=visi;}
                          }
                          
                          // -->
                          </script> 
                          </head>
                          
                          
                          
                          
                          <table width="170px" border="0" cellspacing="0" cellpadding="0" bgcolor="#2222AA" name="leftmenu" id="leftmenu">
                          
                          <tr><td><!--VOID--></td><td width="5"><img src="img/toprightsmall.gif" width="5" height="5" style="float: right;"></td></tr>
                          
                          <tr>
                          <td><a href="friends/profile.php"><img src="" alt="User Image" width="150px" height="150px"></a></td>
                          <td rowspan="9" width="15px"><center><b>M<br><br>E<br><br>N<br><br>U</b></center></td>
                          </tr>
                          <tr><td><input type="text" value="status" style="width:100%;"></td></tr>
                          <tr><td style="border-bottom-width:1px;border-bottom-color:#000000;border-bottom-style:solid;">Inbox</td></tr>
                          <tr><td style="border-bottom-width:3px;border-bottom-color:#000000;border-bottom-style:solid;">Comments</td></tr>
                          <tr><td style="border-bottom-width:1px;border-bottom-color:#000000;border-bottom-style:solid;">Friends</td></tr>
                          <tr><td style="border-bottom-width:1px;border-bottom-color:#000000;border-bottom-style:solid;">Albums</td></tr>
                          <tr><td style="border-bottom-width:1px;border-bottom-color:#000000;border-bottom-style:solid;">Blogs</td></tr>
                          <tr><td style="border-bottom-width:1px;border-bottom-color:#000000;border-bottom-style:solid;">Forums</td></tr>
                          <tr><td style="border-bottom-width:3px;border-bottom-color:#000000;border-bottom-style:solid;">Chat</td></tr>
                          <tr><td name="online" id="online" style="border-color: #2222AA; border-width:1px;border-bottom-color:#000000;border-style:solid; width: 154px;" onmouseover="this.style.border='1px solid white';" onmouseout="this.style.border='#2222AA 1px solid';this.style.borderBottom='#000000 1px solid';" onclick="showMenu(1);">Friends Online</td></tr>
                          <tr><td><!--VOID--></td><td width="5"><img src="img/bottomrightsmall.gif" width="5" height="5" style="float: right;"></td></tr>
                          
                          </table>
                          
                          
                          <div id="menufriends" style="visibility:hidden;">
                          <table width="100px" bgcolor="blue">
                          <tr><td colspan="2" onclick="showMenu(0);">Close</td></tr>
                          <tr><td><img src="" width="50px" height="50px"></td><td><img src="" width="50px" height="50px"></td></tr>
                          <tr><td><img src="" width="50px" height="50px"></td><td><img src="" width="50px" height="50px"></td></tr>
                          </table>
                          </div>
                          
                          </body>


                          I havent styled anything. Thats why there are massive style attributes in the tags. haha.

                          Ohh, i forgot to tell you in the tut. you save files as .php . the html is sent to the browser jsut like in an html file, but all of the php is done before anything gets sent. (for the most part.)

                          edit: youll need these images for the corners. img.zip
                          Last edited by Fariel; Apr 3, 2009, 03:29 AM.

                          Comment


                          • #14
                            I tried to save notepad files as php, since that's how I edit html and js files, but it doesn't work. it saves them as text files with a .php.txt extention so I'm lost. What editor do i need to use?

                            Comment


                            • #15
                              Notepad likes to be silly some times. When you save in notepad, if you select "all files" as your file type and then type in filename.php, it SHOULD work. If not, you can rename the file to be a php file, just take the txt extension off.

                              You dont NEED an editor, but I do recomment you pick up a copy of editplus. The recent version is 3.x, but you might be able to find a version 2.x somewhere. v2 is free, where v3 has a 30 day trial. With editplus, you can install templates for html, css, js, php, etc (it comes with all of these plus some) that color the functions, variables, and everything in different colors. It takes code legibility to a whole new level. You can also change the colors to whatever you want. Here is a screenshot of mine.


                              That was part of a php library im working on for a browser game im doing.
                              here is some html: (should look familiar. xD)



                              Question: How good are you at scrolling things? If I were to position my menu -154 px left, could you make it "scroll" to 0 px?
                              Last edited by Fariel; Apr 3, 2009, 04:01 AM.

                              Comment

                              Working...
                              X