Javascript statement to run depending on window size Options

[belowHeights00]

So I've been learning javascript/jquery lately and was trying to run a certain script(s) depending on window size. The way I've written it is as follows:

$(window).load(function() {
$('#promo').fadeIn(2000);
if ($(window).width() >= 800) {
$('#promo').mouseenter(function() {
$('#promo').css({'height':'240px', 'background-color':'#fff', 'color':'#000', 'opacity':'1', 'border':'solid 1px #000'});
$('#promo p').css('text-decoration', 'underline');
$('#promo').mouseleave(function() {
$('#promo').css({'height':'45px', 'background-color':'#000', 'color':'#fff', 'transition':'1.5s', 'border': 'none'});
$('#promo p').css('text-decoration', 'none');
});
});
};
});

Reason being is hover doesn't work well on mobile devices...also I would like the fadein function to still work on smaller screens. I have worked around this by adding display: none; to it's css page using @media but I'd rather the former. Any help is appreciated thank you
~Casey Stack

[Frederiek]

I'm not very well into jQuery, but I suggest you look into jQuery mobile at http://jquerymobile.com .

[belowHeights00]

I have never seen that before but it looks/sounds awesome! I assume I would put all those files (I d/l'ded the big zip file with all the css and some js files) into my site folder as well as link 'em - but if I do this, would I not have to put links onto every html page? Maybe I am misunderstanding the practicality of those scripts...can you elaborate a tiny bit Frederiek please?
Thank you
-Casey

[Frederiek]

I have no idea, I hardly ever use jQuery at all. I'd have to read about jQuery mobile just as much as you.
- http://api.jquerymobile.com
- http://demos.jquerymobile.com/1.4.2/

BTW, you might also look into hammer.js, a javascript library for multi-touch gestures. There's a jQuery plugin available too.
See http://eightmedia.github.io/hammer.js/ .