click on mobile/tablet, hover on other devices (future-proofing) - javascript

need an idea, I am stuck in quite the conundrum. I am building a responsive future proof webdesign.
On desktop and similar devices: I have a menu which on hover does a css animation to desplay a description of what hides behind the link and on click navigates to a new page.
On mobile devices: I wish to have a touch-event that triggers the hover (thus desplaying the description) and on touch number 2 it should then navigate to the new page.
the above is doable, but how to do it without checking user-agents, this is my situation. How does one go about future proofing the above.
Any great ideas are more then welcome. :)

Use Javascript to add a class on the touchstart/touchend events. Browsers won't issue these events:
Javascript:
document.querySelector("#myMenu").addEventListener("touchstart", function() {
this.classList.add("mobileHovered ");
});
document.querySelector("#myMenu").addEventListener("touchend", function() {
this.classList.remove("mobileHovered");
});
CSS:
#myMenu:hover,
#myMenu.mobileHovered {
/* CSS styles */
}

Related

Make Bootstrap mobile menu fullscreen

Is there a relatively simple method for making the Bootstrap (v3) mobile menu to appear full height on screen (100%)?
It appears as though the menu will only overlay as much as the menu content that is within it (default behaviour in bootstrap.js). I just want to prevent users from scrolling/seeing the underlying page when they are viewing the mobile menu.
You could try this instead. I think it looks better than having a menu that takes the entire page and achieves the desired result.
https://jsfiddle.net/rjx3460f/4/
var mywindow = $('#window');
$('#navbar').on('show.bs.collapse', function(x) {
mywindow.css({visibility: 'hidden'});;
$('body').attr("scroll","no").attr("style", "overflow: hidden");
});
$('#navbar').on('hide.bs.collapse', function(x) {
mywindow.css({visibility: 'visible'});
$('body').attr("scroll","yes").attr("style", "");
});
The general idea is that you disable scroll on the page, and hide the content when the menu is open. Although you could just as easily just disable scroll. Or set the height of the menu to 100% when things open up.
Here is the menu taking up the entire thing. Very similar setup, but has a jumpy transition... I think you may need to create your own open transition to make it non jumpy, which is not impossible, but then no longer really bootstrap.
https://jsfiddle.net/rjx3460f/7/
#aduss's answer worked for me too but instead of assigning id's I used the bootstrap classes to target the menu,
var mywindow = $('body'), navbarCollap = $('.navbar-collapse');
navbarCollap.on('show.bs.collapse', function(x) {
mywindow.css({visibility: 'hidden'});
$('body').attr("scroll","no").attr("style", "overflow: hidden");
});
navbarCollap.on('hide.bs.collapse', function(x) {
mywindow.css({visibility: 'visible'});
$('body').attr("scroll","yes").attr("style", "");
});

Creating a slide up effect on a mobile device using CSS/JS

What I need to achieve is that when you swipe up the page from the arrows, the page needs to slide up and the user will be redirected to another page (as an intro).
I currently have a working way to use the slider:
The question is: how do I actually make an effect that looks like the page goes up when the slider is used?
There are many different ways to do it. As I prefer to do it without plugins (well except jQuery), here's my way to achieve this:
1. Detect the Swipe
This can be achieved with the "touchstart" and "touchend" events. If the touchstart event is fired, you'll get the coordinates of the touch position. When the touch ends, get it again and compare the distance.
There are many really helpful articles about this topic.
here or here or just google "javascript swipe"
2.Scroll down
Can be done in many different ways, depends on what animation you want. Google for "smooth scrolling javascript". If you use jQuery, this might be the easiest way:
function afterscrolling(){
$('html, body').animate({
scrollTop: $( YOUR_ELEMENT ).offset().top
}, 500);
return false;
};
You can use Hammer.js
var swipe = new Hammer.Swipe();
swipe.recognizeWith(swipeup);
See swipe-recogniser.
So once you recognise the swipe-up gesture, you can animate the div to translate up using css.
div {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}
Refer this
Made a Codepen http://codepen.io/keephacking/pen/RaYxpm
Used jQuery touchSwipe and slideUp in jquery for the effect
For more about TouchSwipe ,Check link below.
https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

