HomeОбразованиеRelated VideosMore From: kudvenkat

jquery floating div

124 ratings | 30608 views
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/05/jquery-floating-div.html In this video we will discuss, how to create floating div using jQuery. We want the div element in the sidebar to be floating and always visible as we scroll down the page. Example : In this example we are using position() and scrollTop() functions. The object returned by position() function has top and left properties, which can be used to know the current top and left positions (coordinates). We are using this function to find the top position of the div element that we want to keep floating as we scroll down. To get the current vertical position of the scroll bar, we are using scrollTop() function. As we scroll and when the current vertical position of the scroll bar becomes GREATER THAN the top position of the div element, then we want the div element to start floating. To do this set position style to fixed. A fixed position element is positioned relative to the browser window. So as you scroll down it will be floating in the browser window. If the current vertical position of the scroll bar becomes LESS THAN the top position of the div element, then we don't want the div element to float, so we set position style to relative. A relative position element is positioned relative to itself. So if you set position to relative and top to 0, it will continue to stay where it is without floating. <html> <head> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { var floatingDiv = $("#divfloating"); var floatingDivPosition = floatingDiv.position(); $(window).scroll(function () { var scrollPosition = $(window).scrollTop(); if (scrollPosition >= floatingDivPosition.top) { floatingDiv.css({ 'position': 'fixed', 'top' : 3 }); } else { floatingDiv.css({ 'position': 'relative', 'top' : 0 }); } }); }); </script> </head> <body style="font-family:Arial;"> <table align="center" border="1" style="border-collapse:collapse"> <tr> <td style="width:500px"> Main Page Content </td> <td style="width:150px; vertical-align:top"> Side panel content <br /><br /> <div id="divfloating" style="background-color:silver; width:150px; height:150px"> Floating Div - Keeps floating as you scroll down the page </div> </td> </tr> </table> </body> </html>
Html code for embedding videos on your blog
Text Comments (12)
Usama Imran (3 months ago)
isn't it possible by creating a separate div and set its position to fixed by using css only?? I used that and it worked.
MARI (10 months ago)
Thanks for all this free videos sir,good for beginners
vatsal joshi (10 months ago)
cant we do this same thing with the help of css property position:fixed
Sahil Vig (4 months ago)
vatsal joshi exactly what I'm thinking
JoelDB Gaming (10 months ago)
nice ty lolol
Shayan Hafeez (1 year ago)
Brother i am watching your videos regularly & damn your videos are awesome always very helpful & learn lot of things from your videos thanks man for your efforts (y) God bless you
Tom B (1 year ago)
I love your tutorials they are well explained and you make it very easy to understand the mechanics behind what you're doing, but I don't understand the point of this one. Can't I just type position: fixed; in css or am I missing the point of this video? I think what I was supposed to learn was using position() with a scroll event in which case I did! Thanks for your tutorials.
Darshan Vartak (2 years ago)
Really happy to have found your videos here. They are crisp, easy to understand and supported by nice examples. Thank you so much Venkat. You are doing a great job !!!
kudvenkat (2 years ago)
+Darshan Vartak Thanks a bunch for taking your valuable time to give feedback. Means a lot. Glad you found the videos useful. Dot Net & SQL Server videos for aspiring software developers https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd If you need videos for offline viewing, you can order them using the link below http://www.pragimtech.com/Order.aspx Code Samples, Text Version of the videos & PPTS on my blog http://csharp-video-tutorials.blogspot.com Tips to effectively use our channel https://www.youtube.com/watch?v=y780MwhY70s Want to receive email alerts, when new videos are uploaded, please subscribe to our channel using the link below http://www.youtube.com/subscription_center?add_user=kudvenkat Please click the THUMBS UP button below the video, if you think you liked them Thank you for sharing these links with your friends Best Venkat
Rafy-Ivan Morales (3 years ago)
Help: Wrap with a div As before, let's group all three pieces of supporting content with divs, like this: <div class="learn-more"> <div class="container"> <div> <h3>Travel</h3> ... </div> <div> <h3>Host</h3> ... </div> <div> <h3>Trust and Safety</h3> ... </div> </div> </div> How I will Wrap all pieces of supporting content with two divs, like in the example above. Give the outer div a class="learn-more" and the inner div a class="container". in this code: <!DOCTYPE html> <html> <body> <div class="nav"> <div class="container"> <div> <h3>Travel</h3> <p>"From apartments and rooms to treehouse." <p> <a href="#">"See how to travel on Airbni." </p> </div> <div> <h3>Host</h3> <p>"Renting out your unused space could pay your bills or fund your next vacation."</P> <p><a href="#">"Learn more about hosting" </div> <div> <h3>Trust and Safety</h3> <p> "From Verified ID to our worldwide customer support team, we've got your back."</p> <p><a href="#">"Learn about trust at Airbnb" </P> <h1>"Find a place to stay."</h1> <P>"Rent from people in over 34,000clients and 192 countries." </div> </div> </body> </html>
Isu Nas (3 years ago)
This is very useful.thank u so much
mohamed omiera (3 years ago)
Identity please :(

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.