Avatar billede tobrukDk Novice
07. april 2011 - 15:36 Der er 28 kommentarer og
1 løsning

slideDown / jQuery

jeg sidde og tænkt at det kun være fedt at lave sådan noget som det her ind på enes hjemmeside :)
http://sandbox.scriptiny.com/accordion/index.html

hvordan gør jeg det? og hvordan få jeg det til at passe ind? og hvad skal min hjemmeside fil navn være?

jeg køre i php.. :)

Håber du kan hjælp mig :)
Avatar billede jakobdo Ekspert
07. april 2011 - 15:55 #1
Avatar billede tobrukDk Novice
07. april 2011 - 15:56 #2
ja da!.. Det er lige hvad jeg kan bruge men har bare det Problem det er første gang jeg skal bruge js til en af min hjemmesider. ..øhmm... :s
Avatar billede danco Nybegynder
07. april 2011 - 16:45 #3
I det link som jakob har smidt kan du se kildekoden for deres eksempel.
Avatar billede olsensweb.dk Ekspert
07. april 2011 - 16:51 #4
man kan mange smarte ting med jquery / UI, men i dette tilfælde vil jeg mene det er overkill,
har du prøvet at kigge i source coden til det du selv linker til i #0 ?? det fyldr max 4k inc css, js, div images
Avatar billede tobrukDk Novice
07. april 2011 - 17:31 #5
forstår ikke hvad du mener...
Avatar billede olsensweb.dk Ekspert
07. april 2011 - 17:35 #6
jquery er absolut ikke et begynder sprog, det kræver et vis kendskab til js i forvejen for at forstå hvad det gør, men hvis du ligger dig fast på jquery er et plugin du kan kigge på
http://plugins.jquery.com/project/accordion
tryk på
Home page http://bassistance.de/jquery-plugins/jquery-plugin-accordion/
demo http://jquery.bassistance.de/accordion/demo/

#5 hvad er det du ikke forstår ??
Avatar billede tobrukDk Novice
07. april 2011 - 17:45 #7
Jeg forstår ikke hvordan man skal sæt det op?.. jeg er helt lost!.. :( åååhhh
Avatar billede tobrukDk Novice
07. april 2011 - 18:10 #8
kan i prøve forklar hvordan jeg gøre det?
Avatar billede jakobdo Ekspert
07. april 2011 - 18:46 #9
Avatar billede olebole Juniormester
07. april 2011 - 20:49 #10
<ole>

320KB CSS og JavaScript, der udfører oceaner af overflødige processer ... tjah, hvis man ikke kan lade være  =)

/mvh
</bole>
Avatar billede jakobdo Ekspert
07. april 2011 - 20:59 #11
Det er dejligt nemt.
Og det kan jo selvfølgelig sagtens minimeres.
Og det er jo så kun 87kb (komprimeret)
Og hvad mon det tager på en 4mbit forbindelse af hente?
0,1 sekund ?
Avatar billede olebole Juniormester
07. april 2011 - 21:33 #12
Komprimeret? Det er min-filerne, du har inkluderet, og de fylder lige knap 320KB, når jeg downloader dem. Hvorfor tror du, det kommer bag på så mange, hvad det koster at gå på nettet med en mobil? Det skyldes bl.a., at så mange kodere gerne vil have et let liv  *o)

Derudover kører koden som sagt bunker af ligegyldige processer - som i øvrigt extender mine DOMElementer på uforudsigelige måder, jeg ikke har bedt om, og som generer min øvrige kode.

Kodelibraries bruges i alle sprog - og jeg er absolut ikke generel modstander af libs. Libs i C, C++, Java, osv er som hovedregel skrevet af kompetente programmører med indsigt på akademisk niveau. JS-libraries er derimod oftest skrevet af slagtere, synkronsvømmere og speciallæger i øre-, næse- og halssygdomme - og jQuery er ingen undtagelse. Det ses, når man adskiller koden i hoveddelene  *o)

Endelig lærer man ikke et hak om JavaScript ved at bruge jQuery - tværtimod.
Avatar billede tobrukDk Novice
07. april 2011 - 23:01 #13
når jeg prøve at lave det så gider min hjemmeside ikke blive vist.. hvad kan jeg gøre galt.. da

jeg skriver min index.php sådan her,,;


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
<title>Klanroga.dk</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="http://www.klanroga.dk/style.css"/>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.custom.js"></script>
<script type="text/javascript">
$(function(){
    $( "#accordion" ).accordion();
});
</head>
<div class="header">
    <b><a href="index.php" target="_self">KlanRoGa.dk</a></b>
