The forum of the forums

Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
5 posters

    Help with Java/Jquery

    Sir. Mayo
    Sir. Mayo
    Sir. Mayo
    Forumember


    Male Posts : 978
    Reputation : 90
    Language : English, Some french.
    Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108
    • Post n°1

    Solved Help with Java/Jquery

    Post by Sir. Mayo Wed 15 Jan - 19:21

    I have made the following codes in html and css and added this jquery code but when i try to add it in to a script tag it does not work.

    Here is a woking example using Jsfiddle:

    http://jsfiddle.net/8CgQ5/53/

    Here are the codes:
    Html:
    Code:
    <div id="slideout">
      
        <div id="slidecontent">
          

       <table id="ST" border="1px" class="Series" cellspacing="px">
        <tbody>
          <tr>
            <th colspan="2">
              <center>
                <u>Metals</u>
              </center>
            </th>
          </tr>

          <tr>
            <th bgcolor="#FFAA00" id="Alkali" class="Alkali">Alkali
            Metals</th>
          </tr>

          <tr>
            <th bgcolor="#F3F300" id="Alkaline" class="Alkaline">Alkaline Earth Metals</th>
          </tr>

          <tr>
            <th bgcolor="#FFAA88" id="Lanthanoid" class="Lanthanoid">Lanthanoids</th>
          </tr>

          <tr>
            <th bgcolor="#DDAACC" id="Actinoid" class="Actinoid">Actinoids</th>
          </tr>

          

          <tr>
            <th bgcolor="#DD9999" id="Transition" class="Transition">Transition metals</th>
          </tr>

          <tr>
            <th bgcolor="#99BBAD" id="Poor" class="Poor">Post-transition metals</th>
          </tr>
        </tbody>
      </table><br />

    <table id="Series1" border="2px" class="Series" cellspacing="2px">
        <tbody>
          <tr>
            <th align="right" colspan="4">
                
              <center>
                <u>Nonmetals</u>
              </center>
            </th>
          </tr>
            <br/>

          <tr>
              <td bgcolor="#00EE00" id="Nonmetal" class="Nonmetal" ><a>Other<br/>
            Nonmetals </a></td>

            <td bgcolor="#00DDBB" id="Halogen" class="Halogen" >
            <a> Halogens </a></td>

            <td bgcolor="#66AAFF" id="Noble" class="Noble"><a> Noble
                <br/>
             Gases </a></td>
          </tr>
        </tbody>
      </table>

    <br/>

    <table id="Series2" border="2px" class="Series" cellspacing="4px">
        
        
        <th> Other</th>
    <tr>
        
       <td bgcolor="#55CC87" id="Metalloid" border="2px" class="Metalloid" colspan="2"><a>
        Metalloids</a></td>
        </tr>
      
       </table>
    <br/>
    <table id="e" class="e" border="1px" cellspacing="0px">
      <tbody><tr>
        <th></th>
        <th>State</th>
      </tr><tr>
        <td>C</td>
        <td>Solid</td>
      </tr>
      <tr class="tg-eve1n">
        <td><p3>Hg</p3></td>
        <td><p3>Liquid</p3></td>  
      </tr>
      <tr>
        <td><p2>H</p2></td>
        <td><p2>Gas</p2></td>
      
      </tr>
      <tr class="tg-even1">
        <td> <p4>Rf</p4></td>
      
        <td><p4>Unknown</p4></td>
          <br/>
      </tr>
    </tbody></table>

     
     
            </div>
        <div id="containclickme">
        <div id="clickme">
            K
            <br/>
            E
            <br/>
            Y
            </div></div>



    CSS:
    Code:
    #slideout {
        
        position: relative;
        width: 500px;
        height: 600px;
        top: 45%;
        left:-480px;

    }
      
    #containclickme {
    background: white;
        float:right;
        height: 80px;
        width:20px;
    }

    #clickme {
        float: right;
        height: 200px;
        width: 20px;
        background: ;
    }

    #slidecontent {
        float:left;
    }

    p2
    {
            text-align: center;
            color: red;
    }
    p3
    {
            color:blue;
    }
    p4
    {
     color: #667766;
    }
    table
    {
        text-align:center;
    }
    }

    Jquery:
    Code:
    $(function () {
        $("#clickme").toggle(function () {
            $(this).parent().parent().animate({left:'0px'}, {queue: false, duration: 500});
        }, function () {
            $(this).parent().parent().animate({left:'-480px'}, {queue: false, duration: 500});
        });
    });

    This is the code i tried to use (once i added them together) it is not working can some one please help me please and thank you.
    Code:
    <html>
    <head>
     
     <script type="text/javascript">
    $(function () {
        $("#clickme").toggle(function () {
            $(this).parent().parent().animate({left:'0px'}, {queue: false, duration: 500});
        }, function () {
            $(this).parent().parent().animate({left:'-480px'}, {queue: false, duration: 500});
        });
      });
      //]]>
      </script>
      <style type="text/css">

      #slideout {
        
        position: relative;
        width: 500px;
        height: 600px;
        top: 45%;
        left:-480px;

      }
      
     #containclickme {
      background: white;
        float:right;
        height: 80px;
        width:20px;
      }

      #clickme {
        float: right;
        height: 200px;
        width: 20px;
        background: ;
      }

      #slidecontent {
        float:left;
      }

      p2
      {
            text-align: center;
            color: red;
      }
      p3
      {
            color:blue;
      }
      p4
      {
            color: #667766;
      }
      table
      {
        text-align:center;
      }
      }
      /*]]>*/
      </style>

      <title></title>
      <style type="text/css">
    td.c11 {background-color: #55CC87}
      td.c10 {background-color: #66AAFF}
      td.c9 {background-color: #00DDBB}
      td.c8 {background-color: #00EE00}
      th.c7 {background-color: #99BBAD}
      th.c6 {background-color: #DD9999}
      th.c5 {background-color: #DDAACC}
      th.c4 {background-color: #FFAA88}
      th.c3 {background-color: #F3F300}
      th.c2 {background-color: #FFAA00}
      div.c1 {text-align: center; text-decoration: underline}
      </style>
    </head>

    <body>
      <div id="slideout">
        <div id="slidecontent">
          <table id="ST" border="1px" class="Series" cellspacing="px">
            <tbody>
              <tr>
                <th colspan="2">
                  <div class="c1">
                    Metals
                  </div>
                </th>
              </tr>

              <tr>
                <th id="Alkali" class="Alkali c2">Alkali Metals</th>
              </tr>

              <tr>
                <th id="Alkaline" class="Alkaline c3">Alkaline Earth Metals</th>
              </tr>

              <tr>
                <th id="Lanthanoid" class="Lanthanoid c4">Lanthanoids</th>
              </tr>

              <tr>
                <th id="Actinoid" class="Actinoid c5">Actinoids</th>
              </tr>

              <tr>
                <th id="Transition" class="Transition c6">Transition metals</th>
              </tr>

              <tr>
                <th id="Poor" class="Poor c7">Post-transition metals</th>
              </tr>
            </tbody>
          </table><br>
          <br>

          <table id="Series1" border="2px" class="Series" cellspacing="2px">
            <tbody>
              <tr>
                <th align="right" colspan="4">
                  <div class="c1">
                    Nonmetals
                  </div>
                </th>
              </tr>

              <tr>
                <td id="Nonmetal" class="Nonmetal c8"><a>Other<br>
                Nonmetals </a></td>

                <td id="Halogen" class="Halogen c9"><a> Halogens </a></td>

                <td id="Noble" class="Noble c10"><a> Noble<br>
                 Gases </a></td>
              </tr>
            </tbody>
          </table><br>

          <table id="Series2" border="2px" class="Series" cellspacing="4px">
            <tr>
              <th>Other</th>
            </tr>

            <tr>
              <td id="Metalloid" border="2px" class="Metalloid c11" colspan="2">
              <a>Metalloids</a></td>
            </tr>
          </table><br>
          <br>

          <table id="e" class="e" border="1px" cellspacing="0px">
            <tbody>
              <tr>
                <th></th>

                <th>State</th>
              </tr>

              <tr>
                <td>C</td>

                <td>Solid</td>
              </tr>

              <tr class="tg-eve1n">
                <td>Hg</td>

                <td>Liquid</td>
              </tr>

              <tr>
                <td>H</td>

                <td>Gas</td>
              </tr>

              <tr class="tg-even1">
                <td>Rf</td>

                <td>Unknown</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div id="containclickme">
          <div id="clickme">
            K<br>
            E<br>
            Y
          </div>
        </div>
      </div>
    </body>
    </html>
    • Back to top
    Mati
    Mati
    Mati
    Active Poster


    Posts : 1928
    Reputation : 331
    Language : HTML, CSS & JavaScript
    Location : Forum Services
    • Post n°2

    Solved Re: Help with Java/Jquery

    Post by Mati Wed 15 Jan - 19:27

    Where are you trying to add them?
    • Back to top
    Sir. Mayo
    Sir. Mayo
    Sir. Mayo
    Forumember


    Male Posts : 978
    Reputation : 90
    Language : English, Some french.
    Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108
    • Post n°3

    Solved Re: Help with Java/Jquery

    Post by Sir. Mayo Wed 15 Jan - 20:33

    On and HTML page, but i dont want to add it to my Java script management i would like to be-able to allow other sites to use it.
    Like i said i was using this code



    Code:
    <html>
    <head>
     
     <script type="text/javascript">
    $(function () {
        $("#clickme").toggle(function () {
            $(this).parent().parent().animate({left:'0px'}, {queue: false, duration: 500});
        }, function () {
            $(this).parent().parent().animate({left:'-480px'}, {queue: false, duration: 500});
        });
      });
      //]]>
      </script>
      <style type="text/css">

      #slideout {
        
        position: relative;
        width: 500px;
        height: 600px;
        top: 45%;
        left:-480px;

      }
      
     #containclickme {
      background: white;
        float:right;
        height: 80px;
        width:20px;
      }

      #clickme {
        float: right;
        height: 200px;
        width: 20px;
        background: ;
      }

      #slidecontent {
        float:left;
      }

      p2
      {
            text-align: center;
            color: red;
      }
      p3
      {
            color:blue;
      }
      p4
      {
            color: #667766;
      }
      table
      {
        text-align:center;
      }
      }
      /*]]>*/
      </style>

      <title></title>
      <style type="text/css">
    td.c11 {background-color: #55CC87}
      td.c10 {background-color: #66AAFF}
      td.c9 {background-color: #00DDBB}
      td.c8 {background-color: #00EE00}
      th.c7 {background-color: #99BBAD}
      th.c6 {background-color: #DD9999}
      th.c5 {background-color: #DDAACC}
      th.c4 {background-color: #FFAA88}
      th.c3 {background-color: #F3F300}
      th.c2 {background-color: #FFAA00}
      div.c1 {text-align: center; text-decoration: underline}
      </style>
    </head>

    <body>
      <div id="slideout">
        <div id="slidecontent">
          <table id="ST" border="1px" class="Series" cellspacing="px">
            <tbody>
              <tr>
                <th colspan="2">
                  <div class="c1">
                    Metals
                  </div>
                </th>
              </tr>

              <tr>
                <th id="Alkali" class="Alkali c2">Alkali Metals</th>
              </tr>

              <tr>
                <th id="Alkaline" class="Alkaline c3">Alkaline Earth Metals</th>
              </tr>

              <tr>
                <th id="Lanthanoid" class="Lanthanoid c4">Lanthanoids</th>
              </tr>

              <tr>
                <th id="Actinoid" class="Actinoid c5">Actinoids</th>
              </tr>

              <tr>
                <th id="Transition" class="Transition c6">Transition metals</th>
              </tr>

              <tr>
                <th id="Poor" class="Poor c7">Post-transition metals</th>
              </tr>
            </tbody>
          </table><br>
          <br>

          <table id="Series1" border="2px" class="Series" cellspacing="2px">
            <tbody>
              <tr>
                <th align="right" colspan="4">
                  <div class="c1">
                    Nonmetals
                  </div>
                </th>
              </tr>

              <tr>
                <td id="Nonmetal" class="Nonmetal c8"><a>Other<br>
                Nonmetals </a></td>

                <td id="Halogen" class="Halogen c9"><a> Halogens </a></td>

                <td id="Noble" class="Noble c10"><a> Noble<br>
                 Gases </a></td>
              </tr>
            </tbody>
          </table><br>

          <table id="Series2" border="2px" class="Series" cellspacing="4px">
            <tr>
              <th>Other</th>
            </tr>

            <tr>
              <td id="Metalloid" border="2px" class="Metalloid c11" colspan="2">
              <a>Metalloids</a></td>
            </tr>
          </table><br>
          <br>

          <table id="e" class="e" border="1px" cellspacing="0px">
            <tbody>
              <tr>
                <th></th>

                <th>State</th>
              </tr>

              <tr>
                <td>C</td>

                <td>Solid</td>
              </tr>

              <tr class="tg-eve1n">
                <td>Hg</td>

                <td>Liquid</td>
              </tr>

              <tr>
                <td>H</td>

                <td>Gas</td>
              </tr>

              <tr class="tg-even1">
                <td>Rf</td>

                <td>Unknown</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div id="containclickme">
          <div id="clickme">
            K<br>
            E<br>
            Y
          </div>
        </div>
      </div>
    </body>
    </html>




    but its not working i know HTML and CSS but have trouble with the script tags.
    • Back to top
    Sir Chivas™
    Sir Chivas™
    Sir Chivas™
    Helper
    Helper


    Male Posts : 6980
    Reputation : 457
    Language : EN, FR, ES
    Location : || CSS || HTML || Graphics Designs || Support ||
    • Post n°4

    Solved Re: Help with Java/Jquery

    Post by Sir Chivas™ Wed 15 Jan - 20:55

    Hi,

    Instead of script tags, replace them with this:
    Code:
    <style>Code Here</style>
    • Back to top
    Sir. Mayo
    Sir. Mayo
    Sir. Mayo
    Forumember


    Male Posts : 978
    Reputation : 90
    Language : English, Some french.
    Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108
    • Post n°5

    Solved Re: Help with Java/Jquery

    Post by Sir. Mayo Wed 15 Jan - 21:24

    This wont effect my style sheet tag now will it? I tried it and still nothing. What i would like is a slide out dive that says key and when i slide it out is show a key for a table, The example show's what i want.
    But the div would slide out when the user clicks on it. and then it hides when they click on it again.
    • Back to top
    Sir Chivas™
    Sir Chivas™
    Sir Chivas™
    Helper
    Helper


    Male Posts : 6980
    Reputation : 457
    Language : EN, FR, ES
    Location : || CSS || HTML || Graphics Designs || Support ||
    • Post n°6

    Solved Re: Help with Java/Jquery

    Post by Sir Chivas™ Wed 15 Jan - 21:50

    Okay, I'll run some test in my test forum and see if I can make it work, all right mate?
    • Back to top
    Sir. Mayo
    Sir. Mayo
    Sir. Mayo
    Forumember


    Male Posts : 978
    Reputation : 90
    Language : English, Some french.
    Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108
    • Post n°7

    Solved Re: Help with Java/Jquery

    Post by Sir. Mayo Wed 15 Jan - 21:57

    Thanks man that will be good, no rush i have plenty of time to wait.
    • Back to top
    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°8

    Solved Re: Help with Java/Jquery

    Post by Ange Tuteur Thu 16 Jan - 1:53

    Hello Sir. Mayo,

    You need to include the jQuery library in your head, otherwise jQuery will be undefined :
    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    • Back to top
    Sir. Mayo
    Sir. Mayo
    Sir. Mayo
    Forumember


    Male Posts : 978
    Reputation : 90
    Language : English, Some french.
    Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108
    • Post n°9

    Solved Re: Help with Java/Jquery

    Post by Sir. Mayo Thu 16 Jan - 2:27

    Thank you it worked. Topic solved. Again thank you sill me, forgetting about that.
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51498
    Reputation : 3523
    Language : English
    Location : United States
    • Post n°10

    Solved Re: Help with Java/Jquery

    Post by SLGray Thu 16 Jan - 2:35

    Topic Solved & Locked



    Help with Java/Jquery Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    • Back to top

      Current date/time is Sun 22 Sep - 23:30