PDA

View Full Version : what's with this image?



khaled450
11-10-2007, 07:28 AM
<html>
<head>
<title>Example</title>
<script type="text/javascript">
function size()
{
var a = document.getElementById('img').style.width;
var b = document.getElementById('img').style.height;
if(a != 150){
document.getElementById('img').style.width = 150;
document.getElementById('img').style.height = 200;
}else{
document.getElementById('img').style.width = 300;
document.getElementById('img').style.height = 500;
}
return false;

}
</script>
</head>
<body>

<img id="img" style="width:300px; height:500px; cursor:pointer" onClick="size()"src="zoro15.jpg" alt=""
/>
</body>
</html>




why isn't it resizing back to normal?

jscheuer1
11-10-2007, 07:39 AM
a will never = 150 in a browser that complies to standards. The style width property is a string that includes the type of units being used, not a raw number as you are trying to make it be. If you try to assign it as just a number, many browsers will refuse to, others may append 'px' to it. Either way, it will never equal 150.

There could be other problems.

khaled450
11-10-2007, 11:13 AM
is there a better way around this?

jscheuer1
11-10-2007, 04:15 PM
is there a better way around this?

Well, the main thing is that you need to take into account the facts I mentioned. And, yes there is a better way, any way that worked would be better. There are, in fact 'many ways to skin a cat.' Here's one:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function size(el){
var s = el.style, w = 'width', h = 'height';
if(s[w] != '150px'){
s[w] = '150px';
s[h] = '200px';
}
else {
s[w] = '300px';
s[h] = '500px';
}
};
</script>
</head>
<body>
<div>
<img style="width:300px; height:500px; cursor:pointer;"
onclick="size(this)" src="zoro15.jpg" alt="">
</div>
</body>
</html>

Kenny
11-10-2007, 08:15 PM
I've always had trouble with the 'px' deal. Here's what I whipped up from the original code...


<html>
<head>
<title>Example</title>
<script type="text/javascript">
function size()
{
var a = document.getElementById('img').offsetWidth;
var b = document.getElementById('img').offsetHeight;
if(a != 150){
document.getElementById('img').style.width = '150px';
document.getElementById('img').style.height = '200px';
}else{
document.getElementById('img').style.width = '300px';
document.getElementById('img').style.height = '500px';
}
return false;

}
</script>
</head>
<body>

<img id="img" style="width:300px; height:500px; cursor:pointer" onClick="size()"src="zoro15.jpg" alt=""
/>
</body>
</html>

jscheuer1
11-11-2007, 04:50 AM
There are, in fact 'many ways to skin a cat.' Here's one . . .


I've always had trouble with the 'px' deal. Here's what I whipped up from the original code . . .

Poor cat. Yep, that looks like another way. However, even with your trouble with the 'px' deal, I see that you use (for example):



. . . g').style.width = '150px';

which acknowledges:


The style width property is a string that includes the type of units being used, not a raw number . . .

and uses the 'px' deal. There's no real way to totally avoid the facts of the matter.

Twey
11-11-2007, 05:02 AM
var s = el.style, w = 'width', h = 'height';
if(s[w] != '150px'){
s[w] = '150px';
s[h] = '200px';
}I've noticed this pattern in your code of late. Why do you do it?

Also, you've started indenting now? :p

jscheuer1
11-11-2007, 05:48 AM
I've noticed this pattern in your code of late. Why do you do it?

I am assuming you mean condensing via variable assignment. Isn't that the way efficient machine code works? In any case, sometimes I just get tired typing, and/or the ideas come too fast.


Also, you've started indenting now?

You are hard to please. If I condense my code 'you complain.' If I expand it 'you complain.'

In this particular case I just thought I would give the OP a break so that they could read it more easily.

I like to think of myself as an aspiring code virtuoso. I can write it . . . however, and still know what it means. I stress the word 'aspiring', but I'm making progress.

Sometimes I'm in a hurry. Some other times I'm stopping to smell the roses. But most times I try to make the code as clear and as efficient as the particular situation calls for.

It has been my experience that folks will often ask questions if they don't initially get the' how and why', and want to.

Twey
11-11-2007, 06:06 AM
You are hard to please. If I condense my code 'you complain.' If I expand it 'you complain.'Oh, on the contrary, I'm quite pleased about it, I was just surprised since you've previously said you hated indentation in any form and found that you had to try harder to read even properly-indented code.
I am assuming you mean condensing via variable assignment. Isn't that the way efficient machine code works? In any case, sometimes I just get tired typing, and/or the ideas come too fast.Ah, the slowdown comes from the lookup: if we have a.b.c.d and we access it multiple times, it's more efficient to store e = a.b.c then access it as e.d. For a single property name, there is no slowdown, and I'd suspect that assigning it to a variable and then doing a string lookup would actually be slower, albeit only marginally.

jscheuer1
11-11-2007, 06:28 AM
There is a reason why I put 'you complain' in quotes. I wasn't saying that you really were upset or even expressing that you were. In any case, the indenting or lack thereof is never meant to be for or against you, or anyone.

I'm not all about top code efficiency, but I do like to adopt, as I go along, techniques for it*. I also reserve the right to write as I see fit, as it were, 'as it comes off my pen', and as I see fit to edit it.



*to wit - I'm going to be using a lot more of:


for (var i=some.length-1 ; i>-1; --i)

than I have heretofore.

Twey
11-11-2007, 06:30 AM
I'm not all about top code efficiency, but I do like to adopt, as I go along, techniques for it*. I also reserve the right to write as I see fit, as it were, 'as it comes off my pen', and as I see fit to edit it.And I reserve the right to question you on the more surprising practices -- I might learn something after all. :)

jscheuer1
11-11-2007, 07:16 AM
And I reserve the right to question you on the more surprising practices -- I might learn something after all. :)

Sounds like a plan. I've certainly learned from you, both by simply observing, and by asking. Hopefully I have returned the favor on occasion.

Assuming the code is written properly to perform as desired, the format of code (other than its readability for anyone not mentally keyed into it already), braces vs. not (for the most part) - indent vs. not (almost always), makes no major difference other than raw parse/download/cache/disk time/space/bandwidth use.

Other issues are generally more germane to this type of mutual edification.