Avatar billede farving Nybegynder
17. juli 2011 - 14:09 Der er 7 kommentarer og
1 løsning

Javascript resize div ved Ajax

Jeg har opbygget en side med hjælp af prototype biblioteket, hvor jeg henter alt content på siden vha. Ajax.Request.

Mit problem er at min "layout" div gerne skal opdatere størrelsen efter hvor højt content-diven er.. (eller billederne på siden)

Jeg kan få det hele til at virke I Chrome, Opera, Safari, IE9 men i IE8 og FF opdaterer den ikke.. I FF ser det ud som om den gør det rigtigt første gang, men ikke gør det de efterfølgende gange..

Min Resize funktion bliver kaldt i en setTimeout, for at sikre at alt content er loadet (Var en workaround som fik det til at virke i de fleste browser).

function resizeLayout(content)
{
    var offset = 240;
    var image = $('images1').scrollHeight + offset;
    var content = ( (content % 2 == 1) ? $('content1').scrollHeight : $('content2').scrollHeight ) + offset;
    if (content > image)
    {
        $('layout').style.height = content.toString()+"px";
    } else {
        $('layout').style.height = image.toString()+"px";
    }
}

Jeg har checket W3schools, og syntes ikke der skulle være nogen problemer med scriptet i de forskellige sprog..

// Farving
Avatar billede flatov Nybegynder
21. juli 2011 - 12:49 #1
Du kunne forsøge at bruge jQuerys css metode.

$('layout').css("height", content.toString()+"px");
$('layout').css("height", image.toString()+"px");
Avatar billede farving Nybegynder
21. juli 2011 - 16:44 #2
Nu kender jeg kun mest til Prototype, men gør den ikke nøjagtig det samme som min stump kode? Bare i en forenklet, og pæn udgave?

// Farving
Avatar billede flatov Nybegynder
22. juli 2011 - 11:30 #3
Det vil jeg mene du har ret i, det var lige et alternativ jeg kunne komme i tanke om. Men det er selvfølgelig ikke smart når du arbejder med Prototype.

Kan man se de i sin funktion et sted? Gør det nemmere at se hvor fejlen muligvis kan ligge.
Avatar billede farving Nybegynder
22. juli 2011 - 15:46 #4
Min funktion er på www.bysylvest.com/DGA/

Jeg har lige tjekket efter at det virker i Chrome 12 (11), IE9, men i FF5 (og ifl kilder også de ældre) og IE7/8 virker det ikke..

Resize fungere fint på alle sider undtagen under menupunktet "Menukort".. Idéen var sådan set at "layout"-div'en, skulle trække footeren ned til bunden af siden, ligesom den gør på de andre sider..

Håber "fejlen" er tydelig nok :-)

Hvorfor den nogen gange ser ud som om den er ved at trække den ned og så hiver den op igen på de andre sider, har jeg hellere ikke kunnet finde svar på, men det er så en fejl jeg ikke har set før nu - underligt nok..

// Farving
Avatar billede flatov Nybegynder
23. juli 2011 - 15:41 #5
Jeg tror jeg kan se hvad det er du vil have den til, men kan desværre ikke hjælpe dig med at finde JS "fejlen".

Men jeg vil da nok anbefale dig at kigge på din struktur på siden, som faktisk er årsagen til dette problem.

Du benytter absolute positionerede elementer til alt, hvilket jeg vil mene er en fejl, når du ønsker et dynamisk indhold.

Benyt hellere følgende til at centrerer din container
position: relative;
width: 900px;
margin: 0px auto;

Så ville jeg bruge 2 elementer med float som content, left & right
og lade din footer have clear: both, som tvinger den under flydede elementer.

<div id="leftContent">
  <div id="image1"></div>
  <div id="image2"></div>
  <div id="content1"></div>
</div>
<div id="rightContent">
  <div id="image3"></div>
  <div id="image4"></div>
  <div id="content2"></div>
</div>
<div id="footer"></div>

Det er kun et forslag, du er velkommen til at fortsætte med din nuværende løsning.

Du siger bare til hvis du har brug for uddybelse
Avatar billede farving Nybegynder
02. august 2011 - 22:19 #6
Har siddet og rodet med det og synes jeg har fået det "konverteret" korrekt.. Den laver den korrekte effekt med CSS som jeg tidligere skulle bruge JS til, men CSS'en ser umiddelbart ud til at opføre sig med samme fejl som før.. både i Chrome og også FF (har ikke tjekket andre)

Desuden, i min footer-div, har jeg sat min div "smiley" til float: right, hvordan får jeg centreret teksten i footeren igen? Har prøvet på samme måde som layout-div'en, og har prøvet med left/right, uden rigtig held..

// Farving
Avatar billede farving Nybegynder
16. august 2011 - 08:52 #7
Problem løst, var noget gammelt kode og små fejl som gjorde det ikke opførte sig korrekt, super løsning..

Det eneste er at jeg ikke kan se hvordan jeg centrere teksten i min footer, mens jeg samtidig højre centrere de 2 billeder, men det er en anden sag..

Smid et svar, og du får dine point :-)
Avatar billede farving Nybegynder
14. november 2011 - 13:08 #8
Lukker denne tråd nu
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
Kurser inden for grundlæggende programmering

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



IT-JOB

Udviklings- og Forenklingsstyrelsen

ITSM-koordinator

Cognizant Technology Solutions Denmark ApS

Test Architect - Projects

Unik System Design A/S

Head of Internal IT

Gehl Architects ApS

IT Supporter