Az oldal menüje
 
Az év weboldala - 2013


Photoshop leírások

Ikonbázis
Galéria
 

 
Címkék

A blogban leggyakrabban használt címkék

 

Neko

Szövegdobozok - Friss író dobozok
Szövegdobozok - Friss író dobozok : Kattintásra lenyíló szövegdoboz

Kattintásra lenyíló szövegdoboz


Kattintásra lenyíló szövegdoboz

Elég sok kérdést kaptam, hogyan lehet olyan szövegdobozt készíteni, hogy ha rákattintasz egy szóra pl. akkor lenyílik a doboz. Hoztam hozzá egy kódot. Az alap kód a Dynamicdrive-ról van, de hozzá a CSS kódot én írtam meg.

Javascript kódok
Csak illeszd be oldalad egyszerű moduljába. Nem kell vele semmi mást csinálni.

<script type="text/javascript" src="//aranymeli.gportal.hu/portal/aranymeli/upload/285733_1414396384_01546.js">
</script><script type="text/javascript" src="//aranymeli.gportal.hu/portal/aranymeli/upload/285733_1414396385_02343.js">
</script><script type="text/javascript">
animatedcollapse.addDiv('textbox', 'fade=1,speed=400')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>

A doboz kódja
Ebben kell a doboz címét és a tartalmat megírni.

<div align="center">
<div id="animated-collapsible-box">
<div id="animated-collapsible-head">
<p style="text-align: center;">
<a href="#" rel="toggle[textbox]" style="">Kattintásra lenyíló szövegdoboz</a></p>
<div class="animated-collapsible-text">
<div fade="1" id="textbox" speed="400" style="display: none;">
Ide jön a tartalom, amit a rejtett dobozba lehet írni. Jöhet bele kép, szöveg, Chat, Facebook doboz vagy bármi más is :)
<p style="text-align: center;">
<img alt="" src="//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1414232751_66.png" style="width: 370px; height: 254px;" /></p>

</div>
</div>
</div>
</div>
</div>

CSS kód
Itt tudod beállítani, hogy a szövegdobozod hogyan nézzen ki.

<style type="text/css">
#animated-collapsible-box { /* az egész doboz */
   background-color: #000000;
   width: 400px;
   padding: 5px;
}
#animated-collapsible-head a:link, #animated-collapsible-head a:visited, #animated-collapsible-head a:hover { /* a fejléc */
   font-family: Book Antiqua;
   font-size: 17px;
   font-weight: normal;
   color: #ffffff !important;
   background-color: #e41e69;
   text-align: center;
   padding: 5px;
}
.animated-collapsible-text { /* tartalom */
   color: #ffffff !important;
   background-color: transparent;
   text-align: justify;
   width: 400px;
}
</style>

1 hozzászólás
Csak regisztrált felhasználók írhatnak hozzászólást.
Utolsó hozzászólásokÚjabbak 1 KorábbiakLegelső hozzászólások
2014.10.27. 12:54
Gergő

Annyi kimaradt, hogy így csak egy lenyíló szövegdobozt lehet létrehozni. Ha valaki kettőt szeretne, akkor kicsit módosítani kell a kódot:

Keresd meg ezt a részt:

animatedcollapse.addDiv('textbox', 'fade=1,speed=400')

ez alá mehet több, csak a textbox szót kell átírni, pl:

animatedcollapse.addDiv('textbox', 'fade=1,speed=400')
animatedcollapse.addDiv('valami', 'fade=1,speed=400')
animatedcollapse.addDiv('lenyilo', 'fade=1,speed=400')

Aztán át kell írni a másik kódot is:

