what's wrong with this code?

D

DL

What I'd like to do is to resize an element upon f11 key press.

The code:

function keyF() {
var key = window.event.keyCode;
if (key==122) {
// debug
alert (' f11 pressed ');
// never mind the following code for now
document.getElementById('myElement').style.size=123;
}
document.onkeypress=keyF;

I also tried adding the following code (removing the above line) to no
avail.
var ld = document.onkeypress=keyF;
window.onload = ld;

<html>
<body onload="keyF()">
....
</body>
</html>
 
S

SAM

Le 8/24/09 4:52 AM, DL a écrit :
What I'd like to do is to resize an element upon f11 key press.
Click to expand...

On Mac, keys F9 to F12 (at least) are reserved for the system
some other F-keys are used by the navigator
The code:
Click to expand...

What works with my Firefox :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title>
<script type="text/javascript">
function keyF(e) {
e = e || window.event;
var key = e.keyCode;
// debug
visu('key = '+key);
if (key==118) {
// debug
visu (' f8 pressed ');
// never mind the following code for now
// document.getElementById('myElement').style.size=123;
}
}

function visu(t) { document.getElementById('visu').innerHTML = t; }
</script>
</head>
<body onkeydown="keyF(event);">
<p>some content</p>
<p id="visu"></p>
</body>
</html>
 
D

Don84

Le 8/24/09 4:52 AM, DL a écrit :


On Mac, keys F9 to F12 (at least) are reserved for the system
some other F-keys are used by the navigator


What works with my Firefox :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Untitled</title>
<script type="text/javascript">
function keyF(e) {
e = e || window.event;
var key = e.keyCode;
   // debug
      visu('key = '+key);
if (key==118) {
   // debug
   visu (' f8 pressed ');
   // never mind the following code for now
   // document.getElementById('myElement').style.size=123;
   }

}

function visu(t) { document.getElementById('visu').innerHTML = t; }
</script>
</head>
<body onkeydown="keyF(event);">
<p>some content</p>
<p id="visu"></p>
</body>
</html>
Click to expand...

Thank you, Sam, I'll try it.
 
D

Don84

Le 8/25/09 1:01 AM, Don84 a écrit :



"SAM" !
(Sympatical & Affordable Man)
;-)

