Div slide

Status
Niet open voor verdere reacties.
J

jerrytieben

Gebruiker
Lid geworden
10 aug 2009
Berichten
5
Ik heb onderstaande script geschreven om een div van grootte te veranderen.
Er komt tekst in de newsitem_inner, en de newsitem eromheen moet de hoogte aannemen zodat alle tekst zichtbaar wordt.
Dat werk op zich perfect, als ik honderd keer erop klik.
Elke keer wordt de div 2px groter ( de waarde van speed) maar gaat niet zelf door.
Terwijl ik de functie wel steeds opnieuw aanroep met setTimout().
Kan iemand mij vertellen wat ik verkeerd doe?

HTML:

HTML: 
<div class="newsitem" onclick="changeSizeNieuws(this, 'inner_1', '38');" style="height:38px;">
            <div id="inner_1" class="newsitem_inner">Nieuws item 1<br /><br />It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English</div>
        </div>

javascript:

[JS]function changeSizeNieuws(Ele, innerElement, minH){
innerEle=document.getElementById(innerElement);
maxH=innerEle.offsetHeight;
curHeight=parseInt(Ele.style.height);
speed=2;

if(curHeight < maxH){
Ele.style.height = (curHeight+speed)+'px';
setTimeout("changeSizeNieuws("+Ele+", "+innerElement+", "+minH+")", 100);
}else{
Ele.style.height = minH+'px';
}
}[/JS]
 
je moet het uiteraard wel even in een for loop gieten, anders wordt de IF statement maar 1x uitgevoerd.

en vergeet niet je settimeout getal (nu 100) te vermenigvuldigen bij elke loop.
dus
var i = 0;

for loopje met if statement en:
i=i+50;
setTimeout("changeSizeNieuws("+Ele+", "+innerElement+", "+minH+")", i);
 
Laatst bewerkt:
Hm k heb het geprobeerd, maar kom er nog niet helemaal uit.
In principe hoeft de if statement ook maar 1 keer te worden uitgevoerd, juist omdat ik de functie opnieuw aanroep met de setTimeout() functie, toch?

En de timout met 50 verhogen doe je om een vertraging te creeeren?

alvast dank voor de antwoorden.
 
Heb wat zitten debuggen en er is duidelijk een probleem met de " " en de ' ' .
Alle alerts werken nu volgens mij maar bij setTimeout krijg ik een foutmelding :

Error: Ele is not defined
Source File: file:///home/johan/java/helpmij_nl/Divslide_t=506405.html
Line: 27

HTML: 
<html>
  <head>
    <title></title>
    <meta content="">
    <style></style>
<script type="text/javascript">

var curHeight ;
function changeSizeNieuws(Ele, innerElement, minH){//debugger;
    Ele = Ele ;
    innerEle=document.getElementById(innerElement); 
//    alert(innerElement);
//    alert(document.getElementById(innerElement));
    maxH=innerEle.offsetHeight;
//    alert(maxH ) ;
    curHeight=parseInt(Ele.style.height);
//    alert( curHeight ) ;
    speed = 2 ;
    
    if(curHeight < maxH){
    curHeight= curHeight+speed ; //zichtbaar maken voor de if
        Ele.style.height = curHeight+'px';
        alert(Ele.style.height ); // werkt geeft 140
       // alert(+Ele+", "+innerElement+", "+minH+ );  // syntax-error
        alert( Ele+", "+innerElement+", "+minH );
  //setTimeout('changeSizeNieuws("+Ele+", "+innerElement+", "+minH+")', 100);
     setTimeout(' "changeSizeNieuws(" + Ele + "," +innerElement+ "," +minH+ ")" ',100 );
//    setTimeout("changeSizeNieuws(Ele, innerElement, minH)",100 ) ;
    }else{
        Ele.style.height = minH+'px';   
    }
}
</script>
  </head>
  <body>

  <div class="newsitem" onclick="changeSizeNieuws(this, 'inner1', '38');" style="height:38px;">
            <div id="inner1" class="newsitem_inner">Nieuws item 1<br /><br />It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English</div>
        </div>
  
  </body>
</html>

setTimeout in een if-conditie moet lukken volgens mij .
 
ik kan niet zo goed opmaken uit je verhaal wat nu het probleem is.
Begrijp ik het goed dat je het ook niet werkend hebt gekregen?
Ik kan het zelf nog steeds niet vinden ;)
 
De code heb ik opgeladen in Firefox met de errorconsole open , en ik had al prijs .

missing ] after element list
[Break on this error] changeSizeNieuws([object HTMLDivElement], inner_1, 38)

In dit geval zat er iets mis met de " en ' .

Maar dat bleef maar duren ook na verbeteren , zo is er bezwaar gemaakt voor "inner_1" de underscore heb ik dan maar weggenomen .

Tot slot
[Break on this error] setTimeout(' "changeSizeNieuws(" +E... +innerElement+ "," +minH+ ")" ',100 );\n
Error: Ele is not defined
Source File: file:///home............
Line: 25

Voor zover ik kon zien wordt uw setTimeout functie niet genomen en geeft geen error ,
bij het aanklikken wordt wel telkens 2 bijgeteld .( dat is normaal )

Enfin er ontsnapt mij iets .
In feite kunt u curHeight = maxH en als u toch dynamisch wilt gaan , doe het misschien met een kleine functie changecurHeight() aan te roepen met setTimeout() . Dit lijkt mij eenvoudiger en met minder balast .

Ik gok dat er een probleem is met "this" maar dat is voor mij nog wat denkwerk .
 
Ik heb het gevonden!!

De variabelen die "normale variabelen zijn" en dus geen HTML Object, die moeten nog Quotes om zich heen krijgen. Die waren "+waarde+" en moeten dus '"+waarde"' worden.
Daarmee was het opgelost!

THnks!
 
Probeerde alle parameters in een variabele te steken

[JS]var test =(" Ele + ',' + innerElement +',' + minH ");[/JS]

en dan in setTimeout() te zetten , maar FF blijft reklameren .

Indien uw code werkt , mag ik dan even uw setTimeout() zien ?

Ik leer graag bij ;)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan