Running Jquery Functions based on media Queries and Viewport Size

Question

I have a jquery function which is running perfectly on my website and it hides and shows a hidden dive which contains an inline-block list.

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery.noConflict();
jQuery('#mdiv').click(function(){jQuery('#subNav').slideToggle(1000)});
jQuery("#subNav").mouseleave(function () {jQuery('#subNav').slideToggle(1000)});
});
</script>

Now I am trying to create a responsive web page and responsive CSS navigation for smart phones using media queries.what I want to do is keep enabling the jquery on regular viewport screens like desktop and instead adding 4 new li to ol on responsive smartphone size. Here is my code for responsive nav

enter code here
@media only screen and (min-width: 0px) and (max-width: 479px) {
#nav .current{background:#666; -moz-border-radius: 5px; -webkit-border-radius: 5px;  border-radius: 5px; background:none; }
#nav { margin: -20 2% 0 0; padding: 0; }
#nav li { margin: 0; display: block; float: left; width: 100%; clear: none; background:none; }
#nav a { width:150px; margin-top: 5px; padding: 6px 0 8px; text-indent: 10px; color: #fff; background: rgba(194,100,40,0.75) url(images/bg_arrow_white.png) 96% 50% no-repeat; border-top: 1px solid rgb(194,100,40); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#nav a:hover { border-bottom: none; }
}

Can you please help me to find out how I can run two jquery functions based on viewport size?

Thanks

Answer 1

This might not be exactly what you're looking for in terms of functionality, but you could try it out: http://jsfiddle.net/XvzD7/1/

By binding an anonymous callback to the windows resize event trigger you can execute code whenever the window's width becomes smaller or larger than a desired amount. In the above example I simply log the background-color of the #container div.

For more information you can look at the "Javascript Pairing" section of this article: http://www.quirksmode.org/blog/archives/2010/08/combining_media.html

Let me know if my answer provides more questions than answers. Hope this helps!