How do I set different mmenu options by screen size? - javascript

I'm using mmenu (http://mmenu.frebsite.nl) to create my mobile menu. I implement my jQuery code like this :
$('.mobile-menu .menu-block-wrapper').attr('id', 'menu-left');
$('.mobile-menu .menu-block-wrapper').mmenu({
configuration: {
selectedClass: "active",
menuNodetype: "div",
},
dragOpen : {
open: false,
threshold : 100
}
});
$(".mobile-menu-trigger").trigger("open");
I'd like, when my browser window is less than, say, 720px, to set dragOpen to true, and when I switch back to a normal resolution, to set it back to false.
Any help is greatly appreciated.
Thanks

The plugin initializes the dragging when it is fired. So you can't update the option after the plugin has been fired.
I guess you could bind a function to the dragleft, dragright, dragup and dragdown events that measures the browser width and, if larger than 720px, prevents propagation. Something like this:
$("#page").on("dragleft dragright dragup dragdown", function( event ) {
if ( $(window).width() > 720 ) {
event.stopImmediatePropagation();
event.gesture.stopImmediatePropagation();
} else {
// the plugin will fire its events bound to dragleft/dragright/dragup/dragdown
}
});
$('.mobile-menu .menu-block-wrapper').mmenu({
drag: {
open: true,
treshold: 100
}
});
Not sure if this will work though, having seen this issue with hammer.js:
https://github.com/EightMedia/hammer.js/issues/333

Related

Disable jQuery Plugin on Mobile only?

