i have created a webapp using only html css javascript using iui library i have few pages and all the content is inside one html page and for page navigation and slide effect i have used iui framework
when there is lot of content i can scroll vertically up and down which is fine however what i have also noticed is if i drag the page horizontally either left to right or right to left and also if i drag the page from top left diagonally the entire page is moving in those directions which is not good
i would like this movement to be locked and even if i use the finger to slide across or diagonally the page should stay fixed and should only move vertically up or down
do i need to write any meta tag to avoid this movement.
using only html css and javascript is there a way to fix this or are there any other alternatives without creating the app natively using xcode
If the webpage is wider than the width of the viewport then the behavior you describe will occur. However if you ensure the content width is set to 320px (and no child transparent-ish elements are pushing content past that demarcation point) then you shouldn't be able to scroll sideways.
If that's not working for you, you should be able to use the touchstart/move/end events and disable the default behavior in javascript using preventDefault() on the event object - http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
Hey Sudhakar! Why not using the list?
First, check if your viewport meta is correct. Then, perhaps a media (image) is larger than the global viewport.
Last, this could also due to a width: 100% + some padding/margin. To fix that, box-sizing: border-box; could be your friend
R.
Related
SEE BELOW UPDATE
LOOK AT THIS SITE AND CHECK ATTACHED IMAGE --> https://www.blinker.com/
If you see, the elements transition vertically in a smooth way on both computers and mobile devices.
They seem to have a full height based on the view-port something like the CSS rule below which is something easy to do and which accomplish full height based on viewport.
element {
height: 100vh;
}
But I am trying to do the scrolling thing.
When they scroll between each section or each element or div.
The transition goes like very smooth either by clicking on the right circle links or by doing it with your fingers on a mobile device.
(Make reference to #1 inside the image)
#1 - Can someone knows how to do this?
Also if you notice, on that site the Mobile URL Bar is always visible.
It is like they refresh the page every time, see how the favicon re-uploads every time when you go through each section.
(Make reference to #2 inside the image)
#2 - How I can accomplish that?
RESOLVED
I used this pure JS solution, it solved both problems.
https://github.com/peachananr/purejs-onepage-scroll
I am lacking of a better term to describe this UX. It is basically a content container that is scrollable. Depending on the scrolling position, the top or bottom edge of container would light up (or change style) to indicate there is content at either of the direction. For example, when you go to Yahoo.com, and scroll down a little, the top edge of the scrollable section would turn purple, indicating there is content at the top that's outside of the viewport. (See image below)
I wonder if there is already some well known script library that can achieve this so I don't have to reinvent the wheel.
This is a fairly custom concept, but you can see how to get started by looking at the way Bootstrap's Affix method works: http://getbootstrap.com/javascript/#affix
Essentially you will need to have a scroll event listener which tracks what the position is that a user is scrolled on a container. When the scroll position reaches certain breakpoints, the listener function will trigger CSS classes which may do a variety of things.
I'm having a little trouble getting my head around a Javascript animated scroll issue.
I'm using the SuperScrollorama Jquery plugin which is built on-top of the Greensock JS tweening library.
The fundamental effect I'm after is to "pin" a section down, then use vertical scrolling to expand some content, then "unpin" the section once the content is fully expanded, so the user can scroll on - i.e. http://blueribbondesign.com.au/example/
But when I try to apply this same effect to multiple sections one after the other, everything gets all broken: the "unpinned" content below the pinned element is pushed off screen and it seems to miscalculate the height of the element when it performs the animation in reverse (i.e. scrolling back up the page). - i.e. http://blueribbondesign.com.au/example2/
I've been endlessly fiddling with the "position:fixed" and "pin-spacer" div, and tried attaching the Superscrollorama plugin to various containing elements, but still cannot work out how to get it to work.
Any help from the brilliant crowd-sourced minds of the web would be much appreciated,
Cheers,
TN.
I've been working with this issue myself. What happens is there's a blank div spacer put above the section being pinned with a height that you've defined in the pin() function. Secondly, the pinned element gets a position:fixed assigned to it. Both of these things allow the scroll bar to continue down the page while the element stays affixed. In turn, whatever you had below that section gets bumped down because of that spacer div's height.
If your pinned element is centered horizontally, first give it a left:50%, margin-left:-{width/2}px to fix it from pushing to the left edge.
Next, you'll have to detect the pin/unpin events (which are offered by the plugin as parameters additional to "anim"), and change the section underneath to also toggle a fixed/relative position. When you change that underlying section to be at a fixed position, be sure to set its "top" property to whatever the pinned element's height is. Once the pinned element becomes unpinned, change it back to relative positioning. Does that make any sense?
It seems that different techniques will call for different fixes, but those things are what I'd pay attention to... fixed positioning, and then using the pin/unpin events for adjustment.
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 working on the front end build of a set of HTML templates with a tricky element in the design.
As you'll see from the screengrab the main navigation is a vertical list which will contain nested lists of links where child pages and sections exist thus requiring the height of the menu to be flexible.
The design has a set of full width stripes in the background - header, centre and from beneath the main nav downwards. This is proving tricky to integrate as the dark blue background which goes the full width of the browser needs to be flexible and change alongside changes in the height of the main nav.
I have tried implementing the following solution from CSS tricks but it's causing various problems in various versions of IE.
I'm considering creating a blank absolutely positioned container that has it's height set by determining the height of the main nav via JavaScript but I'm worried about jumps in the layout on page load and again cross browser compatibility.
Any other suggestions on how to approach this?
It can be done with pure css bu not clearing floats. Basicly the idea is to have a div that wraps your nav and content, and float the content. The wrapper sould not have overflow:hidden. The float is cleared in footer.
Fiddle.
Tested FF4, Opera 11.50 and Chrome 12. Don't have IE on hand but it should work fine.