| Autor | Zpráva | ||
|---|---|---|---|
| maestorm Profil |
#1 · Zasláno: 14. 7. 2010, 11:16:59
Dobrý den,
tvořím web, ve kterém se v menu opakují některé položky, kterým jsem nastavil skript fadeIn/Out + CSS, zajímalo by mě, jak pomocí jQuery duplikovat tyto položky spolu s fadeIn/Out + CSS do jiného divu? Případně jak zjednodušit skript, aby stačilo nastavit fadeIn/Out jedenkrát a neopakovat celý postup, jak jsem učinil já... Předem všem případným helperům děkuji za rady a zde uvádím jednotlivé kódy: index.html ->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="cs" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<link type="text/css" rel="stylesheet" href="styles/styles_czech_index.css" />
<title>dmd-ucebnipomucky.cz</title>
</head>
<body>
<div id="head_block">
<a title="go to index" href="index.html"><img id="logo" alt="DMD-učenní pomůcky" src="images/logo.png" /></a>
<ul id="menu">
<li class="basic"><a href="kindergarten.html">mateřská škola</a></li>
<li class="advenced"><a href="primary_school.html">základní škola</a></li>
<li class="expert"><a href="high_school.html">střední škola</a></li>
</ul>
</div>
<div id="container">
<h2>mateřská škola</h2>
<h5 id="matsch">Soubory magnetických karet</h5>
<ul id="magnetic_cards">
<li><a href="human.html"><img id="icon" src="images/human.png" />člověk</a></li>
<li><a href="cartoon.html"><img id="icon" src="images/cartoon.png" />pohádky</a></li>
<li><a href="nature.html"><img id="icon" src="images/nature.png" />příroda</a></li>
<li><a href="brain.html"><img id="icon" src="images/brain.png" />rozvoj poznání</a></li>
<li><a href="languages.html"><img id="icon" src="images/langu.png" />jazyky (Aj/Nj)</a></li>
</ul>
<h2>základní škola</h2>
<h5 id="magcard">Soubory magnetických karet</h5>
<div id="magcard-show">
<li><a href="jazyky.html">jazyky (angličtina, němčina)</a></li>
<li><a href="matematika.html">matematika</a></li>
<li><a href="prvpri.html">prvouka, přírodověda</a></li>
</div>
<h5 id="transfoil">Soubory transparentních folií</h5>
<div id="transfoil-show">
<li><a href="chemfyz.html">chemie, fyzika</a></li>
<li><a href="dejzem.html">dějepis, zeměpis</a></li>
<li><a href="proprv.html">pro 1. stupeň ZŠ</a></li>
<li><a href="prirod.html">přírodopis</a></li></div>
<div id="copyblock">
<h5 id="historycd">dějepisné CD-ROM</h5>
<div id="historycd-show">
<li><a href="dejmacd.html">dějepisné mapy na CD</a></li>
<li><a href="orbipi.html">Orbis pictus</a></li>
</div>
<h5 id="maps">Nástěnné mapy</h5>
<div id="maps-show">
<ol>
<li><a href="stredo.html">dějiny ranného středověku</a></li>
<li><a href="dej1.html">dějiny 18. století</a></li>
<li><a href="dej2.html">dějiny 19. století</a></li>
<li><a href="dej3.html">dějiny 1914-1945</a></li>
<li><a href="dej4.html">dějiny 1945-2007</a></li>
<li><a href="ceskedej.html">České dějiny</a></li>
</ol>
</div>
<h5 id="souno">Soubory nástěnných obrazů</h5>
<div id="souno-show">
<li><a href="dejpis.html">dějepis</a></li>
</div>
</div>
<h2>střední škola</h2>
<h5 id="stf">Soubory transparentních folií</h5>
<div id="stf-show">
<li><a href="biochemfaz.html">biologie, chemie, fyzika</a></li>
<li><a href="djzem.html">dějepis, zeměpis</a></li>
</div>
<div id="space"></div>
</div>
<div id="bottom_block">
<p>Copyright by <a href="http://www.maestorm.wz.cz">maestorm</a></p>
</div>
</body>
</html>
CSS ->
/* styles_czech_index.css */
* {
margin: 0;
padding: 0;
}
body {
background: url("../images/background.gif") #e4ffe5;
}
#container {
background: url('../images/container_bg.png') repeat-y;
margin: 0 auto;
width: 800px;
padding-bottom: 3em;
}
#logo {
width: 150px;
float: right;
margin: 2em 3em 0 0;
border: 3px outset #a10012;
}
#head_block {
background: url('../images/container_top_bg.png') no-repeat;
margin: 0 auto;
width: 800px;
height: 150px;
padding-bottom: 2em;
}
#menu {
padding: 1em 0 4em 5em;
}
#menu li {
list-style: none;
float: left;
margin: 5.36em 0 2px 25px;
}
#menu li a {
color: #677069;
border-bottom: 3px solid #a10012;
font-family: "Geneva CE", "Arial CE", sans-serif;
font-weight: bold;
font-size: 12pt;
padding: 6em 6px 1px 6px;
text-decoration: none;
}
#menu li a:hover {
background: #a10028;
border-bottom: 3px dashed #fff;
color: #fff;
}
#magnetic_cards {
width: 600px;
margin: 0 auto;
padding-left: 5em;
float: left;
}
#magnetic_cards li {
list-style: none;
float: left;
text-align: center;
font-weight: bold;
padding-top: 2em;
}
#magnetic_cards li:hover {
background: url('../images/border.png') no-repeat 49.5% 46%;
}
#icon {
display: block;
padding: 0 2em 1em 2em;
border: none;
}
#magnetic_cards li a {
color: #a10012;
}
#magnetic_cards li a:hover {
background: #a10012;
color: #fff;
text-decoration: none;
}
#container h2 {
font-size: 15pt;
color: #59705c;
border-bottom: 1px solid #59705c;
margin: 0 5.2em 0 5.2em;
padding: 10px 5px 1px 3px;
text-align: right;
line-height: 18pt;
}
#bottom_block {
background: url('../images/container_top_bg.png') no-repeat 100% 90%;
margin: 0 auto;
width: 800px;
padding: 1em 0 3em 0;
text-align: right;
}
#bottom_block p {
padding: 0 3em 0 5em;
}
#container h5 {
color: #a10012;
margin: 1em 5.2em 1em 8em;
padding: 0.5em -25px 2px 5px;
text-decoration: underline;
width: 589px;
}
#container h5:hover {
background: #59705c;
color: #fff;
}
#magcard-show,#transfoil-show,#historycd-show,#maps-show,#souno-show,#stf-show {
padding-left: 9em;
}
#container li a {
color: #677069;
text-decoration: none;
font-weight: bold;
}
#container li a:hover {
background: #677069;
color: #fff;
}
jQuery -> $(document).ready(function() {
|
||
| maestorm Profil |
#2 · Zasláno: 14. 7. 2010, 11:17:59
jQuery ->
$(document).ready(function() {
/* flags/language menu START */
$("#flag01").hover(function () {
$(this).replaceWith('<img id="flag04" alt="czech" src="images/cz.png" />');
});
$("#flag02").hover(function () {
$(this).replaceWith('<img id="flag05" alt="czech" src="images/sl.png" />');
});
$("#flag03").hover(function () {
$(this).replaceWith('<img id="flag06" alt="czech" src="images/pl.png" />');
});
/* bottom effect start */
$(document).ready(function() {
$('#bottom_block').animate({
opacity: 0.6,
}, 2500, function() {
// Animation complete.
});
});
/* bottom effect finish */
/* flags/language menu FINISH */
/* This is scripting for czech_index.html START */
$("#logo").hover(function () {
$(this).replaceWith('<img id="logo" alt="DMD-učenní pomůcky" src="images/logo.gif" />');
});
/* This is scripting for czech_index.html FINISH */
/*Show function*/
$("document").ready(function () {
$("#magnetic_cards").fadeOut(function () {
});
});
$("#matsch").click(function () {
$('#magnetic_cards').fadeIn('slow');
});
$("#matsch").dblclick(function () {
$("#magnetic_cards").fadeOut(800);
});
/*Show function finish*/
/*Show function*/
$("document").ready(function () {
$("#magcard-show").fadeOut(function () {
});
});
$("#magcard").click(function () {
$('#magcard-show').fadeIn('slow');
});
$("#magcard").dblclick(function () {
$("#magcard-show").fadeOut(800);
});
/*Show function finish*/
/*Show function*/
$("document").ready(function () {
$("#transfoil-show").fadeOut(function () {
});
});
$("#transfoil").click(function () {
$('#transfoil-show').fadeIn('slow');
});
$("#transfoil").dblclick(function () {
$("#transfoil-show").fadeOut(800);
});
/*Show function finish*/
/*Show function*/
$("document").ready(function () {
$("#historycd-show").fadeOut(function () {
});
});
$("#historycd").click(function () {
$('#historycd-show').fadeIn('slow');
});
$("#historycd").dblclick(function () {
$("#historycd-show").fadeOut(800);
});
/*Show function finish*/
/*Show function*/
$("document").ready(function () {
$("#maps-show").fadeOut(function () {
});
});
$("#maps").click(function () {
$('#maps-show').fadeIn('slow');
});
$("#maps").dblclick(function () {
$("#maps-show").fadeOut(800);
});
/*Show function finish*/
/*Show function*/
$("document").ready(function () {
$("#souno-show").fadeOut(function () {
});
});
$("#souno").click(function () {
$('#souno-show').fadeIn('slow');
});
$("#souno").dblclick(function () {
$("#souno-show").fadeOut(800);
});
/*Show function finish*/
/*Show function*/
$("document").ready(function () {
$("#stf-show").fadeOut(function () {
});
});
$("#stf").click(function () {
$('#stf-show').fadeIn('slow');
});
$("#stf").dblclick(function () {
$("#stf-show").fadeOut(800);
});
/*Show function finish*/
$('#copyblock').clone().appendTo('#space');
}); |
||
| Chamurappi Profil |
#3 · Zasláno: 14. 7. 2010, 11:34:17
Reaguji na maestorma:
Limit na délku příspěvku by měl odradit blázny, co sem zkouší narvat obrovské kódy, nikoliv přimět je, aby poslali víc příspěvků. Použij místo ídéček třídy. Na vybrání elementu s určitou třídou uvnitř aktuálně zpracovávaného elementu pak použiješ $(this).find(".třída").
Proč používáš skriptování i na hover efekt? Ten patří do CSS, ne? |
||
| maestorm Profil |
#4 · Zasláno: 14. 7. 2010, 12:25:09
díky... a vzhledem k tomu limitu se omlouvám, myslel jsem, že jsem neoznačil celý kód, tím došlo k chybě... příště se pokusím toho vyvarovat ;-) a děkuji za rady pokusím se je uplatnit, i když jak jsem napsal jsem basic (alespoň vzhledem k jQuery)
|
||
| maestorm Profil |
#5 · Zasláno: 14. 7. 2010, 13:19:20 · Upravil/a: maestorm
stále mi to nejde prosím o další radu pokud možno...
nevím kam použít to "$(this).find(".třída")" k duplikaci toho divu? jak? |
||
|
Časová prodleva: 14 let
|
|||
0