I want to use a simple function to hide/show content only on mobile devices.
The function itself is pretty straightforward. I use this code here for that:
$('.toggleMobile').click(function() {
var hideableContent = $(this).parent().find('.hideable');
hideableContent.slideToggle('medium');
});
So... nothing fancy, i know.
It gets more complicated as i try to detect the browser viewport.
I think I took care of that by using the following lines (you probably will find ways to improve it):
function whatMedia() {
var viewport = $(window).width();
var mediaType;
if ( viewport < 767 )
mediaType = 'mobile';
else if ( (viewport >= 767) && (viewport < 991) )
mediaType = 'tablet';
else
mediaType = 'desktop';
return mediaType;
}
Now i just need a function that gets triggered only when the viewport is mobile
(maybe the problem is here?):
function toggleMobile(mediaType) {
if ( mediaType === 'mobile' ) {
$('.toggleMobile').click(function() {
var hideableContent = $(this).parent().find('.hideable');
hideableContent.slideToggle('medium');
});
}
}
I have no problem checking for the viewport the first time the page is loaded. I just use this (very simple bit of code):
// Check media type and activate accordingly
var mT = whatMedia();
toggleMobile(mT);
So far so good. Now comes the fun part:
I want to be able to detect if a user resizes the browser window and activate/deactive the toggleMobile()
function accordingly..
I could do this:
$(window).resize(function() {
var mT = whatMedia();
toggleMobile(mT);
}
As you perhaps already know, this $(window).resize
thing makes Webkit and other browsers go a bit crazy, and repeat the function as long as the user resizes the window.
This is good or bad depending on your take on it.
I personally don't want this to happen, so i use this function i found on the forums:
var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
clearTimeout (timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
}
})();
My resize event looks like this:
$(window).resize(function() {
waitForFinalEvent(function() {
var mT = whatMedia();
toggleMobile(mT);
}, 500, '1');
}
This certainly does delay the calculation of the browser window on resize but i can't make the function inside it work.
I don't know what the problem is :(
Th function gets triggered two or more times, and even when the viewport is recognized as desktop
or tablet
.
In the togglemobile function, you just register the click event but nothing else, if you want to trigger it you could do
$('.toggleMobile').click(function() {
var hideableContent = $(this).parent().find('.hideable');
hideableContent.slideToggle('medium');
}).trigger('click');
this would trigger the click event and run the code, alternatively you could hide the element immediately instead.
EDIT: I'll revise my answer a bit. First we register the click event for the element that while slideToggle the content:
$('.toggleMobile').click(function() {
if(whatMedia() === "mobile") {
var hideableContent = $(this).parent().find('.hideable');
hideableContent.slideToggle('medium');
}
});
then in the toggleMobile(mt);
function we now hide the content if the size goes over to mobile media
function toggleMobile(mediaType) {
if ( mediaType === 'mobile' ) {
var hideableContent = $(".toggleMobile").parent().find('.hideable');
hideableContent.slideToggle('medium');
}
}
this is if i understand, what you want?
I see that this is probably what @sje397 meant.
©2020 All rights reserved.