HomeHelp with Java/Jquery
5 posters
Page 1 of 1
Help with Java/Jquery
by Sir. Mayo Wed 15 Jan - 20: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:
CSS:
Jquery:
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.
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
-
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 -
Mati- Active Poster
- Posts : 1932
Reputation : 333
Language : HTML, CSS & JavaScript
Location : Forum Services -
Re: Help with Java/Jquery
by Sir. Mayo Wed 15 Jan - 21: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
but its not working i know HTML and CSS but have trouble with the script tags.
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
- 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 -
Re: Help with Java/Jquery
by Sir Chivas™ Wed 15 Jan - 21:55
Hi,
Instead of script tags, replace them with this:
Instead of script tags, replace them with this:
- Code:
<style>Code Here</style>
Sir Chivas™- Helper
- Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support || -
Re: Help with Java/Jquery
by Sir. Mayo Wed 15 Jan - 22: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.
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
- 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 -
Re: Help with Java/Jquery
by Sir Chivas™ Wed 15 Jan - 22:50
Okay, I'll run some test in my test forum and see if I can make it work, all right mate?
Sir Chivas™- Helper
- Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support || -
Re: Help with Java/Jquery
by Sir. Mayo Wed 15 Jan - 22:57
Thanks man that will be good, no rush i have plenty of time to wait.
Sir. Mayo- Forumember
- 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 -
Re: Help with Java/Jquery
by Ange Tuteur Thu 16 Jan - 2:53
Hello Sir. Mayo,
You need to include the jQuery library in your head, otherwise jQuery will be undefined :
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
- Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania -
Re: Help with Java/Jquery
by Sir. Mayo Thu 16 Jan - 3:27
Thank you it worked. Topic solved. Again thank you sill me, forgetting about that.
Sir. Mayo- Forumember
- 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 -
Re: Help with Java/Jquery
by SLGray Thu 16 Jan - 3:35
Topic Solved & Locked
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray- Administrator
- Posts : 51549
Reputation : 3523
Language : English
Location : United States -
Similar topicsPage 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
