Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse

Visa/Dölj-funktion med Javascript & jQuery

JavaScript (lägg precis innan </head>):

<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".links_body").hide();
$(".links_head").click(function(){
$(this).next(".links_body").slideToggle('fast');
}); }); </script>

Stilmallskod (lägg längst ner i stilmallen/style.css):

.links_list { 
	margin:0px; 
	padding:0px;
}


.links_head { 
	margin-top:-20px;
	color:#242424; 
	font-family: verdana, sans-serif; 	
	font-size:15px;
	text-align:left;
	padding: 3px;
}


.links_body { 
	padding: 0px; 
	margin: 0px;
	text-align: justify; 
	color: #000; 
	display: none;
}


.links_body a { 
	color: #000; 
	display: block;
        text-decoration: none;
}

.links_body a:hover { 
	color: #000; 
	display: block;
        text-decoration: none;
}

Kodmallskod (lägg där du vill att din visa/dölj-funktion ska ligga till exempel i menyn):

<div class="links_list">
	
	<p class="links_head"> 
		<span>
			Överskrift <!-- ÖVERSKRIFTEN (DET SOM SYNS NÄR ANVÄNDAREN INTE KLICKAT) -->
		</span>
	</p> <!-- LINKS_HEAD -->

	
	<div class="links_body">
		Innehållet (exempelvis dina kategorier, ditt arkiv eller valfri text av något slag)
	</div> <!-- LINKS_BODY -->

</div> <!-- LINKS_LIST -->

Sanna tipsar:
Du kan använda kodmallskoden flera gånger om du vill skapa flera olika visa-dölj-saker så att säga. Jag har ju till exempel en för bloggdesign, en för arkiv, en för blog roll osv. i min blogg just nu. Stilmallskoden och JavaScriptet klistrar du dock bara in en gång (stilmallskoden 1 gång i stilmallen och JavaScriptet i varje kodmall).

Från filmen:

Visa/Dölj-funktion med Javascript

 

Hej hörni.

Idag så ska jag visa er hur jag har gjort min meny här där man trycker och så trillar det ner lite länkar eller vad man nu vill ha. Det kan vara bilder eller det kan vara text eller vad som helst, men det är som en typ av visa/dölj-funktion. Den är gjord med javascript och jquery så vi kör igång helt enkelt.

Då kommer jag att visa detta på en testblogg som jag har gjort här. Till att börja med så har ni en scriptkod, alltså javascript och jquery, som ligger överst här nedanför så den tar ni först. Så går ni in i alla era kodmallar om tanken är att ni ska, vad heter det, om tanken är att ni ska lägga in detta på alla era sidor, alltså inläggsidan, kategorisidan och arkivsidan. Det bestämmer ni ju själva. Om det inte är så att ni ska lägga in den här i varje eller på varje sida så är det bara framsidan eller vilken sida det nu är ni vill ha den på.

Man bläddrar numera längst ner i kodmallen och lägger sin, vad heter det, sin scriptkod precis ovanför </body>. Man lägger de alltså inte inom head-taggen längre och det beror på att om man lägger den, i och med att ett html-dokument alltid läses uppifrån och ner utav webbläsaren så ska man alltid lägga sina script längst ner därför att annars kan de sega ner resten av sidan. Det viktigaste på sidan är ju egentligen att läsa innehållet på den, inte att läsa in ett script.

I alla fall, vi lägger den här koden alltså precis ovanför </body>-taggen. Så vi zoomar in lite så att ni ser vad jag gör. Nu är jag snart längst ner i kodmallen. Där ser ni </body>-taggen och då så lägger vi in den precis ovanför där. Så publicerar vi ändringarna. Det kommer ju inte hända nånting nu, i och med att vi har liksom inte gjort nånting som svarar på den här funktionen, eller vad man ska säga, som det här javascriptet är. Utan det kommer sedan. Om ni nu vill ha det här på inlägg- arkiv- kategorisidan så lägger ni in den så här på samma sätt på dem också, alltså precis ovanför </body>-taggen.

Sedan så har ni en stilmallskod och jag rekommenderar väl att man lägger den längst ner i stilmallen också om man inte är jättesäker. Då kan man klistra den lite var man vill men känner man sig lite osäker på ifall man förstör någon annan kod eller så, så lägg den längst ner i stilmallen. Då är det lättare att hitta också sen när du ska gå in och fram och tillbaka och spara och ändra och greja liksom, så vet du att den här är där.

