Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

0

Karakter infóbox wordpressben.

Szerző Norbi96, 2011-08-16 13:40 PM

Nem szólhatsz hozzá ehhez a témához.
Tovább az első olvasatlan hozzászóláshoz

17 válasz erre a témára

#1 Norbi96

Új Tag

Regisztrált tag
31 Hozzászólás:

Elküldve: 2011-08-16 - 13:40 PM

Sziasztok!
Egy szitkomokkal foglalkozó oldalt csinálok wordpressel és mivel egy-egy sorozatban rengeteg karakter van, így úgy oldanám meg, hogy az adott karakter nevére kattintva megnyílik egy box és abban van a szereplő leírása.
Hogy lehet ezt megcsinálni? Valamilyen bővitmény kell hozzá ?
Előre is köszi a válaszokat!

Tetejére

#2 hgrg

WP Addikt

VIP tag
2943 Hozzászólás:

Elküldve: 2011-08-16 - 13:46 PM

Jquery Hide
http://www.google.hu...iw=1280&bih=885
Jquery toogle
http://www.google.hu...iw=1280&bih=885

~~Hgrg.Info | Segítség:Support.hgrg.info | WP fordítások~~

Tetejére

#3 Norbi96

Új Tag

Regisztrált tag
31 Hozzászólás:

Elküldve: 2011-08-16 - 14:12 PM

Itt találtam ezt a kódot:

<script type="text/javascript">
	$(document).ready(function() {
		$('a#show').click(function() {
 $('p.pelda_1').show();
		});
		$('a#hide').click(function() {
 $('p.pelda_1').hide();
		});
		$('a#toggle').click(function() {
 $('p.pelda_1').toggle('slow');
		});
	});
</script>

<a id="show">Jelenítsd meg (show)</a> - <a id="hide">Tüntesd el (hide)</a> - <a id="toggle">Jelenítsd meg és tüntesd el (toggle)</a>
<p class="pelda_1">Játssz velem!</p>

Ebből kitöröltem, ami nekem nem kellett(hide,show):

<script type="text/javascript">
	$(document).ready(function()
		$('a#toggle').click(function() {
 $('p.pelda_1').toggle('slow');
		});
	});
</script>
<a id="toggle">Jelenítsd meg és tüntesd el (toggle)</a>
<p class="pelda_1">Játssz velem!</p>

Látszólag jó,de amikor odaviszem az egeret,akkor csak a sima szöveg kurzot jelenik meg, és ha rákattintok, akkor nem történik semmi.
Mi lehet a hiba?

Tetejére

#4 hgrg

WP Addikt

VIP tag
2943 Hozzászólás:

Elküldve: 2011-08-16 - 16:55 PM

http://temp.hgrg.inf...i96-jquery.html
A forráskódba megjegyzésbe írtam pár instrukciót!

~~Hgrg.Info | Segítség:Support.hgrg.info | WP fordítások~~

Tetejére

#5 Farkas Győző

WordPress-tisztelő

Adminisztrátor
3948 Hozzászólás:

Település:Pécs/Hungary

Elküldve: 2011-08-16 - 17:09 PM

Azért örömtelibb lenne, ha a megkezdett tanulás végeredménye is itt lenne. ...

Nem a linkelés a kifogás, hanem az eredmény ismertetésének hiánya.

Hirtelen ötlettől vezérelve megváltoztatod a rendszered, a linked elérhetetlenné válik, az utókor meg itt ál, és hülye marad.

Könyvelőzóna - Könyvelőiroda Pécs | Ambassador Club Pécs | SZÍVORVOS/Cardiologist Pécs | WordPress2You - WordPress kezdőknek |

Tetejére

#6 Norbi96

Új Tag

Regisztrált tag
31 Hozzászólás:

Elküldve: 2011-08-16 - 17:20 PM

Ha egy oldalba akarom a

<a id="toggle">Jelenítsd meg és tüntesd el (toggle)</a>

<p class="pelda_1">Játssz velem!</p>

kódot beilleszteni, akkor pontosan hova is kell beillesztenem a kódot?
Bocs, ha sokat lámáskodok.

Szerk:Sikerült, köszi!

Annyi, hogy kéken jelenik meg, de amúgy szuperül működik.

Szerkesztve Norbi96 által: 2011-08-16 - 17:25 PM

Tetejére

#7 Norbi96

Új Tag

