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 id="obal"> <div class="gt-mt-col-wrap"> <div class="gt-mt-col gt-mt-earth1"> <div class="gt-mt-header"> <div class="gt-mt-header-top"> <h3>Svatební večírek</h3> <div class="gt-mt-coin-wrap"> <div class="gt-mt-coinf"></div> <div class="gt-mt-coinb"></div> </div> </div> <div class="gt-mt-header-bottom"></div> </div> <ul class="gt-mt-body"> <li> <div class="gt-mt-body-cell" style="height: 16px;">Místo: Lesopark Praha<span class="gt-mt-tooltip" style="width:130px; background:#9D9D9D; border-color:#9D9D9D; color:#333333"></span></div> </li> <li class="gt-mt-even"> <div class="gt-mt-body-cell" style="height: 16px;">Poznámka: 111<span class="gt-mt-tooltip" style="width:130px; background:#9D9D9D; border-color:#9D9D9D; color:#333333"></span></div> </li> <li> <div class="gt-mt-body-cell" style="height: 16px;">Trvání: 2hod<span class="gt-mt-tooltip" style="width:130px; background:#9D9D9D; border-color:#9D9D9D; color:#333333"></span></div> </li> </ul> <div class="gt-mt-footer"> <div class="gt-mt-btn-wrap"> <div class="gt-mt-btn-wrap-inner"><a href="#objednani" class="gt-mt-btn gt-mt-btn-large">Objednat</a></div> </div> </div> </div> </div> <div class="gt-mt-col-wrap"> <div class="gt-mt-col gt-mt-earth1"> <div class="gt-mt-header"> <div class="gt-mt-header-top"> <h3>Firemní večírek</h3> <div class="gt-mt-coin-wrap"> <div class="gt-mt-coinf"></div> <div class="gt-mt-coinb"></div> </div> </div> <div class="gt-mt-header-bottom"></div> </div> <ul class="gt-mt-body"> <li> <div class="gt-mt-body-cell" style="height: 16px;">Místo: Hospoda Petřinů<span class="gt-mt-tooltip" style="width:130px; background:#9D9D9D; border-color:#9D9D9D; color:#333333"></span></div> </li> <li class="gt-mt-even"> <div class="gt-mt-body-cell" style="height: 16px;">Poznámka: 222<span class="gt-mt-tooltip" style="width:130px; background:#9D9D9D; border-color:#9D9D9D; color:#333333"></span></div> </li> <li> <div class="gt-mt-body-cell" style="height: 16px;">Trvání: 3hod<span class="gt-mt-tooltip" style="width:130px; background:#9D9D9D; border-color:#9D9D9D; color:#333333"></span></div> </li> </ul> <div class="gt-mt-footer"> <div class="gt-mt-btn-wrap"> <div class="gt-mt-btn-wrap-inner"><a href="#objednani" class="gt-mt-btn gt-mt-btn-large">Objednat</a></div> </div> </div> </div> </div> <div class="gt-mt-col-wrap"> <div class="gt-mt-col gt-mt-earth1"> <div class="gt-mt-header"> <div class="gt-mt-header-top"> <h3>Soukromá akce</h3> <div class="gt-mt-coin-wrap"> <div class="gt-mt-coinf"></div> <div class="gt-mt-coinb"></div> </div> </div> <div class="gt-mt-header-bottom"></div> </div> <ul class="gt-mt-body"> <li> <div class="gt-mt-body-cell" style="height: 16px;">Místo: Loď Máchovka<span class="gt-mt-tooltip" style="width:130px; background:#9D9D9D; border-color:#9D9D9D; color:#333333"></span></div> </li> <li class="gt-mt-even"> <div class="gt-mt-body-cell" style="height: 16px;">Poznámka: 333<span class="gt-mt-tooltip" style="width:130px; background:#9D9D9D; border-color:#9D9D9D; color:#333333"></span></div> </li> <li> <div class="gt-mt-body-cell" style="height: 16px;">Trvání: 4hod<span class="gt-mt-tooltip" style="width:130px; background:#9D9D9D; border-color:#9D9D9D; color:#333333"></span></div> </li> </ul> <div class="gt-mt-footer"> <div class="gt-mt-btn-wrap"> <div class="gt-mt-btn-wrap-inner"><a href="#objednani" class="gt-mt-btn gt-mt-btn-large">Objednat</a></div> </div> </div> </div> </div> </div> <div style="margin-top:32px;" class="vc_row neviditelnost"> <input class="readonly test1" type="text" name="nazev" value="" id="cf7nazev" readonly="readonly"> <input class="readonly test2" type="text" name="nazev" value="" id="cf7misto" readonly="readonly"> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.neviditelnost { display:none; } #obal { display: grid; grid-template-areas: 'sekce1 sekce2 sekce3'; background: grey; padding: 20px; grid-gap: 20px; } .gt-mt-col-wrap:nth-child(1) { grid-area: sekce1; } .gt-mt-col-wrap:nth-child(2) { grid-area: sekce2; } .gt-mt-col-wrap:nth-child(3) { grid-area: sekce3; } .gt-mt-col-wrap { background: #efefef; padding: 20px; }
CSS
Autoformát
CSS reset
Až na konci
/* $(".gt-mt-btn").on("click", function() { $(".vc_row.neviditelnost").removeClass("neviditelnost") var nazev = $(this).closest('.gt-mt-col').find(".gt-mt-header-top h3"); var misto = $(this).closest('.gt-mt-col').find(".gt-mt-body-cell"); $("#cf7nazev").val(nazev[0].textContent); $("#cf7misto").val(misto[0].textContent); }); */ function vypln() { var nazev = this.closest('.gt-mt-col').querySelectorAll(".gt-mt-header-top h3"); var misto = this.closest('.gt-mt-col').querySelectorAll(".gt-mt-body-cell"); var odebrat = document.querySelector(".vc_row.neviditelnost"); odebrat.classList.remove("neviditelnost"); document.querySelector("#cf7nazev").value = nazev[0].textContent; document.querySelector("#cf7misto").value = misto[0].textContent; } var buttons = document.querySelectorAll('.gt-mt-btn'); for (var i = 0; i < buttons.length; ++i) { buttons[i].onclick = vypln; }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>