/    Sign up×
Community /Pin to ProfileBookmark

Hotkey/Keyboard Key for Javascript Link

Copy linkTweet thisAlerts:
Apr 21.2007

I have these two links that I want add hotkeys for.

<a href=”javascript:bobexample.sweepToggle(‘contract’)”>Contract</a> | <a href=”javascript:bobexample.sweepToggle(‘expand’)”>Expand</a></div>

e.g. When I press “E”, the link expands, and when I press “C” it contracts.

Advice? Help?

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@jamApr 21.2007 — urmm okay, try adding a function like this mabye?:

[CODE]
function checkInput(e){
var event1 = !e?event:e;
var keyCode = event1.keyCode;
var actualLetter = String.fromCharCode(keyCode);
if (actualLetter=="e"||actualLetter=="E"){
<run expand function>
}
if (actualLetter=="c"||actualLetter=="C"){
<run contract function>
}
[/CODE]

and then add to the body tag so it looks like
[CODE]
<body...onkeydown="checkInput(event);"...>[/CODE]

i recon summut like that would work?
Copy linkTweet thisAlerts:
@gc40authorApr 21.2007 — Hey dude, thanks for the help, but it is not working!!

http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

This is the exact script I am using above.
Copy linkTweet thisAlerts:
@jamApr 21.2007 — if you attach the html file you have created i can give it a try but i really cant be arsed to go through dynamicdrive's tutorial instructions lol... try attaching the html file and i'll see what i can do
Copy linkTweet thisAlerts:
@gc40authorApr 21.2007 — [CODE]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Site</title>
<link href="favicon.ico" rel="shortcut icon" />
<style>
#link {color: #2f6681;}
.link a, .menus a:visited {color: #2f6681; text-decoration: none;}
.link a:hover {text-decoration:none;}
a {text-decoration:none; color:#3e7794; font-size:13px; font-weight:bold; font-family:"Courier New", Courier, monospace;}
</style>
<script type="text/javascript" src="switchcontent.js" ></script>
<script type="text/javascript" src="hot.js" ></script>
<style type="text/css">

/*Style sheet used for demo. Remove if desired*/
.handcursor{
cursor:hand;
cursor:pointer;
}

</style>
</head>
<body topmargin="0" bottommargin="0" onkeydown="checkInput(event);">
<table width="1008" height="938" background="bg.jpg" border="0" style="background-repeat:no-repeat">
<tr valign="top">
<td>

<div>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:bobexample.sweepToggle('contract')">Cisco</a> | <a href="javascript:bobexample.sweepToggle('expand')">E-Service</a></div>

<h6 id="bobcontent1-title" class="handcursor"></h6>
<div id="bobcontent1" class="switchgroup1"><br />

</div>


<script type="text/javascript">
// MAIN FUNCTION: new switchcontent("class name", "[optional_element_type_to_scan_for]") REQUIRED
//1) Instance.setStatus(openHTML, closedHTML)- Sets optional HTML to prefix the headers to indicate open/closed states
//2) Instance.setColor(openheaderColor, closedheaderColor)- Sets optional color of header when it's open/closed
//3) Instance.setPersist(true/false)- Enables or disabled session only persistence (recall contents' expand/contract states)
//4) Instance.collapsePrevious(true/false)- Sets whether previous content should be contracted when current one is expanded
//5) Instance.defaultExpanded(indices)- Sets contents that should be expanded by default (ie: 0, 1). Persistence feature overrides this setting!
//6) Instance.init() REQUIRED

var bobexample=new switchcontent("switchgroup1", "div") //Limit scanning of switch contents to just "div" elements
bobexample.setStatus('. ', '. ')
bobexample.setColor('lightgreen', 'lightgreen')
bobexample.setPersist(true)
bobexample.collapsePrevious(true) //Only one content open at any given time
bobexample.init()
</script>
</td>
</tr>
</table>

</body>
</html>
[/CODE]

Thats the code there,,,
Copy linkTweet thisAlerts:
@jamApr 21.2007 — dont worry i did it:

in the head section after the first script add this script:

[CODE]<script language="javascript" type="text/javascript">
function checkKey(e){
var event1 = !e?event1:e;
var keycode = event1.keyCode;
//e is 69
if(keycode=="69"){
bobexample.sweepToggle('expand');
}
//c is 67
if(keycode=="67"){
bobexample.sweepToggle('contract');
}
}

</script>[/CODE]

then make the body tag look like this:
[CODE]
<body topmargin="0" bottommargin="0" onkeydown="checkKey(event);">[/CODE]

worked perfectly for me so give it a try...
Copy linkTweet thisAlerts:
@gc40authorApr 21.2007 — Thanks mate. it worked.
Copy linkTweet thisAlerts:
@jamApr 21.2007 — gud gud glad to help
×

Success!

Help @gc40 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...