Youtube Top chart HTML5 (LIVE)-HTML5, CSS, and jQuery javascript DATA JSON.data

live_topchart.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Topchart html iframe plugin VRAPro Admin</title>
        <link rel="stylesheet" href="live_topchart.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script type="text/javascript" src="radio.js"></script>
        <script>
        var oke = 'Sikeresen szavaztál. Köszönjük a szavazatott.';
        var hiba = 'Sajnos kétszer nem szavazhatsz ugyan arra a dalra.';
        var inaktivetop = 'A toplista inaktív.';
        var notop = 'Jelenleg nincs szavazás.';
        </script>
        <script type="text/javascript" src="https://vrapro.hu/plugin/fulljs/coclive.js"></script>
        <script type="text/javascript" src="https://vrapro.hu/plugin/fulljs/toplist_live.js"></script>
    </head>
    <body>
    <div class="vra_headertable">
    <div class="hely_szama">Helyezés.</div>
    <div class="szav_szama">Szavazás.</div>
    <div class="megt_szama">Megtekintés.</div>
    </div>
    <div class="vra_header_topchart" id="toplist_live"></div><div id="topchart_live_modal"></div>
    </body>
</html>

live_team.css

.vra_headertable {
    height: 20px;
    margin: 0 auto 0;
    padding: 0;
    background:#065694;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #FFFFFF;
    width: 100%;
}
.vra_headertable .hely_szama, .vra_headertable .szav_szama, .vra_headertable .megt_szama { float:left; width: 80px; padding: 2px; text-align: left;}
.lista_sor_table {
    width: 100%;
    height: 79px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 13px;
    margin: 0 auto 0;
    border: 0px solid black;
    border-collapse: collapse;
    padding: 0;
    border-bottom: 3px solid #CCCCCC;
}
.lista_sor_table td, .lista_sor_table tr {
    padding: 2px;
    vertical-align: middle;
    color: #414141;
    text-align: left;
    border: 0px solid black;
    border-top: 0px;
    background-color: transparent;
}
.lista_sor_table {background:#DFF5FF;}
.lista_sor_table:hover { background-color: #94EDF5;}
.lista_sor_table .no_sor, .lista_sor_table .szav_sor, .lista_sor_table .nez_sor{ width: 40px; text-align: center;}
.lista_sor_table .no_sor {font-weight: bold; font-family: Arial,Helvetica,sans-serif; font-size: 13px;}
.lista_sor_table .borito_sor { width: 80px;}
.lista_sor_table .borito_sor IMG {
    display: block;
    width: 75px;
    height: 75px;
    border-top-left-radius: 10%;
    border-top-right-radius: 10%;
    border-bottom-left-radius: 10%;
    border-bottom-right-radius: 10%;
    box-sizing: border-box;
    border: 2px solid #33343C;
    }
.lista_sor_table .lemez_sor_album { width: 298px;}
.lista_sor_table .lemez_sor { width: 332px;}
.lista_sor_table .logo_sor { width: 30px;}
.lista_sor_table .logo_sor IMG { border: 0; padding: 0; margin: 5px 0; display: block;}
.lista_sor_table .eloado {
    font-size: 13px;
    color: #065694;
}
/* START modal */
.topchart_live_modal {
    position: fixed;
    z-index: 1;
    left: 0;
    top: -100px;
    width: 100%;
    height: 100%;
}
.topchart_live_content {
    font-family: Arial,Helvetica,sans-serif;
    background-color: #D1F532;
    margin: 15% auto;
    padding: 20px;
    width: 60%;
    border: 2px solid #CC22A3;
    border-radius: 6px;
}
.topchart_live_close {
    color: #010F1B;
    float: right;
    font-weight: bold;
    font-size: 20px;
}
.topchart_live_modal .topchart_live_content h4 {
    font-size: 1.0em;
    padding:0;
    font-weight: bold;
    color: #010F1B;
    font-family: Arial,Helvetica,sans-serif;
}
.topchart_live_modal .topchart_live_content p {
    padding:10px 10px;
    line-height: 1em;
    color:#010F1B;
    font-size: 13px;
}
.topchart_live_modal .topchart_live_close:hover,
.topchart_live_modal .topchart_live_close:focus {
    color: #CC22A3;
    text-decoration: none;
    cursor: pointer;
}

Hozzászolások

Ehhez a plugonhoz, még nem érkeztek hozzászólások.


Új hozzászóláshoz be kel jelentkezni. Bejelentkezés | Regisztráció