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.

MCA Ranking Table (Javascript Version)

View previous topic View next topic Go down

MCA Ranking Table (Javascript Version)

Post by Kaizer Lee on 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
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

Re: MCA Ranking Table (Javascript Version)

Post by Ange Tuteur on 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
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Re: MCA Ranking Table (Javascript Version)

Post by Kaizer Lee on 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
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

Re: MCA Ranking Table (Javascript Version)

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

Bumping this. Please help.

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

Re: MCA Ranking Table (Javascript Version)

Post by Ange Tuteur on 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
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Re: MCA Ranking Table (Javascript Version)

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



Like this actually o.o

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

Re: MCA Ranking Table (Javascript Version)

Post by Ange Tuteur on 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
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Re: MCA Ranking Table (Javascript Version)

Post by Kaizer Lee on 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
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

Re: MCA Ranking Table (Javascript Version)

Post by Ange Tuteur on 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
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Re: MCA Ranking Table (Javascript Version)

Post by Kaizer Lee on 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
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

Re: MCA Ranking Table (Javascript Version)

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

bump

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

Re: MCA Ranking Table (Javascript Version)

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

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

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Re: MCA Ranking Table (Javascript Version)

Post by Ultron's Vision on 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
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

Re: MCA Ranking Table (Javascript Version)

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

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

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

Re: MCA Ranking Table (Javascript Version)

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

Locked as Requested


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


SLGray
Administrator
Administrator

Male Posts : 35667
Reputation : 2375
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