I have a jQuery plugin attached to an element, and I want to stop that plugin from working only on Mobile. I also have another plugin attached, a light box, but I want to stay regardless if someone is on mobile or desktop.
This is the plugin I want to stop on Mobile: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
Here is the code:
// Adding in the plugin
$(function() {
$(playlist).swipe({
swipeStatus:function(event, phase, direction, distance, duration) {
// code for swipy stuff here ....
// ...
// ...
}
});
// Trying to remove the plugin
window.onresize = function(event) {
var deviceWidth = $(window).width();
if(deviceWidth <= 768) {
$(playlist).swipe({
swipeStatus:function(event, phase, direction, distance, duration) {
event.preventDefault();
event.stopPropagation();
},
threshold: 0,
fingers:'all'
});
}
};
Let me know if you got any ideas. I've also tried detaching the playlist and reattaching it to the DOM and that didn't work either.
Thanks!
You can verify if the user agent is not a mobile device and init your plugin.
Demo:
function isMobile () {
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
return true;
}
if(!isMobile()) {
$(playlist).swipe({
swipeStatus:function(event, phase, direction, distance, duration) {
event.preventDefault();
event.stopPropagation();
},
threshold: 0,
fingers:'all'
});
}

jQuery dialog losing focus on scrolling

I have a jQuery dialog below. I'm using jQuery UI 1.11.
$("#contactContainer").dialog({
closeOnEscape: false,
modal: true,
dialogClass: 'contactsFooter',
open: function(event, ui) {
$(".ui-dialog-titlebar-close").show();
$('#dialog_footer').remove();
$(".contactsFooter").append('<div class="" id="dialog_footer"><div class="dialog-footer-buttons"><button type="button" id ="close" class="button-style-2" onclick="$(\'#hasChangedForm\').val(\'\');" style="margin-left: 5px;">Cancel</button></div></div>');
},
autoOpen: false,
width: 300,
minHeight: 'auto',
maxHeight: 400,
position: { my: 'top', at: 'top+50' },
close:function() {
$('#contactContainer').dialog("option", "position", { my:"top", at:"top+50", of: window });
$('#contactContainer').html('');
}
});
$("#contactContainer").dialog('open');
Here is the Fiddle. In that fiddle,
Click any of the textbox (means focus. In this example it is the one we have the value "test here").
Now scroll the dialog by clicking the scrollbar of the dialog and drag it down / up and see what is happening. It is loosing the focus on the textbox we clicked. If I press tab, it is setting the focus to the first field again. This is weird.
If I use mouse scroll, the focus is still there on the same field. This is normal.
Frankly, I don't know why this is happening. Can someone help me for how do I prevent the dialog loosing focus when scrolling? I want the focus to be retained on the same field.
Fixed. The problem is the tabindex.
I let you a fiddle working. The trick is removing the tabindex just after the initialization of the dialog, it can be done like this:
$(".ui-dialog.ui-widget").removeAttr("tabindex")
If you want this behaviour to be permanent you can edit the jQuery source code. If you reach the dialog section you are going to see a function called _createWrapper. Inside, you can see something like this:
.attr( {
// Setting tabIndex makes the div focusable
tabIndex: -1,
role: "dialog"
} )
Remove the tabindex from there, and that's all!
I think this might help you a bit.
$('#divWithTheScrollbar').scroll(function() {
$('#elementLosingFocus').focus();
});
From having looked around on the web it seems like the most viable option you have is the one #pritishvaidya added.
You have to realize that the focus event is triggered when anything gets clicked on your page. Meaning that if you click the scrollbar whilst having your textbox in focus you will put that the scrollbar in focus and lose the focus of the textbox.
I'd suggest you implement the solution by #pritishvaidya, but add some sort of validation around it where you know which one of the controls was in focus last and then force focus on that when the scrollbar's focus has been lost. That would put minimal strain on the client as well as allow you to progress with your use-case.
Happy coding!
Try this; its working(Not necessary to add id or other selectors with the inpus)
var focused;
setInterval(function(){
focused = $(':focus');
},500)
$("#contactContainer").scroll(function(){
//console.log(focused[0]);
$(focused).focus();
})
This might be a general solution but it needs to be tested:
var lastFocus;
$(document)
.on("focus", function(e) { lastFocus = e.target; })
$("#divWithTheScrollbar").scroll(function () {
if (lastFocus) lastFocus.focus();
})
It generally saves which element had focus last and sets it again when you scroll the div.
You need to extend it so an intentional blur event will still work without the element being focused again after scroll.
Please try with following JavaScript update.
https://jsfiddle.net/3q22xLhk/5/ You can check on fiddle
$("#contactContainer").dialog({
closeOnEscape: false,
modal: true,
dialogClass: 'contactsFooter',
open: function(event, ui) {
$(".ui-dialog-titlebar-close").show();
$('#dialog_footer').remove();
$(".contactsFooter").append('<div class="" id="dialog_footer"><div class="dialog-footer-buttons"><button type="button" id ="close" class="button-style-2" onclick="$(\'#hasChangedForm\').val(\'\');" style="margin-left: 5px;">Cancel</button></div></div>');
},
autoOpen: false,
width: 300,
minHeight: 'auto',
maxHeight: 400,
position: {
my: 'top',
at: 'top+50'
},
close: function() {
$('#contactContainer').dialog("option", "position", {
my: "top",
at: "top+50",
of: window
});
$('#contactContainer').html('');
}
});
var scrolling = false;
$("#contactContainer").dialog('open');
var lastFocusTextbox = null;
$("#contactContainer input").focus(function() {
lastFocusTextbox = this;
});
$("#contactContainer").scroll(function(e) {
scrolling = true;
});
$("#contactContainer").mouseup(function() {
if (scrolling) {
if (lastFocusTextbox != null) {
$(lastFocusTextbox).focus();
}
scrolling = false;
}
});

Writing and compiling a simple jQuery plugin

I am trying to compile a basic jQuery plugin which shows a div upon provided options when invoking:
select if a checkbox should be checked after X milliseconds or after X px on scroll,
if one of those two options are selected, set a delay value or scroll distance in px
otherwise do nothing
Example of desired options invoke:
$(document).ready( function() {
$('#testInput').testing({
myMethod : delay,
myValue : 2000
});
});
My current progress here: JSFiddle (it's not much as currently I'm still at a beginning of the learning curve)
After some fiddling i managed to get this working (kinda). Plugin seems to be working fine. Except there is some bug with the scroll function which i have to sort it out additionaly - it loops and changes checkbox states indefinitely instead just once.
Here is a working fiddle
And modified code:
(function($) {
$.fn.testing = function( options ) {
// Settings
var settings = $.extend({
delay : null,
delayTime : null,
scrolling : null,
scrollDist : null
}, options);
return this.each( function() {
var self = this;
// Timeout
setTimeout(function (){
$(self).prop('checked', settings.delay);
}, settings.delayTime);
// Scroll
if ($(window).scrollTop() > settings.scrollDist) {
$(this).prop('checked', settings.scrolling);
};
});
}
}(jQuery));
// Plugin invoke
$(window).on("load resize scroll",function(){
$('#testInput').testing({
delay : false,
delayTime : null,
scrolling : true,
scrollDist : 20,
});
});

Responsive Jquery toggle command

I am having an issue with my code. Whenever, I load up the page in the browser or in a mobile device, and I try to toggle it suddenly toggles multiple times when I just clicked on it once. I am trying to use this syntax code to make it responsive.
My CodePen
$(window).resize(function() {
$(".textcontent").hide();
if ($(window).width() <= 480) {
jQuery(function($) {
$(document).ready(function() {
$(".textcontent").hide();
$(".titleheader").click(function() {
$(this).toggleClass("active").next().slideToggle("fast");
return false;
});
});
});
}
});
The text toggles more than once because you are binding the click handler each time the resize event fires. Each bind attaches another handler so, depending on how many times the resize event fires, you might end up with many click handlers firing at once.
I suggest that you bind or unbind your click handler depending on the screen width, like so:
$(function() {
// function to toggle a text section
function toggleText(elm) {
$(elm).toggleClass("active").next().slideToggle("fast");
}
// resize event handler
$(window).on('resize', function() {
if ($(window).width() <= 480) {
// if window <= 480, unbind and rebind click handlers, and hide all text content
$(".titleheader").off('click').on('click', function() {
toggleText(this);
});
$(".textcontent").hide();
} else {
// if the window > 480, unbind click handlers and hide all text
$(".titleheader").off('click');
$(".textcontent").show();
}
}).trigger('resize'); // initialize - trigger the resize once upon load
});
WORKING EXAMPLE
You might also want to throttle or "debounce" your resize handler so it won't fire continuously in IE, Safari, and Chrome.
EDIT:
An alternate method is to set a flag to indicate whether the layout is "small" or "large". Then, only change the layout if the flag does not indicate the desired layout:
$(function() {
// layout flag (defaults to "not small")
var small = false;
// function to toggle a text section
function toggleText(elm) {
$(elm).toggleClass("active").next().slideToggle("fast");
}
// resize event handler
$(window).on('resize', function() {
if ($(window).width() <= 480) {
// if window <= 480 and the layout is "not small", bind click handlers and hide all text content
if (!small) {
console.log('made small');
$(".titleheader").on('click', function() {
toggleText(this);
});
$(".textcontent").hide();
// set the layout flag to "small"
small = true;
}
} else {
// if the window > 480 and the layout is "small", unbind click handlers and hide all text
if (small) {
console.log('made large');
$(".titleheader").off('click');
$(".textcontent").show();
// set the layout flag to "not small"
small = false;
}
}
}).trigger('resize'); // initialize - trigger the resize once upon load
});
WORKING EXAMPLE

How to run the iScroll plugin

I've decided to give the JavaScript library iScroll a try. I've run into some problems though. I just don't seem to get things to work as they are intended to. The basic setup is not written with jQuery in mind but this is how I believe it should be called.
$(document).ready(function () {
var myScroll = new IScroll('#wrapper', {
scrollX: true,
scrollY: false,
scrollbars: true,
mouseWheel: true,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: true
});
myScroll();
});
document.addEventListener('touchmove', function (e) {
e.preventDefault();
}, false);
The documentation tells me this is the way add options to the code but somehow I can't get the scroll bars to render at all. I would also like to add a fade-out of a div based on the momentarily position of the scroll, ie. not the position when the scroll stops. This is how the scrollEnd position is called, but how do I get the position on the fly, ie. How do I trigger the fade-out when scrolling passes left -10, regardless if the scroll has stopped or not?
myScroll.on('scrollEnd', function () {
if ( this.x < -10 ) {
$('#logo').stop(true,true).fadeOut('fast');
} else {
$('#logo').stop(true,true).fadeIn('fast');
}
});

Categories

Resources