swipe gestures and Wordpress templates - wordpress

I'm looking to do a mobile web app in Wordpress. I need the template to have a thin (~3/4 inch) horizontal rectangular section at the very top that can be swiped to the left/right to serve as the navigation. Basically, every time you swipe this section to the right/left, it changes the page below it. I've seen templates where the whole page swipes, but not split in this was as I described it here. If anyone has any pointers for me on how to customize the template like this, I'd really appreciate it.

Try this plugin. They support Swipe left, right, up, down and double tap. you can specify the area where you want wordpress to register the gestures, say in your case it would be the ID of the Div you want user to swipe in. Let me know if you face any difficulty.

Related

Customized Website with Image zoom instead of scrolling

I have been searching google and I'm unable to find a website builder that offers such a feature.
So basically what I want is:
Initially on website load a certain zoomed out image is presented to the user and as the user scrolls down (through his mouse/touchpad) certain parts of the image are zoomed in one by one. Instead of the usual scrolling down a page, the scrolling down would instead zoom in on parts of an image, if that makes sense? Is this possible to do somehow?

IPhone X Swiping up to switch app activates buttons at the bottom of the screen

We are currently checking if our app is compatible with the upcoming iPhone X and its new form factor and gestures.
We noticed a problem regarding the switch to home screen gesture where swiping up actually triggers the action on the buttons located at the bottom of the screen.
In our case, this is problematic, because our app is a remote controller for very high end amplifiers and the buttons located at the bottom of the screen are volume buttons..
See image:
Anyone here had to deal with this kind of issue lately?
I was thinking of some kind of event that could be triggered by the swipe up gesture and disabling the buttons maybe?
Thanks for your help.
So we finally decided to go for the safe area principle and stick our bottom bar to the bottom of the safe area as suggested by Apple.
It's a bit annoying as it adds a big empty space at the bottom of the screen but I guess every app having actions there will have the same problem (tab bar for example)
Here's the article I used:
https://useyourloaf.com/blog/safe-area-layout-guide/
If you found another solution, I would be happy to read about it.
Thanks.

SharePoint Rounded Navigation Tabs/Colors

I'm hoping to get some direction on the following scenario. I have some UI/UX design experience but not much in working with SharePoint 2013 branding. What I need to accomplish is the following:
Custom "tab" style navigation in the left hand and top of the page. These would look like folder tabs along the top, and on the left hand side they would only be rounded on the right corner. I understand that I need to edit the CSS but not sure how best to accomplish this considering some of our page requirements. We want to have the tabs along the top and left but each department's "page" is a different color theme.
Example of tabs required
Do I edit the Master Page CSS to get the rounded tabs look and then that is applied to each page, but that page keeps its color selection or do I have to do a CSS page for each page? For example, a department uses the color palette selection to assign their colors but the Master Page takes care of the tabs modification or do I have to do a Master Page for each department's page?
ANY direction would be a big help. I just need to deploy this as simply as possible but not sure how. -Thanks!

animation on link click

Alright I have no idea how to phrase, and I'm new to StackExchange so I hope this is in the right place.
Anyway, I'm working on a mobile HTML5 app right now, one that uses Phonegap/Cordova (and Bootstrap), and I wanted to have an animation whenever a user clicks on a link.
So when a user clicks the link, there will be a page transition to the left, and the linked page pops up.
How could I do this in CSS/JS?
Welcome to Stack Overflow,
To design an HTML5 mobile app, i will strongly recommand using a front framework, like jquery mobile, ionic or onsenui.
Here is how you can simply do the swipe transition with jquery mobile : http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_trans_slide
Hope this help

Customizing Flex Slider plugin

I've looked a looked and looked for the perfect rotating banner for my website I am creating and I found flex slider, of which I love as it gives you the circled just underneath and the left and right arrows as well. The option for face or slide is what I was looking for too, however I need a plugin that allows the user to upload an image to the banner like Useful banner Manager. (I'm not using UBM as I don't what each banner image to fade to white and then to the next image, but that's how it acts).
Does anyone know a great rotating banner plugin that is easy to follow for wordpress newbies (as this will be integrated into the websites I create for clients) either free or premium?
OR do you know how I might just add the upload option to the flex slider plugin?
If you know the data format that the Flex Slider uses you can simply create a custom post type called 'Banner', restrict the various stock metaboxes, leaving say, only the editor and media upload. Then your clients can simply create new 'banners' by creating a new banner post, and uploading its associated image. This is a nice, simple and easy to understand interface for clients, making it easy for them to add, remove, edit banners.
Then simply do a get_posts on your banners and provide the Flex slider with data in a format it expects.
This has the advantage of not requiring a plugin to create, which is useful if you are distributing themes.
http://codex.wordpress.org/Post_Types

Resources