</div>
<div class="menusider">
  <a href="index.php" target="_self" <?php if($_GET['s']=="") { ?> class="current"<?php } ?>>Forside</a> -
    <a href="test.php" target="_self" <?php if($_GET['s']=="") { ?> class="current"<?php } ?>>Gallery</a> -
    <a href="index.php" target="_self" <?php if($_GET['s']=="") { ?> class="current"<?php } ?>>Website</a> -
    <a href="index.php" target="_self" <?php if($_GET['s']=="") { ?> class="current"<?php } ?>>Links</a> -
    <a href="index.php" target="_self" <?php if($_GET['s']=="") { ?> class="current"<?php } ?>>Info</a>
</div>
<a href="http://www.facebook.com/Jesperpb" target="_blank"><img style="float:right" src="facebook.png" width="60" height="55" longdesc="http://www.facebook.com/Jesperpb" /></a>
<a href="https://twitter.com/#!/jesperPetersenB" target="_blank"><img style="float:right" src="1270640900_icontexto-inside-twitter.png" alt="" width="60" height="55" longdesc="http://www.facebook.com/Jesperpb" /></a>
<br>
<div class="center">
<?php
$url = $_GET['s'];
switch ($url) {
case "": include("hjem.php");
    break;
case "info": include("info.php");
    break;

  default: echo "Siden findes ikke";
}
?>
</div>
</body>
</html>
Avatar billede olsensweb.dk Ekspert
08. april 2011 - 00:57 #14
>så gider min hjemmeside ikke blive vist.. hvad kan jeg gøre galt.
du mangler at afslutte dit script.
<script type="text/javascript">
$(function(){
    $( "#accordion" ).accordion();
});

rettest til
<script type="text/javascript">
$(function(){
    $( "#accordion" ).accordion();
});
</script>


hvorfor includerer du filer og script til jquery og accordion, når du ikke bruger det ??
#accordion: betyder på id'en accordion skal der udføres en metode der hedder accordion
du har ikke nogle id der hedder accordion, se i source coden der blev vist i #9
Avatar billede tobrukDk Novice
08. april 2011 - 07:03 #15
okay tak. :) hvad skal jeg skrive i den der "accordion"??
Avatar billede jakobdo Ekspert
08. april 2011 - 08:23 #16
Hvis du vælger at bruge jquery ui.
Så kig nu min kode.
Den er så basal som muligt.
Når den virker på din egen side, så begynd at eksperimenter.
Det med at tage noget kode, ikke fatte et hat af koden og vælte en masse ekstra kode på, så lærer du aldrig noget.
Del opgaven op i mindre opgaver.
Og gå frem step by step.
Og sikrer dig hele tiden det virker inden du går til næste step.
Avatar billede tobrukDk Novice
08. april 2011 - 12:14 #17
http://klanroga.dk/test.php
så skal jeg have til passe den ind til min hjemmeside.. :)
Avatar billede tobrukDk Novice
08. april 2011 - 12:23 #18
er det rigtig gjordt?
Avatar billede jakobdo Ekspert
08. april 2011 - 12:41 #19
Virker det ?
Avatar billede olsensweb.dk Ekspert
08. april 2011 - 12:47 #20
@jakobdo: jeg ved godt du har rå kopieret det fra noget andet, med en del andet i, men kan du ikke lige fjerne "query.ui.datepicker-da.js" scriptet, date picker anvenders bestemt ikke i eks, så er der også lidt mindre at downloade :)
så vil jeg mene det er dårlig pædagogik at anvende sammen id navn som function/metode, kan du ikke omdøbe id til accordion1, og selvføgelig også rette til #accordion1

>Hvis du vælger at bruge jquery ui.
jeg vil mene spørgeren er bedre tjent ved at droppe jquery, og lave den i ren js/css (Keep It Simple), eks i #0 er et godt udgangs punkt, og nej det er ikke pga jeg er farvet af selv at have forslået linket i http://www.eksperten.dk/spm/936156 #4 hvor spm startede

men ellers er vi fundstændig enige i #16

#17
prototype.js, er ved at være forældet, skal du lære et fremework så brug jquery

#18
hvad syntes du selv http://validator.w3.org/check?uri=http%3A%2F%2Fklanroga.dk%2Ftest.php&charset=%28detect+automatically%29&doctype=Inline&group=0
Avatar billede olsensweb.dk Ekspert
08. april 2011 - 12:54 #21
du kommer ikke uden om det lån en bog om emnet istedet ??
biblioteket har sikkert en del, hvis du kan få dem elektronisk kan du anvende noget oplæsnings software til at læse det op for dig
danske tekster  http://www.adgangforalle.dk/download.htm
engelske tekster http://www.naturalreaders.com/download.htm
http://www.hokbh.dk/hjaelpemidler/it-programmer/

