Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div class="pokustoni" data-check="ch04"> <div class='rada0'> <label class='neaktivni pokxx'><input type="checkbox" class="Q04" id='p0400'><img src="img/linux.png"><span><span class="hideNamePc">Pok</span><span>00</span><br/><span class='uzivatel'>xjmeno0</span></span></label> </div> <div class='rada1'> <label class='neaktivni pokxx ' ><input type="checkbox" class="Q04" id='p0401'><img src="img/linux.png"><span><span class="hideNamePc">Pok</span><span>01</span><br/><span class='uzivatel'>xjmeno0</span></span></label> <label class='neaktivni pokxx'><input type="checkbox" class="Q04" id='p0402'><img src="img/linux.png"><span><span class="hideNamePc">Pok</span><span>02</span><br/><span class='uzivatel'>xjmeno0</span></span></label> <label class='neaktivni pokxx' ><input type="checkbox" class="Q04" id='p0403'><img src="img/win.png"><span><span class="hideNamePc">Pok</span><span>03</span><br/><span class='uzivatel'>xjmeno0</span></span></label> <label class='neaktivni pokxx'><input type="checkbox" class="Q04" id='p0404'><img src="img/x-icon.png"><span><span class="hideNamePc">Pok</span><span>04</span><br/><span class='uzivatel'>xjmeno0</span></span></label> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
article{ border: 1px solid black; min-height: 500px; max-width: 985px; margin:0px auto auto 155px; background: #EBEBEB; position:relative; } body { margin: 0; padding: 0; font-size: 16px; background: #96BDCC; font-size: 13px; color: #000000; //height: 1800; } /*-------------------*/ .Qxx{ display:none; width:540px; //height: 500px; margin: 0 auto; } #oska{ float:right; } #filtr{ padding-left: 3%; } // .mvolby{position:relative;} #volby{ position: absolute; right:10px; text-align: left; //float:right; margin-right: 10px; } /////////////////////// .pokustoni { width: 580px; position:relative; margin:0 auto !important; } .pokustoni div .pokxx:before{ -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: #959595 0 2px 5px; -moz-box-shadow: #959595 0 2px 5px; border-radius: 2px; box-shadow: #959595 0 2px 5px; content: ""; } .pokustoni div .pokxx:active:before{ padding: 1px 0 0; } .pokustoni div .neaktivni{ -moz-box-shadow: inset 0 0 0 1px #63ad0d; -webkit-box-shadow: inset 0 0 0 1px #63ad0d; -moz-border-radius: 3px; -webkit-border-radius: 3px; background: #eee; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2)); background: -moz-linear-gradient(#eee, #e2e2e2); background: linear-gradient(#eee, #e2e2e2); border: solid 1px #d0d0d0; border-bottom: solid 3px #b2b1b1; border-radius: 3px; box-shadow: inset 0 0 0 1px #f5f5f5; color: #555; } .pokustoni div .pokxx{ //border:1px solid black; display:inline-block; width:80px; height: 34px; border-radius: 2px; //background: #FB4D58; //color:black; font-size: 15px; text-align: left; //padding:10px 17px 8px 5px; margin-right: 40px; position: relative; text-align: center; text-decoration: none; text-shadow: 0 1px 0 #fafafa; padding-top: 2px; padding-bottom: 0px; } .pokustoni div .pokxx:nth-child(3n){ margin-right: 78px ; } *.pokustoni div .pokxx:hover{ cursor:pointer; } .uzivatel{ font-family: helvetica; font-size: 11px; position: relative; left:0px; top:-2px; background-color: #D8DEE3; color:black; text-shadow: none; padding: 0px 6px 0px 33px; } .pokustoni .pokxx span span{ // position:absolute; //display: block; } .pokustoni div .pokxx:active{ background: #dfdfdf; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3)); background: -moz-linear-gradient(#dfdfdf, #e3e3e3); background: linear-gradient(#dfdfdf, #e3e3e3); border: solid 1px #959595; box-shadow: inset 0 10px 15px 0 #c4c4c4; top:2px; } .pokustoni .aktivni{ background: #dfdfdf; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3)); background: -moz-linear-gradient(#dfdfdf, #e3e3e3); background: linear-gradient(#dfdfdf, #e3e3e3); border: solid 1px #959595; box-shadow: inset 0 10px 15px 0 #c4c4c4; top:1px; } .pokustoni div input{ display:none; } .pokustoni div img{ width:20px; height: 20px; vertical-align: bottom; padding-left: 2px; padding-right: 5px; } .pokustoni div .nabidka{ margin-left: 1%; padding: 7px 1% 9px 1%; margin-right: 3%; vertical-align: 6% } .pokustoni div > span{ position:relative; } .pokustoni .ukaz{ display:block } .pokustoni .ukaz a{ display:block; background: #dadada; padding:5px 15px 5px 15px; text-decoration: none; color:black; } .pokustoni .ukaz a:hover{ background: #FCFCFC; } .pokustoni > div{ margin-top: 27px; } .pokustoni > div:first-child{ margin-top: 0%; } .pokustoni > div:last-child{ margin-bottom: 27px; }
CSS
Autoformát
CSS reset
Až na konci
$(".pokustoni label,.pokustoni img,.pokustoni span").click(function (){ }); $(".pokustoni input").change(function (){ if($(this).is(":checked")){ $(this).parent().removeClass("neaktivni"); $(this).parent().addClass("aktivni"); }else{ $(this).parent().removeClass("aktivni"); $(this).parent().addClass("neaktivni"); } if(($('.'+($(this)).attr('class')+':checked').length)==($('.'+($(this).attr('class'))).length)){ $($(this).parent().parent().parent().attr('data-check')).prop('checked',true); $('#'+($(this).parent().parent().parent().attr('data-check'))).next().attr('src','img/Vote.png'); }else{ $($(this).parent().parent().parent().attr('data-check')).prop('checked',false); $('#'+($(this).parent().parent().parent().attr('data-check'))).next().attr('src','img/Vote2.png'); } });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>