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 : 969
Reputation : 87
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 : 1882
Reputation : 283
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://footballforums.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 : 969
Reputation : 87
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 : 6783
Reputation : 430
Language : EN, FR, ES
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 : 969
Reputation : 87
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 : 6783
Reputation : 430
Language : EN, FR, ES
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 : 969
Reputation : 87
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 : 13028
Reputation : 2704
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 : 969
Reputation : 87
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 : 36639
Reputation : 2441
Language : English
Location : United States

http://ztwds.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