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="http://aranymeli.gportal.hu/portal/aranymeli/upload/285733_1414396384_01546.js">
</script><script type="text/javascript" src="http://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="http://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="http://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 :)
 

Magyarország egyetlen Olicity és legaktívabb Arrow rajongói oldala! Minden infó az aktuális 6. évadról és egyéb finomság    *****    Megjelent a The Sims 4 legújabb kiegészítõje, a Laundry Stuff Pack. Vajon megéri megvenni? Derítsd ki Te magad!    *****    Állatok - Könyvek - Zene - HobbiZoona Blog - Állatok - Könyvek - Zene - HobbiZoona Blog - Állatok - Könyvek - Zene -Katt    *****    Lépj be a lovak csodálatos világába! Nevelj te is nálunk! KATT KATT KATT KATT    *****    Nem lehet saját lovad? Nevelj virtuálisan ITT! Nevelj, versenyezz, licitálj szebbnél szebb lovakra!    *****    -Portálépítés és portáldíszítés kezdõknek és haladóknak! Rengetek leírás, JavaScriptek , CSS ,HTML kódok,Naptár,Design!-    *****    The Resident - A kórházi drámasorozat január 21-én indul Matt Czuchry és Emily VanCamp fõszereplésével! Nézzetek be!    *****    Mindenféle kérdésedre õszinte választ kaphatsz a valódi Kérdõasztrológia segítségével.    *****    Részletes személyiség és sors analízis / születési horoszkóp / ajándék 3 év elõrejelzéssel. Most érdemes ide látogatni!!    *****    Ha diplomás asztrológust keresel, aki BECSÜLET KASSZÁS alapon ad tanácsot és INGYEN OKTAT, akkor keress bizalommal!    *****    A BIOTÉRKÉP AZ IGAZI KARMA! MEGMUTATJA PONTOSAN,MILYEN FELADATTAL SZÜLETTÉL.EGY PRÓBÁT MEGÉR. SOK SEGÍTSÉG MINDEN NAP!!!    *****    Megnyitott a madárvendéglõ! Gyertek vendégségbe ti is Mályvához és Pipitérhez! Irány a Mesetár!    *****    Megnyitottam cikkes, véleményes blogomat! Sok-sok érdekes bejegyzéssel várlak naponta, ne hagyd ki! - Alice    *****    Sztárokról és idolokról írok,ajánlókat hozok,tippeket és tageket osztok meg veletek!Nézz be egy blogkóros lány oldalára!    *****    Az igazi karma a horoszkópodban a Felszálló holdcsomópont,a Chiron,a Lilith (Fekete Hold),Rendeld meg most!Várlak, katt!    *****    családi adókedvezmény 2018 nyomtatvány letöltés, feltételek tudnivalók    *****    Rendelj születési horoszkópot és 3 év elõrejelzés ajándékba a tiéd. Ne feledd a horoszkóp a lélek tükre,bele kell nézni!    *****    családi pótlék utalás 2018 - csp utalás - utalás idõpontja 2018 - családi pótlék kifizetések !    *****    Ismerd meg az Olicity párost! Minden a Zöld Íjász címû sikersorozat imádott szerelmespárjáról! Mindennap friss!    *****    SZEREPJÁTÉK! Ha aktív oldalon szeretnél játszani, nézz be és légy része egy egyedi történetnek! Csatlakozz!