Regisztrált tag
31 Hozzászólás:

Elküldve: 2011-08-16 - 17:33 PM

Ugye a p.pelda_1 csak egy db névhez lesz jó.
Lehet úgy h beírom, hogy p.pelda_1,p.pelda_2 stb?

Szerkesztve Norbi96 által: 2011-08-16 - 17:33 PM

Tetejére

#8 Norbi96

Új Tag

Regisztrált tag
31 Hozzászólás:

Elküldve: 2011-08-16 - 19:45 PM

Sikerült, csakhogy ha rákattintok bármelyikre, akkor az összes megnyílik.
Kód:

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/javascript">
	$(document).ready(function()
	{	
		// Betöltődéskor máris elrejti a pelda_1 osztályú bekezdést
		$('p.pelda_1, p.pelda_2, p.pelda_3,p.pelda_4,p.pelda_5,p.pelda_6,p.pelda_7').hide();
		// Ha a toggle osztályú link-re kattintaszí
		$('a#toggle').click(function()
		{
			// Lassan "váltsa át" a pelda_1 osztályú bekezdést
			$('p.pelda_1, p.pelda_2,p.pelda_3,p.pelda_4,p.pelda_5,p.pelda_6,p.pelda_7').toggle('normal');
		});
	});
</script>

Szerkesztve Norbi96 által: 2011-08-16 - 19:46 PM

Tetejére

#9 hgrg

WP Addikt

VIP tag
2943 Hozzászólás:

Elküldve: 2011-08-16 - 19:55 PM

Hali. Azért tettem külső oldalra, mert ott látható a működő verzió így.
De persze beillesztem a forráskódot is -az utókornak

-. Elsőre azért nem gondoltam, hogy szükséges, mert az itt látható kódrészlet lett egy teljes oldalba illesztve. No de akkor még egyszer:
Itt kód hozzá:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <!--
  Pár dolog amire figyelned kell:
	1. A fejlécbe kerüljön a script rész. (WordPress esetben a sablon header.php-ja, vagy csinálsz egy pici beépülőt, amivel mindig hozzáadod a fejlcéhez..)
	2. A body-ba a link és a tartalom (WordPress esetben egy bejegyzés/oldal tartalma avagy sablon index,page,single stb .php file-jai. Ha bejegyzésbe illeszted, akkor HÍTML nézetben írd ezt be, mert a vizuális szerkesztő el fogja rontani ill. a beállításoknál kapcsold ki a "javítsa ki az XHTML kódot" opciót..)
  -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/javascript">
	$(document).ready(function()
	{	
		// Betöltődéskor máris elrejti a pelda_1 osztályú bekezdést
		$('p.pelda_1').hide();
		// Ha a toggle osztályú link-re kattintaszí
		$('a#toggle').click(function()
		{
			// Lassan "váltsa át" a pelda_1 osztályú bekezdést
			$('p.pelda_1').toggle('slow');
		});
	});
</script>
</head>
<body>
  
<a id="toggle">Jelenítsd meg és tüntesd el (toggle)</a>

<p class="pelda_1">Játssz velem!</p>

</body>
</html>

Szerkesztve hgrg által: 2011-08-16 - 19:56 PM

~~Hgrg.Info | Segítség:Support.hgrg.info | WP fordítások~~

Tetejére

#10 hgrg

WP Addikt

VIP tag
2943 Hozzászólás:

Elküldve: 2011-08-16 - 20:00 PM

@Norbi: igen persze, mivel az esemény az, hogy ha a toogle id-jű linkre kattintanak akkor nyissa ki őket. te ezt írtad le. ezért nyílik ki az összes.
Amit tudsz csinálni:

  <script type="text/javascript">
        $(document).ready(function()
        {       
                // Betöltődéskor Elrejti az összes bejegyzést egyszerre
                $('p.pelda_1, p.pelda_2, p.pelda_3,p.pelda_4,p.pelda_5,p.pelda_6,p.pelda_7').hide();
                // Ha a toggle osztályú link-re kattintaszí
                $('a#toggle1').click(function()
                {
                        // Lassan "váltsa át" a pelda_1 osztályú bekezdést
                        $('p.pelda_1').toggle('normal');
                });
				$('a#toggle2').click(function()
                {
                        // Lassan "váltsa át" a pelda_2 osztályú bekezdést
                        $('p.pelda_2').toggle('normal');
                });
				$('a#toggle3').click(function()
                {
                        // Lassan "váltsa át" a pelda_3 osztályú bekezdést
                        $('p.pelda_3').toggle('normal');
                });
				$('a#toggle4').click(function()
                {
                        // Lassan "váltsa át" a pelda_4 osztályú bekezdést
                        $('p.pelda_4').toggle('normal');
                });
				$('a#toggle5').click(function()
                {
                        // Lassan "váltsa át" a pelda_5 osztályú bekezdést
                        $('p.pelda_5').toggle('normal');
                });
				$('a#toggle6').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.pelda_6').toggle('normal');
                });
				$('a#toggle7').click(function()
                {
                        // Lassan "váltsa át" a pelda_7 osztályú bekezdést
                        $('p.pelda_7').toggle('normal');
                });

        });
