I have to make a simple video selector webpage for a touch display. I got the selection part working, however, I want to include a "back to main menu" button. The video plays full screen, so I want to do a static overlay button that comes up from the bottom, with the back button.
What I want to achive is this: on loading the video, the overlay is shown, then after 2-3 seconds of touch inactivity, it slides down and you can watch the video. However, if they swipe up from the bottom (or any touch event really) , the overlay comes up and they can press the back. But again, non-activity and it goes back down.
Related
I'm trying to find the right jquery or js plugin to create an effect like this:
I have a long screen capture from a smartphone, is a huge image.
I want to put this image inside a scrolling div placed on top of a smartphone background image to simulate the screen.
I cannot find a way to manage the scrolling: I want to place this image in the middle of the page, and when the user scroll to the "smartphone" the windows scroll stop and my captured image placed inside the vertical scrolling div begin to scroll. At the end the page start to scroll again.
Is there something i can use?
I have a few slides on main page but for user it's not clear that another views are available. I would like to show a demo that it's possible to swipe left by showing an piece of next slide. I just made next slide show, but it's not smooth.
$scope.nextSlide();
setTimeout($scope.prevSlide(), 1500);
How do i do swipe demo?
I would recommend to use an animated gif that shows the user the functionality. There are a lot of virtual tours like Intro that also could help.
I am developing a Wordpress website and I want the following: when the user lands on the homepage and scrolls down I want the website to slide to the next section. This has to work immediatly when the user touches its mouse scroller and only then. I am able to slide to certain anchorpoints but how can I achieve this after the user only touches his mouse scroll 1 time?
This is not a duplicate of the submitted question. I want the page to scroll to a certain div or section after the user only touches his mouse scroll once. No clicking
Set a flag, and listen to a scroll event. When the scroll event triggers check if the flag is off, flip the flag if it is and then to what you need to do. If the flag is already flipped don't do anything. Easy :D
I wanted my webpage can change when user slide left/right using their finger on touch device (android/tablet). I found following source code that works what i need:
http://padilicious.com/code/touchevents/
But that has few limitations. It doesn't move/slide the page/element to left/right. It just change the page (href/page location). So, user don't understand whether they slide it correctly or not.
but on touch screen device like gallery you can see when user slide to left/right image move to left/right as user move the finger and it goes away left/right when user finish the slide.
i want to do something like that.
so, when user move finger my page will move with the finger too and when he remove the finger my page will go left/right with slide transition effect.
here is the sample code for page transition...
http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_trans_slide
hope that make sense..
You can use jQt to capture touch screen swipe events. After capturing these events you can easily make an application that navigates like you want. Also jQt has it's own webkit animations. And they are pretty cool.
You can also check this Safari Web Content Guide to capture these events yourself.
Another nice tutorial for detecting swipes for touch screens.
I've been working on a website, below link,
www.production39.com
I have created some panels that will slide out when the right hand buttons are clicked (i.e. who we are, what we do, get in touch), then by clicking the back button, it will slide out of screen. I have set up a fade effect on the back button image onmouseover, and previewed it on the web so far so good. However, I've noticed an issue with the fading effect when I view it in Chrome, when I hover over the back button on the "who we are" and "what we do" panels, the content of the panel also disappear!
This doesn't happen with the "get in touch" panel though...
I have checked my code and I can't seem to find where the problem is... It would be lovely if someone can point me to the right direction?
Thanks so much!!