Mobile device detection on Tumblr

I'm trying to make a Tumblr theme that will show one div if the user is on iOS (with an app store link) and one if they are on anything else (with another link). However, because of the way Tumblr works, I can't figure out why it won't work. I tried to use https://www.mattcromwell.com/detecting-mobile-devices-javascript/, which was written with Wordpress in mind, and I don't quite understand what I'm missing from tumblr.
<script type="text/javascript">
var isMobile = {
iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i); },
any: function() { return (isMobile.iOS();} };
</script>
is what I have in the head tag. Then, I need the actual detection to happen in the footer, where I have
<p id="is-mobile" class="hide">This is a Mobile Device</p>
<p id="is-desktop" class="hide">This is NOT a Mobile Device</p>
<script type="text/javascript">
jQuery(function($) {
if (!isMobile.iOS())
$('#is-mobile').addClass('show');
if (isMobile.iOS())
$('#is-desktop').addClass('show');
});
</script>
Maybe I have the other jQuery in the wrong place? I have also imported the jQuery library too. Hopefully someone can help me! When I do this, it never shows any div regardless of device (obviously since I have them hidden - and I do have a thing in css that does not show .hide classes).
Any ideas?
As #Shikkediel pointed out, there seems to be an issue with the iOS function.
I've made this fiddle. I also think maybe the condition needed to be inverted (at least now in the fiddle the div for desktop is showing on desktop, and the one for mobile only on mobile).
https://jsfiddle.net/lharby/fvau9vnz/
This is the code:
var isMobile = {
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i)
},
any: function() {
return (isMobile.iOS())
}
};
jQuery(function($) {
if (isMobile.iOS()){ // we should only need an if/else here now. Changed from !isMobile.iOS();
$('#is-mobile').addClass('show');
}else{
$('#is-desktop').addClass('show');
}
});
Tumblr allows custom CSS, no?
You can go by device screen size, so you won't have to rely on user agent (which can be spoofed and/or not work at times).
Something like this (CSS):
#is-mobile{ /* Hide it by default */
display:none;
}
#media screen and (max-width: 500px){
#is-mobile{ /* If the screen is <= 500px, display it */
display:block;
}
}
I'm not that familiar with how Tumblr works, but this is how I'd detect mobile devices in normal web design.
For media queries based on each device, check this out.
More info on the css #media rule

Disable touch swipe on fullpage.js