</script>

Szerk: bocs de a fórum editora átindentelte kicsit..

Szerkesztve hgrg által: 2011-08-16 - 20:01 PM

~~Hgrg.Info | Segítség:Support.hgrg.info | WP fordítások~~

Tetejére

#11 Norbi96

Új Tag

Regisztrált tag
31 Hozzászólás:

Elküldve: 2011-08-16 - 20:09 PM

Hatalmas köszönet

Esetleg azt nem tudod, hogy miért jelenhet meg kéken?
Tehát kinézetre olyan, mint egy link és ha oda viszem az egeret, akkor szöveg kurzor jelenik meg.

Tetejére

#12 hgrg

WP Addikt

VIP tag
2943 Hozzászólás:

Elküldve: 2011-08-16 - 20:29 PM

Csak azért mert

<a id="toggle"></a>

HTML tag-et használtuk ami tudvalevőleg: link

http://www.w3schools.../tags/tag_a.asp
Ha nem szeretnéd, hogy így nézzen ki:
1. másik tag-et használsz (pld span ami formázásra való)
így:

<span id="toggle"></span>

2. megformázod olyanra amilyenre szeretnéd CSS használatával..
http://www.w3schools...css/default.asp

Ahhoz, hogy a szokásos mutató-s kurzor jelenjen meg, a style.css-ed végére tegyél be egy ilyet:

.pelda_1, .pelda_2, .pelda_3, .pelda_4, .pelda_5, .pelda_6, .pelda_7{
    cursor:pointer
}

kurzorokról továbbiakban:
http://www.w3schools...lass_cursor.asp

Szerkesztve hgrg által: 2011-08-16 - 20:30 PM

~~Hgrg.Info | Segítség:Support.hgrg.info | WP fordítások~~

Tetejére

#13 Norbi96

Új Tag

Regisztrált tag
31 Hozzászólás:

Elküldve: 2011-08-17 - 17:02 PM

Köszi!
Arra van plugin, hogy van x db sorozat aloldala, és a neve mellé szeretnék egy zászlócskát, ami jelzi, hogy pl angol, amerikai stb.
Gondolom meg lehetne úgy oldani, hogy beteszek mindegyikhez a zászló képét, de ha lehetséges, inkább úgy oldanám meg, hogy [en], tehát lenne egy adatbázisa, és onnan hívja meg a képet vagy valami ilyesmi módon.
Előre is köszi a válasz(oka)t !

Tetejére

#14 Norbi96

Új Tag

Regisztrált tag
31 Hozzászólás:

Elküldve: 2011-08-17 - 17:54 PM

ehh, elrontottam kicsit:
[en] helyett [uk] kellett volna.

Tetejére

#15 Norbi96

Új Tag

Regisztrált tag
31 Hozzászólás:

Elküldve: 2011-08-17 - 18:59 PM

