[js] onResize gekkigheid.

[Verwijderd]

Ik heb echt wat vaags nu: Wanneer men in een iframe een plaatje selecteert en resized dan wordt de volgende functie aangeroepen:

onresize="parent.resizeImage(this,'400','300')"

400 = maximaal toegestane breedte
300 = maximaal toegestane hoogte

Deze functie doet het volgende:

code:

 function resizeImage(element,breedte,hoogte)
 {
             var id = element.id;
             var nieuwe_hoogte = window.foo.document.getElementById(id).height;
             var nieuwe_breedte = window.foo.document.getElementById(id).width;
                                                
    if(nieuwe_hoogte >= hoogte)
    {
                          foo.document.getElementById(id).style.width = breedte;
                          foo.document.getElementById(id).style.height = hoogte;
    }
    
                if(nieuwe_hoogte < hoogte)
    {
                     var deelfactor = hoogte / nieuwe_hoogte;
         var nieuwe_breedte = breedte / deelfactor;
             foo.document.getElementById(id).style.height = nieuwe_hoogte;
         foo.document.getElementById(id).style.width = nieuwe_breedte;
                }
    

                
                if(nieuwe_breedte >= breedte)
    {   
           foo.document.getElementById(id).style.width = breedte;
           foo.document.getElementById(id).style.height = hoogte;
    }

    if(nieuwe_breedte < breedte)
    {
               deelfactor = breedte / nieuwe_breedte;
           var nieuwe_hoogte = hoogte / deelfactor;
           foo.document.getElementById(id).style.width = nieuwe_breedte;
           foo.document.getElementById(id).style.height = nieuwe_hoogte;
    }   
}

De bedoeling van dit scriptje is dat afbeeldingen geresized kunnen worden op schaal en niet groter dan de tablecel waar ze in staan. Wel kleiner dus.

Om dan te resizen selecteer ik het plaatje en dan komen er van die vierkantjes op de hoekjes en middenin (Net zoals in Word). Ik kan dan het plaatje bij zo'n vierkantje pakken en slepen naar het gewenste formaat.

Nu is het vage dat hij prima resized op de hoogte, ik kan hem telkens middenonderaan pakken bij het vierkantje en resizen, maar wanneer ik hem wil resizen op de breedte dat dat maar 1 keer goed gaat. Wanneer ik hem dan nog een keer resize, dan blijft hij gewoon de afmetingen houden die hij al had.

Wanneer ik de hoogte en breedte if loopjes omdraai, dan gaat het precies andersom, dan werkt breedte dus goed en hoogte maar een keer. Ik hoop dat ik een beetje duidelijk kan maken wat er gebeurd. Zie ik wat doms over het hoofd?

[Verwijderd]

Niemand een idee? Ik heb ook al met een if/else constructie gewerkt, dat de functie eerst kijkt of de hoogte veranderd is en zo niet dan kijkt hij of de breedte veranderd is.

Bood helaas ook geen oplossing

[drm]

offtopic:
http://gathering.tweakers.net/forum/faq/forumgedrag#not-done
zie 'schoppen binnen 24 uur'

kan je even een voorbeeldje laten zien?

[Verwijderd]

Het zou kunnen dat de variabelen nieuwe_hoogte en nieuwe_breedte niet de waarde houden die ze in het begin toegekend krijgen, maar veranderen omdat het pointers zijn naar de eigenschappen van het plaatje.

Als je dit doet zou het zomaar eens kunnen werken:

code:

var nieuwe_hoogte = parseInt(window.foo.document.getElementById(id).height,10);
var nieuwe_breedte = parseInt(window.foo.document.getElementById(id).width,10);

edit:
Ik heb ff wat beter gekeken, en er zitten wat rare dingen in je code:

