I have a div which is mostly off page but uses translation on hover to display on the main page.
This is my site.
However, on mobile devices this isn't the best solution to display this div. Hover doesn't work well and I have to click often to get it to show up. I'm wondering if it's possible to do it like mobile applications where if I move the page to the right edge enough, this content will display or with a button. Something like this:
Any thoughts on if this is possible or how'd id solve this?
This pattern is called 'Off Canvas layout'. Documented (with some CSS) at http://jasonweaver.name/lab/offcanvas/
There are multiple implementations you could have a look at, perhaps start with this nice demo from Zurb: http://www.zurb.com/playground/off-canvas-layouts
As regards the use of hover, you're better off using a tap/click on both desktop and mobile for consistency. The 3-bar menu button is fairly universally understood these days.
Related
I've implemented jScrollPane and I'm having an issue on touch devices.
The example I'm using is http://jscrollpane.kelvinluck.com/drag_size.html where I have a vertical scroll using a circular button image for the scroll on the track. The class that's added to this is jspDrag.
On desktop, when you click and scroll the vertical button, it drags down and the content scrolls up, which is natural in my eyes.
The issue I'm facing is on touch devices (check the example URL above in Chrome using iPhone/iPad emulation in dev. tools) where you can't actually drag the button down - you actually have to scroll it up for the content to scroll?!
Users are definitely not going to know this as it's a button rather than a content block that you're using as a control.
I'd like to be able to touch and drag the button down on touch devices, rather than up, to make the content scroll.
Has any one come across this issue and managed to solve it? I've searched SO and Google Groups with no luck.
Thanks.
Unfortunately jScrollPane seems to just work like this, with an annoying caveat, which is unfortunate - I really liked the plugin.
I came across http://manos.malihu.gr/jquery-custom-content-scroller/ which functions the way it should and runs super smooth on touch devices.
I have been search for hours for a jquery type plugin that is responsive and also has proper swipe animation during gesture.
http://www.photoswipe.com/ is 99% there except that it dosent support single image lightbox mode, its geared towards grouping images into swipable galleries, which it does brilliantly.
However now and then I may want a few images on a page to have no relation to each other. Id rather have a default class, that when used all images opened up in a single image lightbox. Photoswipe automatically groups any images given the same class.
If I was able to set an option with this plugin to hide the prev/next images on a call, then it would have been perfect.
Important though, is that the plugin must use full screen like photoswipe does. So many responsive plugins seem to waiste the screen with unrequired image chrome. The intended slide show or light box should be like viewing a gallery on a smartphone - again photoswipe does this. its only fall back in being able to have non related instances.
There are a couple out there that appear to be inline with what you want. I never understood why some developers create "responsive" galleries, but waste so much space with padding or decretive chrome elements.
I was thinking of using PhotoSwipe, but the developers stopped supporting it and recently threw it out there for the open source community to maintain. Kind of turned me off during the transition.
Here are a few others I came across that I'm considering myself.
Need higher rep to post more links....so some are just cut and paste. Sorry.
JuiceBox
(http://juicebox.net/)
SwipeBox
(http://brutaldesign.github.io/swipebox/)
(full disclosure...I have an affiliate code for the next links. If you want to remove them, just don't add the "ref". If this helps, I appreciate the clicks)
Touch N Swipe
(http://codecanyon.net/item/touch-n-swipe-image-gallery/5886023?ref=bmoe)
Flare (wow)
(http://codecanyon.net/item/flare-responsive-mobileoptimized-lightbox-plugin/2392703?ref=bmoe)
So, I am developing an app using phonegap and jqm. Everything works great and it's all pretty easy thanks to phonegap build. However, I've started to see some 'stutter issues' that are really annoying. My app at the moment only has two pages and the transition effect between them is 'slide'. The first page has a background color set to it and the second one does not. Some of the issues:
When I navigate from page 1 to page 2, half of the page has the background color from the previous page. It goes away after I do some random swipes on screen.
On one of the pages, I have a regular form with some text input fields and a radio button set at the end. When I move from an input box to the radio button the keyboard slides down but it is replaced by a black area for a short period of time.
The fixed header that I have at the top randomly decides to disappear and reappear again.
These are only few of the annoying ones and these only happen on the mobile device and it works fine on the computer. So, I know it's a performance issue.
I've read up about this on the internet and here on SO and different solution have been proposed like writing custom CSS3 transitions (to take advantage of hardware acceleration) or using something like zepto.js.
What in your opinion would be the best 'cross device compatible' method to overcome these? Is there a way to force hardware acceleration with jquery mobile? Is CSS3 performance even across device platforms?
PS. I have been testing on jelly bean 4.2.2. I am not posting any of my code because they are just plain form elements and some input tags and this happens on multiple pages which are totally different so I am pretty sure this isn't code related.
Any help will be much appreciated.
JQuery writes animations using Javascript which dynamically writes inline styles that change quickly. The issue with that, is that it isn't using the hardware acceleration and if you are testing on a retina device, it animates using pixels as they are a unit of measurement. So it is skipping half of your pixels which causes the stutter.
I have written apps using PhoneGap and the best way I came up was to use CSS3 animations/transitions. Super smooth and they feel just like a native app. You will still use JQuery to add/remove classes, etc., but the movement should come from your CSS.
I want to replicate a site for it's mobile version. The site have slider , simply header,footer and dropdown.
Are we able to make exact thing for mobile ( in my case I am talking about slider and drop-down made in jQuery).
What I want is make same feeling on mobile as we have for normal site. Like I see in Video example as people shown (demonstrate) for ipad,iphone that click on menu and page slide to right and something show as new page. I don't want this.
I want to choose the existing themes and color-scheme in mobile edition.
How I can do it.
for this we have something called as Responsive Web Design :)
you can have a look at here :
http://www.netmagazine.com/tutorials/build-responsive-site-week-designing-responsively-part-1
Another good place to start: http://html5boilerplate.com/
This topic is much more complicated than simply adding a few lines of code, but here's what I can offer:
If you want separate mobile and desktop (which I would suggest against) you're going to have to do some device sniffing. The easiest way would probably be to check screen size and redirect if it's under 320px or whatever size you decide on.
This will make your page load a little slower, because you're going to have to wait for the page to parse the screen size detecting script, check to see if their screen is too small, and then redirect. That's going to take a long time on a mobile device and you're not going to make any fans because of slow load time.
Responsive design is the best solution. I think you should take a step back and consider why you want your site to split into two different sites and if you are going to have the ability to constantly maintain both.
You need to use media-queries http://www.w3.org/TR/css3-mediaqueries/
with media queries u can set styles for misc devices and save mutual html...
Instead of responsive design, you can use a DDR to tailor your content to particular mobile devices: http://wurfl.sourceforge.net
I would like to implement touch screen auto scrolling on my website. Examples of which can be seen in the interfaces Ubuntu and Windows 8.
Ubuntu:
Windows 8:
If you make a sharp scroll down the page, it will continue to scroll after you let go and gradually slow. And if the scrolling has reached the lower or upper limit, the page kind of "springs". I think this is a very interesting, and I am wondering how to implement it on an HTML page. Are there are ready-made solutions?
Does this look something like what you are looking for?
http://scripterlative.com/files/dragscroll.htm
It may not fit perfectly, but you might be able to customize it the way you want to.
My suggestion is use scroll.js. It has fantastic scrolling functionality. Use it, and you'll automatically get the sprint effect also.