I'm using the fullpage.js plugin for a single page marketing site.
I'm using navigation links to jump to scenes (all horizontal) around the site so I want to disable to the touch/swipe (between scenes) feature as it interferes with other touch elements.
I've been though all the documentation but I can't find out how to achieve this.
Any help is welcome. Thanks, Jack.
Just use the option autoScrolling:false when initializing the plugin. This way the mouse wheel won't swipe and neither the touch events will.
If you want to keep the mouse wheel scrolling (for computers) but disable the touch events (touch devices), then I would recommend you to initialize the plugin in a different way for touch devices.
In order to do so, I recommend you to do something like this.
Update 2016:
You can use the options responsiveWidth or responsiveHeight as well as the class fp-auto-height-responsive.
The options will disable the autoScrolling feature for mobile devices under the specified dimensions. Examples available in the examples folder of fullPage.js or online.
You can also use responsiveSlides and force the transformation of horizontal slides into vertical sections on responsive. This can be done through the Responsive Slides extension.
Update Sep-2014:
A method named $.fn.fullpage.setAllowScrolling can also be used with this same purpose. It will disable both the touch scrolling and the mouse scrolling.
Update Jun-2014:
autoScrolling:false only disables the vertical scrolling.
If you want also to disable the horizontal one, there's no way to do it right now. You would need to modify a bit the plugin.
Inside fullpage.js replaces this:
function removeTouchHandler() {
if (isTablet) {
$(document).off('touchstart MSPointerDown');
$(document).off('touchmove MSPointerMove');
}
}
For this:
$.fn.fullpage.removeTouchHandler = function (){
if (isTablet) {
$(document).off('touchstart MSPointerDown');
$(document).off('touchmove MSPointerMove');
}
};
And then, when you initialize the plugin, call that public function in the afterRender callback like so:
$(document).ready(function() {
$('#fullpage').fullpage({
afterRender: function(){
$.fn.fullpage.removeTouchHandler();
}
});
});
Don't call fullpage twice. Just add the afterRender function inside your initialization.
The setAllowScrolling function also accepts a second argument for directions so the following can be used to disable left/right scrolling/swiping:
$.fn.fullpage.setAllowScrolling(false, 'left, right');
As of June 2017, none of the previous methods worked for me. The simplest way I found to effectively disable touch is as follows.
In jquery.fullPage.js you will find the function setAllowScrolling
function setAllowScrolling(value, directions){
if(typeof directions !== 'undefined'){
directions = directions.replace(/ /g,'').split(',');
$.each(directions, function (index, direction){
setIsScrollAllowed(value, direction, 'm');
});
}
else if(value){
setMouseWheelScrolling(true);
addTouchHandler();
}else{
setMouseWheelScrolling(false);
removeTouchHandler();
}
}
When fullpage is initialized it automatically calls setAllowScrolling(true), triggering the else if(value) condition above. Simply comment out the call to addTouchHandler() to fully disable it, or add some sort of condition for it to be called, eg
var winw = $(window).width();
if (winw > 480){
addTouchHandler();
}
With this method the left and right arrows still work when tapped, so horizontal slides can still be navigated. It should be noted that using $.fn.fullpage.setAllowScrolling(false, 'left, right'); will also disable the arrows.

How to make the image map clickable on mobile-safari?

I'm using jQuery and qTip2 to make Geo information on an image map visible. You can see the demo here on JSFiddle | Fiddle Screen result
On Desktop Browsers everything works fine. on-hover you see the tooltip and on-click you go to the URL defined by href tag.
But on mobile safari (ipad/iphone) it is impossible to get the link to the URL. Every time you click on the map it is like you hover on pc, but never a click.
The image is created with standard html:
<img src="http://i.stack.imgur.com/6z2Z9.png" usemap="mapname">​
also the map is created with standard html but with additional attribute tooltip(1):
<map name="mapname">
<area shape="poly" href="?content=meteo&abm=ALL" tooltip="ABM Alland" coords="664,243, 662,240, 664,237, 667,235, 669,232, 671,229, 671,225, 669,222, 669,214, 672,213, 673,227, 676,228, 679,231, 685,231, 692,232, 695,231, 697,228, 700,227, 703,228, 704,234, 705,241, 703,244, 700,246, 697,247, 694,249, 691,251, 688,253, 683,254, 680,253, 677,252, 672,249, 669,247, 664,243"></map>
The jQuery is very tiny with(2):
$(document).ready(function() {
$('area').each(function() {
$(this).qtip({
content: { text: $(this).attr('tooltip') },
position: {
my: 'bottom left',
target: 'mouse',
viewport: $(window)
},
hide: { fixed: true },
style: { classes: 'ui-tooltip-tipsy ui-tooltip-shadow'}
});
});
});​
So how could i solve this problem?
(1) I know this attribute should be data-tooltip. this will be changed soon.
(2) Based on the imagemap demo
This is logical. Ever tried hovering on a touchscreen? :-D
Since mobile devices lack the ability to hover, you need to adapt the way you are presenting your data, to fully support them.
For mobile device users, you need to make absolutely clear where a :hover action on desktop browsers would take place. Make the places "pop out of the map", so they know without hovering, where to retrieve information.
You need to substitute every :hover action with an adequate touchscreen action. For example provide the tooltips on tap and put the Link inside the tooltip to compensate for the missing hover action.
In return you could make use of "touchscreen-only" interactions to compensate.
A startingpoint on how to adapt you webcontent for mobile devices can be found in Apples Developer Library. (Especially §5 of this article).

Categories

Resources