Keep element in view while scrolling using j. Query. I’ve just completed an interesting project; an online application form that calculated a quote dynamically using Javascript as the user specified their choices.=====================================================================UPDATE APRIL 2. Due to the overwhelming feedback on this blog post I have created the j. Scroll plugin which you can download here. You can also fork and contribute to its development at github. If you use the plugin I’d love to hear from you!=====================================================================The quote details where to be displayed to the right of the form, but the form was longer than the height of the page so scrolling was required. In order to keep the quote price visible at all time I needed a way to make the element container reposition itself to remain in view when the user scrolled up and down on the form. I actually thought the solution would be a single search away on Google, but I couldn’t believe that there was no quick answer available. Too many of us are too busy to be bothered by life’s trivialities. When the world is moving at a breakneck speed, you don’t really have time to worry about things. BPopup is a lightweight jQuery modal popup plugin. It's a flexible open source responsive lightbox popup plugin with focus on performance and features. A few people had suggested a css version using position: fixed, but due to the structure of my css and the fact that I wanted a smooth scrolling effect on the element the css idea just didn’t cut it. I knew j. Query was going to produce my answer, but nobody seemed to have anything available to tell me how. I ended up writing my own against the j. Query framework, which actually proved extremely easy.
Hopefully if your looking for something similar this will meet your needs. You can view the working demo here. Ok, lets get started. ![]() First thing to do is make sure you have the j. Query library included on your page. This is super easy to do. If you haven’t got it yet download the production file (1. Then simply include it on your page using a script include in your head section.< script src="jquery- 1. Next up, give the element that will be dynamically repositioned an id so that it can be found in the DOM.This again is super easy.< div id="scrolling.Div"> < -- - notice the id tag.Your content in here. Steel Legion Dc Setup 1 . Now that we have the basics done we need to write the code to reposition the element dynamically using JQuery. This is the technical bit, but I’ll try break it down so it’s easy to understand. We need to listen out for, and handle, the scroll event. Basically every time the user scrolls their browser window it alerts any code that has registered interest in this event that it has just happened. We will reposition the element when this happens, so this is perfect for us! To do this we use JQuery’s event handling support to attach a function to the window’s scroll event.$(window). Now that we are being alerted that the scroll event has fired we need to actually do something. The code below does a few things. Query traverses the DOM and returns the element who’s id is scrolling. Div. We call JQuery’s animate function on the returned element and tell it to increase the top margin to the size of the top scroll location (I’ve added 3. I already have a top margin of 3. You can remove this if you do not have a top margin already on your div). We also set the animation speed to slow. You can set this to fast, or specify a numerical value in milliseconds if you prefer.$(window). Div"). . animate({"margin. Top": ($(window). Top() + 3. 0) + "px"}, "slow" ). Because this event can fire many times in a row we need to make sure we stop all previous repositions before progressing with the latest one. Imagine a users scrolls 3- 4 times really fast. We want just the last call to be in control of the repositioning. Ensuring that all repositioning is stopped beforehand makes for much faster handling of the event, resulting in smoother animation. We call this BEFORE the code snippet above.$(window). Div"). . stop(). . Top": ($(window). Top() + 3. 0) + "px"}, "slow" ). Our element now scrolls along with the window. There is one area we can still make this a little smoother though. Whenever the scroll event fires j. Query traverses the DOM looking for our element. In order to alleviate this overhead we can simply store the j. Query reference to our element in a variable when the DOM is initialised and reference this instead. Div = $("#scrolling. Div"). $(window). Div. . stop(). . animate({"margin. Top": ($(window). Top() + 3. 0) + "px"}, "slow" ). That’s all there is to it. You now have an element that scrolls smoothly into position so that it remains in view at all times. I’ve tested the code in IE6, IE7 and Firefox 3, every one of which works a treat. The complete code snippet is included below. Php File Download Script W3schools Html . Enjoy!< script type="text/javascript" src="jquery- 1.Div = $("#scrolling. Div"). $(window). Div. . animate({"margin. Top": ($(window). Top() + 3. 0) + "px"}, "slow" ). Recommended Reading. I recommend reading the following books to gain a better understanding of the topics discussed in this blog post. Tagged as html, j. Query + Categorized as HTML & CSS, j.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |