html - "Kode-bokse" ? - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

<< < 1 2 > >>

Bruger #15091 @ 17.06.09 21:29

Hej alle sammen...

Jeg vil bare høre hvordan det er "fold-ud"/"fold-ind"-boksene er lavet her på siden?

På forhånd tak ;D

Mvh.

Bruger #10281 @ 17.06.09 21:31

363

Hej,

Det kan du da bare tjekke.. View Source

/Mads

Bruger #15091 @ 17.06.09 21:35

Jo... Men jeg er stadig noob på området, så jeg har lidt svært ved at regne ud hvilken del det lige var jeg skulle kigge efter?

For er det barre denne?:

Kode

<div class="codeboxheader" id="code_XXXXXXXX" onclick="ToggleCodeBox(this.id);">

Der må vel ligge noget "bag"?

Indlæg senest redigeret d. 17.06.2009 21:36 af Bruger #15091

Bruger #10281 @ 17.06.09 21:41

363

Ja, der ligger nok noget CSS og javascript... Bare find class og id i css filen og funktionen ToggleCodeBox() i js filen

Bruger #15091 @ 17.06.09 21:46

Men hvordan fungerer så alt dette?:

Kode

function ToggleCodeBox(element) 
{
	var pre = $("#" + element + "code");
	pre.slideToggle("normal", function() 
	{
		if(pre.css("display") == "block")
			$("#" + element + "_arrow").attr("src", "/images/icons/codeboxarrow_right.gif");
		else
			$("#" + element + "_arrow").attr("src", "/images/icons/codeboxarrow_down.gif");
	});
	
	
	
	
	/*
	if (document.getElementById(element+'code').style.display == "none") {
		document.getElementById(element+'code').style.display='block';
		document.getElementById(element).style.backgroundImage='url(/images/icons/pilhojre.gif)';
	} else {
		document.getElementById(element+'code').style.display='none';
		document.getElementById(element).style.backgroundImage='url(/images/icons/pilned.gif)';
	}*/
}

Undskyld, men jeg er totalt lost på alt indenfor javascripts, php, og asp... ;$

Bruger #11386 @ 17.06.09 21:55

503

Det er lavet med en blanding af jquery og "normalt" javascript

pre.slideToggle("normal", function()
{
if(pre.css("display") == "block")
$("#" + element + "_arrow").attr("src", "/images/icons/codeboxarrow_right.gif");
else
$("#" + element + "_arrow").attr("src", "/images/icons/codeboxarrow_down.gif");
});

Hvis display er lig med block (synlig) så sæt pilen til right ellers sæt pilen til down

Du kan desuden læse mere om slideToggle her:
http://docs.jquery.com/Effects/slideToggle

Bruger #15091 @ 22.07.09 14:05

Så, nu har jeg efterhånden fået det til at køre, tak for linket Casper.
Nu er jeg bare stødt ind i et nyt problem, hvis jeg har flere ting der skal folde ud og ind, så går det lidt galt... Det hele kører rundt, samtidig ;$
Herinde går det jo fint med to bokse lige ved siden af hinanden:

Kode

Kode 1

Kode

Kode 2

Men jeg bruger denne kode:

HTML kode

 <html>
 <head>
 <link rel="stylesheet" type="text/css" href="css.css">
 <script src="http://code.jquery.com/jquery-latest.js"></script>
   
   <script>
   $(document).ready(function(){
     $("h4").click(function () {
       $("p").toggle("slow");
     });    
   });
   </script>
 
 </head>
 <body>
   <h4>Myrer</h4>
   <p style="display: none">Myrer opholder sig oftest udenfor hvor de ikke er et problem, men når de vælger at invadere et hus er det klogt at ringe efter en skadedyrsbekæmper.</p>
 </body>
 </html>

Som gør at man klikker på et ord, og så kommer teksten, men jeg skal have 7 andre dyr, med 7 andre tekster der skal køre ind og ud (uafhænigt af hinanden), hvordan er det lige jeg gør det ;$

På forhånd tak ;D

Indlæg senest redigeret d. 23.07.2009 16:22 af Bruger #15091

Bruger #11386 @ 22.07.09 14:19

503

Hmm du kan bruge $(this).next("p").toggle("slow");

Er ikke sikker på om det virker, men det skulle være en anstændig fremgangsmåde

http://docs.jquery.com/Traversing/next

EDIT: Desuden hvis du skal bruge en ekstern kilde til din jQuery fil, så se eventuelt her:
http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

Indlæg senest redigeret d. 22.07.2009 14:20 af Bruger #11386

Bruger #15091 @ 22.07.09 14:26

Fantastisk!!! Tak tak ;D Nu funger det. Herligt

