Kalian Member Baru, Yuk Perkenalan Dahulu. 1 Member 1 Thread.
Selamat datang di Forum Atlanta~Halo, kalian masih menjadi tamu ya di forum ini ? Kenapa masih jadi tamu ayok ikutan kita gabung di forum ini.
Banyak loh tutorial yang dapat kamu dapatkan di sini, kalian juga bisa tanya-tanya tentang masalah blog/forum kok di sini.
Langsung aja yok daftar kalau kalian belum daftar di sini Register, Kalau sudah punya IDnya langsung aja ya Login

You are not connected. Please login or register

 

Bagaimana cara jika kita meng-klik tombol yang kita buat,menghasilkan sesuatu yang ingin di-display di bawah tombol tersebut?

Oops! Sepertinya ada sedikit kesalahan ...

[#22124]

Atlanta telah memblok tamu untuk melihat konten yang ada, silahkan mendaftar untuk dapat melihat isi konten kami.


Need Help?

Message (Halaman 1 dari 1)

#1
 on 18/7/2013, 10:52

Retired Staff


Retired Staff
Halo Senang

Sakura mau nanya,gimana cara jika kita meng-klik tombol yang kita buat,akan menghasilkan sesuatu yang mau kita display di bawah tombol itu?

Misal,kakak bisa lihat tombol waktu di-hover jadi biru di forum kak Kitsune Senang

[You must be registered and logged in to see this link.] sampe bawah,ada widget namanya "Kuri",yang ada tulisan "Duel Academy Rangkings And Scores"

trus,sakura maunya waktu di-klik,akan menghasilkan sesuatu yang mau kita display di bawah button tersebut...

Misal ini nih: 

[You must be registered and logged in to see this link.]

Gimana ya caranya? Senyum

Utk html button yang waktu di-hover jadi biru itu Sakura tau Senang

Makasih Senyum

Code button biru: 

Code:
<style type="text/css">

.pretty-table
{
  padding: 0;
  margin: 0;
  border-collapse: collapse;
  border: 1px solid #333;
  font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color: #a6a6a6;
  background: #303030;
  width:inherit !important;
}

.pretty-table caption
{
  caption-side: bottom;
  font-size: 0.9em;
  font-style: italic;
  text-align: right;
  padding: 0.5em 0;
}

.pretty-table th, .pretty-table td
{
  border: 1px dotted #666;
  padding: 0.5em;
  text-align: left;
  color: #a6a6a6;
}
.pretty-table td+td+td+td+td+td+td+td+td{ color: #f9f469; }


.pretty-table th[scope=col]
{
  color: #000;
  background-color: #8fadcc;
  text-transform: uppercase;
  font-size: 0.9em;
  border-bottom: 2px solid #333;
  border-right: 2px solid #333;
}

.pretty-table th+th[scope=col]
{
  color: #fff;
  background-color: #7d98b3;
  border-right: 1px dotted #666;
}

.pretty-table th[scope=row]
{
  background-color: #b8cfe5;
  border-right: 2px solid #333;
}

.pretty-table tr.alt th, .pretty-table tr.alt td
{
  color: #2a4763;
}

.pretty-table tr:hover th[scope=row], .pretty-table tr:hover td
{
  background-color: #464545;
  font-weight:bold;
  cursor:pointer;
}


.pretty-table2
{
  padding: 0;
  margin: 0;
  border-collapse: collapse;
  border: 1px solid #333;
  font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color: #a6a6a6;
  background: #303030;
}

.pretty-table2 caption
{
  caption-side: bottom;
  font-size: 0.9em;
  font-style: italic;
  text-align: right;
  padding: 0.5em 0;
}

.pretty-table2 th, .pretty-table2 td
{
  border: 1px dotted #666;
  padding: 0.5em;
  text-align: left;
  color: #a6a6a6;
}
.pretty-table2 td+td+td+td+td+td+td+td+td{ color: #f9f469; }


.pretty-table2 th[scope=col]
{
  color: #000;
  background-color: #8fadcc;
  text-transform: uppercase;
  font-size: 0.9em;
  border-bottom: 2px solid #333;
  border-right: 2px solid #333;
}

.pretty-table2 th+th[scope=col]
{
  color: #fff;
  background-color: #7d98b3;
  border-right: 1px dotted #666;
}

.pretty-table2 th[scope=row]
{
  background-color: #b8cfe5;
  border-right: 2px solid #333;
}

.pretty-table2 tr.alt th, .pretty-table2 tr.alt td
{
  color: #2a4763;
}

.pretty-table2 tr:hover th[scope=row], .pretty-table2 tr:hover td
{
  background-color: #464545;
  font-weight:bold;
  cursor:pointer;
}


.button3 {
   display: inline-block;
   text-decoration: none;
   padding: 10px 15px !important;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   position: relative;
   font-weight: bold;
   
   
   height:50px !important;
   -webkit-box-shadow: inset 0 -5px 0 rgba(0,0,0,0.3);
   -moz-box-shadow: inset 0 -5px 0 rgba(0,0,0,0.3);
   box-shadow: inset 0 -5px 0 rgba(0,0,0,0.3);
   background: #303030 !important;
   width:100px;
   color:#1E7DA6;
}

.button3:active {
   -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
   -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
   box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
   top: 3px;
   padding-bottom: 7px;
   background: #1E7DA6 !important;
}
.button3:hover {
   background: #1E7DA6 !important;
   color:black;
}
</style>
<script>

function bubbleSort(a)
{
    var swapped;
    do {
        swapped = false;
        for (var i=0; i < a.length-1; i++) {
            if (eval(a[i][5]) < eval(a[i+1][5])) {
                var temp = a[i];
                a[i] = a[i+1];
                a[i+1] = temp;
                swapped = true;
            }
         if (eval(a[i][5]) == eval(a[i+1][5])) {
            if (eval(a[i][3]) > eval(a[i+1][3])) {
               var temp = a[i];
               a[i] = a[i+1];
               a[i+1] = temp;
               swapped = true;
            }
            }
        }
    } while (swapped);
}

function bubbleSort2(a)
{
    var swapped;
    do {
        swapped = false;
        for (var i=0; i < a.length-1; i++) {
            if (eval(a[i][7]) < eval(a[i+1][7])) {
                var temp = a[i];
                a[i] = a[i+1];
                a[i+1] = temp;
                swapped = true;
            }
         if (eval(a[i][7]) == eval(a[i+1][7])) {
            if (eval(a[i][4]) > eval(a[i+1][4])) {
               var temp = a[i];
               a[i] = a[i+1];
               a[i+1] = temp;
               swapped = true;
            }
            if (eval(a[i][4]) == eval(a[i+1][4])) {
               if (eval(a[i][3]) < eval(a[i+1][3])) {
               var temp = a[i];
               a[i] = a[i+1];
               a[i+1] = temp;
               swapped = true;
            }
            }
            }
        }
    } while (swapped);
}

function bubbleSort3(a)
{
    var swapped;
    do {
        swapped = false;
        for (var i=0; i < a.length-1; i++) {
            if (eval(a[i][3]) < eval(a[i+1][3])) {
                var temp = a[i];
                a[i] = a[i+1];
                a[i+1] = temp;
                swapped = true;
            }
         if (eval(a[i][3]) == eval(a[i+1][3])) {
            if (eval(a[i][1]) < eval(a[i+1][1])) {
               var temp = a[i];
               a[i] = a[i+1];
               a[i+1] = temp;
               swapped = true;
            }
            if (eval(a[i][1]) == eval(a[i+1][1])) {
               if (eval(a[i][2]) < eval(a[i+1][2])) {
               var temp = a[i];
               a[i] = a[i+1];
               a[i+1] = temp;
               swapped = true;
            }
            }
            

           

            }
         
        }
    } while (swapped);
}

function league_rankings(){
jQuery("#mytable6").hide("slow");
jQuery("#mytable5").hide("slow");
jQuery("#mytable4").hide("slow");
jQuery("#mytable2").hide("slow");
jQuery("#mytable").show("slow");
}
function proleague_rankings(){
jQuery("#mytable6").hide("slow");
jQuery("#mytable5").hide("slow");
jQuery("#mytable4").hide("slow");
jQuery("#mytable").hide("slow");
jQuery("#mytable2").show("slow");
}
function dalivesseason_rankings(){
jQuery("#mytable6").hide("slow");
jQuery("#mytable5").hide("slow");
jQuery("#mytable2").hide("slow");
jQuery("#mytable").hide("slow");
jQuery("#mytable4").show("slow");
}
function dalivesoverall_rankings(){
jQuery("#mytable6").hide("slow");
jQuery("#mytable4").hide("slow");
jQuery("#mytable2").hide("slow");
jQuery("#mytable").hide("slow");
jQuery("#mytable5").show("slow");
}
function daregulars_rankings(){
jQuery("#mytable").hide("slow");
jQuery("#mytable2").hide("slow");
jQuery("#mytable4").hide("slow");
jQuery("#mytable5").hide("slow");
jQuery("#mytable6").show("slow");
}

function insertpodloga(){

/*taking season numbers*/
if(jQuery(location).attr('href').indexOf('duelacademy')>-1){
var myIFrame= document.getElementById('podloga').contentWindow.document.getElementById('seasonnumbers').innerHTML;
var lista=new Array();
var seasonlista= new Array();
lista0= myIFrame.split("<br>");
var i=0;
for(i=0; i<lista0.length-1;i++){
seasonlista.push(lista0[i].split(","));
}
seasonlista.splice(0,1);
/*taking season numbers end*/

var myIFrame= document.getElementById('podloga').contentWindow.document.getElementById('rankings').innerHTML;
var lista=new Array();
var konacnalista= new Array();
lista= myIFrame.split("<br>");
var i=0;
for(i=0; i<lista.length-1;i++){
konacnalista.push(lista[i].split(","));
}


konacnalista.splice(0,1);
for(var j=0; j<konacnalista.length;j++){
konacnalista[j][3]=eval(konacnalista[j][1])+eval(konacnalista[j][2]);
var pts=eval(konacnalista[j][1])-eval(konacnalista[j][2]);
konacnalista[j][5]=pts;
if(pts<0){pts=0;}
konacnalista[j][4]=pts;
}
bubbleSort(konacnalista);

var myIFrame2= document.getElementById('podloga').contentWindow.document.getElementById('rankings4').innerHTML;
var lista2=new Array();
var konacnalista2= new Array();
lista2= myIFrame2.split("<br>");
var i=0;
for(i=0; i<lista2.length-1;i++){
konacnalista2.push(lista2[i].split(","));
}

konacnalista2.splice(0,1);
for(var j=0; j<konacnalista2.length;j++){
var pts=eval(10*konacnalista2[j][1])+eval(5*konacnalista2[j][2]);
konacnalista2[j][3]=pts;
if(pts<0){pts=0;}
konacnalista2[j][3]=pts;
}
bubbleSort3(konacnalista2);

var myIFrame3= document.getElementById('podloga').contentWindow.document.getElementById('rankings5').innerHTML;
var lista3=new Array();
var konacnalista3= new Array();
lista3= myIFrame3.split("<br>");
var i=0;
for(i=0; i<lista3.length-1;i++){
konacnalista3.push(lista3[i].split(","));
}

konacnalista3.splice(0,1);
for(var j=0; j<konacnalista3.length;j++){
var pts=eval(10*konacnalista3[j][1])+eval(5*konacnalista3[j][2]);
konacnalista3[j][3]=pts;
if(pts<0){pts=0;}
konacnalista3[j][3]=pts;
}
bubbleSort3(konacnalista3);




row=new Array();
cell=new Array();

row_num=konacnalista.length;
row_num2=konacnalista2.length;
row_num3=konacnalista3.length; //edit this value to suit
cell_num=6; //edit this value to suit
cell_num2=5;
cell_num3=5;

/*league rankings*/

tab=document.createElement('table');
tab.setAttribute('class','pretty-table');


tbo=document.createElement('tbody');

rownula_naslov0=document.createElement('tr');
rownula_naslov0.setAttribute('style', 'font-weight:bold; font-size:20px; text-align:center; color:white; cursor:auto;');
cellnula0_naslov0=document.createElement('td');
contnula_naslov0=document.createTextNode(seasonlista[0]);
cellnula0_naslov0.setAttribute('colspan','6');
cellnula0_naslov0.setAttribute('style', 'background: #022053; color: #000; cursor:auto; width:750px !important;');
cellnula0_naslov0.appendChild(contnula_naslov0);
rownula_naslov0.appendChild(cellnula0_naslov0);

rownula=document.createElement('tr');
rownula.setAttribute('style', 'font-weight:bold');

cellnula0=document.createElement('td');
contnula=document.createTextNode("RANK");
cellnula0.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula0.appendChild(contnula);
rownula.appendChild(cellnula0);

cellnula1=document.createElement('td');
contnula1=document.createTextNode("DUELIST NAME");
cellnula1.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula1.width="300px";
cellnula1.appendChild(contnula1);
rownula.appendChild(cellnula1);

cellnula2=document.createElement('td');
contnula2=document.createTextNode("WON");
cellnula2.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula2.appendChild(contnula2);
rownula.appendChild(cellnula2);

cellnula2=document.createElement('td');
contnula2=document.createTextNode("LOST");
cellnula2.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula2.appendChild(contnula2);
rownula.appendChild(cellnula2);

cellnula3=document.createElement('td');
contnula3=document.createTextNode("PLAYED");
cellnula3.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula3.appendChild(contnula3);
rownula.appendChild(cellnula3);

cellnula4=document.createElement('td');
contnula4=document.createTextNode("PTS");
cellnula4.setAttribute('style', 'background: #022053; color: yellow; cursor:auto;');
cellnula4.appendChild(contnula4);
rownula.appendChild(cellnula4);

tbo.appendChild(rownula_naslov0);
tbo.appendChild(rownula);

for(c=0;c<row_num;c++){
row[c]=document.createElement('tr');
cell[0]=document.createElement('td');
cont2=document.createTextNode(c+1);
cell[0].appendChild(cont2);
row[c].appendChild(cell[0]);
for(k=1;k<cell_num;k++) {
cell[k]=document.createElement('td');
cont=document.createTextNode(konacnalista[c][k-1]);
cell[k].appendChild(cont);
row[c].appendChild(cell[k]);
}
tbo.appendChild(row[c]);
}

tab.appendChild(tbo);
document.getElementById('mytable').appendChild(tab);


/*dalives season rankings*/


tab=document.createElement('table');
tab.setAttribute('class','pretty-table2');


tbo=document.createElement('tbody');

rownula_naslov0=document.createElement('tr');
rownula_naslov0.setAttribute('style', 'font-weight:bold; font-size:20px; text-align:center; color:white; cursor:auto;');
cellnula0_naslov0=document.createElement('td');
contnula_naslov0=document.createTextNode(seasonlista[1]);
cellnula0_naslov0.setAttribute('colspan','5');
cellnula0_naslov0.setAttribute('style', 'background: #022053; color: #000; cursor:auto; width:750px !important;');
cellnula0_naslov0.appendChild(contnula_naslov0);
rownula_naslov0.appendChild(cellnula0_naslov0);

rownula=document.createElement('tr');
rownula.setAttribute('style', 'font-weight:bold');

cellnula0=document.createElement('td');
contnula=document.createTextNode("RANK");
cellnula0.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula0.appendChild(contnula);
rownula.appendChild(cellnula0);

cellnula1=document.createElement('td');
contnula1=document.createTextNode("DUELIST NAME");
cellnula1.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula1.width="280px !important";
cellnula1.appendChild(contnula1);
rownula.appendChild(cellnula1);

cellnula3=document.createElement('td');
contnula3=document.createTextNode("1st PLACE");
cellnula3.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula3.appendChild(contnula3);
rownula.appendChild(cellnula3);

cellnula4=document.createElement('td');
contnula4=document.createTextNode("2nd PLACE");
cellnula4.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula4.appendChild(contnula4);
rownula.appendChild(cellnula4);

cellnula6=document.createElement('td');
contnula6=document.createTextNode("PTS");
cellnula6.setAttribute('style', 'background: #022053; color: yellow; cursor:auto;');
cellnula6.appendChild(contnula6);
rownula.appendChild(cellnula6);


tbo.appendChild(rownula_naslov0);
tbo.appendChild(rownula);

for(c=0;c<row_num2;c++){
row[c]=document.createElement('tr');
cell[0]=document.createElement('td');
cont2=document.createTextNode(c+1);
cell[0].appendChild(cont2);
row[c].appendChild(cell[0]);
for(k=1;k<cell_num2;k++) {
cell[k]=document.createElement('td');
cont=document.createTextNode(konacnalista2[c][k-1]);
cell[k].appendChild(cont);
row[c].appendChild(cell[k]);
}
tbo.appendChild(row[c]);
}

tab.appendChild(tbo);
document.getElementById('mytable4').appendChild(tab);





/*dalives overall rankings*/

tab=document.createElement('table');
tab.setAttribute('class','pretty-table2');


tbo=document.createElement('tbody');

rownula_naslov0=document.createElement('tr');
rownula_naslov0.setAttribute('style', 'font-weight:bold; font-size:20px; text-align:center; color:white; cursor:auto;');
cellnula0_naslov0=document.createElement('td');
contnula_naslov0=document.createTextNode("DA LIVE TOURNAMENT OVERALL RANKINGS");
cellnula0_naslov0.setAttribute('colspan','5');
cellnula0_naslov0.setAttribute('style', 'background: #022053; color: #000; cursor:auto; width:750px !important;');
cellnula0_naslov0.appendChild(contnula_naslov0);
rownula_naslov0.appendChild(cellnula0_naslov0);

rownula=document.createElement('tr');
rownula.setAttribute('style', 'font-weight:bold');

cellnula0=document.createElement('td');
contnula=document.createTextNode("RANK");
cellnula0.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula0.appendChild(contnula);
rownula.appendChild(cellnula0);

cellnula1=document.createElement('td');
contnula1=document.createTextNode("DUELIST NAME");
cellnula1.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula1.width="280px !important";
cellnula1.appendChild(contnula1);
rownula.appendChild(cellnula1);

cellnula3=document.createElement('td');
contnula3=document.createTextNode("1st PLACE");
cellnula3.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula3.appendChild(contnula3);
rownula.appendChild(cellnula3);

cellnula4=document.createElement('td');
contnula4=document.createTextNode("2nd PLACE");
cellnula4.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
cellnula4.appendChild(contnula4);
rownula.appendChild(cellnula4);

cellnula6=document.createElement('td');
contnula6=document.createTextNode("PTS");
cellnula6.setAttribute('style', 'background: #022053; color: yellow; cursor:auto;');
cellnula6.appendChild(contnula6);
rownula.appendChild(cellnula6);


tbo.appendChild(rownula_naslov0);
tbo.appendChild(rownula);

for(c=0;c<row_num3;c++){
row[c]=document.createElement('tr');
cell[0]=document.createElement('td');
cont2=document.createTextNode(c+1);
cell[0].appendChild(cont2);
row[c].appendChild(cell[0]);
for(k=1;k<cell_num3;k++) {
cell[k]=document.createElement('td');
cont=document.createTextNode(konacnalista3[c][k-1]);
cell[k].appendChild(cont);
row[c].appendChild(cell[k]);
}
tbo.appendChild(row[c]);
}

tab.appendChild(tbo);
document.getElementById('mytable5').appendChild(tab);
}
else{ return false;}
}
</script>
<style id="wysiwyg_css" type="text/css">.wysiwyg {background: #0a0a0a;color: #7f7b7b;font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;}</style>
<span style="font-size:18px; font-family:impact;" id="masterleaguetitle1">Duel Academy's</span><br><span style=" font-size:40px; font-family:impact;" id="masterleaguetitle2">Rankings &amp; Scores</span><div id="rightside" style="width:50%;float:left; text-align:center; margin-top:10px;">
<center><input type="submit" onclick="league_rankings()" class="button3" value="League">&nbsp;&nbsp;&nbsp;
<input type="submit" onclick="proleague_rankings()" class="button3" value="Pro League">&nbsp;&nbsp;&nbsp;<input type="submit" onclick="" class="button3" value="
"><br><br><input type="submit" onclick="dalivesseason_rankings()" class="button3" value="Lives
Season">&nbsp;&nbsp;&nbsp;
<input type="submit" onclick="dalivesoverall_rankings()" class="button3" value="Lives
Overall">&nbsp;&nbsp;&nbsp;<input type="submit" onclick="daregulars_rankings()" class="button3" value="Regulars
Overall"></center><br></div>
NB:Kalo ga salah,kak mercurial juga pernah nanyain ini,kalo mau,bisa minta tolong kasihkan link utk ke masalah kak mercurial? Senyum

Makasih Senyum

#2
 on 18/7/2013, 14:41

Retired Staff


Retired Staff
coba ".indexOff('duelacademy')" nya diubah jadi link forum sakura.

kalo mau bikin kea gitu sih mesti bikin HTML-nya dulu sakuranya,html tablenya,kalo ga salah.

#3
 on 19/7/2013, 05:27

Owner of Atlanta


Owner of Atlanta
Kalau untuk masukkin text aja di bawahnya sih bisa kemungkinan pakek show hide aja.
Tapi kalo untuk masukkin html ane juga agak kurang ngerti.

Btw ini maksudnya kode yang dari mana ?
Code:
        <style type="text/css">
        .pretty-table
        {
          padding: 0;
          margin: 0;
          border-collapse: collapse;
          border: 1px solid #333;
          font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
          font-size: 0.9em;
          color: #a6a6a6;
          background: #303030;
          width:inherit !important;
        }
        .pretty-table caption
        {
          caption-side: bottom;
          font-size: 0.9em;
          font-style: italic;
          text-align: right;
          padding: 0.5em 0;
        }
        .pretty-table th, .pretty-table td
        {
          border: 1px dotted #666;
          padding: 0.5em;
          text-align: left;
          color: #a6a6a6;
        }
        .pretty-table td+td+td+td+td+td+td+td+td{ color: #f9f469; }
        .pretty-table th[scope=col]
        {
          color: #000;
          background-color: #8fadcc;
          text-transform: uppercase;
          font-size: 0.9em;
          border-bottom: 2px solid #333;
          border-right: 2px solid #333;
        }
        .pretty-table th+th[scope=col]
        {
          color: #fff;
          background-color: #7d98b3;
          border-right: 1px dotted #666;
        }
        .pretty-table th[scope=row]
        {
          background-color: #b8cfe5;
          border-right: 2px solid #333;
        }
        .pretty-table tr.alt th, .pretty-table tr.alt td
        {
          color: #2a4763;
        }
        .pretty-table tr:hover th[scope=row], .pretty-table tr:hover td
        {
          background-color: #464545;
          font-weight:bold;
          cursor:pointer;
        }
        .pretty-table2
        {
          padding: 0;
          margin: 0;
          border-collapse: collapse;
          border: 1px solid #333;
          font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
          font-size: 0.9em;
          color: #a6a6a6;
          background: #303030;
        }
        .pretty-table2 caption
        {
          caption-side: bottom;
          font-size: 0.9em;
          font-style: italic;
          text-align: right;
          padding: 0.5em 0;
        }
        .pretty-table2 th, .pretty-table2 td
        {
          border: 1px dotted #666;
          padding: 0.5em;
          text-align: left;
          color: #a6a6a6;
        }
        .pretty-table2 td+td+td+td+td+td+td+td+td{ color: #f9f469; }
        .pretty-table2 th[scope=col]
        {
          color: #000;
          background-color: #8fadcc;
          text-transform: uppercase;
          font-size: 0.9em;
          border-bottom: 2px solid #333;
          border-right: 2px solid #333;
        }
        .pretty-table2 th+th[scope=col]
        {
          color: #fff;
          background-color: #7d98b3;
          border-right: 1px dotted #666;
        }
        .pretty-table2 th[scope=row]
        {
          background-color: #b8cfe5;
          border-right: 2px solid #333;
        }
        .pretty-table2 tr.alt th, .pretty-table2 tr.alt td
        {
          color: #2a4763;
        }
        .pretty-table2 tr:hover th[scope=row], .pretty-table2 tr:hover td
        {
          background-color: #464545;
          font-weight:bold;
          cursor:pointer;
        }
        .button3 {
          display: inline-block;
          text-decoration: none;
          padding: 10px 15px !important;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
          position: relative;
          font-weight: bold;
         
         
          height:50px !important;
          -webkit-box-shadow: inset 0 -5px 0 rgba(0,0,0,0.3);
          -moz-box-shadow: inset 0 -5px 0 rgba(0,0,0,0.3);
          box-shadow: inset 0 -5px 0 rgba(0,0,0,0.3);
          background: #303030 !important;
          width:100px;
          color:#1E7DA6;
        }
        .button3:active {
          -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
          -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
          box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
          top: 3px;
          padding-bottom: 7px;
          background: #1E7DA6 !important;
        }
        .button3:hover {
          background: #1E7DA6 !important;
          color:black;
        }
        </style>
        <script>
        function bubbleSort(a)
        {
            var swapped;
            do {
                swapped = false;
                for (var i=0; i < a.length-1; i++) {
                    if (eval(a[i][5]) < eval(a[i+1][5])) {
                        var temp = a[i];
                        a[i] = a[i+1];
                        a[i+1] = temp;
                        swapped = true;
                    }
                if (eval(a[i][5]) == eval(a[i+1][5])) {
                    if (eval(a[i][3]) > eval(a[i+1][3])) {
                      var temp = a[i];
                      a[i] = a[i+1];
                      a[i+1] = temp;
                      swapped = true;
                    }
                    }
                }
            } while (swapped);
        }
        function bubbleSort2(a)
        {
            var swapped;
            do {
                swapped = false;
                for (var i=0; i < a.length-1; i++) {
                    if (eval(a[i][7]) < eval(a[i+1][7])) {
                        var temp = a[i];
                        a[i] = a[i+1];
                        a[i+1] = temp;
                        swapped = true;
                    }
                if (eval(a[i][7]) == eval(a[i+1][7])) {
                    if (eval(a[i][4]) > eval(a[i+1][4])) {
                      var temp = a[i];
                      a[i] = a[i+1];
                      a[i+1] = temp;
                      swapped = true;
                    }
                    if (eval(a[i][4]) == eval(a[i+1][4])) {
                      if (eval(a[i][3]) < eval(a[i+1][3])) {
                      var temp = a[i];
                      a[i] = a[i+1];
                      a[i+1] = temp;
                      swapped = true;
                    }
                    }
                    }
                }
            } while (swapped);
        }
        function bubbleSort3(a)
        {
            var swapped;
            do {
                swapped = false;
                for (var i=0; i < a.length-1; i++) {
                    if (eval(a[i][3]) < eval(a[i+1][3])) {
                        var temp = a[i];
                        a[i] = a[i+1];
                        a[i+1] = temp;
                        swapped = true;
                    }
                if (eval(a[i][3]) == eval(a[i+1][3])) {
                    if (eval(a[i][1]) < eval(a[i+1][1])) {
                      var temp = a[i];
                      a[i] = a[i+1];
                      a[i+1] = temp;
                      swapped = true;
                    }
                    if (eval(a[i][1]) == eval(a[i+1][1])) {
                      if (eval(a[i][2]) < eval(a[i+1][2])) {
                      var temp = a[i];
                      a[i] = a[i+1];
                      a[i+1] = temp;
                      swapped = true;
                    }
                    }
                   
                 
                    }
               
                }
            } while (swapped);
        }
        function league_rankings(){
        jQuery("#mytable6").hide("slow");
        jQuery("#mytable5").hide("slow");
        jQuery("#mytable4").hide("slow");
        jQuery("#mytable2").hide("slow");
        jQuery("#mytable").show("slow");
        }
        function proleague_rankings(){
        jQuery("#mytable6").hide("slow");
        jQuery("#mytable5").hide("slow");
        jQuery("#mytable4").hide("slow");
        jQuery("#mytable").hide("slow");
        jQuery("#mytable2").show("slow");
        }
        function dalivesseason_rankings(){
        jQuery("#mytable6").hide("slow");
        jQuery("#mytable5").hide("slow");
        jQuery("#mytable2").hide("slow");
        jQuery("#mytable").hide("slow");
        jQuery("#mytable4").show("slow");
        }
        function dalivesoverall_rankings(){
        jQuery("#mytable6").hide("slow");
        jQuery("#mytable4").hide("slow");
        jQuery("#mytable2").hide("slow");
        jQuery("#mytable").hide("slow");
        jQuery("#mytable5").show("slow");
        }
        function daregulars_rankings(){
        jQuery("#mytable").hide("slow");
        jQuery("#mytable2").hide("slow");
        jQuery("#mytable4").hide("slow");
        jQuery("#mytable5").hide("slow");
        jQuery("#mytable6").show("slow");
        }
        function insertpodloga(){
        /*taking season numbers*/
        if(jQuery(location).attr('href').indexOf('duelacademy')>-1){
        var myIFrame= document.getElementById('podloga').contentWindow.document.getElementById('seasonnumbers').innerHTML;
        var lista=new Array();
        var seasonlista= new Array();
        lista0= myIFrame.split("<br>");
        var i=0;
        for(i=0; i<lista0.length-1;i++){
        seasonlista.push(lista0[i].split(","));
        }
        seasonlista.splice(0,1);
        /*taking season numbers end*/
        var myIFrame= document.getElementById('podloga').contentWindow.document.getElementById('rankings').innerHTML;
        var lista=new Array();
        var konacnalista= new Array();
        lista= myIFrame.split("<br>");
        var i=0;
        for(i=0; i<lista.length-1;i++){
        konacnalista.push(lista[i].split(","));
        }
        konacnalista.splice(0,1);
        for(var j=0; j<konacnalista.length;j++){
        konacnalista[j][3]=eval(konacnalista[j][1])+eval(konacnalista[j][2]);
        var pts=eval(konacnalista[j][1])-eval(konacnalista[j][2]);
        konacnalista[j][5]=pts;
        if(pts<0){pts=0;}
        konacnalista[j][4]=pts;
        }
        bubbleSort(konacnalista);
        var myIFrame2= document.getElementById('podloga').contentWindow.document.getElementById('rankings4').innerHTML;
        var lista2=new Array();
        var konacnalista2= new Array();
        lista2= myIFrame2.split("<br>");
        var i=0;
        for(i=0; i<lista2.length-1;i++){
        konacnalista2.push(lista2[i].split(","));
        }
        konacnalista2.splice(0,1);
        for(var j=0; j<konacnalista2.length;j++){
        var pts=eval(10*konacnalista2[j][1])+eval(5*konacnalista2[j][2]);
        konacnalista2[j][3]=pts;
        if(pts<0){pts=0;}
        konacnalista2[j][3]=pts;
        }
        bubbleSort3(konacnalista2);
        var myIFrame3= document.getElementById('podloga').contentWindow.document.getElementById('rankings5').innerHTML;
        var lista3=new Array();
        var konacnalista3= new Array();
        lista3= myIFrame3.split("<br>");
        var i=0;
        for(i=0; i<lista3.length-1;i++){
        konacnalista3.push(lista3[i].split(","));
        }
        konacnalista3.splice(0,1);
        for(var j=0; j<konacnalista3.length;j++){
        var pts=eval(10*konacnalista3[j][1])+eval(5*konacnalista3[j][2]);
        konacnalista3[j][3]=pts;
        if(pts<0){pts=0;}
        konacnalista3[j][3]=pts;
        }
        bubbleSort3(konacnalista3);
        row=new Array();
        cell=new Array();
        row_num=konacnalista.length;
        row_num2=konacnalista2.length;
        row_num3=konacnalista3.length; //edit this value to suit
        cell_num=6; //edit this value to suit
        cell_num2=5;
        cell_num3=5;
        /*league rankings*/
        tab=document.createElement('table');
        tab.setAttribute('class','pretty-table');
        tbo=document.createElement('tbody');
        rownula_naslov0=document.createElement('tr');
        rownula_naslov0.setAttribute('style', 'font-weight:bold; font-size:20px; text-align:center; color:white; cursor:auto;');
        cellnula0_naslov0=document.createElement('td');
        contnula_naslov0=document.createTextNode(seasonlista[0]);
        cellnula0_naslov0.setAttribute('colspan','6');
        cellnula0_naslov0.setAttribute('style', 'background: #022053; color: #000; cursor:auto; width:750px !important;');
        cellnula0_naslov0.appendChild(contnula_naslov0);
        rownula_naslov0.appendChild(cellnula0_naslov0);
        rownula=document.createElement('tr');
        rownula.setAttribute('style', 'font-weight:bold');
        cellnula0=document.createElement('td');
        contnula=document.createTextNode("RANK");
        cellnula0.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula0.appendChild(contnula);
        rownula.appendChild(cellnula0);
        cellnula1=document.createElement('td');
        contnula1=document.createTextNode("DUELIST NAME");
        cellnula1.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula1.width="300px";
        cellnula1.appendChild(contnula1);
        rownula.appendChild(cellnula1);
        cellnula2=document.createElement('td');
        contnula2=document.createTextNode("WON");
        cellnula2.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula2.appendChild(contnula2);
        rownula.appendChild(cellnula2);
        cellnula2=document.createElement('td');
        contnula2=document.createTextNode("LOST");
        cellnula2.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula2.appendChild(contnula2);
        rownula.appendChild(cellnula2);
        cellnula3=document.createElement('td');
        contnula3=document.createTextNode("PLAYED");
        cellnula3.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula3.appendChild(contnula3);
        rownula.appendChild(cellnula3);
        cellnula4=document.createElement('td');
        contnula4=document.createTextNode("PTS");
        cellnula4.setAttribute('style', 'background: #022053; color: yellow; cursor:auto;');
        cellnula4.appendChild(contnula4);
        rownula.appendChild(cellnula4);
        tbo.appendChild(rownula_naslov0);
        tbo.appendChild(rownula);
        for(c=0;c<row_num;c++){
        row[c]=document.createElement('tr');
        cell[0]=document.createElement('td');
        cont2=document.createTextNode(c+1);
        cell[0].appendChild(cont2);
        row[c].appendChild(cell[0]);
        for(k=1;k<cell_num;k++) {
        cell[k]=document.createElement('td');
        cont=document.createTextNode(konacnalista[c][k-1]);
        cell[k].appendChild(cont);
        row[c].appendChild(cell[k]);
        }
        tbo.appendChild(row[c]);
        }
        tab.appendChild(tbo);
        document.getElementById('mytable').appendChild(tab);
        /*dalives season rankings*/
        tab=document.createElement('table');
        tab.setAttribute('class','pretty-table2');
        tbo=document.createElement('tbody');
        rownula_naslov0=document.createElement('tr');
        rownula_naslov0.setAttribute('style', 'font-weight:bold; font-size:20px; text-align:center; color:white; cursor:auto;');
        cellnula0_naslov0=document.createElement('td');
        contnula_naslov0=document.createTextNode(seasonlista[1]);
        cellnula0_naslov0.setAttribute('colspan','5');
        cellnula0_naslov0.setAttribute('style', 'background: #022053; color: #000; cursor:auto; width:750px !important;');
        cellnula0_naslov0.appendChild(contnula_naslov0);
        rownula_naslov0.appendChild(cellnula0_naslov0);
        rownula=document.createElement('tr');
        rownula.setAttribute('style', 'font-weight:bold');
        cellnula0=document.createElement('td');
        contnula=document.createTextNode("RANK");
        cellnula0.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula0.appendChild(contnula);
        rownula.appendChild(cellnula0);
        cellnula1=document.createElement('td');
        contnula1=document.createTextNode("DUELIST NAME");
        cellnula1.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula1.width="280px !important";
        cellnula1.appendChild(contnula1);
        rownula.appendChild(cellnula1);
        cellnula3=document.createElement('td');
        contnula3=document.createTextNode("1st PLACE");
        cellnula3.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula3.appendChild(contnula3);
        rownula.appendChild(cellnula3);
        cellnula4=document.createElement('td');
        contnula4=document.createTextNode("2nd PLACE");
        cellnula4.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula4.appendChild(contnula4);
        rownula.appendChild(cellnula4);
        cellnula6=document.createElement('td');
        contnula6=document.createTextNode("PTS");
        cellnula6.setAttribute('style', 'background: #022053; color: yellow; cursor:auto;');
        cellnula6.appendChild(contnula6);
        rownula.appendChild(cellnula6);
        tbo.appendChild(rownula_naslov0);
        tbo.appendChild(rownula);
        for(c=0;c<row_num2;c++){
        row[c]=document.createElement('tr');
        cell[0]=document.createElement('td');
        cont2=document.createTextNode(c+1);
        cell[0].appendChild(cont2);
        row[c].appendChild(cell[0]);
        for(k=1;k<cell_num2;k++) {
        cell[k]=document.createElement('td');
        cont=document.createTextNode(konacnalista2[c][k-1]);
        cell[k].appendChild(cont);
        row[c].appendChild(cell[k]);
        }
        tbo.appendChild(row[c]);
        }
        tab.appendChild(tbo);
        document.getElementById('mytable4').appendChild(tab);
        /*dalives overall rankings*/
        tab=document.createElement('table');
        tab.setAttribute('class','pretty-table2');
        tbo=document.createElement('tbody');
        rownula_naslov0=document.createElement('tr');
        rownula_naslov0.setAttribute('style', 'font-weight:bold; font-size:20px; text-align:center; color:white; cursor:auto;');
        cellnula0_naslov0=document.createElement('td');
        contnula_naslov0=document.createTextNode("DA LIVE TOURNAMENT OVERALL RANKINGS");
        cellnula0_naslov0.setAttribute('colspan','5');
        cellnula0_naslov0.setAttribute('style', 'background: #022053; color: #000; cursor:auto; width:750px !important;');
        cellnula0_naslov0.appendChild(contnula_naslov0);
        rownula_naslov0.appendChild(cellnula0_naslov0);
        rownula=document.createElement('tr');
        rownula.setAttribute('style', 'font-weight:bold');
        cellnula0=document.createElement('td');
        contnula=document.createTextNode("RANK");
        cellnula0.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula0.appendChild(contnula);
        rownula.appendChild(cellnula0);
        cellnula1=document.createElement('td');
        contnula1=document.createTextNode("DUELIST NAME");
        cellnula1.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula1.width="280px !important";
        cellnula1.appendChild(contnula1);
        rownula.appendChild(cellnula1);
        cellnula3=document.createElement('td');
        contnula3=document.createTextNode("1st PLACE");
        cellnula3.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula3.appendChild(contnula3);
        rownula.appendChild(cellnula3);
        cellnula4=document.createElement('td');
        contnula4=document.createTextNode("2nd PLACE");
        cellnula4.setAttribute('style', 'background: #022053; color: #000; cursor:auto;');
        cellnula4.appendChild(contnula4);
        rownula.appendChild(cellnula4);
        cellnula6=document.createElement('td');
        contnula6=document.createTextNode("PTS");
        cellnula6.setAttribute('style', 'background: #022053; color: yellow; cursor:auto;');
        cellnula6.appendChild(contnula6);
        rownula.appendChild(cellnula6);
        tbo.appendChild(rownula_naslov0);
        tbo.appendChild(rownula);
        for(c=0;c<row_num3;c++){
        row[c]=document.createElement('tr');
        cell[0]=document.createElement('td');
        cont2=document.createTextNode(c+1);
        cell[0].appendChild(cont2);
        row[c].appendChild(cell[0]);
        for(k=1;k<cell_num3;k++) {
        cell[k]=document.createElement('td');
        cont=document.createTextNode(konacnalista3[c][k-1]);
        cell[k].appendChild(cont);
        row[c].appendChild(cell[k]);
        }
        tbo.appendChild(row[c]);
        }
        tab.appendChild(tbo);
        document.getElementById('mytable5').appendChild(tab);
        }
        else{ return false;}
        }
        </script>
        <style id="wysiwyg_css" type="text/css">.wysiwyg {background: #0a0a0a;color: #7f7b7b;font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;}</style>
        <span style="font-size:18px; font-family:impact;" id="masterleaguetitle1">Duel Academy's</span><br><span style=" font-size:40px; font-family:impact;" id="masterleaguetitle2">Rankings &amp; Scores</span><div id="rightside" style="width:50%;float:left; text-align:center; margin-top:10px;">
        <center><input type="submit" onclick="league_rankings()" class="button3" value="League">&nbsp;&nbsp;&nbsp;
        <input type="submit" onclick="proleague_rankings()" class="button3" value="Pro League">&nbsp;&nbsp;&nbsp;<input type="submit" onclick="" class="button3" value="
        "><br><br><input type="submit" onclick="dalivesseason_rankings()" class="button3" value="Lives
        Season">&nbsp;&nbsp;&nbsp;
        <input type="submit" onclick="dalivesoverall_rankings()" class="button3" value="Lives
        Overall">&nbsp;&nbsp;&nbsp;<input type="submit" onclick="daregulars_rankings()" class="button3" value="Regulars
        Overall"></center><br></div>

Kalau misalnya mau show hidenya nih ane kasih contohnya pake html ini di widget nya
Code:
        <script type="text/javascript">
        function mytoggle(elm) {
          var module = document.getElementById(elm);
          if (module.style.display == "none") {
              module.style.display = "block";
          }
          else {
              module.style.display = "none";
          }
        }
        </script>
        <button onclick="javascript:mytoggle('hiddendiv');">Judul button</button>
        <div id="hiddendiv" style="display:none;">Hasil text.</div>

Itu cuma contoh belum di edit buttonnya, bisa kan edit sendiri ?

#4
 on 19/7/2013, 12:40

Retired Staff


Retired Staff
Pake script slideToggle aja beer

Jadi gini nih:



Code:
<!DOCTYPE html>
<html>
<head>
  <style>
 p { width:400px; }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 //masukkan kode button
<tr style="font-weight:bold; font-size:20px; text-align:center; color:white; cursor:auto;"><td colspan="6" style="background: #022053; color: #000; cursor:auto; width:750px !important;">LEAGUE SEASON 12 RANKINGS</td></tr>
<tr style="font-weight:bold"><td style="background: #022053; color: #000; cursor:auto;">RANK</td><td style="background: #022053; color: #000; cursor:auto;" width="300px">DUELIST NAME</td><td style="background: #022053; color: #000; cursor:auto;">WON</td><td style="background: #022053; color: #000; cursor:auto;">LOST</td><td style="background: #022053; color: #000; cursor:auto;">PLAYED</td><td style="background: #022053; color: yellow; cursor:auto;">PTS</td></tr>
<script>
    $("CLASS BUTTON").click(function () {
      $("CLASS TABLE").slideToggle("slow");
    });
</script>

</body>
</html>

baca di sini aja [You must be registered and logged in to see this link.]

slow bisa diganti jadi fast ato terserah kamu aja

#5
 on 19/7/2013, 18:29

Owner of Atlanta


Owner of Atlanta
Yes bisa juga pake htmlnya si kitsune Wink

#6
 on 19/7/2013, 18:46

Retired Staff


Retired Staff
Oh iya,ane coba testing script yang ane kasih ternyata ga work.

Tak ada pilihan selain memilih kayak waktu di-klik kebawa ke link yang kita mau.

pasang a href aja,kalo bisa di-test di w3schools

#7
 on 19/7/2013, 19:42

Owner of Atlanta


Owner of Atlanta
Nih kalo mau slide yang kayak agan kitsune bilang pakai ini aja
Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle3').click(function() {
   $('.toggle3').toggle('slow');
   return false;
});
});
</script>
<button href="#" id="toggle3">Animated Toggle</button><br /><br />
<div class="toggle3" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>

Sumber : Di sini

#8
 on 24/7/2013, 14:00

Retired Staff


Retired Staff
[You must be registered and logged in to see this link.] wrote:Nih kalo mau slide yang kayak agan kitsune bilang pakai ini aja
Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle3').click(function() {
   $('.toggle3').toggle('slow');
   return false;
});
});
</script>
<button href="#" id="toggle3">Animated Toggle</button><br /><br />
<div class="toggle3" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>

Sumber : Di sini

Oke,nanti sakura coba Wink

Soalnya sakura lagi on via mobile Senyum Nanti sakura kabari kalo hasilnya memuaskan Senyum

#9
 on 24/7/2013, 17:31

Owner of Atlanta


Owner of Atlanta
yap silahkan aja di test kalo gak work nanti coba ane cariin lagi yang lain Wink

#10
 on 28/7/2013, 09:12

Owner of Atlanta


Owner of Atlanta
Apa ini sudah solved ?

#11
 on 28/7/2013, 11:13

Retired Staff


Retired Staff
[You must be registered and logged in to see this link.] wrote:Apa ini sudah solved ?

solved trima kasih. Senyum

#12
 on 29/7/2013, 04:21

Owner of Atlanta


Owner of Atlanta
Solved and archives~

Sponsored content
#13
 Today at 00:40


Message (Halaman 1 dari 1)

Share This Topic !

URL :
BBcode :
HTML :

Permissions in this forum:
Anda tidak dapat menjawab topik

Total Posts Total Threads Total Members Newest Member29 November 2014 Date of Establishment of the Forum

Total 0 user online :: 0 Terdaftar, 0 Tersembunyi dan 0 Tamu

Total 0 user online :: 0 Terdaftar, 0 Tersembunyi dan 0 Tamu (Lihat list online)


User yang sedang berada di forum ini: Tidak ada