Bocs a 3 hsz-ért.
Raktam be még további p.xyz-t, de azok nem akarnak működni.
A pelda_* helyett p.dwight,p.sheldon stb-et írtam, de valamiért nem működnek.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
   <script type="text/javascript">
        $(document).ready(function()
        {       
                // Betöltődéskor Elrejti az összes bejegyzést egyszerre
                $(' p.pelda_2,p.pelda_1, p.pelda_3,p.pelda_4,p.pelda_5,p.pelda_6,p.pelda_7,p.pelda_8,p.pelda_9, p.pelda_10, p.pelda_11,p.pelda_12,p.pelda_13,p.pelda_14,p.pelda_15,p.pelda_16,p.pelda_17,p.pelda_18,p.pelda_19,p.pelda_20,p.sheldon,p.leonard,p.raj,p.howard,p.penny,p.whil,p.bernadette,p.amy,p.leslie,p.dwight_31,p.roy_27,p.jen,p.moss,p.douglas,p.denholmp.ryanhoward_34,p.karenf_35,p.hollyflax_33').hide();
                // Ha a toggle osztályú link-re kattintaszí
                $('a#toggle1').click(function()
                {
                        // Lassan "váltsa át" a pelda_1 osztályú bekezdést
                        $('p.pelda_1').toggle('normal');
                });
                                $('an#toggle2').click(function()
                {
                        // Lassan "váltsa át" a pelda_2 osztályú bekezdést
                        $('p.pelda_2').toggle('normal');
                });
                                $('a#toggle3').click(function()
                {
                        // Lassan "váltsa át" a pelda_3 osztályú bekezdést
                        $('p.pelda_3').toggle('normal');
                });
                                $('a#toggle4').click(function()
                {
                        // Lassan "váltsa át" a pelda_4 osztályú bekezdést
                        $('p.pelda_4').toggle('normal');
                });
                                $('a#toggle5').click(function()
                {
                        // Lassan "váltsa át" a pelda_5 osztályú bekezdést
                        $('p.pelda_5').toggle('normal');
                });
                                $('a#toggle6').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.pelda_6').toggle('normal');
                });
                                $('a#toggle7').click(function()
                {
                        // Lassan "váltsa át" a pelda_7 osztályú bekezdést
                        $('p.pelda_7').toggle('normal');
                });
                                $('a#toggle8').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.pelda_8').toggle('normal');
                });
                                $('a#toggle9').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.pelda_9').toggle('normal');
                });
                                $('a#toggle10').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.pelda_10').toggle('normal');
                });
                                $('a#toggle11').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.pelda_11').toggle('normal');
                });
                                $('a#toggle12').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.pelda_12').toggle('normal');
                });
                                $('a#toggle13').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.pelda_13').toggle('normal');
                });
                                $('a#toggle14').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.pelda_14').toggle('normal');
                });
                                $('a#toggle15').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.pelda_15').toggle('normal');
                });
                                $('a#toggle16').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.pelda_16').toggle('normal');
                });
                                $('a#toggle17').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.pelda_17').toggle('normal');
                });
                                $('a#toggle18').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.pelda_18').toggle('normal');
                });
                                $('a#toggle19').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.sheldon').toggle('normal');
                                $('a#toggle20').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.raj').toggle('normal');
                });
                                $('a#toggle21').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.amy').toggle('normal');
                });
                                $('a#toggle37').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.leonard').toggle('normal');
                });
                                $('a#toggle22').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.howard').toggle('normal');
                });
                                $('a#toggle23').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.penny').toggle('normal');
                });
                                $('a#toggle24').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.leslie').toggle('normal');
                });
                                $('a#toggle25').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.whil').toggle('normal');
                });
                                $('a#toggle26').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.moss').toggle('normal');
                });
                                $('a#toggle27').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.roy_27').toggle('normal');
                });
                                $('a#toggle28').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.jen').toggle('normal');
                });
                                $('a#toggle29').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.douglas').toggle('normal');
                });
                                $('a#toggle30').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.denholm').toggle('normal');
                });
                                $('a#toggle31').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.dwight_31').toggle('normal');
                });
                                $('a#toggle32').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.bernadette').toggle('normal');
                });
                                $('a#toggle33').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.hollyflax_33').toggle('normal');
                });
                                $('a#toggle34').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.ryanhoward_34').toggle('normal');
                });
                                $('a#toggle35').click(function()
                {
                        // Lassan "váltsa át" a pelda_6 osztályú bekezdést
                        $('p.karenf_35').toggle('normal');
                });   });
        });
</script>

Ez van a header.php-ban

<a id="toggle27">Roy Trenneman</a>

<p class="roy_27">Játssz velem!</p>

<a id="toggle26">Maurice Moss</a>

<p class="moss">Játssz velem!</p>

<a id="toggle28">Jen Barber</a>

<p class="jen">Játssz velem!</p>

<a id="toggle29">Douglas Reynholm</a>

<p class="douglas">Játssz velem!</p>

ez pedig a szereplőknél

Szerkesztve Norbi96 által: 2011-08-17 - 19:01 PM