Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

jQuery height en width werkt niet (Opgelost)

valles10 - 12/09/2010 12:38 (laatste wijziging 12/09/2010 12:39)

HTML interesse

Ik ben al een tijdje bezig met het maken van een forum. Na vele bug fixes heb ik er nog enkele over... een van die bugs is dat heel mijn content meerekt als er een image breder is dan 700px. Ik heb het volgende scriptje geschreven:

javascript code - Bekijk de code zonder highlighting - Klap code in

                function resize(){
	$("img.resize").each(function(intIndex){
	alert('img resize loaded');
		var maxH = 2000;
		var maxW = 700;
		var H = $(this).height();
		var W = $(this).width();
		alert('Height: '+H+' width: '+W);
	
		if(W > maxW){
			var fW = 1-((W - maxW) / W);
			$(this).width(W* fW);
			alert('breedte van afbeelding veranderd!');
		}
	
		if(H > maxH){
			var fH = 1-((H - maxH) / H);
			$(this).height(H* fH);
			alert('hoogte van afbeelding veranderd!');
		}
});
}
            
function resize(){
	$("img.resize").each(function(intIndex){
	alert('img resize loaded');
		var maxH = 2000;
		var maxW = 700;
		var H = $(this).height();
		var W = $(this).width();
		alert('Height: '+H+' width: '+W);
 
		if(W > maxW){
			var fW = 1-((W - maxW) / W);
			$(this).width(W* fW);
			alert('breedte van afbeelding veranderd!');
		}
 
		if(H > maxH){
			var fH = 1-((H - maxH) / H);
			$(this).height(H* fH);
			alert('hoogte van afbeelding veranderd!');
		}
});
}
 

Met dit zal elke image die via ubb de classe .resize heeft megekregen resized moeten worden. Het enige probleem dat ik nu nog heb, is dat mijn hoogte en breedte niet worden verwerkt...
alert('Height: '+H+' width: '+W); krijg ik een alert met 'Height: 0 width: 0' terug.

Iemand idee hoe dit komt? of wat ik verkeerd doe?

6 antwoorden

Gesponsorde links

Kevin - 13/09/2010 16:29
Crew Ajax/REST		Je hoeft niet alles met jQuery te doen daarom :-) probeer eens native JS: $(this).height Als ik mij niet vergis gaat jQuery die berekening op basis van de CSS stylen doen en native zou dit niet gebeuren.

valles10 - 13/09/2010 17:38
HTML interesse		Thnx voor reactie! maar ik had dit ook eerder al geprobeert... maar dan kreeg ik gewoon de functie height in mijn alert gekregen... dus de code van height...

lemoinet - 13/09/2010 18:16
PHP gevorderde		hoe implementeer je dit script in je website. want bij werkt dit script perfect.

valles10 - 13/09/2010 18:54 (laatste wijziging 13/09/2010 19:03)

HTML interesse

Gewoon in mijn jsBase.js file, waar de rest van mijn javascript ook staat...
Ik krijg mijn alert hoor... hij wil gewoon die width() en height() van die image niet laden...

ik heb geprobeert een 'uniek' ID mee te geven met de IMG, maar zelfs dan wil die height niet werken...

de image komt van zo'n ubb parser, de ubb parser genereert dit:

php code - Bekijk de code zonder highlighting - Klap code in

$number = rand(0, 99999999);
    return "<img class=\"resize\" id=\"".$number."\" src = '" . htmlspecialchars( $content ) . "' alt = '" . htmlspecialchars( $alt ) . "' style = '" .
    			( $float !== false  ? "float:" . $float . ";" : "" ) .
                ( $width !== false  ? "width:" . $width . "px;" : "" ) .
                ( $height !== false ? "height:" . $height . "px;" : "" ) .
                ( $border !== false ? "border:" . $border . ";" : "" ). "'>";

$number = rand(0, 99999999);
    return "<img class=\"resize\" id=\"".$number."\" src = '" . htmlspecialchars( $content ) . "' alt = '" . htmlspecialchars( $alt ) . "' style = '" .
    			( $float !== false  ? "float:" . $float . ";" : "" ) .
                ( $width !== false  ? "width:" . $width . "px;" : "" ) .
                ( $height !== false ? "height:" . $height . "px;" : "" ) .
                ( $border !== false ? "border:" . $border . ";" : "" ). "'>";

Kevin - 13/09/2010 19:05 (laatste wijziging 13/09/2010 19:07)
Crew Ajax/REST		Heb je code zelf ook eens geprobeerd op jsbin ( http://jsbin.com/iseho4 ) en bij mij werkt het ook. Ik heb hier de laatste versie van jQuery gebruikt. Wat ik ook gedaan heb, is op mijn img tag de attributen height en width meegegeven. Als je dit niet doet dan blijven ze 0 blijkbaar. Doe jij dit ook zo? Edit: even te snel gepost, volgens jouw code geef je geen height en width attributen mee aan je img tag.
Bedankt door: valles10

valles10 - 13/09/2010 19:22

HTML interesse

Idd! dat was het probleem dus! Ik heb dus bij mijn parser via PHP.net: getimagesize de formaten van de images opgehaald, en ze zo in de <img> tags gezet

js:

javascript code - Bekijk de code zonder highlighting - Klap code in

                function resize(){
	$("img.resize").each(function(intIndex){
		var maxW = 700;
        var H = $(this).height();
        var W = $(this).width();
    
        if(W > maxW){
			var fW = 1-((W - maxW) / W);
            $(this).width(W* fW);
			$(this).height(H* fW);
        }
	});
}
            
function resize(){
	$("img.resize").each(function(intIndex){
		var maxW = 700;
        var H = $(this).height();
        var W = $(this).width();
 
        if(W > maxW){
			var fW = 1-((W - maxW) / W);
            $(this).width(W* fW);
			$(this).height(H* fW);
        }
	});
}
 

php:

php code - Bekijk de code zonder highlighting - Klap code in

list($width_f, $height_f, $type_f) = getimagesize( htmlspecialchars( $content ) );

list($width_f, $height_f, $type_f) = getimagesize( htmlspecialchars( $content ) );

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten