Script pro v poslední době populární fluidni laout je k nalezení zde: http://isotope.metafizzy.co/tests/onlayout.html
Tag: javascript
Jak zaškrtnout skupinu checkboxu?
Na webu je spousta návodů jak zaškrtnout všechny checkboxy ve formuláři, ale pokud chcete zaškrtnout pouze nějakou skupinku, ještě k tomu každou jinak pojmenovanou a ještě k tomu když je jich pokaždý jiné množství, je to trošku oříšek. Naštěstí řešení existuje. Zdrojem je diskuse na codingforums.com a řešení je níže:
<script type="text/javascript">
function checkAll(checkbox, theCommonNodeName) {
theCommonNodeName = theCommonNodeName.toLowerCase();
var theCommonNode = checkbox.parentNode;
while(theCommonNode.nodeName.toLowerCase() != theCommonNodeName && theCommonNode != document) {
theCommonNode = theCommonNode.parentNode;
}
if(theCommonNode.nodeName.toLowerCase() != theCommonNodeName) {
alert("Common parent node could not be found");
return;
}
var inputs = theCommonNode.getElementsByTagName("input");
for(var i=0; inputs[i]; i++) {
if(inputs[i].type == "checkbox") {
inputs[i].checked = checkbox.checked;
}
}
}
</script>
</head>
<body>
<h1>Test 1</h1>
<form name="frmTest1">
Check all in this form:<input type="checkbox" name="chkAll" onclick="checkAll(this, ‘form’);">
<br><br>
checkbox1:<input type="checkbox" name="chk1"><br>
checkbox2:<input type="checkbox" name="chk2"><br>
checkbox3:<input type="checkbox" name="chk3"><br>
</form>
<hr>
<h1>Test 2</h1>
<form name="frmTest2">
<table border="1" cellspacing="1" cellpadding="2">
<tr><td>Check all in this table:<input type="checkbox" name="chkAll" onclick="checkAll(this, ‘table’);"></td></tr>
<tr><td>checkbox1:<input type="checkbox" name="chk1"></td></tr>
<tr><td>checkbox2:<input type="checkbox" name="chk2"></td></tr>
<tr><td>checkbox3:<input type="checkbox" name="chk3"></td></tr>
</table>
</form>
<hr>
<h1>Test 3</h1>
<form name="frmTest3">
<table border="1" cellspacing="1" cellpadding="2">
<tr>
<td>Check all in this row:<input type="checkbox" name="chkAll" onclick="checkAll(this, ‘tr’);"></td>
<td>checkbox1:<input type="checkbox" name="chk1"></td>
<td>checkbox2:<input type="checkbox" name="chk2"></td>
<td>checkbox3:<input type="checkbox" name="chk3"></td>
</tr>
<tr>
<td>Check all in this row:<input type="checkbox" name="chkAll" onclick="checkAll(this, ‘tr’);"></td>
<td>checkbox4:<input type="checkbox" name="chk4"></td>
<td>checkbox5:<input type="checkbox" name="chk5"></td>
<td>checkbox6:<input type="checkbox" name="chk6"></td>
</tr>
</table>
</form>
</body>
</html>
The code should be pretty self-explanatory, the onclick you add to your "check all" checkbox should be:onclick="checkAll(this, ‘the common parent html tag for your checkboxes’);"
eg:
onclick="checkAll(this, ‘tr’);"
or:
onclick="checkAll(this, ‘div’);"
or:
onclick="checkAll(this, ‘table’);"
etc etc
Update formuláře pomocí JavaScriptu
Pokud píšete často do formulářového pole nějaké texty, které updatujete například o tagy (obrázky, odkazy), může člověka štvát neustálé vkládání tagů jako například “a href…” a podobných.
Do formuláře si můžeme jednoduchyým způsobem vložit pole, do kterých zadáme hodnoty a po stisknutí tlačítka nám to odkaz vloží samo.
Pro příklad vkládání HTML kódu pro odkaz nám bude fungovat následující script:
– mějme formulář s názvem “formular” (to se dává do tagu form atributem name :o)
– budeme mít dvě textová vstupní pole
1) name=”url” (sem budeme zadávat cílové URL odkazu včetně http://
2) name=”odkaz” (sem budeme zadávat viditelnou část odkazu – aktivní klikatelný text
– budeme mít jedno velké textarea pole, do kterého se bude náš odkaz vkládat
– odkaz se vloží po stisknutí tlačítka Vlož
Do headu dokumentu nebo prostě někam do html před začátek formuláře vložíme následující script:
Na button vlož pak umístíme spouštění scriptu, tedy
A to je vše :o) Snad to bylo aspoň trošku srozumitelné.
DHTMLgoodies
Mezi nejlepší, nejkompatibilnější, bez reklam a zadarmo zdroje hezkých kódů pro webové stránky a aplikace patří jednoznačně dhtmlgoodies.com. Na jejich stránkách se dá najít pousta užitečných pomůcek. Nyní kluci z dhtml vše spojili do jedné velké aplikace DHTML Suite. No .. jdu si to stáhnout a uvidíme zda to k něčemu bude. Obecně jsem spíše nepřítel koncentrace spousty užitečných věcí dohromady s těma méně užitečnýma :-(. Bohužel, když jsem si chtěl stáhnout jenom novou verzi scriptu pro kalendář, je už jenom pro DHTML Suite.