eks på bøger:
nogle danske bøger fra forlaget libris, desværer af lidt ældre dato (den ældste 2003)
Introduktion til PHP, MySQL og Apache http://www.libris.dk/produkt/Introduktion_til_PHP_MySQL_og_Apache.htm
Start på PHP 5  http://www.libris.dk/produkt/Start_paa_PHP_5.htm
PHP og MySQL    http://www.libris.dk/produkt/PHP_og_MySQL.htm
Start på JS    http://www.libris.dk/produkt/Start_paa_JavaScript_15.htm

som hjemmeside coder/designer er man tvunget til selv at kunne code, andre gider ikke vedligeholde ens hjemmeside, og man kan ikke få alting serveret på et sølvfad, der er ikke nogle short cut's, det er hårdt arbejde, fat i bøgerne, og Read The Fucking Manual, hvar gang man er i tvivl om en function, det værer sig virker måde / parameter call.
hvis man ikke selv gider bruge tid på at lærer at code er man bedre tjent med at installerer et CMS system på sin server.
hos mange Service Providere kan du installerer CMS ved et enkelt klik, det vil typisk værer joomla eller drupal


det er ikke os der skal programmerer din hjemme side det er DIG
Avatar billede tobrukDk Novice
08. april 2011 - 17:59 #22
Avatar billede tobrukDk Novice
08. april 2011 - 18:05 #23
hvad skal jeg kalde de her filer?

var ContentHeight = 200;
var TimeToSlide = 250.0;

var openAccordion = '';

function runAccordion(index)
{
  var nID = "Accordion" + index + "Content";
  if(openAccordion == nID)
    nID = '';
   
  setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'"
      + openAccordion + "','" + nID + "')", 33);
 
  openAccordion = nID;
}


og den her

function animate(lastTick, timeLeft, closingId, openingId)

  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;
 
  var opening = (openingId == '') ? null : document.getElementById(openingId);
  var closing = (closingId == '') ? null : document.getElementById(closingId);

  if(timeLeft <= elapsedTicks)
  {
    if(opening != null)
      opening.style.height = ContentHeight + 'px';
   
    if(closing != null)
    {
      closing.style.display = 'none';
      closing.style.height = '0px';
    }
    return;
  }

  timeLeft -= elapsedTicks;
  var newClosedHeight = Math.round((timeLeft/TimeToSlide) * ContentHeight);

  if(opening != null)
  {
    if(opening.style.display != 'block')
      opening.style.display = 'block';
    opening.style.height = (ContentHeight - newClosedHeight) + 'px';
  }
 
  if(closing != null)
    closing.style.height = newClosedHeight + 'px';

  setTimeout("animate(" + curTick + "," + timeLeft + ",'"
      + closingId + "','" + openingId + "')", 33);
}
Avatar billede tobrukDk Novice
08. april 2011 - 18:50 #24
jeg har fundet ud af det :) klik ind her på

http://klanroga.dk/test.php jeg søgt lidt selv på google og youtube osv.. :) så kommer jeg frem til en god en.. :)

takker utrolig mange gang for alt den tid i vil bruge på at hjælp mig!.. vil i være sød at luk siden eller samtale eller skal jeg selv gøre det?
Avatar billede tobrukDk Novice
08. april 2011 - 19:05 #25
jeg har løse den selv så jeg lukker den også selv!..
Avatar billede jakobdo Ekspert
08. april 2011 - 20:41 #26
hvad snakker du om? Du har fået hjælp på hjælp, og så bliver der lukket med du selv har løst det. Du fattede ikke en meter til at starte med, og nu løste du det selv. Flot!
Avatar billede olebole Juniormester
09. april 2011 - 19:04 #27
tobrukDk har med mange forskellige brugerprofiler gang på gang vist, at han ikke ejer evner til at omgås andre.

Hvad man stiller op med den slags, ved jeg ikke. Så snart hans profil bliver lukket, åbner han blot en ny og fortsætter sin socialt utilpassede hærgen! Det er som at drukne en prop i en spand vand med én finger  :o|
Avatar billede olsensweb.dk Ekspert
09. april 2011 - 22:37 #28
jeg tror stadig ikke spørgeren fatter en meter, har har givetvis fået en til at lave det for ham evt via teamviewer, mit bedste bud ville være Hjalte (http://www.eksperten.dk/profil/phoenix93), som han kender fra efterskolen jf http://www.eksperten.dk/spm/933829

men kom ikke og sig du ikke var advaret: http://www.eksperten.dk/spm/934612 #8 -> http://www.eksperten.dk/spm/934431 #6

olebole bliver du aldrig træt af at gentage dig selv "Under alle omstændigheder så virker det som at skulle drukne en prop i en spand vand med én finger  :o|" ref (http://www.eksperten.dk/spm/934612 #10) :)
Avatar billede olebole Juniormester
09. april 2011 - 23:19 #29
ronols >> Tjooohhh, men når nu det forholder sig sådan, kan jeg ikke se problemet i den beskrivelse. Hvis du kan, er jeg lutter øren  =)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester