Responsive: two different toggles on same element
- by Mathijs Delva
I'm having difficulties with the following problem. For a responsive website, i need to use the same toggle element for both a toggle system for one window width, and another toggle system for a second window width. I have the following snippets:
1.A simple hover for a language dropdown, which should be executed for resolutions greater than 980px.
$('#clickme').hover(function() {
$(this).parent().find("#select-language").show();
$(this).find("> a span").css({"opacity":"0.5"});
}, function() {
$(this).parent().find("#select-language").hide();
$(this).find("> a span").css({"opacity":"1"});
});
2.A simple click for the same language toggle, which should be executed for resolutions smaller than 980px.
jQuery('#clickme').click(function() {
jQuery("#select-language-mobile").slideToggle("fast");
});
I need to nest these two, so that when the user is viewing the website in one resolution, the click function with be fired, and in the other case the hover function.
Can anybody help me with this?
PS: I'm sorry, but the code blocks don't seem to work at the moment.
