html css trikovi padajuci div tag ovi

html css trikovi padajuci div tag ovi

Trick 4 - Padajući Div tag-ovi



Nazad


"Padajući" Div tag-ovi


"Padajući" div tagovi koji uz pomoć JS i Jquery biblioteke klikom miša na odredjeni div tag animirano prikazuju sadržaj div taga. Js u Head sekciji uz pomoć linka koji poziva Jquery biblioteku iz foldera JS, omogućava da se veoma pregledno da lista pitanja gde se klikom na svako pitanje pojavljuje odgovor - što je i najčešća primena ove skripte. Takodje, unutar div tag-ova nalaze se sličice slova Q (Question - pitanje) i A (Answer - odgovor) koje se mogu nalaziti u folderu images. Te ikonice se mogu Photoshopu posebno izdizajnirati.

Head


<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $('.pitanja dd').hide();           // Sve što je dd unutar klase pitanja se ne pojavljuje pri učitavanju stranice (HIDE)
  // Dodaje se klasa HOVER kad je HOVER (PRELAZ MIŠEM) preko klase dt hover
  $('.pitanja dt').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')}).click(function(){ 
  $(this).next().slideToggle('normal');     // Kada se na klikne na ide pomerajući gore-dole slide 
  }); 
});
</script>
<style type="text/css">
.pitanja-i-odgovori { margin:30px; border:1px solid #92cdec; background:#d7e7ff; padding:30px 30px 30px 30px }
.pitanja dt {
 font-weight:bold;
 background:url(images/q.gif) 0 2px no-repeat;    /*  pozicija ikonice pitanja Q (Question) */
 padding:0px 0 0px 30px;
 position:relative;
 color:#FFF;
}
.pitanja dt:hover { cursor:pointer }
.pitanja dd {
 background:url(images/a.gif) 0 2px no-repeat;   /*  pozicija ikonice odgovora A (Answer) */
 padding:0 0 5px 30px;
 position:relative;
 color:#FFF;
}
.pitanja .hover { color:#990000; text-decoration:none}
</style>

Body


<div class="pitanja-i-odgovori">
  <dl class="pitanja">
 <dt>
  <h3 style="color:#FFF";>Šta je tag &lt;dl&gt; koji se nalazi u HTML kodu ovog fajla ?</h3>
  </dt>
  <dd>Tag <strong>&lt;dl&gt;</strong> je tag (oznaka) dolazi od reči &quot;<strong>description list</strong>&quot; gde se daje naznaka HTML kodu da se u nastavku tog taga unosi lista opisa. Naravno, svaki TAG &quot;<strong>dl</strong>&quot; ima otvarajući i zatvarajući Div tag odnosno <strong>&lt;dl&gt; ... &lt;/dl&gt;.</strong> Ovaj kompletan <strong>PANEL</strong> je u stvari <strong>DT (Descritption List).</strong></dd>
  <dt>
  <h3 style="color:#FFF";>Šta je tag &lt;dt&gt; koji se nalazi u HTML kodu ovog fajla ?</h3>
  </dt>
  <dd>Tag <strong>&lt;dt&gt;</strong> je TAG koji dolazi od reči &quot;<strong>terms</strong>&quot; odnosno <strong>Description List Terms</strong> i nalazi se unutar taga <strong>&lt;dl&gt;</strong>. Pitanja  imaju tag <strong>&lt;dt&gt; Šta je ... &lt;/dt&gt;</strong> jer predstavlja listu termina - u ovom slučaju to su <strong>PITANJA</strong>.</dd>
  <dt>
  <h3 style="color:#FFF";>Šta je tag &lt;dd&gt; koji se nalazi u HTML kodu ovog fajla ?</h3>
  </dt>
 <dd>Tag <strong>&lt;dd&gt;</strong> je tag koji definiše <strong>opis svakog termina</strong> <strong>(description)</strong> i nalazi se unutar taga <strong>&lt;dt&gt;. </strong>Ovaj <strong>ODGOVOR</strong> koji se pojavljuje klikom na <strong>PITANJE</strong> je ustvari opis  termina (<strong>terms</strong>)</dd>
  </dl>
</div>

Prikaz u Browser-u


Šta je tag <dl> koji se nalazi u HTML kodu ovog fajla ?

Tag <dl> je tag (oznaka) dolazi od reči "description list" gde se daje naznaka HTML kodu da se u nastavku tog taga unosi lista opisa. Naravno, svaki TAG "dl" ima otvarajući i zatvarajući Div tag odnosno <dl> ... </dl>. Ovaj kompletan PANEL je u stvari DT (Descritption List).

Šta je tag <dt> koji se nalazi u HTML kodu ovog fajla ?

Tag <dt> je TAG koji dolazi od reči "terms" odnosno Description List Terms i nalazi se unutar taga <dl>. Pitanja imaju tag <dt> Šta je ... </dt> jer predstavlja listu termina - u ovom slučaju to su PITANJA.

Šta je tag <dd> koji se nalazi u HTML kodu ovog fajla ?

Tag <dd> je tag koji definiše opis svakog termina (description) i nalazi se unutar taga <dt>. Ovaj ODGOVOR koji se pojavljuje klikom na PITANJE je ustvari opis termina (terms)

 

Saradnje posle završene obuke

Kada završite obuku i krenete da samostalno dizajnirate web sajtove, postoji mogućnost da naiđete na projekte koji Vam se mogu učiniti zahtevni po pitanju više stavki - tehnologija, klijent zahteva da sajt ima neke posebne opcije itd. TEKOMS nudi opciju saradnje po pitanju realizacije web projekata odnosno da zajednički realizujemo web sajt ili web aplikaciju. Ukoliko Vam se stvore određeni zahtevi za realizaciju nekog web projekta a niste sasvim sigurno da možete da samostalno odgovorite na njih slobodno nam pošaljite na email i vrlo brzo daćemo sve potrebne sugestije, savete kako da taj web projekat zajednički realizujemo.

Sertifikat kao opcija

Ukoliko mislite da imate dovoljno znanja možete uraditi određene vežbe posle koga možete dobiti Potvrdu da se uspešno savladali - Kurs web dizajna - HTML,CSS. Polaganje predstavlja izradu web stranica prema tačno definisanim smernicama kako trebaju da izgledaju. Polaganje je ozbiljno i prolaznost je oko 50%. Polaganje podrazumeva da posle 3-5 dana pošaljete komplet urađene vežbe na email (komplet izvorni kod sa pratećim folderima) nakon čega Vam stiže email sa sugestijama. Ukoliko se vidi da su neke greške lako rešive, rad se vraća na reviziju da se koriguje i vrati u određenom roku. Na taj polaganje predstavlja realnu situaciju u kojoj ćete se nalaziti u saradnji sa firmama kojima radite web sajt - a to je da tačno isprogramirate web stranicu kako se klijent tražio. Cene polaganja možete videtu na stranici - Cene obuka