• je geeft die this door maar doet verder moeilijk met getElementById...blijf gewoon lekker die this gebruiken
• je gebruikt .height en style.height door elkaar.
• if(a>=b) {} if(a<b) {} is beter op te schrijven als if(a>=b) {} else {}
• je vergeet de verkleinde waardes af te ronden: Math.round(hoogte / deelfactor)

Kijk daar in ieder geval eerst naar...

[ Voor 35% gewijzigd door Verwijderd op 19-12-2002 18:02 ]

[drm]

[nohtml][quote]Blues:
• je geeft die this door maar doet verder moeilijk met getElementById...blijf gewoon lekker die this gebruikenDaar zat ik idd ook al naar te kijken, maar de reden is dat de call gedaan wordt aan de parent van het iframe, en dat de parent vervolgens weer aan de slag gaat met een element uit de iframe, dus ik kan die redenering in de code nog wel volgen... of het nodig is is een 2^e

[Verwijderd]

Hmm,

Volgens mij ligt het niet aan de getElementById. Als ik bijvoorbeeld doe:

function resizeImage(element,breedte,hoogte)
var nieuwe_hoogte = window.foo.document.element.height;

Dan werkt het helemaal niet meer.

Hij pakt alleen de eerste waarop hij checked, dus of de hoogte, of de breedte. En niet daarna ook nog eens de andere.

Ik heb nu:"

code:

function resizeImage(element,breedte,hoogte)
{
     var id = element.id;
     var nieuwe_hoogte = window.foo.document.getElementById(id).height;
     var nieuwe_breedte = window.foo.document.getElementById(id).width;
                                
    if(nieuwe_hoogte >= hoogte)
    {
          foo.document.getElementById(id).style.width = breedte;
          foo.document.getElementById(id).style.height = hoogte;
    }
    else
    {
         var deelfactor = hoogte / nieuwe_hoogte;
         var nieuwe_breedte = Math.round(breedte / deelfactor);
         foo.document.getElementById(id).style.height = nieuwe_hoogte;
         foo.document.getElementById(id).style.width = nieuwe_breedte;
    }               
    if(nieuwe_breedte >= breedte)
    {   
       foo.document.getElementById(id).style.width = breedte;
       foo.document.getElementById(id).style.height = hoogte;
    }
    else
                {
       deelfactor = breedte / nieuwe_breedte;
       var nieuwe_hoogte = Math.round(hoogte / deelfactor);
       foo.document.getElementById(id).style.width = nieuwe_breedte;
       foo.document.getElementById(id).style.height = nieuwe_hoogte;
    }   
}

Ik moet .style.height en .height door elkaar gebruiken, aangezien het slepen van zo'n afbeelding invloed heeft op de styletags.

Bedankt voor alle tips so far. ik heb wel het idee dat ik er vlakbij ben. Kan ik ze niet tegelijkertijd uitvoeren ofzo? Dus op hoogte en breedte checken tegelijkertijd?

Ohja,
var nieuwe_hoogte = parseInt(window.foo.document.getElementById(id).height,10);
var nieuwe_breedte = parseInt(window.foo.document.getElementById(id).width,10);
bood ook geen soelaas, hoewel ik dat juist de meest voor de hand liggende oplossing zou vinden.

[ Voor 8% gewijzigd door Verwijderd op 20-12-2002 09:45 ]

[Verwijderd]

Verwijderd schreef op 20 december 2002 @ 09:41:
Volgens mij ligt het niet aan de getElementById. Als ik bijvoorbeeld doe:

function resizeImage(element,breedte,hoogte)
var nieuwe_hoogte = window.foo.document.element.height;

Dan werkt het helemaal niet meer.

Klopt, ik bedoelde ook dit:

code:

<img onresize="parent.resizeImage(this,'400','300');" ... >

// en dan

function resizeImage(element,breedte,hoogte) {
             var nieuwe_hoogte = element.height;
             var nieuwe_breedte = element.width;
...etc.

Niet dat dit iets helpt bij je echte probleem, trouwens