PDA

View Full Version : shortcut keys

dysfunctionGazz
04-16-2003, 03:12 PM
If it exists, can sum1 post a snippet of code that would allow the creation of shortcut keys on a website...

IE so that ctrl-(some key) would open a specific link.

The company I work for uses an ASP driven page to pull from customers account. They have said this cannot be done, i disagree.

Someone help?
HairyTeeth
04-16-2003, 03:23 PM
<a href="foo.html" accesskey="z">alt + z</a>

You still need to press enter when the anchor has the focus.
dysfunctionGazz
04-16-2003, 03:40 PM
nice mate.

dead useful. hopefully this will prove me right...!


but is there no way to do without the enter key... I mean like just standard alt+whatever links straight to the file.

G*
beetle
04-16-2003, 04:09 PM
well, Mozilla opens the links by defualt, but IE doesn't. Here's a fix for that.<html>
<head>
<title>Test</title>

<script type="text/javascript">

function altLinks()
{
if ( !document.all ) return;

var a, i = 0, data = new Object();

while ( a = document.links[i++] )
{
data[a.getAttribute('accesskey').toUpperCase()] = a;
}

document.body.onkeyup = function()
{
if ( event.altKey )
{
if ( link = data[String.fromCharCode( event.keyCode )] )
{
link.click();
}
}
}
}

</script>

</head>

<body onload="altLinks()">

Press "Alt+G" for <a href="http://www.google.com" accesskey="g">Google</a><br />
Press "Alt+Y" for <a href="http://www.yahoo.com" accesskey="y">Yahoo</a><br />
Press "Alt+L" for <a href="http://www.lycos.com" accesskey="l">Lycos</a><br />

</body>
</html>If you're interested, I could make an even more transparent version of this with a DHTML Behavior.
beetle
04-16-2003, 04:17 PM
ah, it was quick and easy, so I did it anyway. This is a better solution, as it doesn't require any onload-scripting or sniffing.<html>
<head>
<title>Test</title>

<style type="text/css">

a { behavior: url(misc.htc) }

</style>

</head>

<body>

Press "Alt+G" for <a href="http://www.google.com" accesskey="g">Google</a><br />
Press "Alt+Y" for <a href="http://www.yahoo.com" accesskey="y">Yahoo</a><br />
Press "Alt+L" for <a href="http://www.lycos.com" accesskey="l">Lycos</a><br />

</body>
</html>and alt_links.htc<public:component>

<public:attach event="onfocus" onevent="focusHandler()">

<script language="JScript">

function focusHandler()
{
if ( element.accessKey && event.altKey )
{
element.click();
}
}

</script>

</public:component>

:D
brothercake
04-16-2003, 04:57 PM
Originally posted by beetle
but IE doesn't.
I didn't know that - thanks for the tip, and the elegant solution ;)

Damn IE ... is there no end to its vaguery :mad:
beetle
04-16-2003, 05:02 PM
Aha! gotcha bcake!!

Look again. The links only receives the click method if the altKey is being held down.

:p
brothercake
04-16-2003, 05:03 PM
Originally posted by beetle
Aha! gotcha bcake!!

Look again. The links only receives the click method if the altKey is being held down.
:p
:D I did look again ... and already edited my response by the time I saw yours :o (nb for confused readers - I originally critisised beetle's behavior script thinking that every <a> element which receives the focus would be clicked, making tab navigation impossible; but the altKey discriminator solves that :))
beetle
04-16-2003, 05:52 PM
Hehe, caught ya talking too fast :D

I actually really like DHTML Behaviors. They are easy to make and have a good cool-factor, but they invalidate your CSS and are IE-only. But, in cases like this where a solution is needed only for IE, I think it's perfect.
brothercake
04-16-2003, 07:27 PM
I reckon the IE-only thing is the best bit about behaviors - you can use them to make things work in IE that would otherwise be too advanced ;) - I've been using them to compensate for IE's lack of :hover and :focus - for things that work in mozilla, safari and O7 already :)

Invalid CSS - I generally have a separate "style_ie5.css" containing all the stupid hacks you need to make things look right and work properly, and include that using a conditional comment :thumbsup: as long as the code that conforming user agents see is valid, then that's fine with me.

What really bothers me is the way they load - tell me if you see the same thing:

- incorporate a behavior into a stylesheet
- at the moment when IE encounters it, the behavior is loaded *synchronously* as though each line were an individual object - so the page momentarily freezes and the cursor flickers rapidly.

May sound like a small thing - but the flickering is really disturbing - at first I thought I'd done some horrendous unterminated loop and IE was about to crash; freaked me out. And the synchronous loading gives the impression of a slow loading page, simply because you have to put behaviors in the <head>

And those things have conspired enough basically to put me off behaviors altogether, other than for small tweaks - your accesskey handler is a perfect example; button rollovers is another good one.

I'd love to know if it can be made to behave better than that - to load like an asynchronous JS include?
beetle
04-16-2003, 08:14 PM
No, can't say that I have seen that. Perhaps it's your particular behavior. Got a link to that?

I have experienced HTC files being cached, however.

I'll dig around MSDN's HTC Reference and see what little nuggets I can un-earth.

Ya, I've used some conditional comments a few times. At least IE puts together enough proprietary hoopla that you can sometimes trick it into behaving :D
brothercake
04-16-2003, 08:53 PM
Originally posted by beetle
At least IE puts together enough proprietary hoopla that you can sometimes trick it into behaving :D
Exactly ... though I'm sure they didn't intend it like that ;) Ah well "the street finds a use for things", as someone said ..

btw - the loading problem; it's all of them; every behavior I've ever made. Like here - http://www.brothercake.com/scripts/navmeister/page.php - the behavior for which is at http://www.brothercake.com/scripts/navmeister/hover.htc
beetle
04-16-2003, 08:56 PM
Here's an interesting application. Use DHTML Behaviors to mimick HTMLELement.prototype, since IE doesn't support HTMLDOM<html>
<head>
<title>Test</title>

<style type="text/css">

div {
behavior: url(misc.htc);
}

</style>

<script type="text/javascript">

if ( window.HTMLElement )
HTMLDivElement.prototype.showHTML = showHTML;

function showHTML()
{
alert( this.innerHTML );
}

</script>

</head>

<body>

<div onclick="this.showHTML()">click me!</div>

</body>
</html>and the htc<public:component>

<script language="JScript">

element.showHTML = showHTML;

</script>

</public:component>
beetle
04-16-2003, 09:10 PM
I don't know. I see the flicker though. Perhaps it's that differen attaching mechanism you're using?<public:component>

<public:attach event="onmouseover" onevent="showChild()" />
<public:attach event="onmouseout" onevent="hideChild()" />

<script type="text/javascript">

var eleChild;

function showChild()
{
//rollover
element.style.backgroundColor = "#f8fbfb";

//show child list
eleChild = element.childNodes[2];
if( eleChild )
{
eleChild.style.display = "inline";
}
}

function hideChild()
{
//reset rollover color
elem.style.backgroundColor = ( element.className == "youAreHere" )?
"#ffefdc":
"#f8fbd0";

//hide child list
if( eleChild )
{
eleChild.style.display = "none";
}
}

</script>

</public:component>
I really am not sure.
brothercake
04-16-2003, 10:18 PM
Originally posted by beetle
Perhaps it's that differen attaching mechanism you're using?
Huh? That's the same attaching mechanism as you used in alt_links.htc - do you not see the flicker there?
beetle
04-16-2003, 10:24 PM
Yes, but I'm loading that locally, so it's probably too fast to notice.