<div align="center">
<div id="animated-collapsible-box">
<div id="animated-collapsible-head">
<p style="text-align: center;">
<a href="#" rel="toggle[valami]" style="">Kattintásra lenyíló szövegdoboz</a></p>
<div class="animated-collapsible-text">
<div fade="1" id="valami" speed="400" style="display: none;">
Ide jön a tartalom, amit a rejtett dobozba lehet írni. Jöhet bele kép, szöveg, Chat, Facebook doboz vagy bármi más is :)
<p style="text-align: center;">
<img alt="" src="//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1414232751_66.png" style="width: 370px; height: 254px;" /></p>
</div>
</div>
</div>
</div>
</div>
 
A vastagon szedett részeket kell átírni.
Remélem segített valakinek :)
 

Sztárok/Bulvár: Tudj meg friss pletykákat, híreket. Katt!    *****    Outsider - Gay - Creative - Rebel - Tolerant - Furry - Brony - Hipster - Gamer - Otherkin - Geek - Autistic    *****    Xtina Hungary - Minden, ami Christina Aguilera!    *****    Légy Te is AVON tanácsadó *** Nyereményjátékok *** Kereseti lehetõség *** Vásárolj kedvezményesen AVON termékeket!    *****    Nyerj ajándékszettet! Töltsd ki a kérdõívet és nyerj! *** Nyerj ajándékszettet! Töltsd ki a kérdõívet és nyerj!    *****    Jófogás Játékvásár - Jófogás Játékvásár - Jófogás Játékvásár - Jófogás Játékvásár     *****    FRPG &#9679; FANTASY SZEREPJÁTÉK &#9679;&#12300;&#914;&#923;SM&#923;IW&#12301; &#9679; FANTASY SZEREPJÁTÉK &#9679; EGY SZIGET + 24 MÁGUS &#9679; FANTASY SZEREPJÁT&Eacut    *****    Itt megtalálhatod a legfrissebb híreket, cikkeket, képeket a Golden Globe- és Oscar-díjas színésznõrõl! Katt!    *****    Furry Fandom - Antropomorf Állatok - Furry Fandom - Antropomorf Állatok - Furry Fandom - Antropomorf Állatok    *****    Légy Te is AVON tanácsadó *** AVON termékek *** Kereseti lehetõség *** Értékesítõ kollégákat keresek *** sminkek    *****    Esküvõi meghívók! Mindegyik kézzel készült, egyedi. Gyere, nézd meg az oldalamat.    *****    A legfrissebb Anime hírek , mindennap anime ajánló , mondocon képek , és hírek. Csatlakozz közösségünkhöz!    *****    Rendelj bármilyen asztrológiai elemzést,júniusban Te mondod meg,hogy mennyit szeretnél érte fizetni!Várlak az oldalamon!    *****    Egyetemistáknak kiemelt lakások eladóak. www.simonyiingatlan.hu Debrecen eladó kiváló lakások. www.simonyiingatlan.hu    *****    Egyetemistáknak kiemelt lakások eladóak. www.simonyiingatlan.hu Debrecen eladó kiváló lakások. www.simonyiingatlan.hu    *****    NÁLAM NINCSENNEK AKCIÓK, MINDEN ASZTROLÓGIAI ELEMZÉS "BECSÜLET KASSZÁS", A KONZULTÁCIÓ ÉS OKTATÁS INGYENES.    *****    **** Nokedli-lapja****Családi magazin****18-98 éves korosztály mindent megtalál itt, játékoktól a hírekig*****    *****    KÜLÖNLEGES AKCIÓ A CSILLAGJÖVÕ OLDALON JÚNIUSBAN.TE DÖNTHETED EL MENNYIBE KERÜLJÖN A HOROSZKÓP MEGRENDELÉSEID ÁRA!    *****    Minden héten anime/managa hírek , minden nap Anime ajánlók , Mondocon hírek. Itt nem fogsz unatkozni!! :)    *****    KÜLÖNLEGES CSILLAGJÖVÕ AKCIÓ JÚNIUSBAN.TE DÖNTHETED EL MENNYIBE KERÜLJÖN A SZÜLETÉSI HOROSZKÓP! VÁRLAK!RENDELD MEG MOST!