I'd need an advice about how to create the code related to the sidebar contained into my homepage.
My homepage is composed of: header, left sidebar, main column (that is at the right of the sidebar) and footer.
What I need is a bit specific, indeed I tried to search for it, searched again and again through Google, through Stackoverflow and many other web sites but unfortunately I didn't get nothing that is right for me. I found several useful advices, several pratical examples and many starting points and I tried and tried again to mix each others the parts of these codes, but without getting what I really need about. All of this because I think my request is a bit specific and I'll try to explain it by hoping to be as clear as possible.
In my case I don't have just to fix a column, because I found meny examples about that as already told above. In my case I need to "synchronize" the left sidebar scrolling with the main column scrolling.
Something similar is present in Facebook, if you go into your profile page you can find something similar to what I need. By the way, I try to explain it here below by hoping to be as clear as possible:
at the time that I scroll the page DOWN I need that BOTH the left sidebar and the main column scroll down together, until the left sidebar will show the LAST visible element contained into it. At this point the scrolling should continue to scroll down ONLY the main column
vice versa, at the time that I scroll the page UP I need that BOTH the left sidebar and the main column scroll up together, until the left sidebar will show the FIRST visible element contained into it. At this point the scrolling should continue to scroll up ONLY the main column
Further note: the main column (NOT the left sidebar, but just the main column) is dynamic, in other words it shows the feeds dynamically, increasing its height instantly.
Hoping to having explained well the matter, I thank you all of you for your help!
Here is a jQuery plugin that seems to do what you want:
http://leafo.net/sticky-kit/
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.
Wondering how I can achieve the following effect on a website I'm building:
Div with 100vw width and 100vh height (we'll call this #container2) hides to the right of the home page (we'll call the home page #container1).
Moving mouse towards the right edge of the page causes #container2 to peek out.
If the user clicks on the visible portion of #container2, it slides all the way to the left, fully obscuring #container1.
The user is now on a new page with a corresponding URL, where they can scroll down and view more content.
I've got the first 3 steps more or less figured out. What I need help with is figuring out the best way to:
Handle the URL transition from site.com into site.com/newpage during the sliding animation
How to dynamically load the new page's content to the #container2 once the page transition happens, so the user can scroll down and see the new pages content if they click into it, but don't have to load the content if they choose to stay on the homepage.
Making it so if someone types or is linked directly to site.com/newpage, they will see the same thing that someone who started on the home page, clicked #container2, and watched the transition animation sees (but without showing a page transition).
I don't have any code snippets to show because I'm not really sure where to start. Any help or direction would be greatly appreciated. If possible, I'd like to use a vanilla javascript solution, as I've managed to make all the other features on the site run without JQuery. If JQuery is the only way to do this though, I'd still love to hear the solution.
There are a lot of ways you could do this. My intuition would be to have only one page that has different url fragments. Your question is fairly broad so my answer will also be broad.
One approach would be to use the target pseudo-class in css. All you need to do is make container2 a link that adds fragment to the end of the url that matches the classname of said container. You could have a some style for :hover that makes the container slide out and some settings for :target that brings the container to the center of the page. Container2 could have have a second section beneath the fold that contains the rest of the content for the page.
You could do something very similar with javascript by adding and removing classes from the various elements, but using the target pseudo class will help with your last bullet point. If a user goes directly to the link with the fragment, they will see the page with that container displayed.
I hope that gives you a place to start. Here is some info about the target pseudo-class.
I'd like to build a footer, which reveals when the bottom of page is reached, kinda like this:
https://www.thecssninja.com/css/reveal-effect
So far so good, I have that.
What I want to add now is an additional information within the footer, which gets revealed, when the other part of the footer is shown completely.
One could say, that I have two fixed footer parts. After the whole page is scrolled it will reveal the first part. And then this first part must somehow change from fixed to normal positioning allowing it to scroll up further to reveal a second footer part (fixed) underneath.
Does somebody know any examples (can include JS stuff) or does anyone have a trick for this?
Thanks for all the help.
Cheers
I am developing a mobile web application using jQuery and i have been requested to have each page transition into the next with an animation where the page is "split in half", then have the upper part slides up and the bottom part slides down, thus revealing the next page.
I have a small idea, but i dont seem to have the knowledge to get trough:
2 Canvas with display: none, each width width: 100%, height: 50%. - Check
Have the actual display be rendered into said canvas's - I have not the slightest of ideas.
Ajax the next page in a div below both canvas's - Check
Slide the canvas's in the respective directions - Check
Set the canvas's to display: none and restore them to their original positions - Check
Any thoughts? I'm open to use any other framework appart from jQuery, if that's the need. I am also open to change my canvas idea into something else.
EDIT:
As for clarification imagine the page to be a closet, but a vertical one so its doors (the actual page) will slide into the roof and the floor respectively (Its not the greatest of comparisons, but please bear with me) and thus let you see and interact with the content of the closet (The next page). This will go on and on until the application's workflow ends at the last screen, as there will be no back button.
I'm pretty sure I know what you want. You have multiple pages in your registration/form process and instead of having the old fadein/fadeout or sliding effects, you want the top half to slide up and the bottom half to slide down. In order to do this, I'd dump the canvas idea. I don't think that there's an easy way to do it using canvas as of right now. You could try using the html2canvas script, but it's not 100% accurate when it comes to rendering things like this.
As an alternative, I'd recommend using the following process. As a preface, make sure that every step in your form has its own container div (called something obvious like "step-wrap" or "step-container"). Then, when you begin the animation, the first thing to do is to duplicate the current step-wrap, calling it something like step-wrap-animation. Give the original wrap, step-wrap, a height of 50% and position the duplicate below the first with the same height of 50%. Both of the divs should have styling that has an overflow of hidden. Make sure, also, that you set the scrollTop of the duplicate div to scroll to the bottom so that it looks like a continuation of the first div. Everything from here should be smooth sailing.
Second, once you have everything in the first step working, start the animation process. You can do this however you want now that we have the splitting functionality figured out. Make sure that before you start splitting the two divs apart you put the next step behind the previous so that it unravels.
Essentially, what you need to do is:
Duplicate the div
Position both divs (the original and the duplicate) so that both the heights equal 50% and they look like continuations of each other
Animate the top div up, bottom div down
Here's a basic fiddle illustrating how something like this should work. Click on the rendered screen to get the animation going.
Take a look at backbone.js and marionette.js based on backbone.js.
backbone.js is MVC framework where you can define separate views. Marionette is an extension which supports regions and switching views based on whatever you want. Inside switching logic you can easily implement your transitions. Very generic answer but perhaps it will help you to get started.
I am trying to make a sidebar div sit below a header secion, when you scroll down, it will turn into a fixed div and stay fixed until the bottom of the page, once it reaches a footer section, it will stick to the top of it and allow me to scroll down the footer area without seeing it anymore.
There is a perfect emaxple of what I am trying to describe on this site http://madebymany.com/blog/apples-aesthetic-dichotomy
In the left column, it sticks as you scroll down and then un-sticks at the bottom
I am looking for a good way to do this, hopefully an example or tutorial, I realize it is done with javascript changing the divs properties. I have tried searching but all I could find was old outdated articles over 5-6 years old and they only did half the job. I am not sure even what to call this feature?
That web site is using jQuery Scroll Follow.
Note that according to the jQuery Scoll Follow web site...
The Scroll Follow object will remain inside its immediate container.
... hence why the scrolling stops before the comments on your example web site; the element which is scrolling on the page is constrained inside of its parent <aside> element. You can check out the example.
You basically handle the page's scroll event and move the box around.
Most tutorials require jQuery, so get familiar with it. If you want a tutorial, here's a working one: http://designwoop.com/2011/01/how-to-create-a-jquery-sticky-sidebar/.
Why not dissect the code of that website too?