Nu ska vi då lägga in själva kodmallskoden som jag har indenterat upp lite fint till er och även lagt lite fina kommentarer på. Jag vet inte var ni vill ha den här koden, men säg att ni skulle vilja ha den i menyn. Så lägger ni den helt enkelt där, nånstans i menyn. Menyn är ju <div id=”side”>, så vi bläddrar ner till <div id=”side”> och så lägger vi den nånstans där inne. Då så ser ni att det finns <div class=”link_list”>, den behöver ni inte pilla på. Sen så har ni överskrift och det är alltså, om ni kollar på min kod här då till exempel ska vi se. Här uppe, överskriften är ju bloggdesign här. Överskriften här är photoshop. Överskriften här är grafik osv.

Så säg nu att jag skulle vilja ha, jag vet inte, Sanna kanske. Sen så innehållet som är här nere. Zoomar in lite till så att ni ser. Då har vi alltså links_list, links_head och links_head det är liksom överskriften då som sagt. Sen så har vi links_body och links_body är ju det som finns inuti, alltså det som visas när man trycker. Där inne då så lägger vi det som vi vill ha där inne. Det kan ju vara er arkivkod eller det kan vara en text eller bilder eller så. Jag går ju inte igenom i detta tips om hur man lägger in vilket. Jag har ju valt att lägga in en tabell här under där jag har lagt länkar men det finns ju redan videos om hur man lägger in en tabell så det är helt enkelt bara att lägga en tabell inuti links_body eller lägga en länk, a href, eller lägga det stycket som är för senaste inlägg till exempel. Så säg då är det ju från <ul> ner till </ul>, så då tar vi det till exempel.

Så ändrar vi då överskriften till senaste inläggen, till exempel. Om det är nu är det man vill göra. Man kan inte förhandsgranska detta för ett script fungerar oftast inte i blogg.se:s förhandsgranskning, utan man måste spara och ladda om sidan och då ska det synas i din kodmall. Nu hamnade den lite konstigt här och det beror på att inställningarna som jag har lagt in på links_head, där kan margin-top till exempel vara negativt, eller vad det nu än kan vara, så det får man gå in och modifiera så att det passar ens egen blogg.

Då ser ni att då lägger det sig här men just nu så har jag ju inget senaste inlägg på den här bloggen. Så vi gör som så att vi lägger något mer där. Ska vi se, hej <br>, hej <br>, hej <br>. Ska vi se. Ska sparas också, så vi publicerar ändringarna där. Så kan vi bläddra ner och kolla. Ja då ser ni att då hamnar det en massa hej här och då får man helt enkelt gå in i stilmallskoden sen och så får man modifiera koden tills man tycker att den passar ens egen blogg. Jag kommer nämligen börja göra så nu att det koderna som jag lägger ut, det kommer bara var koder som är liksom nödvändiga för att koden ska fungera, men jag kommer ju inte fylla dem med en massa egenskaper. Css:en kommer inte fyllas med massa egenskaper för då ser jag att då kopierar ni bara den och så gör ni inget eget av den, utan jag kommer bara att lägga upp det som behövs och sen så får ni helt enkelt lägga till egna, vad heter det, egna, åh gud, egna egenskaper i koderna.

Så det enda som ni inte ska pilla på det är, här nere så ser ni att det står links_body och så står det display: none. Det ska ni inte ta bort utan ni får bara lägga till grejer helt enkelt. Ni får givetvis ändra allt annat, men just display: none som står under links_body, det ska ni inte ta bort.

Det var det som jag hade tänkt visa er idag så får vi hoppas att ni har en fortsatt trevlig dag. Ha det så gott. Hej hej.

24 år, läser till Webbutvecklare, driver eget företag inom design, grafik & SEO samt ett företag som designar posters. På fritiden skapar jag bloggar, hemsidor och gör andra projekt inom webb. Jag har bloggat sedan 2007 under namnet Sannas Rum och har också två egna Youtubekanaler.

Läs mina andra inlägg

1 comment

  1. SvaraJohanna Pettersson

    Hejsan!
    Finns det något liknande man kan göra fast med hela siden. Att man kan ta bort den och sedan klicka fram den så att man bara har själva wrappern framme?

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *