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
<html> <head> <title>Swap columns</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <!--<script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>--> </head> <body> <div id="text"> <div class="velke"> <h1>How to write www</h1> </div> </div> <div id="navigace"> <h3>Favourites:</h3> </div> <div id="hlavicka"> </div> <div id="hrasek"></div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
/* okraje prvků, řádkování */ body, form {margin: 0px;} /* p {margin: .1em 0px .5em;} */ h2 { margin: 1.3em 0px .3em; padding: .8em 0px 0px;} h3 { margin: 1em 0px .2em;} p, li, dl, menu, td, th, ul, ol { line-height: 1.3;} ul, ol { margin-top: 0px ; margin-bottom: .8em} /* pozicování */ body {max-width: 1200px;} #text {margin: 150px 3% 0px 3%; width: 68.5%;} #gototop, #wherenext {margin: 1em 3% 0px 3%; width: 68.5%;} #navigace {position: absolute; top: 150px; left: 73%; width: 25%;} #hlavicka {position: absolute; top: 0px; left: 0px; width: 100%; height: 100px; overflow: hidden} #logo {position: absolute; z-index: 10; left: 0px; top: 2px;} #slogan {position: absolute; left: 127px; top: 10px} #ouska {position: absolute; left: 146px; top: 52px} #prouzek {position: absolute; z-index: 5; left: 0px; top: 74px; width: 100%; text-indent: 126px;} #hledani {position: absolute; right: 4px; top: 4px} #gototop {text-align: right;} #prevnextbottom, #prevnexttop{position: absolute; left: 73%; width: 25%; z-index: 8; }/* jako navigace */ #prevnexttop {top: 97px;} .panel {text-align: right; font-size: 16px; font-family: sans-serif; word-spacing: .6em; line-height: 1.3; font-weight: normal;} .panel a:link, .panel a:visited {text-decoration: none; padding: 0px 5px; border: 1px solid silver; background-color: #eed; color: black;} #hrasek {position: absolute; top: 107px; margin-left: 3%; _margin-left: 0px; width: 90%;} @media (max-width: 600px) { #text { width: 94%; margin-left: 0px; margin-right: 0px; padding-left: .5em; padding-right: .5em;} #gototop, #wherenext {width: 100%;} #navigace {position: static; width: 100%;} #hlavicka {position: absolute; top: 0px; left: 0px; width: 100%; height: 100px; overflow: hidden} #hledani {position: absolute; right: 4px; top: 24px} #gototop {text-align: right;} #prevnextbottom, #prevnexttop{display:none; }/* jako navigace */ #prevnexttop {display: none;} #wherenext {display: none;} #reklama-dolni img {width: 100%; height: auto;} } /* text */ body {color: black; background-color: white; font-size: 112.5%; /* za to muze Chamurappi */} h1 { color: #009933; text-align: center;} h2 { border-top: 1px solid #336; font-size: 130%;} h3 { font-size: 120%;} .podtitul {font-weight: bold; text-align: center; text-decoration: overline; font-size: 120%; margin-top: -0.3em;} .nadtitul {font-weight: bold; text-align: center; font-size: 120%;} .zalozka {font-weight: bold; font-style: italic;} .komix {text-align: center; width: 100%; overflow: auto;} dt {font-weight: bold;} .col2 {width: 49.5%; float: left;} /* dva sloupce */ .sirsi {width: 137%; } /* co může přelézt doprava*/ .sirsi {width: "100%"; overflow: "auto"; overflow-y: "visible";} /* ty uvozovky jsou pro IE 5.5*/ .oriznout {width: 100%; overflow: auto;} /* co nesmí přelézt doprava*/ .rozcestnik a {font-weight: bold;} /* většina hlavních stránek */ .rozcestnik .podruzne a {font-weight: normal;} .rozcestnik h2 {margin-top: 2em;} .hp p, .hp ul {margin: 1.2em 0px; text-align: center;} /* na hlavní stránce */ .hp a {font-weight: bold;} .hp li {list-style-type: none; text-align: center;} .mezitext {background-color: #ddd; padding: .5em; margin: 1em 1em 1em;} /* předěly v textu, úvod oddílu */ .about {border-bottom: 1px dashed gray; cursor: help;} .clanky ins {text-decoration: none;} .clanky blockquote {font-style: italic;} #hrasek {font-size: 10px; font-family: MS Sans Serif, Geneva, sans-serif;} /* výpis kódu a příkladů */ code, pre, p code, .code, .wrongcode {font-family: MS Sans Serif, Geneva, sans-serif ; font-weight: 600; font-size: 80%; color: #494949; letter-spacing: "0.3px"; } .code code {font-size: 125%;}/* zrušení chybného dvojího zanoření .code code*/ p.code {margin: 1em auto; padding: .7em 0px .7em 1em;} .wrongcode {text-decoration: line-through;} .priklad {font-style: italic;} .priklad code {font-style: normal;} .ok {background-color: #f0fff0;} .bacha {background-color: #fffacd;} .zle {background-color: #ffdab9;} .vubec {background-color: #ffe4e1;} p.code {background-color: #f6f9f6;} .js p.code {background-color: #f8f6f6;} .css p.code {background-color: #f8f8f6;} .html p.code {background-color: #f7f7f7;} .ost p.code {background-color: #f6f6fa;} /* encyklopedie */ .angl {} .viz, .najpw {margin-top: 2em; margin-left: 20px; display: list-item;} /* Fyzické třídy */ .center {text-align: center;} .underline {text-decoration: underline;} .jakoodkaz {cursor: hand; cursor: pointer;} .floatright {float: right;} /* Odkazy */ a:link {color: #33F; text-align: left; } a:visited {color: #23A;} a:hover {color: #f33;} a img {border: none;} /*barevne variace NADPISY */ /* default jako .zak */ h1 { color: #009933 } h2 { color: #006600 } body.zak h2 a:link, body.zak h2 a:visited { color: #006600 } body.zak h2 a:hover {color: red;} body.html h1 {color: #666 } body.html h2 {color: #444 } body.css h1 {color: #a8761b;} body.css h2 {color: #98561b } body.js h1 {color: #bb3399 } body.js h2 {color: #880066 } body.ost h1 {color: #4069da } body.ost h2 {color: darkblue } /* tabulky a jejich barvy */ #text table {border-collapse: collapse; margin-bottom: 1em;} #text td, #text th {padding: 3px; } .html #text th { background-color: #aaaaaa} .html #text caption {color: #666666 ; font-weight: bold} .html td, .html table { border: 1px solid #aaaaaa; } .js table {border: 1px solid #883366} .js th {background-color: #bb6699} .js td {border-color: #bb6699} .css td, .css table {border: 1px solid #ca9820} .css th {color: black; background-color: #e0b850} .css caption {color: #996600; font-weight: bold} .zak th, .clanky th {background-color: #e8f5ec;} .zak td, .clanky td {border-color: #aaa;} .zak caption, .clanky caption {color: #060;} .ost th {background-color: #aac8ee;} .ost td {border-color: #cce;} .ost caption {color: darkblue;} /* grafika hlavičky */ #hlavicka { font-family: MS Sans Serif, Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #efefde; background-color: #336; } #hlavicka p {margin: 0px; line-height: inherit;} #hledani input {border-style: none; } #hledani input.submit {height: 18px;} #ouska {line-height: 26px; font-size: 12px; letter-spacing:1px;} #ouska a { padding: 3px 5px; border: 4px outset #eed; border-radius: 4px; color: black; background-color: #eed; text-decoration: none; } #prouzek { font-size: 12px; letter-spacing:1px; line-height: 20px; height: 31px; overflow: hidden; } #prouzek a { padding: 3px 7px; border-width: 2px; border-style: solid; position: relative; top: 8px; text-decoration: none; color: black; border-radius-topleft: 3px; border-radius-topright: 3px; } } /* Pravý sloupec */ #navigace { padding: .5em 0% .5em 1.5%; border-left: 1px solid #e8e8fd;/*#336*/ font-size: 90%; color: black; background-color: white; } #navigace h3, #navigace h2 { font-size: 111%; background-color: #f3f3f6; border-top: 1px solid silver; padding-top: .1em; text-indent: 0em; } #navigace ul {margin-left: 0em; padding-left: 0px;} #navigace li { list-style-type: none; margin: .4em 0px;} #navigace li:first-letter {text-transform: capitalize;} /* Patka */ .patka-global {color: gray; font-size: 80%; padding: .3em 1em 0em; margin-top: 2em; border-top: 1px solid silver; text-align: center;} .patka-global a:link, .patka-global a:visited {color: gray;} /* ----------------------------------------------------------------- */ /* BARVY variace podle classu u body + barvy ousek */ /* default */ #prouzek {background-color: #4a6;}/*h1 { behavior: url('priklady/pokus2.htc')}*/ #ouska a {background-color: #eeeedd; border-color: #eed} .zak #prouzek {background-color: #4a6;} .zak #ouska a.zak, #ouska a.zak:hover {background-color: #4a6; border-color: #4a6} .zak #prouzek a {border-color: #4a6} .html #prouzek {background-color: #999;} .html #ouska a.html, #ouska a.html:hover{background-color: #999; border-color: #999} .html #prouzek a {border-color: #999} .css #prouzek {background-color: #dab050; } .css #ouska a.css, #ouska a.css:hover{background-color: #dab050; border-color: #dab050} .css #prouzek a {border-color: #dab050} .js #prouzek {background-color: #b69;} .js #ouska a.js, #ouska a.js:hover{background-color: #b69; border-color: #b69} .js #prouzek a {border-color: #b69} .ost #prouzek {background-color: #6ad;} .ost #ouska a.ost, #ouska a.ost:hover {background-color: #6ad; border-color: #6ad; }/*#4169e1*/ .ost #prouzek a {border-color: #6ad} .clanky #prouzek {background-color: #8a9;} .clanky #ouska a.clanky, #ouska a.clanky:hover {background-color: #8a9; border-color: #8a9} .clanky #prouzek a {border-color: #8a9} /* vybraná bílá záložka */ #prouzek a#sel {background-color: white; border-color: white; border-style: outset;} #prouzek a:hover {color: #eed} #prouzek a#sel:hover {color: black;} /* Tisková verze */ @media print { #text {margin: 0em; width: 99%} h1 {margin-top: 58px;} #navigace {position: static; width: 99%; border-left: none; padding: 0em; border-top: 2px dotted silver;} #navigace li {display: inline;} #navigace h3 {border-top: none; margin-top: .2em;} .sirsi {width: 99%;} #hlavicka {visibility: hidden;} #logo, #slogan {visibility: visible; z-index: 0;} #prevnextbottom, #prevnexttop {display: none;} h2,h3 {page-break-after: avoid;} } /* Reklama v pravém sloupku */ #navigace .ad { width: 100%; overflow: hidden; text-overflow: ellipsis;} #navigace .ad h3 {margin-top: 2em;} .ad h3 a:visited, .ad h3 a:link{ color: gray;} .ad p {padding: 1em 0px; margin-top: .8em; font-family: Arial; font-size: 85%; background-color: #ffe; line-height: 1.5;} .ad p a {font-weight: bold; font-size: 110%;} .ad .visibleurl {color: navy; font-size: 80%;} /* Reklama nad pravým sloupkem */ /* #navigace {top: 235px;} */ /*to dělá nahoře místo (= 160 plus výška banneru)*/ /* #reklama-horni {position: absolute; top: 120px; left: 73%; width: 25%; overflow: hidden; margin: .5em 0% .5em 1.5%;} .reklama-horni {width: 200px; height: 75px; } .reklama-horni-reklama {font-family: verdana; font-size: 11px;}*/ /* Reklama pod textem */ #text .ad h3 {font-size: 70%; border-top: 1px dotted silver; margin-top: 5em;}
CSS
Autoformát
CSS reset
Až na konci
var selectors = "div#navigace;div#text" selectors = selectors.split(";"); var searches = []; var targets = []; for ( var k in selectors ) { if ( (k % 2) != 0 ) searches.push(selectors[k]); else targets.push(selectors[k]); } for ( var k in searches ) { var cloned = $(searches[k]).clone(true); // clone col.#1 $(searches[k]).replaceWith($(targets[k])); // reúůace col.#1 with col #2 $(targets[k]).replaceWith(cloned); // replace col. #2 with clone of #1 }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>