Problem with the image dimensions.
in [JavaScript]
|
Prev: javascript validation for a not required field, field is only required if another field has a value
Next: thunderbird and spam in ng
From: venu madhav on 8 Jul 2010 00:49 Hi All, In my application, I have an option where user can upload any image and it would be displayed on top of a particular table. I've set the width to be displayed as some width = 50px and height = 35px. If the user uploads a file whose dimensions are more than that, then it is shrinking the image size which is acceptable. But if the size of the image is less than those dimensions then it is trying to enlarge it which is looking pretty odd. Can some one let me know how can I avoid this. I tried calculating the size of the image before displaying. But the problem is, since the image has to come from the server, it is taking time to calculate its dimensions and in the meanwhile the next steps are getting executed taking both the dimensions as zero. If I put an alert in between, then am getting the dimensions correctly. Is there any way to obtain the correct values without that alert message? Please let me know if you need any further info, Thank you, Venu
From: SAM on 8 Jul 2010 06:59 Le 7/8/10 6:49 AM, venu madhav a �crit : > Hi All, > In my application, I have an option where user can upload any > image and it would be displayed on top of a particular table. I've set > the width to be displayed as some width = 50px and height = 35px. If set the dimensions in JS <img style="max-width:50px" blah...> > the user uploads a file whose dimensions are more than that, then it > is shrinking the image size which is acceptable. But if the size of > the image is less than those dimensions then it is trying to enlarge > it which is looking pretty odd. Can some one let me know how can I > avoid this. <img onload="var w = this.width; this.style.width = (w && w.replace('px','')<50)? w + 'px' : '50px';" src="test.jpg" id="viewer"; alt="to view"; title="screen to display your uploaded picture"> document.getElementById('viewer').src = myUpLoadedFile; Possible that do not work with all browers. (img width / img initialWidth) -- sm
From: Evertjan. on 8 Jul 2010 08:01 SAM wrote on 08 jul 2010 in comp.lang.javascript: > onload="var w = this.width; > this.style.width = (w && w.replace('px','')<50)? > w + 'px' : > '50px';" No need for a local variable. this.width returns a number [IE8 & Chrome tested]. Why setting the width to it's original value? <img onload = "if (this.width>50) this.style.width = '50px';" src='the1.jpg'> what about: <img style='max-width:50px;' onload = "if (this.width>50)alert('IE, shame on you!');" src='the1.jpg'> -- Evertjan. The Netherlands. (Please change the x'es to dots in my emailaddress)
From: SAM on 8 Jul 2010 08:48 Le 7/8/10 2:01 PM, Evertjan. a �crit : > SAM wrote on 08 jul 2010 in comp.lang.javascript: > >> onload="var w = this.width; >> this.style.width = (w && w.replace('px','')<50)? >> w + 'px' : >> '50px';" > > No need for a local variable. > this.width returns a number [IE8 & Chrome tested]. In doubt, a little replace causes no trouble > Why setting the width to it's original value? where original value ? that was no more set in this example, img with no attribute width, nor style > <img > onload = "if (this.width>50) this.style.width = '50px';" > src='the1.jpg'> And what appends then when I'll replace the image with one 40px width ? hop! still in 50px ... no ? > what about: > > <img > style='max-width:50px;' > onload = "if (this.width>50)alert('IE, shame on you!');" > src='the1.jpg'> very good ! ;-) <img src="1.jpg" alt="" style="max-width:50px;_width=50"> (no, no ! no typo! IE's slang) -- sm
From: Evertjan. on 8 Jul 2010 09:09
SAM wrote on 08 jul 2010 in comp.lang.javascript: > Le 7/8/10 2:01 PM, Evertjan. a �crit : >> SAM wrote on 08 jul 2010 in comp.lang.javascript: >> >>> onload="var w = this.width; >>> this.style.width = (w && w.replace('px','')<50)? >>> w + 'px' : >>> '50px';" >> >> No need for a local variable. >> this.width returns a number [IE8 & Chrome tested]. > > In doubt, a little replace causes no trouble > >> Why setting the width to it's original value? > > where original value ? The bit width value of the image. > that was no more set in this example, Every image has such > img with no attribute width, nor style Why? >> <img >> onload = "if (this.width>50) this.style.width = '50px';" >> src='the1.jpg'> > > And what appends then when I'll replace the image with one 40px width ? > hop! still in 50px ... no ? The above takes any jpg. >> what about: >> >> <img >> style='max-width:50px;' >> onload = "if (this.width>50)alert('IE, shame on you!');" >> src='the1.jpg'> > > very good ! ;-) > > > <img src="1.jpg" alt="" style="max-width:50px;_width=50"> That will not work, try: style='max-width:50px;_width:50' > > (no, no ! no typo! IE's slang) -- Evertjan. The Netherlands. (Please change the x'es to dots in my emailaddress) |