I am trying to make my website responsive. My website is essentially all one page and I use a simple jQuery scroll function to navigate to different sections. It works fine for desktop or laptop computers but doesn't really work when you view it on mobile or tablet especially in portrait. So I wrote a jQuery function that turns each section of my website into a tab instead of it scrolling. So for example if you click the "Work" section it appears as if you are going to a different page. What I would ultimately like to do is use both functions the "scroll" on my computer and the "tab" on mobile and tablet. Using @media handheld can I call the "tab" function? Or do I need to create an "if statement that can determine where the website is being accessed from? Below is the code for my tab function.
$(document).ready(function() {
$('.tabs a').click(function(){
var $this = $(this);
$('.panel').hide();
$('.tabs a.active').removeClass('active');
$this.addClass('active').blur();
var panel = $this.attr('href');
$(panel).fadeIn(1000);
return false;
});//end click
$('.tabs li:first a').click();
}); // end ready
The best way is to use window.matchMedia and there are some libraries which can help you like :
https://github.com/sparkbox/mediaCheck with a fallback which uses window.resize
If you want to go further reading some good stuff about that point, than please read this article, as it describes lot of stuff from this nature.