Recently I've discovered that devices such as my Surface Pro 4 while browsing, with a single swipe from left to the right - go back to the previous site.
If I made a <nav> that responds to the same movement, how would I approach it to not load the previous page ?
Or rather shouldn't such a movement be implemented on a website anyway?
Personally I think that swiping menu navigations are great, so it'd be nice to find something that blocks the event of loading the previous page.
How I've created menus to this point was making them touch friendly for mobile & desktop (even though it has no touch support, so the user could just hold the LMB & drag).
I've attached an image of this happening if somebody doesn't have a touch device like mine. (the grey block on the left shows up if a user swipes)
So in summary:
Is it doable to turn this feature off for a user?
Should other steps be taken.
Related
This is quite an unusual one, and I had no luck googling this issue.
Short version - I've created a basic webpage for my work, to streamline some tools into one place, which works differently when I open it at work, compared to when I open it at home.
Details - When I've designed it at home, I'm using a lot of hide/unhide content (bootstrap4 collapse buttons), which unveil content with a nice simple sliding animation, as does the carousel at the top with various images sliding across- However when I open the webpage at my place of work, the smooth slide animations are disabled (it literally just makes this appear and disappear, and the carousel just flicks between the images, rather than slides).
Could this be related to work corporation firewalls blocking certain bootstrap sources? Has anyone else ever had something like this, and hopefully solved?
Also - I know I could just do this via JS, but I just wanted to query this all the same as it's a very odd issue.
So, here's a weird issue I've come across with Safari on Mobile—I suspect there's one root cause for all of it, but have not been able to figure it out:
Links wrapping images don't cover the full width and height (as they should screenshot below), just the upper left corner
Linked Buttons only work on the left half
Links with: hover will hang on the hover and you have to press through
To make things worse, development tools that are supposed to simulate iPhones don't show anything funky—the whole image/button should be linked, etc.—but when you use the site with an actual device, the above happens.
I know, I know, this feels like such a basic question, but I've been banging my head against it for two days now.
Here's my testing page, but you'll see it intermittently across the site: https://redcowmn.com/testing-safari-ios-issue/
Is there a stray line of code that tells Safari to misbehave?
Even an ultra simple <p>Hi</p> acts unreliably.
I'm building on the X Theme framework on Wordpress (where I've got 20+ other sites), Yoast SEO, Wordfence, Gravity Forms, WP Rocket (in Safe Mode), WooCommerce, and Stripe for WooCommerce.
Thanks, folks.
Modal screen!
I had a modal screen acting like some sort ghost element, screwing with the z-index, etc., etc. That's why only parts of the image were active.
Very strange that only Safari had an issue with it, but anyways, that was the issue.
I guess that's what I get for trying to hiding a required ugly embed off screen... :)
I am trying to learn polymer by building my own mobile app. Can anyone point me in the right direction on how to create introduction pages like the "What's New" part of the android app "Today Calender" by Jack Underwood. Is there a way to do that with Polymer's built in elements? It's basically 3 pages you can swipe through. The page follows your finger if you release your finger past a certain point it will gently snap to the next page.
The swipe-pages custom element does exactly this. Swipe to navigate between pages, the pages start moving the moment you drag them horizontally, but only change pages if you drag past a set threshold.
Update:
This package is for Polymer 0.5 and does not yet work on Polymer 1.0
I made three CodePens while I was learning jQuery, so the code is a bit crude.
The first one works on a loop which allows for infinite scrolling.
The second one doesn't work in a loop.
The third one uses vertical slides, but you might wish to employ the bubble navigator. How they work is quite intuitive, but if you need any clarification feel free to shout out.
Here are all the CodePens:
Swiping in a loop
Swiping without a
loop
Side navigation
EDIT: I've uploaded a video to youtube demonstrating the bug here: http://www.youtube.com/watch?v=zkDYlgtX5Hk
I've got a really weird bug that I found testing my new web application on a Samsung Galaxy S2 running Android 4.03 ICS.
What happens is that when you load a form in the default web browser and then scroll down the page, the hitbox/touchable area seems to stay where it was on screen when the page first loaded, even though the form element itself has scrolled up the screen.
As far as I can tell with the few testing devices I have available, I think this only happens on the Samsung Galaxy S2 as I have tried it in the Android simulator with the same version of android and was unable to replicate the problem. I know this makes it a very specific user base that haves the problem however last I checked the Galaxy s2 was the most popular Android handset in my country (Australia) so it would be nice to find a fix.
I have created a very simple page to demonstrate this at http://users.tpg.com.au/geoffica/test.html
You can replicate the problem by doing the following:
Load the page on a Galaxy S2
Scroll the browser so that page completely fills the screen and the address bar is just off the top of the screen.
Where the select box is, place your finger to the side of the screen as a marker of where the select list was.
Scroll down the page any distance, (while still keeping the select list on screen) then touch the whitespace where the select list used to be and the options should come up on the screen. It may take a few attempts to get it but it will happen.
Now I know you are thinking this is quite tricky to replicate and likely rare that it will happen, but on a form I built for a client because of where the elements were positioned, the hitbox always overlapped the submit button of the form, making it very difficult to hit the submit button. Select lists will also steal touches from other select lists if the hitboxes overlap, making the wrong options appear when touched.
I've tried many things but the only workaround I've found so far is to use the touchstart event to trigger my submit button instead of the click event. This seems to happen before the click event of the select lists and prevents it from getting in first, but this is far from ideal and doesn't stop the select lists from stealing clicks from other elements on the page.
I've also thought about rolling my own jquery plugin to maybe place the select lists offscreen and then trigger their click events by touching a link or something. If it's a mobile device then the options will come up on screen regardless of the position of the select list. This would be quite cumbersome however and I would need to factor in the effect this would have on users coming from a pc or iPad for example which shows the options in a dropdown list instead. It sounds pretty problematic to me. May even require some Galaxy s2 specific browser/device sniffing.
Does anyone have a real workaround for this, apart from just not using select lists?
Are you by any chance using absolute positioning for it? this will fix to a certain area on the screen not the page.
First, I would update the document header to a proper HTML5 header:
<!DOCTYPE html>
I think this might be a problem you can fix With Jquery-mobile
Just simple because when you do not use it , you website look very weird on mobile Browsers
May be this is the solution and this is just a hint :)
I'm developing a mobile site in HTML for use on 2 Blackberry models, one quite old (8700v) and one newer (8520) as specified by the client.
The native browser on the 8520 is rendering my HTML/CSS pages perfectly. The native browser on the old 8700 is far from perfect however as the CSS support is minimal.
As a solution I decided to try installing Opera Mini 4.2 on the 8700. The rendering is great, speed is even improved but there's some rather strange behaviour happening with the hyperlinks on the page.
When I scroll down through my pages links are automatically highlighted and made ready for selection. This is fine until I have a number of links close together, for example in my nav menu. The nav menu is a set of links arranged within a . When I scroll to the menu all the links within the menu highlight at once. Even within the body if 2 links are on 2 separate lines (one stacked on top of another) the same issue appears.
I'm trawling Opera documentation but haven't found anything useful yet. Anyone got any ideas on why this happens and if it can be resolved?
Without seeing the actual HTML/CSS code, it's hard to pinpoint the exact cause of this, but it's most likely one of the following:
The links in question point to the same URL. The browser will highlight them as a group to visualize this.
Some script is adding a click event listener or similar to the group of links.
An <a>-tag has been left open.