MCA Ranking Table (Javascript Version)
4 posters
Page 1 of 1
MCA Ranking Table (Javascript Version)
So, guys, I've been studying coding and I came up with this nifty trick: A ranking table. This could be used for gaming sites who uses ranking.
It's really not that hard to do and all the examples in this one were from W3 school 'cause I got too lazy to do my own example :L
Anyway, I didn't wanna waste HTML space so I wanted for another option in the same page, but when I tried to duplicate the code, only the first one works.
Does anyone know how to incorporate both of them in the same page?
It's really not that hard to do and all the examples in this one were from W3 school 'cause I got too lazy to do my own example :L
- Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
width: 100px;
}
#flip {
background-image:url('http://i.imgur.com/HEQU1f6.png');
}
#panel
{
padding:50px;
display:none;
width: 100%;
}
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<br />
<div id="panel"><table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
</table></div>
</body>
</html>
Anyway, I didn't wanna waste HTML space so I wanted for another option in the same page, but when I tried to duplicate the code, only the first one works.
Does anyone know how to incorporate both of them in the same page?
Re: MCA Ranking Table (Javascript Version)
Hello Kaizer Lee,
To duplicate these you'll have to give the new table a different ID from the old one. All you need to do is just create another script, change the selectors names, edit the css with those selectors, and then update the selectors names on your elements.
To make it simple I named them #flip2 and #panel2. You can take a look at the example I have below in an HTML page.
To duplicate these you'll have to give the new table a different ID from the old one. All you need to do is just create another script, change the selectors names, edit the css with those selectors, and then update the selectors names on your elements.
To make it simple I named them #flip2 and #panel2. You can take a look at the example I have below in an HTML page.
- Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
$(document).ready(function(){
$("#flip2").click(function(){
$("#panel2").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel, #flip, #panel2, #flip2
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
width: 100px;
}
#flip, #flip2 {
background-image:url('http://i.imgur.com/HEQU1f6.png');
}
#panel, #panel2
{
padding:50px;
display:none;
width: 100%;
}
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<br />
<div id="panel"><table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
</table></div><br />
<div id="flip2">Click to slide the panel down or up</div>
<br />
<div id="panel2"><table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
</table></div>
</body>
</html>
Re: MCA Ranking Table (Javascript Version)
Oh yeah! I forgot to put a copy in the Javascript xD.
Anyway, there are only 2 problems left. If you use it in here: http://w3schools.com/css/tryit.asp?filename=trycss_default you'll notice how they're below each other, right?
I tried putting both of them in a table but it overlaps or collides with each other, how can they be in the same alignment without hitting each other? I also plan on doing 6 buttons so the other 3 should be beneath them, so basically, how do I create 6 tables overall (3 Above and 3 Below)?
And the second problem is that I want to incorporate the "Click the panel... bla bla bla" into a button style. I know I could just ditch the CSS for them and change it to <button id=""> but that doesn't cut it lol. I'd like it for it to be buttons with style and with a hover color o.o
I know you can just do a mouseover and mouseout on it, but that's not what I'm after. What I'm after is that before hovering, it looks like a normal button, and once you hover on it, it has a specific color (Red as much as possible) and then when you click it, it still has that button effect when you click it.
If I'm right, is it something like this?
Sorry for being demanding x_x but I'd like to finish most of the codes before Christmas o.o
Anyway, there are only 2 problems left. If you use it in here: http://w3schools.com/css/tryit.asp?filename=trycss_default you'll notice how they're below each other, right?
I tried putting both of them in a table but it overlaps or collides with each other, how can they be in the same alignment without hitting each other? I also plan on doing 6 buttons so the other 3 should be beneath them, so basically, how do I create 6 tables overall (3 Above and 3 Below)?
And the second problem is that I want to incorporate the "Click the panel... bla bla bla" into a button style. I know I could just ditch the CSS for them and change it to <button id=""> but that doesn't cut it lol. I'd like it for it to be buttons with style and with a hover color o.o
I know you can just do a mouseover and mouseout on it, but that's not what I'm after. What I'm after is that before hovering, it looks like a normal button, and once you hover on it, it has a specific color (Red as much as possible) and then when you click it, it still has that button effect when you click it.
If I'm right, is it something like this?
- Code:
<a href=""><img src="IMG LINK"
onmouseover="this.src='IMG LINK'"
onmouseout="this.src='IMG LINK'"></a>
Sorry for being demanding x_x but I'd like to finish most of the codes before Christmas o.o
Re: MCA Ranking Table (Javascript Version)
I am not quite sure what you mean by "3 above and 3 below". Do you mean something like this maybe?
- Code:
<style>
.myDiv{
background-color:#999;
border:1px solid #CCC;
min-height:250px;
margin:5px 10% 5px 10%;
padding:0px 5px 5px 5px;
word-wrap:break-word;
overflow:hidden;
position:relative;
}
.headContent{
box-shadow:0px 6px 6px rgba(255,255,255, 0.5) inset;
border-bottom:1px solid #CCC;
background-color:#BBB;
font-weight:bold;
font-size:20px;
color:#444;
text-align:center;
position:absolute;
right:0px;
left:0px;
}
.content{
margin-top:5px;
word-wrap:break-word;
}
</style>
<div class="myDiv"><div class="headContent">Head Content</div></br><div class="content">Body content</div></div>
<div class="myDiv"><div class="headContent">Head Content</div></br><div class="content">Body content</div></div>
<div class="myDiv"><div class="headContent">Head Content</div></br><div class="content">Body content</div></div>
<div class="myDiv"><div class="headContent">Head Content</div></br><div class="content">Body content</div></div>
<div class="myDiv"><div class="headContent">Head Content</div></br><div class="content">Body content</div></div>
<div class="myDiv"><div class="headContent">Head Content</div></br><div class="content">Body content</div></div>
- Code:
<img src="IMG LINK" onmouseover="this.src='IMG LINK'" onmouseout="this.src='IMG LINK'">
Re: MCA Ranking Table (Javascript Version)
Well when you put it like that it brings me back to basic tables rather than divs.
From your example it should look like this:
Table >
TR1 > TD1 > TD2 > TD3
TR2 > TD1 > TD2 > TD3
From your example it should look like this:
Table >
TR1 > TD1 > TD2 > TD3
TR2 > TD1 > TD2 > TD3
- Code:
<table><tr><td>ROW 1 CELL 1</td><td>ROW 1 CELL 2</td><td>ROW 1 CELL 3</td></tr><tr><td>ROW 2 CELL 1</td><td>ROW 2 CELL 2</td><td>ROW 2 CELL 3</td></tr></table>
Re: MCA Ranking Table (Javascript Version)
- Code:
<html>
<head>
<title>Page Not Found</title>
<style type="text/css">body { background-color: #8A1111; font-family: sans-serif; } a { color: #8A1111; cursor: default; bottom: 0px;} h1 { font-size: 2em; } p a { cursor: pointer; } #maintenance {text-shadow: 0 1px #FFF; box-shadow: inset 0 0 10px; border-radius: 7px;color: #8A1111;background-color: #F2E1E1;text-align: center;width: 60%;margin-left: auto;margin-right: auto;padding: 20px 20px 20px 20px;} #container { text-align: center; }</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("#panel").hide();
$("#flip").click(function () {
$("#panel").animate({width:'toggle'},800);;
return false;
});
});
$(document).ready(function () {
$("#panel2").hide();
$("#flip2").click(function () {
$("#panel2").animate({width:'toggle'},800);;
return false;
});
});
</script>
<style type="text/css">
#panel, #flip, #panel2, #flip2
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
width: 100px;
}
#flip, #flip2 {
background-image:url('http://i.imgur.com/HEQU1f6.png');
}
#panel, #panel2
{
padding:50px;
display:none;
width: 100%;
}
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<div id="container">
<img src="http://i381.photobucket.com/albums/oo253/Omnislash/HB1_zps29cf8197.png" width="347" height="110"> <br /><br />
<div id="maintenance">
<div id="flip">Click to slide the panel down or up</div>
<br />
<div id="panel"><table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
</table></div> <div id="flip2">Click to slide the panel down or up</div>
<br />
<div id="panel2"><table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
</table></div>
<h1>Error 404 - File not Found. </h1>
The page you are looking for does not exist, <span onclick="window.history.back()" style="cursor:pointer; text-decoration:underline">click here to return to the previous page</span>.
<p>If you believe this is a mistake, please contact the <a href="/u1">Administrator</a>. Thank you.</p>
</div>
</div>
</body>
</html>
- Code:
<div id="container">
<img src="http://i381.photobucket.com/albums/oo253/Omnislash/HB1_zps29cf8197.png" width="347" height="110"> <br /><br />
<div id="maintenance">
<table><tr><td><div id="flip">Click to slide the panel down or up</div>
<br />
<div id="panel"><table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
</table></div> </td>
<td><div id="flip2">Click to slide the panel down or up</div>
<div id="panel2"><table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
</table></div></td></tr></table>
Also, how can I incorporate the button design?
Re: MCA Ranking Table (Javascript Version)
You need to style the table elements, otherwise it'll just appear blank.
If you want them to stay in place I would recommend using absolute positioning for the table that's called. Then to position the table you just have to tweak the left or right. (best when using percentages) You can also bind it to one of your parent elements by relatively positioning the parent.
- Code:
table, td{
border:1px solid #000;
}
td{
padding:3px;
}
- Code:
<button>button</button>
<input type="button" value="button"></input>
If you want them to stay in place I would recommend using absolute positioning for the table that's called. Then to position the table you just have to tweak the left or right. (best when using percentages) You can also bind it to one of your parent elements by relatively positioning the parent.
Re: MCA Ranking Table (Javascript Version)
- Code:
<html>
<head>
<title>Page Not Found</title>
<style type="text/css">body { background-color: #8A1111; font-family: sans-serif; } a { color: #8A1111; cursor: default; bottom: 0px;} h1 { font-size: 2em; } p a { cursor: pointer; } #maintenance {text-shadow: 0 1px #FFF; box-shadow: inset 0 0 10px; border-radius: 7px;color: #8A1111;background-color: #F2E1E1;text-align: center;width: 60%;margin-left: auto;margin-right: auto;padding: 20px 20px 20px 20px;} #container { text-align: center; }</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
$(document).ready(function(){
$("#flip2").click(function(){
$("#panel2").slideToggle("slow");
});
});
</script>
<style type="text/css">
table, td{
border:1px solid #000;
}
td{
padding:3px;
}
#panel, #flip, #panel2, #flip2
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
width: 100px;
}
#flip, #flip2 {
background-image:url('http://i.imgur.com/HEQU1f6.png');
position: relative;
}
#flip {
top: 10px; }
#panel, #panel2
{
padding:50px;
display:none;
width: 100%;
}
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<div id="container">
<img src="http://i381.photobucket.com/albums/oo253/Omnislash/HB1_zps29cf8197.png" width="347" height="110"> <br /><br />
<div id="maintenance">
<table><tr><td><div id="flip">Click to slide the panel down or up</div>
<br />
<div id="panel"><table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
</table></div> </td>
<td><div id="flip2">Click to slide the panel down or up</div>
<div id="panel2"><table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
</table></div></td></tr></table>
<h1>Error 404 - File not Found. </h1>
The page you are looking for does not exist, <span onclick="window.history.back()" style="cursor:pointer; text-decoration:underline">click here to return to the previous page</span>.
<p>If you believe this is a mistake, please contact the <a href="/u1">Administrator</a>. Thank you.</p>
</div>
</div>
</body>
</html>
Re: MCA Ranking Table (Javascript Version)
Use this CSS for the panels:
- Code:
#panel, #panel2{position:absolute;}
Re: MCA Ranking Table (Javascript Version)
Could you elaborate a bit more what exactly you're trying to achieve with this?
I've been reading this and struggled to find what you've been looking for.
I've been reading this and struggled to find what you've been looking for.
Re: MCA Ranking Table (Javascript Version)
I'll just do this differently. Thanks, you can archive this now or w.e.
Re: MCA Ranking Table (Javascript Version)
Locked as Requested
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.
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum