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.
Related
I apologize for the poor wording of my title, I am not sure how to explain my question in the most concise way.
I have an isotope JavaScript plugin that filters I use to filter some elements. The plugin works fine, however I added my own "No results" text that appears when there are no results. It functions correctly, however what is not working is the animation.
At the moment, if you are scrolled down on the page, and the results go from multiple shown results to 0 results where my "No Results" code appears, there is an animation glitch where my footer (which I have set using flex display to be at at the bottom of the screen) moves up from the bottom, and then snaps into the bottom.
I have worked out that one possible solution for this may be to give the "No results" text a height that would make all of the contents on the page add up to 100vh. Is there a way to calculate it so that it will be the calculated height of what is left on the page to ensure the min size of the contents of the page are 100vh.
Here are some screenshots of the issue:
This is how it should look the entire time when there are no results. However this only happens at the end of the animation
This is what happens during the actual animation. The page resizes in a strange way where the footer first moves up, leaving the white space at the bottom and only then does it snap down into position.
Attached is the live code of my site, to see what I mean, please first scroll down and then click the "Financial Sustainability" checkbox.
Link to live code
If anyone has any advice at all about this, even on how to explain the question better, I am open to any feedback and suggestions and I really appreciate all of the support.
I need to make a dynamic jQuery menu for showing products.
There will be one main picture with text and hyperlink on it, taking 60% of the screen, and on the right of it I need three small pictures (one above the other, horizontally) with 20% width of screen (but all together taking same height as the main one).
I need help for the animation. The animation will be next:
the three pictures on the right are sliding up, and the top most disappears, and a new one is appended to the bottom (at the same time as the top most is disapearing). Now, the one that dissapeared becomes the main one.
I've made an easy solution with .slideUp function, but that doesn't actually made the div go up, instead it is just losing it's height until it becomes invisible. It is not the solution I wanted.
Thanks.
EDIT:
I've managed to get some solution with jQuery.sliedUp function, but still I didn't get the effect that the client was asking for.
Now with a little bit more search, I've found that the jQuery UI hide function extension can do the effect I am looking for.
Here's an example: http://jsfiddle.net/WMPRJ/
My problem now is if you click on the top div, while it is sliding up, the bottom div does not follow it up and take its place. I need to do that. Please provide me with a solution.
Append the current main to the bottom of your thumbnails, slide up the top one and remove() it. Take its src attribute and set it to the main image.
Here's some (sorry, not a self-contained example) code that should get you where you're going. If you actually take the time to read it you'll see it does exactly what I described in the first two sentences.
$('.thumb').first().slideUp(function(){
$('#main').attr('src', $(this).attr('src'));
$(this).remove();
});
if this a homework please append homework tag.
I can't provide you with full HTML and javascript, but an idea. You have two blocks. Float the right block;
Left Block - 60%.
Right Block - 20% (float:right)
Define height for Right & Left block and give overflow:hidden for Right Block.
Now define a click function like this.
var nextAnimateImageId = 1;
$("#my_button").click(function{
jQuery("#my_image"+animateImageId).animate({height:'toggle'});
nextAnimateImageId = nextAnimateImageId + 1;
});
My idea is, if you have 5 images, only 3 will be shown becaue of defined height and overflow:hidden property. When you animate the first image to height=0 (which is what toggle does), the 4th image will come up due to the space freed up, giving you a nice scroll up animation.
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.
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.
Ok, so I've created a little plugin that takes a bunch of elements and creates a sort of never ending list. I'll try to explain...
I have a div, and it's got about 20 elements tags in it. When the user scrolls up, the top element moves out of view and is moved to the bottom of the list. And vice-versa so that when the user scrolls down, the bottom element is moved to the top of the list.
This is specifically for Mobile Safari (iPad, iPhone) web content
What I would like to do is implement inertia so the scrolling slows to a halt in response to how fast or slow the user is scrolling when their finger leaves the screen. Just like the inertia commonly found in the iPhone / iPad UI.
The problem is, every time an element moves to the top or the bottom of the list, the scollTop value for the parent div is adjusted to make it look like all the elements are staying in the same place. Which means the scrollTop value is never more than the top elements total height. So there's no value I can think of that I can keep on manipulating to give the illusion of inertia.
I'm stumped. Does anyone have any suggestions?
iScroll implements scrolling with inertia, but I'm not sure how it would react to you adding and removing elements mid-scroll. Might be worth looking into though.