See also :
<http://www.quirksmode.org/js/events_properties.html>
and (don't know if this page uptodate) :
<http://unixpapa.com/js/key.html>

Generally onkeypress will not give same answer as onkeydown
because you first down the key before to give it pressed
(IE, of course, is not alright with others browsers. See 2nd link above)
Click to expand...

Well, I tried with the following with FF3.5.

// critical js code change to the following
if (key==112) {
// debug
alert (' F11 key pressed ');
// never mind the following code for now
var fh = document.getElementById('visu').style.height;
fh=fh+120;
}

<!-- critical html code changed to the following -->
<iframe id="visu" src="test.htm" width="700" height="200"></iframe>

<!-- the test.htm file content would fill the iframe already -->

// event trigger, have tried both
<body onkeypress="keyF(event);">
<body onkeydown="keyF(event);">

Desired outcome upon F11 press, increase teh iframe height by 120.
Outcome: not working

Any idea as to why not? Thanks.
 
S

SAM

Le 8/26/09 1:23 PM, Don84 a écrit :
Well, I tried with the following with FF3.5.

// critical js code change to the following
if (key==112) {
// debug
alert (' F11 key pressed ');
// never mind the following code for now
var fh = document.getElementById('visu').style.height;
Click to expand...

/*
that will give nothing (or 0)
because there is no *JS style* for the iframe,
and more : height style must have a unit ('px', 'em', '%', ...)
*/
fh=fh+120;
Click to expand...

ugly IE's way : style height *must* get a unit

can't works : element.style.height is only a getter
you can't set it

////// correction #1 //////
var fh = document.getElementById('visu').style;
fh.height = (+fh.height.replace('px','') + 120) + 'px';
}

<!-- critical html code changed to the following -->
<iframe id="visu" src="test.htm" width="700" height="200"></iframe>
Click to expand...

<!-- ///// correction #2 (JS style) ///// -->
<iframe style="height: 200px; width: 700px"
id="visu" src="test.htm"></iframe>
 
D

Don84

Le 8/26/09 1:23 PM, Don84 a écrit :





/*
that will give nothing (or 0)
because there is no *JS style* for the iframe,
and more : height style must have a unit ('px', 'em', '%', ...)
*/


ugly IE's way : style height *must* get a unit

can't works : element.style.height is only a getter
               you can't set it

////// correction #1 //////
var fh = document.getElementById('visu').style;
fh.height = (+fh.height.replace('px','') + 120) + 'px';



<!-- ///// correction #2 (JS style) ///// -->
<iframe style="height: 200px; width: 700px"
  id="visu" src="test.htm"></iframe>
Click to expand...

I tried with IE7 on Vista home premium, it didn't nudge a bit. Could
it be related to Vista's notorious security thing?
 
W

wilq

What I'd like to do is to resize an element upon f11 key press.

The code:

function keyF() {
var key = window.event.keyCode;
if (key==122) {
// debug
alert (' f11 pressed ');
// never mind the following code for now
document.getElementById('myElement').style.size=123;}

document.onkeypress=keyF;

I also tried adding the following code (removing the above line) to no
avail.
var ld = document.onkeypress=keyF;
window.onload = ld;

<html>
<body onload="keyF()">
...
</body>
</html>
Click to expand...


I think that when you press F11 key you get a onResize event... But
you have to test it (im not sure about this) - if yes then you dont
have to listen on keypressed.
 
T

Thomas 'PointedEars' Lahn

Nonsense. Instead, whether setting the `height' property has a visible
effect, depends on the element represted by `element', and the value of
the `position' and `display' properties.


PointedEars
 
S

SAM

Le 8/27/09 10:39 AM, Thomas 'PointedEars' Lahn a écrit :
Nonsense.
Click to expand...

Maybe wasn't I well expressed?
Once the item style is set in a variable 'v' this variable is only the
result, the value style, and can't continue to replace the statement
element.style.height.

v = element.style.height; // v is only a value (a string)
v = v + 100 // v is still a value, a new string
// element.style will not be affected

Instead, whether setting the `height' property has a visible
effect, depends on the element represted by `element', and the value of
the `position' and `display' properties.
Click to expand...

'represted' : unknown by Google translator.
 
J

Jorge

Le 8/27/09 2:03 AM, Don84 a écrit :



See that :
<http://cjoint.com/data/iBnyKbv4rx_functionKey_pressed_0.htm>
Click to expand...

SAM, did you know that Brendan Eich wanted JavaScript to be very much
like AppleScript (hypertalk IIRC, by then) ?

Here's my iframe-resizing demo:

http://jorgechamorro.com/cljs/078/

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Efecto Persiana</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="(e-mail address removed)">
<!-- Date: 2009-08-27 -->
</head>
<body style="background:gray; text-align:center;">
<h3>Tested in Safari, Chrome, Opera, FireFox (MacOSX) and iCab 3.0.5
(MacOS9), not tested in any IEs</h3>
<iframe id="idIframe" src="http://google.com" width="900"
height="500"></iframe>
<script type="text/javascript">
(function () {
function efecto (e) {
var eStyle= e.style;
var speed= 33;
eStyle.overflow= "hidden";
var orderedSetOfStyleProperties= [ "padding-top", "height", "padding-
bottom" ];
var saveStylesValues= {};
(function f () {
var name, valor, repeat= false;
var n= orderedSetOfStyleProperties.length;

while (n--) {
name= orderedSetOfStyleProperties[n];
if (!saveStylesValues.hasOwnProperty(name)) {
//save the original element's style values
saveStylesValues[name]= eStyle[name];
}

valor= parseInt(document.defaultView.getComputedStyle
(e,null).getPropertyValue(name), 10);
valor-= valor/4;

if ((valor < 1) || (valor !== valor)) {
eStyle[name]= 0;
} else {
repeat= true;
eStyle[name]= valor+ "px";
break;
}
}

if (repeat) {
setTimeout(f, speed);
} else {
setTimeout(function () {
eStyle.display= "none";
setTimeout(function () {
for (var name in saveStylesValues) {
if (saveStylesValues.hasOwnProperty(name)) {
eStyle[name]= saveStylesValues[name];
}
}
eStyle.display= "";
setTimeout(function () { efecto(e); }, 1500);
}, 500);
}, speed);
}
})();
}

efecto(document.getElementById('idIframe'));
})();
</script>
</body>
</html>


Regards,
 
S

SAM

Le 8/27/09 2:52 PM, Jorge a écrit :
SAM, did you know that Brendan Eich wanted JavaScript to be very much
like AppleScript (hypertalk IIRC, by then) ?
Click to expand...

Hi, Jorge,

They seem to have a family resemblance :)
Here's my iframe-resizing demo:

http://jorgechamorro.com/cljs/078/
Click to expand...

Where is the stop button !
Where is the stop button !
Where is the stop button !
:)

The main problem is to catch a function key
say ... the F11 key
used by IE to full size the window
used on my Mac to reveal the desktop (from anywhere)

Didn't find how to stop the navigator or the system when hitting the F11
key to resize the iframe.


A function :

function abort(e) {
if(e.stopPropagation) e.stopPropagation();
else cancelBubble = true;
if(e.preventDefault) e.preventDefault();
else returnValue = false;
return false;
}

doesn't seem to do something ...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

What "might" I be doing wrong with this snippet? 6
This code is not working 8
Help with code 0
What's wrong with this javascript code? 3
What's wrong with keyCode and String.fromCharCode 3
Help with my responsive home page 2
Only one table shows up with the information 2
What's wrong with this file write code 5

Members online

No members online now.
Total: 41 (members: 3, guests: 38)
Robots: 84

Forum statistics

Threads
473,780
Messages
2,569,611
Members
45,280
Latest member
BGBBrock56

Latest Threads

Top