i notice there's this functionality on 9gag.com. on the homepage, the 'Y u no signup' button is on the right. but as you scroll down, the button is hooked onto the header banner. how is this done?? this can be also seen on this very page whereby the yellow panel(similar Questions) on the right freeze when u scroll this page down. in facebook timeline, as you scroll down there will be a absolute div which appear on the top which contain options for timeline, now, status, photo, place and event.
r they using javascript or is this something new in html5??
when the user scrolls down the computer checks for the amount scrolled.Let's say you scroll down with 50 px .The computer checks if the scroll distance is equal or bigger than 50.
If so then it will display that new Y u no Signup?!
and then if the scroll distance is smaller than 50 the top button simply isn't displayed anymore.
No this is simple HTML, or rather CSS. Use position: fixed;. See - here. You can check my site too for example.
Here is a near duplicate question: How does economist.com implement their sticky header? jQuery?
The answer is that you use javascript to detect scrolling, and change the css of the div you want to move to position:fixed after a certain amount of scrolling.
Related
I wasn't able to find any events to hook into for this - I want to take control over the scroll distance when the user does things like moving the mouse wheel, clicking a scroll button (up or down), clicking the empty space of a scroll bar, etc.
For example, if I have a list of things, and each row is 16px tall, how would I be able to force it to scroll 16 pixels for single scroll events (i.e. mouse wheel up/down, or clicking the scroll button, if one exists)? And then, if scrolling by clicking the empty scroll bar, how can I ensure it scrolls by a fixed amount, so when it's done scrolling, it would be perfectly aligned? The best example I can give is how it behaves in Excel. Provided you have the scroll lines to be set to 1 line in settings, scrolling up or down will move one row at a time. Clicking the empty part of the scroll bar moves down exactly to the next not-fully-visible row.
My research, up until now, indicates I'll be using the .scroll() function (at least if I'm using jQuery), but I'm completely stumped at the plan of attack, even moreso because I'm unable to find any way to differentiate between a mouse wheel scroll, button scroll, or scrollbar jump (or whatever the terms would be).
Is there also a way to restrict this in CSS, avoiding any JavaScript at all?
To achieve this, you need to use scroll-snap-type, as stated by DM in the comments.
You'd set the parent div to have scroll-snap-type: y mandatory;, and it's immediate children elements would have scroll-snap-align: top (or bottom)! This should allow rows to be viewed perfectly, provided the containing element is an appropriate size (and assuming each child element is a known fixed size).
Basically, I have a web page which is a div inside a div. Let's say that div 1 (the container) is 500px high. Div 2 is 100px high inside of that container. What I want to do is detect the user touching div 2 on the screen (this is a web page on a mobile phone) and as they drag up/down, the div moves with them. I've done some research and have seen this being done using matrix3d and transform y in CSS 3 (but I can't find a good explanation for someone with little experience with this sort of thing such as myself). I want it so that, let's say, the user drags the second div to the bottom and some of the content goes outside of the container div. I don't want it to scroll down, I do want it to disappear... BUT I want it to kind of 'bounce' back into view. So here's the breakdown.
user presses the screen
user drags div 2 which is inside of div 1. As they drag the div, it moves in the direction of their drag.
the user can drag the div right to the top/bottom. If they drag it outside of the container div, that's fine. The container div should not resize or become scrollable and part of div 2 should disappear from view.
when the user releases the drag, the div should bounce back into position. Let's say, if it is dragged too high up, it bounces back to position 100, 100. If it's dragged too far down then it bounces back to 100, 500 (I figure the bounce can be controlled by a CSS transition).
So, does anyone have an example that I can look at to see this in action or a tutorial that will help me understand how I can achieve this? I apologise for not providing any code as a basis to start from, but in truth, I don't really know where to start myself.
Any help is greatly appreciated.
The safari dev docs are your friend:
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
Checkout the the touch move section for moving a div, for your case you want to set conditionals for if the user goes outside the bounds of your outer div, and disable scrolling using overflow hidden.
I would like to have a couple of divs that scroll in sync with each other in a manner similar to the diff tool, meld. Note: as this is a static image, when you move the slider, the corresponding slider moves in sync with the other slider. I need to do this both horizontally and vertically.
This is for a highly customized diff tool, some of the diffed lines are very long, and horizontal scrolling needs to happen. This is within a web page, I use jQuery, but any css/JavaScript approach would be appreciated.
It should be as easy as binding to the scroll event of each div and set the .scrollTop & .scrollLeft of the other div equal to scrolled div's scrollTop & scrollLeft.
See https://developer.mozilla.org/en/DOM/element.scrollTop && https://developer.mozilla.org/en/DOM/element.scrollLeft
Edit: Here is an example:
http://jsfiddle.net/dHvJJ/
I assume that you have a fixed font size. I also assume that the two containers are 2 divs.
here's my approach (in order to support webpage resizing properly):
convert the font-size from px to em
spit out an array of correspondences from the code (for example, you should already know that lines 32-33 from the first div correspond to line 22 in the second)
add event handlers for onscroll on both divs. Now the 'magic' is to calculate where the corresponding scrollbar should be, based on your info - it's pretty safe to assume that in order to scroll to line 32, you have to scroll 22 lines on the left side and so on.
For the horizontal scroll I don't think it should be anything hard, simply scroll the corresponding div at the same scrollLeft position
I am building a new theme for my blog and I need to do it before 1st Jan. Its almost complete but I am encountering a problem:
See this post for example
The last 2 Widgets i.e., FEATURED POSTS and RECENT POSTS in sidebar are set to float (positioned absolute, floating widgets become fixed when user scrolls to it) so that they are always visible when a user scrolls down. But how do i stop floating after reaching the footer? Any help would be really appreciated.
From what I can see you use some javascript that changes the box to position:fixed once your scrollposition is equal to the top of the box. What you need is some sort of check to see if the bottom of the box is less than a given length from the bottom of page. Say for instance is length from bottom is less or equal to 100px you can turn it back to position:absolute and set bottom to 100px. Then of course add a check to see set it back to fixed if the user scrolls up again. Just work a little with the script you got there and you'll have a solution, don't have the ability to test a script from the comp I'm at atm so can't help you with that.
I don't even know what I want to do would be called
Please take a quick look at this page:
http://www.philsalesses.com/plasma-pong/
You'll see the title Plasma Pong and an image under it, on the left side. When I scroll the article, I'd like it to stay put while the page scrolls. However, you'll notice when you get the bottom of the page, there is a footer and there wouldn't be enough room for the title and image if I just made it completely static.
I'd like that to stay put until the footer hits, then scroll. When you scroll back up the page, it will scroll a little bit, until there is room, then stay put again. The same effect, but in reverse. Any idea what to look up how I could do this?
Set the titles css position to fixed. Then use javascript to detect a scroll event when certain criteria are met reset it to an absolute position so that it stays above the footer. Then when remove the absolute positioning when the page is scrolled away from the footer. To see a working example go to quirksmode.org. In his articles he has the effect you are looking for.