I'm looking for a plugin or a way to mimic alt-tabbing between windows using divs in a web page. To clarify, the user will not be pressing alt-tab, but will alternate between the divs with the mouse.
To be precise:
I need to popup a set of divs
That the user can navigate left or right, similar to alt-tabbing between windows.
The center div should be large and the side divs should be increasingly smaller.
When the user moves the mouse cursor left, it should rotate the list right, moving the center div to the left.
I also want it to work with swipe events on a touch device (but I can implement that separately).
These should work:
jcoverflip
Content Flow
Let me know if they aren't what you're looking for (and why).
Related
I am trying to build a website that moves to sections using arrow keys on the keyboard or swipe on mobile/tablets. I am using FullPage. Is it possible to have a grid like website where the user can move in a square grid like fashion rather then just up and down?
It is possible. But might be much easier without fullpage.js
So you could have the page fixed but it content overflow. So that would allow you to be able to scroll at all direction.
You could add a mouse listener to scrollTo(x,y). Where x and y are the mouse pointer location
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.
Since I'm still new to Javascript/Jquery/HTML5/CSS3, I thought I'd ask a question for all you much more experienced programmers out there.
I'm kind of stuck at the beginning of my program logic. I want to do a website with a parallax "scrolling" effect, however the effect should only take place when the user clicks navigation buttons on the edges of the screen.
The layout of the website will be like this:
O
OXO
O
The "O"'s are the content divs, "X" is the "home" page (point of origin). If the user clicks the arrow at the top of the screen (from point of origin), the page will scroll up. Same goes for any of the other directions. I'm wanting one giant photo of the establishment in the background that shifts it's position based on the specific content div they "scroll" to, using the parallax effect.
I've been racking my brain for two days trying to figure out where to start with this. Any help would be greatly appreciated, and please let me know if I need to be more specific about something. Thank you!
The home page content is in the middle of the parallax experience.
For this reason, you will need a parallax plugin that can handle both vertical and horizontal parallax effects to allow proper navigation in your webpage.
Consider: Scrolling Parallax Plugin for jQuery
The above parallax demo page allows you to scroll both directions.
Here's the method/approach I would take using this plugin.
1. Design your website with horizontal and vertical content as required. Layout example:
OOO Here, the top of the webpage is content about the "starting" point.
OXO Next, you have content on the sides of the "starting" point as shown.
OOO Finally, content is below the "starting" point to complete the webpage.
2. Since the webpage visitor will see the very top of the webpage which is not desired, use jQuery.scrollTo() Plugin to set the "starting" point on page load.
3. Use a plugin or method that will allow 4 transparent arrow "div's" that are at each viewport side in "fixed" position. When clicking (or hovering) with the mouse, this will simulate scrollbar movement and the parallax webpage plugin will react accordingly. Example of layout (note outer navigation is semi-transparent):
UUUUU Webpage top-content is here plus the overlay arrow for UP Navigation.
LOOOR LEFT and RIGHT Navigation arrows are seen on top of more "top" content.
LOXOR The center starting point will show the "fixed" Navigation arrows.
LOOOR LEFT and RIGHT Navigation arrows are seen below the "starting" point.
DDDDD Bottom-content is here plus the overlay arrow for DOWN Navigation.
The most difficult part of the webpage is to have enough "filler-content" that occupies the top and sides of the "starting" point. But if that "filler-content" is a thumbnail gallery, then this particular parallax page would look really nice (and unusual!).
I'm building a mobile app using HTML, CSS, Javascript and jQuery.
Is there a way to scroll a div that is longer (700px) than the mobile screen (480px) using only two buttons, one for down and one for up?
So when a user presses and holds the down button it appears to scroll down the div by about 10px at a time.
Edit:
The mobile app is actually being compiled with Phonegap, so it won't be a mobile website but an actual application.
The application features dragging and dropping quite heavily and in order to do this using JQuery and HTML, I've had to bind the mousedown, mouseup and mousehover events to touch events.
Because of this the user cannot simply drag the screen to scroll as they would a typical application. Therefore, I have decided to go with physical buttons instead of scrolling the navigation div.
The navigation div is set to have a greater height than the canvas (screen height and width) div. This will be the div the user is scrolling.
Is the div you're talking about scrolling the full page itself? Or is it a specific div that you want to "scroll" within the page (kind of like an iframe)?
Both can be done. If you're scrolling the full page, I'm not sure why you'd want to use buttons rather than let Safari simply handle the standard swipe gestures. But, it could be done this way:
Use fixed positioning on the buttons so that they don't move as the rest of the screen scrolls.
Use use jQuery's .scrollTop method to do the scrolling.
If, on the other hand, you want to make a scroll effect on a single div, without the rest of the page scrolling, then just do the following:
Wrap that div in another div that has overflow:hidden; position:relative
Make the inner div position:absolute
Animate the inner div's top property to create the scrolling effect.
You may find this plugin useful: http://logicbox.net/jquery/simplyscroll/vertical.html
Anyway, why would you need that? The user may be able to scroll normally with a finger swipe if the content is bigger than the screen.
I'm building a web app that has a grid of many small scrollable divs (actually, Ace editors), and this grid has enough elements that it is larger than the window. When a user begins scrolling over empty space, I want them to be scrolling the window itself; when a user begins scrolling inside a grid element, I want them to scroll the div contents there. The thing is, if a user begins scrolling over empty space, and then scrolls such that their mouse goes over a grid element, that scrollable div captures all the scrolling events, interrupting the user's flow over the grid and "trapping" them inside the grid element.
I can't manually capture onmousewheel events, since AFAIK there's no way to capture horizontal mouse wheel movement separately from vertical, and I want users on Mac OS X to be able to scroll in all directions. I've thought about using JS to add an invisible div with a very high z-index on the first onscroll event, and removing it as soon as onscroll events aren't triggered for a certain period of time. Haven't yet coded this up, but I'm wondering if there's a better solution, or if there are any potential pitfalls that I haven't thought of. Any help or advice would be great! Thanks!
I think a solution for this would be incredibly difficult due to browser support, and the actual solution, which would probably be something like calculating the scroll, backtracking the div, and applying the scroll to the page.
You could do something like this:
$('div').scroll(function(e){
// figure out how much it has scrolled
window.scrollBy(0,howmuch);
});
I don't recommend this solution in the slightest though, I think the better option would be to set the divs to overflow:hidden; and pick up a solid scroll plugin, and use that to customize the scroll behavior on the divs.