jquery floating div

this is part 52 of jQuery tutorial in this video well discuss how to create a simple floating day of using jQuery here is what we want to achieve we have a page here with two sections this is the main content section and this is the side panel content section within this side panel content section we have this little text side panel content and a development since we've got a lot of text within the main content section to read all of it we will have to scroll down and notice what is going to happen to this development as we scroll down look at that development it is always visible so this div is called exploding there let's see how to create this floating development using jQuery let's flip to the presentation the first step here is to design a page that looks like this so we want a table with two TDs so let's create a table element and this table is going to have a single TR and this is going to have two TDs so I'm going to set the width of the first TD which is going to be our main content section and I'm going to have another TD and this will be our side panel content and the width of this TD is going to be 100 pixels 150 so this will be side panel and this will be our main content section alright and here within the side panel TD let's also include to break elements and then a div element so this will be our floating div let's give it an ID let's call this their floating okay and I'm also going to set style attribute so basically we want the background color of this development to be silver and we want the height to be 150 pixels and width to be 150 pixels let's include this little text within that floating div let's call this floating there alright so let's save the changes let's go ahead and reload our HTML one page so we've got two TDs here but we don't have a border so that's the reason why we can't sit and also notice the table is aligned on the Left we want that to be aligned centered in the vendor so what I'm going to do is set first of all align attribute set that Center and we want border so I'm going to set border attribute and we want the border s1 okay so let's go ahead and reload this page now look at this we got the border the table is aligned in the center but we have a double border here so let's go ahead and collapse that border so to collapse that border I'm going to use the style attribute and set border collapse property to collapse okay so let's reload this alright now we want this content to be you know the content both within the main content section and the side panel content section to be vertically aligned in the top so what I'm going to do is in for both of these TDs I'm going to set vertical align property to top let's do that for this TD as well alright okay so let's save the changes let's go to and reload this page and look at that so now we have the content vertically aligned on the top alright at the moment notice we don't have a scroll bar because we don't have enough content and in the interest of time I have already type the required content so let's copy that from this notepad and paste it within this main content TD save the changes reload this page and look at this now we've got the scroll bar and look at what's going to happen to this development as we scroll down notice that it becomes visible it's not floating now right now let's see how to keep this div element floating so back in visual studio within our jQuery ready function let's actually minimize this TD so this is the main content TD that contains all our main content and within the second TD we have our development we just call this ID if floating so within our jQuery ready function I'm going to create a variable let's call this floating there and I'm going to find this development by ID so let's use the jQuery ID selector find that development okay I'm going to create another variable let's call this floating div position and I'm going to get that using the position function so what is this position function going to do it's actually going to return an object and that object is going to contain two properties top and left the top property is going to give us the divs top position okay now when we scroll down we want to execute some code right so first we want to capture the scroll event so dollar window dot scroll so when the scroll event is raised we want to handle that and execute some code which is going to be part of this anonymous function so when the scroll event is phrased as we scroll scroll event is raised and we are going to handle that now what we want to do is we want to get as we scroll we want to get the scroll bar current vertical position okay so to get the scroll bar current vertical position let's actually create a variable let's call this scroll bar position so to get the scroll bar current vertical position I'm going to use scroll top function so vendor dot scroll top so this is going to give us the scroll bar current top vertical position right now let's do a check if scroll bar position if that is greater than or equal to the floating div position objects top property so what does this mean this means if the scroll bars current vertical position is greater than or equal to the developments top position then we want to keep our development floating right because that's when it starts to become invisible okay so to make the development floating what I'm going to do is set to CSS properties on this development so this variable refers to the development so let's use that variable floating there I'm going to use CSS function and set to properties so I'm going to use adjacent object so the first property I'm going to set is position I'm going to set this to fixed in a bit I'll explain what that means and I'm also going to set top I'm going to set that to 5 pixels okay else I'm going to do the same thing but this time the position is going to be relative and top is going to be 0 pixels that's all day to it so let's save the changes let's reload our HTML page 1 and look at this as we scroll down look at what is going to happen look at that our development is now floating so what's happening so the thing that is keeping it floating is this style property position fixed and look at this this top we have set it to 5 pixels now look at this as we scroll down between the top of the window and this development there is 5 pixels gap right so what does it do when we said position 2 fixed it is actually creating a fixed position element so what do we mean by a fixed position element a fixed position element is positioned relative to the browser vendor so this development is positioned relative to this browser vendor okay so when we set top two five pixels look at that you know between the browser windows top I mean between the browser window and this div elements top there is five pixels gap right now what do you think is going to happen if I set this to hundred so let's reload this page and look at this as I scroll down there is going to be 100 pixels in a width or gap between the browser window and the development and that will happen when the scroll bar vertical position is greater than or equal to the divs top position look at that as we scroll down look at what's going to happen there is now 100 pixels cap now we can also set left property so let's go to the set left here again this left will be relative to the browser window let me go ahead and set left also 200 let's do the same thing here and let set let's set left to zero so let's save the changes let's reload this page look at this as I scroll down you know from the browser window to this development between them there will be 100 pixels gap and similarly you know from the browser window from you know on the left hand side you know between this div and the browser window there will be 100 pixels gap look at this as I scroll down look at that the development is right here so here and here there is 100 pixels gap so that's what happens when you set position property to fixed and look at what is going to happen now as we scroll up it comes back to its position okay where it belong so what's going on here so it's coming back here because of the code that we have in the else part so what are we doing in the else part in the else part you know we are setting top and left and we are setting position to relative so what does that do it's actually creating here a relative position element so what is meant by a relative position element a relative position element is positioned relative to itself so the stop and left is relative to the same element you know where it's position so look at this as we reload the page so that's the position of that development okay now in the else part we are saying position is relative top is going to be 0 and left is going to be 0 means as we scroll down and up look at this as we scroll down it's going to go here because we have set position to fixed top 100 left 100 that's why it comes here now as we scroll up when it executes this piece of code it's going to say position is relative since it's relative to itself you know and we have set top 2-0 left to 0 it's going to come back to where it belongs initially okay on the other hand let's go ahead and do this let me actually set top 2 maybe 50 and left to 50 okay so now let's reload this page look at that this is the original position of the development now as I scroll down you know what is going to happen now when will this could be executed as long as the scroll ball position is greater than or equal to the top position of the development so initially you know it will come to this else part where we are saying position is relative top to 50 and left to 50 so as we start to scroll this development will be pushed you know 50 pixels from here okay and similarly 50 pixels from the top you know from currently where the development is to get this as I scroll look at that there's 50 pixels from the left and 50 pixels from the top okay and in a look at this as it executes the code that is present in the if part you know there is 100 pixels on the top and 100 pixels on them on the left okay so if you understand what you know when we set position to fix and when we set position to relative what happens then this example is very easy to understand and here is the HTML and jQuery code that we have just written thank you for listening and have a great day

Channel: kudvenkat

Views: 39,343

Keywords: jquery floating div example, floating div using jquery example, jquery always on top div, div always on top of screen, fixed div on scroll, move div with page scroll, jquery tutorial, jquery tutorial for beginners

Id: H9FPOJduvts

Length: 13min 36sec (816 seconds)

Published: Tue May 26 2015