The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Help with Java/Jquery

View previous topic View next topic Go down

Solved Help with Java/Jquery

Post by Sir. Mayo on January 15th 2014, 7:21 pm

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>

Sir. Mayo
Forumember

Male Posts : 960
Reputation : 84
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: Help with Java/Jquery

Post by Mati on January 15th 2014, 7:27 pm

Where are you trying to add them?

Mati
Active Poster

Posts : 1873
Reputation : 281
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://elite-gaming.forumotion.net/

Back to top Go down

Solved Re: Help with Java/Jquery

Post by Sir. Mayo on January 15th 2014, 8:33 pm

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.

Sir. Mayo
Forumember

Male Posts : 960
Reputation : 84
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: Help with Java/Jquery

Post by Sir Chivas™ on January 15th 2014, 8:55 pm

Hi,

Instead of script tags, replace them with this:
Code:
<style>Code Here</style>



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Help with Java/Jquery

Post by Sir. Mayo on January 15th 2014, 9:24 pm

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.

Sir. Mayo
Forumember

Male Posts : 960
Reputation : 84
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: Help with Java/Jquery

Post by Sir Chivas™ on January 15th 2014, 9:50 pm

Okay, I'll run some test in my test forum and see if I can make it work, all right mate?



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Help with Java/Jquery

Post by Sir. Mayo on January 15th 2014, 9:57 pm

Thanks man that will be good, no rush i have plenty of time to wait.

Sir. Mayo
Forumember

Male Posts : 960
Reputation : 84
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: Help with Java/Jquery

Post by Ange Tuteur on January 16th 2014, 1:53 am

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>

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Help with Java/Jquery

Post by Sir. Mayo on January 16th 2014, 2:27 am

Thank you it worked. Topic solved. Again thank you sill me, forgetting about that.

Sir. Mayo
Forumember

Male Posts : 960
Reputation : 84
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: Help with Java/Jquery

Post by SLGray on January 16th 2014, 2:35 am

Topic Solved & Locked


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


SLGray
Administrator
Administrator

Male Posts : 35622
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum