wright67uk Posted September 15, 2011 Share Posted September 15, 2011 <style type="text/css"> #A1{background:url(1.jpg) no-repeat;} #image li a{width:30px; height:320px;display:block;float:left;} #image li a:hover{width:450px; } </style> </head> <body> <ul id="image"><li><a id="A1" href="#"></a></li></ul> </body> www.1pw.co.uk/accessmenu I'm looking to assign some access keys that will replicate a mouse hover in the above demo. Eg. Alt+o to open the list and Alt+e to exit the list. I'm sure this is possible with jquery, just not sure how to go about it? Quote Link to comment https://forums.phpfreaks.com/topic/247210-access-keys-to-hover-and-to-stop-hovering/ Share on other sites More sharing options...
Adam Posted September 16, 2011 Share Posted September 16, 2011 You just need to bind both events to the same handler, although with the key detection you'll probably want to have an anonymous function first determine which key was entered, and then call the function if correct. For example: $('.menu').mouseover(displayMenu); $(document).keypress(function (event) { if (...) { displayMenu(); } } function displayMenu() { $('.menuContent').show(); } Edit Not sure if I answered your question there. Which bit do you need help with exactly? Quote Link to comment https://forums.phpfreaks.com/topic/247210-access-keys-to-hover-and-to-stop-hovering/#findComment-1269839 Share on other sites More sharing options...
wright67uk Posted September 16, 2011 Author Share Posted September 16, 2011 Thank you for the reply Adam, I originally asked this question on the CSS forum, and was told that it isnt possible with html and css alone. So I thought that firstI would find out wether this was possible using jquery. It would be great if you could direct me to a tutorial that would show me how to, add keypress() functions to a hover class within a list. Or a working example of somthing that already exists would help me see the theory behind this. I wouldnt neccesarily need a .mouseover() function. as this slide out gadget would be for people that cant use a mouse, eg. users with with poor motor skills, or hand eye co-ordination. Im extremely new to jquery and extremely willing to learn aswell. Quote Link to comment https://forums.phpfreaks.com/topic/247210-access-keys-to-hover-and-to-stop-hovering/#findComment-1269859 Share on other sites More sharing options...
Adam Posted September 16, 2011 Share Posted September 16, 2011 You may be better off using the jKey plug-in. It makes targeting specific keys extremely simple. For example: $(document).jkey('alt+o', function() { alert('Pressed Alt+o..'); }); Just download the plug-in, include the jQuery and jKey scripts within your document (jQuery first), and add that code within a script block. That easy.. Quote Link to comment https://forums.phpfreaks.com/topic/247210-access-keys-to-hover-and-to-stop-hovering/#findComment-1269918 Share on other sites More sharing options...
wright67uk Posted September 17, 2011 Author Share Posted September 17, 2011 Brilliant thanyou for that! The alert box seemed to work for 'alt' or for 'O' or for 'alt+o', I think this is just a cross browser thing. changed it to work just by pressing 'o' anyway. one more thing. If i were to use a custom made alert box as below then how would i tie in this method with it; eg; www.1pw.co.uk/test <!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=utf-8" /> <title>Untitled Document</title> <style type="text/css"> .alert { display:none; position:absolute; top:1px; left:1px; width:300px; background-color:white; border-style:solid; border-width:1px; padding:15px 20px 5px 20px; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.jkey-1.2[1].js"></script> </head> <body> <script> $(document).jkey('o', function(){ alert('Pressed o');}); </script> <div id="AlertBox" class="alert"> <p> Hi! This is a test. </p> <p> It is only a test. If this had been the real thing, then this would not be a test. </p> <form style="text-align:right"> <input type="button" value="OK" style="width:75px;" onclick="document.getElementById('AlertBox').style.display='none'"> </form> </div> <script type="text/javascript"><!-- function DisplayAlert(id,left,top) { document.getElementById(id).style.left=left+'px'; document.getElementById(id).style.top=top+'px'; document.getElementById(id).style.display='block'; } //--></script> <script type="text/javascript"><!-- function DoSomething() { var something = false; if(something) { // do this section } else { DisplayAlert('AlertBox',100,50); } } //--></script> <p> <a href="javascript:DoSomething()"> Click here</a> to demonstrate the alert box alternative. or press alt + o for the original alert box </p> </body> </html> thanks for your help so far! Quote Link to comment https://forums.phpfreaks.com/topic/247210-access-keys-to-hover-and-to-stop-hovering/#findComment-1270190 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.