HTML kode

 <html>
 <head>
 <link rel="stylesheet" type="text/css" href="css.css">
 <script src="http://code.jquery.com/jquery-latest.js"></script>
   
   <script>
   $(document).ready(function(){
     $("dt").click(function () {
       $(this).next("dd").toggle("slow");
     });    
   });
   </script>
 
 </head>
 <body>
   <<dt>Hvepse (gedehams)</dt>
    <dd style="display: none">Hvepse optræder ofte om sommeren hvor de har haft tid til at formere sig hele foråret.</dd>
 
    <dt>Myrer</dt>
    <dd style="display: none">Myrer opholder sig oftest udenfor hvor de ikke er et problem, men når de vælger at invadere et hus er det klogt at ringe efter en skadedyrsbekæmper.</dd>
 </body>
 </html>

EDIT: Og dog, teksten som folder sig ud (dd) ser ikke ud som al den resterende tekst (p), selvom den har den samme formatering i css-filen. Hvorfor ikke?

Indlæg senest redigeret d. 23.07.2009 16:23 af Bruger #15091

Bruger #11386 @ 22.07.09 15:40

503

Kan du vise css filen eller et link til hjemmesiden?

Bruger #15091 @ 22.07.09 17:01

Værsgo:

CSS kode

 body  {
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     margin-left: 0px;
 }
 
 body.hovedside {
     background-color: #EFEFEF;
     background-repeat: repeat-x;
 }
 
 body.top {
     background-image: url("billeder/top.png");
     background-repeat: repeat-x;
 }
 
 body.bund {
     background-image: url("billeder/bund.png");
     background-repeat: repeat-x;
 }
 
 p {    
     font-size: 13px;
     font-family: Verdana, arial, sans-serif;
     color: #666669;
 }
 
 p.top {    
     font-size: 14px;
     font-family: Verdana, arial, sans-serif;
     color: #666669;
     font-weight: bold;
     text-align: center;
 }
 
 p.bund {    
     font-size: 10px;
     font-family: Verdana, arial, sans-serif;
     text-align: center;
     color: #222222;
 }
 
 h1 {
     font-size: 24px;
     font-family: Verdana, arial, sans-serif;
     color: #6360cf;
     font-weight: bold;
     text-transform: uppercase;
 }
 
 h2{
     font-size: 20px;
     font-family: Verdana, arial, sans-serif;
     color: #6360cf;
     font-weight: bold;
     text-transform: uppercase;
 }
 
 h3 {
     font-size: 16px;
     font-family: Verdana, arial, sans-serif;
     color: #6360cf;
     font-weight: bold;
     text-transform: uppercase;
 }
 
 h4 {
     font-size: 13px;
     font-family: Verdana, arial, sans-serif;
     color: #6360cf;
     font-weight: bold;
     text-transform: uppercase;
     cursor: pointer;
 }
 
 dt {
     font-size: 13px;
     font-family: Verdana, arial, sans-serif;
     color: #6360cf;
     font-weight: bold;
     text-transform: uppercase;
     cursor: pointer;
 }
 
 dd {    
     font-size: 13px;
     font-family: Verdana, arial, sans-serif;
     color: #666669;
 }
 
 a.normal:link {
     font-size: 13px;
     font-family: Verdana, arial, sans-serif;
     color: #666669;
     text-decoration: none;
 }
 
 a.normal:visited {
     font-size: 13px;
     font-family: Verdana, arial, sans-serif;
     color: #666669;
     text-decoration: none;
 }
 
 a.normal:active {
     font-size: 13px;
     font-family: Verdana, arial, sans-serif;
     color: #666669;
     text-decoration: none;
 }
 
 a.normal:hover {
     font-size: 13px;
     font-family: Verdana, arial, sans-serif;
     color: #6666ff;
     text-decoration: underline;
 }
 
 a.top:link {
     font-size: 13px;
     font-family: Verdana, arial, sans-serif;
     text-align: center;
     color: #efefef;
     text-decoration: none;
     text-transform: uppercase;
 }
 
 a.top:visited {
     font-size: 13px;
     font-family: Verdana, arial, sans-serif;
     text-align: center;
     color: #efefef;
     text-decoration: none;
     text-transform: uppercase;
 }
 
 a.top:active {
     font-size: 13px;
     font-family: Verdana, arial, sans-serif;
     text-align: center;
     color: #ffffff;
     text-decoration: underline;
     text-transform: uppercase;
 }
 
 a.top:hover {
     font-size: 13px;
     font-family: Verdana, arial, sans-serif;
     text-align: center;
     color: #666669;
     text-decoration: none;
     background-color: #CCCCFF;
     text-transform: uppercase;
 }

Indlæg senest redigeret d. 23.07.2009 16:24 af Bruger #15091

<< < 1 2 > >>

"Kode-bokse" ?

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler