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.

MCA Ranking Table (Javascript Version)

4 posters

Go down

MCA Ranking Table (Javascript Version) Empty MCA Ranking Table (Javascript Version)

Post by Kaizer Lee November 9th 2013, 7:44 pm

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

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>
That's the code for it; however, there's a problem with it and you wonder what is it, right?

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?
Kaizer Lee
Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

MCA Ranking Table (Javascript Version) Empty Re: MCA Ranking Table (Javascript Version)

Post by Ange Tuteur November 9th 2013, 9:23 pm

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.

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>
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

MCA Ranking Table (Javascript Version) Empty Re: MCA Ranking Table (Javascript Version)

Post by Kaizer Lee November 10th 2013, 5:43 am

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?

Code:
    <a href=""><img src="IMG LINK"
    onmouseover="this.src='IMG LINK'"
    onmouseout="this.src='IMG LINK'"></a>
Well, yeah, it just hovers it and once you click it, nothing really happens... so I'd like for it to have a button effect lol.

Sorry for being demanding x_x but I'd like to finish most of the codes before Christmas o.o
Kaizer Lee
Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

MCA Ranking Table (Javascript Version) Empty Re: MCA Ranking Table (Javascript Version)

Post by Kaizer Lee November 12th 2013, 4:19 pm

Bumping this. Please help.
Kaizer Lee
Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

MCA Ranking Table (Javascript Version) Empty Re: MCA Ranking Table (Javascript Version)

Post by Ange Tuteur November 12th 2013, 5:05 pm

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>
You got this correct:
Code:
<img src="IMG LINK" onmouseover="this.src='IMG LINK'" onmouseout="this.src='IMG LINK'">
onmouseover is a different image, and onmouseout should be the default image.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

MCA Ranking Table (Javascript Version) Empty Re: MCA Ranking Table (Javascript Version)

Post by Kaizer Lee November 13th 2013, 5:21 pm

MCA Ranking Table (Javascript Version) CxT5wpy

Like this actually o.o
Kaizer Lee
Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

MCA Ranking Table (Javascript Version) Empty Re: MCA Ranking Table (Javascript Version)

Post by Ange Tuteur November 13th 2013, 5:27 pm

Well when you put it like that it brings me back to basic tables rather than divs. Razz

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>
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

MCA Ranking Table (Javascript Version) Empty Re: MCA Ranking Table (Javascript Version)

Post by Kaizer Lee November 13th 2013, 5:54 pm

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>
Sorry if the code's a bit messy since I'm mixing some codes instead. I put the tags you suggested there and now the HTML looked like this but when I previewed it, it's still the same:

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>
I decided to make it toggle to left instead and also, if you try it with the HTML I provided, when you click on the buttons, it'll push the other button too, so basically I want it to stay in place while clicking on it (Buttons), and the alignment sucked when I tried =x.

Also, how can I incorporate the button design?
Kaizer Lee
Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

MCA Ranking Table (Javascript Version) Empty Re: MCA Ranking Table (Javascript Version)

Post by Ange Tuteur November 13th 2013, 6:10 pm

You need to style the table elements, otherwise it'll just appear blank.
Code:
table, td{
border:1px solid #000;
}
td{
padding:3px;
}
You can do buttons like this:
Code:
<button>button</button>
<input type="button" value="button"></input>
Then you can place an ID on the button for functions.

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

MCA Ranking Table (Javascript Version) Empty Re: MCA Ranking Table (Javascript Version)

Post by Kaizer Lee November 14th 2013, 2:19 pm

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>
New code, but yeah, the image still moves with it =x
Kaizer Lee
Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

MCA Ranking Table (Javascript Version) Empty Re: MCA Ranking Table (Javascript Version)

Post by Kaizer Lee November 17th 2013, 8:49 am

bump
Kaizer Lee
Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

MCA Ranking Table (Javascript Version) Empty Re: MCA Ranking Table (Javascript Version)

Post by Ange Tuteur November 17th 2013, 2:56 pm

Use this CSS for the panels:
Code:
#panel, #panel2{position:absolute;}
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

MCA Ranking Table (Javascript Version) Empty Re: MCA Ranking Table (Javascript Version)

Post by Ultron's Vision November 19th 2013, 12:11 pm

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.
Ultron's Vision
Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

MCA Ranking Table (Javascript Version) Empty Re: MCA Ranking Table (Javascript Version)

Post by Kaizer Lee November 23rd 2013, 11:03 am

I'll just do this differently. Thanks, you can archive this now or w.e.
Kaizer Lee
Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

MCA Ranking Table (Javascript Version) Empty Re: MCA Ranking Table (Javascript Version)

Post by SLGray November 23rd 2013, 8:21 pm

Locked as Requested


MCA Ranking Table (Javascript Version) Slgray10

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

Male Posts : 51463
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top


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