Dynamically load javascript and CSS files based on a sequence of keypresses

Question

I want to load these two files

<link rel="stylesheet" type="text/css" href="sewmuchcss.css">
<script type="text/javascript" src="sewmuchjs.js"></script>

in my header only when a user presses "up, up down, down, left, right, left, right." How would I go about accomplishing this? Would I use jquery, or javascript. What would I have to do? Thanks in advance for any help or answers.

Nick B · Accepted Answer · 2012-10-12T09:00:36.490

6

I would use jQuery, and you can use the following algorithm to check for the multiple keys in a row:

var keysPressed = [];
                       //  U,  U,  D,  D,  L,  R,  L,  R
var MAGIC_KEY_SEQUENCE = [ 38, 38, 40, 40, 37, 39, 37, 39 ]

$('body').on('keydown',function(e){
     var code = (e.keyCode ? e.keyCode : e.which);

     keysPressed.push( code );

     if ( keysPressed[ keysPressed.length - 1 ] == MAGIC_KEY_SEQUENCE[ keysPressed.length - 1 ] )
     {
       // so far so good

       if ( keysPressed.length == MAGIC_KEY_SEQUENCE.length )
       {
         // all keys were pressed in the right order!
         alert( 'hurray!' );

         $('<link/>').attr({
             rel:'stylesheet',
             type:'text/css',
             href:'sewmuchcss.css'}).appendTo('head');
         $.getScript('sewmuchjs.js');
       }
     }
     else
     {
       // something didn't match, so reset the list
       keysPressed = []       
     }
})

Play with it here: http://jsfiddle.net/japanick/vfRqk/

edited Oct 12 '12 at 09:00

answered Oct 12 '12 at 08:04

Nick B

7,639
2
32
28

hey Nick, I'm testing it out now! Thanks so much – thedullmistro Oct 12 '12 at 08:09
Hey Nick, the alert and everything appears fine, however the script runs automatically when you load the page. How do i make it run only after the alert appears! – thedullmistro Oct 12 '12 at 08:30
@KiaDull Have you removed those two tags from your header? They should not appear in the header, they will only be referenced by the Javascript here. One easy test is to load your page and view source. If you find "sewmuchcss" or "sewmuchjs" as or – Nick B Oct 12 '12 at 08:35
im using jquery jquery-1.4.1.min.js for the script i need to run, do i need to use a later version of jquery to make this work? the script i need to run doesn't work with later versions of jquery :( – thedullmistro Oct 12 '12 at 08:51
I updated the jsfiddle to use jq 1.4.1.min and I had to change the "on" to a "bind". http://jsfiddle.net/japanick/vfRqk/ But then it worked fine for me! $('body').bind('keydown', ... – Nick B Oct 12 '12 at 09:01

karaxuna · Answer 2 · 2012-10-12T07:23:24.417

1

$('#target').keypress(function(){
     var code = (e.keyCode ? e.keyCode : e.which);
     if(code == 21) // write your preferable keycodes here
     {
          $('<link/>').attr({ rel: 'stylesheet', type: 'text/css' href:'sewmuchcss.css' }).appendTo('head');
          $.getScript('sewmuchjs.js');
     }
})

fiddle: http://jsfiddle.net/pwunq/

edited Oct 12 '12 at 07:23

answered Oct 12 '12 at 06:49

karaxuna

26,752
13
82
117

sorry, I don't quite follow can you elaborate a bit – thedullmistro Oct 12 '12 at 06:52
and also, that's just for one key how would i do multiple 'up down up down left right left right' Thanks for the help if you know how :) – thedullmistro Oct 12 '12 at 07:12
http://stackoverflow.com/questions/10655202/detect-multiple-keys-on-single-keypress-event-on-jquery – karaxuna Oct 12 '12 at 07:19
You will need jQuery included for this approach, perhaps that explains the errors you were getting? – Nick B Oct 12 '12 at 07:51
@Nick My errors was because of $(' – karaxuna Oct 12 '12 at 08:25

score 0 · Answer 3 · answered Oct 12 '12 at 06:49

You can use jquery hotkeys- https://github.com/jeresig/jquery.hotkeys

On key event you can add -

<link rel="stylesheet" type="text/css" href="sewmuchcss.css">
<script type="text/javascript" src="sewmuchjs.js"></script>

this js and css by

$('head').append('<link rel="stylesheet" type="text/css" href="sewmuchcss.css">');  
$('head').append('<script type="text/javascript" src="sewmuchjs.js"></script>');

score 0 · Answer 4 · answered Oct 12 '12 at 06:52

0

you can access these 2 files using runat="server" and give id="likeme" for example -

 <link rel="stylesheet" type="text/css" href="sewmuchcss.css" runat="server" id="likeme" >

answered Oct 12 '12 at 06:52

Gopal

217
1
4
18

How does this answer the question for only loading those files after a sequence of keypresses? – Nick B Oct 12 '12 at 07:50
on keypress from serverside, you can call and set the href – Gopal Oct 12 '12 at 09:07

Dynamically load javascript and CSS files based on a sequence of keypresses

4 Answers4