I have a login button at the footer of my main page or landing page.Currently when user click on the button a login form will get open from TOP to BOTTOM i.e. from the start of form to the "LOGIN" button.What i want is that when i click on the login button it should open the form using slide effect but from the BUTTON to the TOP.I don't want to include library like jQuery as there are some conflict issue with it.
Please help me out or refer me some url where it happens.
Regards,
Salil Gaikwad
See my demo.
I make no promises on compatibility, as I did it in a few minutes, but it works for me in Safari 4 beautifully. Essentially you need to wrap your element, set the wrapper's height and width to that of the inner container, then set the inner container's height to 0px. I use $fx to transition css properties. All you have to do then is transition the elements height from 0 to the height of it's wrapper, and have it's scrollTop set to that height as well. No worries, with $fx you can set the speed and such.
See the code if none of this makes sense, I am not so good at explaining, and good luck!
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
Is there a JS for these features or how actually does it works? (Please check out the sites below)
As the user scrolls down the top toolbar minimizes and remains at the top. Also the pictures seems not to move with the scroll...
Thanks!
http://getflywheel.com/
http://www.google.com/nexus/7/
For the first example you have to set the position:fixed attribute on css for your background. An eventhandler must be check if the user had reached the bottom to display the toolbar on top of the page.
In the second example there is no fixed background but a parallanxed background here is a good example.
position:fixed for toolbar.
In first example also event handler for JS onscroll event, where check if user scrolled
enough to show toolbar
I want a menu hidden at the top of the page, that slides down after clicking a button so it shifts the other content bellow it down. What I have is the hidden menu and I use jQuery functions slideDown() and slideUp() to toggle it. The problem is that eg. on iPhone the slide is not fluent, so I would like to use some acceleration.
I wanted to just add -webkit-trasnform: translate3d as described here, but this seems not working with jQuery slide functions. Also I tried to use jQuery('.menu').animate({height: ..}) but it didn't work also (I think jQuery toggle uses the same). So I found out, that probably the transform3d works only for moving elements by adjusting its coordingates (left, top ..) but not width and height.
I found out this jQuery plugin https://github.com/benbarnett/jQuery-Animate-Enhanced , that should help accelerate width and height changes also, but it didn't work at all in my case.
So I managed to move the menu by adjusting the Top property and adding translate3d, which finally makes the menu move fluently, but now I cannot force the content bellow it to move down when the menu slides - if the menu has position:relative and is moved out of the screen, there is still a hole of its height at the top of the content. If it has position:absolute , it doesn't influence content bellow. If position:static, Top: property has no influence.
Am I missing something or what is the "recommended" way to implement this ? You can see the current implementation on http://www.huureenkerstboom.nl (please downsize your browser window to see the mobile implementation).
I want a html div which will scroll when user scroll down the page and it will get to fixed position when it's parent tag ends. For example:- See this link http://www.9gag.com/ they have alot to posts on one page. When we scroll one post and go to end of the first post, the title and share buttons become to fixed position and then the second post do the same and same for the next posts. Just exactly like that. How can we do this in Jquery or raw javascript or in css.
Maybe you want to try this plugin: http://labs.anthonygarand.com/sticky/ Sticky is a jQuery plugin that gives you the ability to
make any element on your page always stay visible by making the element to be floated when they has reached the limit.
$(window).scrollTop() will give you the number of pixels scrolled down in the browser, $('postcontainer').offset() will give you the x,y positions of a post container.
So if you bind an event to $(window).scroll() or to the mousescroll, you can check if the postcontainer's offset().top is less than the window.scrollTop. If it is then you start moving the item down relative to the post container. When doing this you need to keep track of the post container's height and the moving element's height to make sure it doesn't go down past the bottom of the container.
So if postcontainer.height - movingelement.position().top >= movingelement.height() then you need to fix the position of the moving element. Do the opposite while scrolling back up.
Hopefully this will get you thinking and starting to kick out some code.
This is the solution for your problem with a simple css property.
use position:sticky to follows the scroll.
Here is the article explained.
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
and old way of doing this demo
with sticky position demo
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.