I have an html table that is very tall. The web page has to be scrolled vertically to reach the horizontal scroll bar at the bottom of the table. It would be nice if I could float the horizontal scroll bar for the table at the bottom of the browser window.Can such a thing be done?Is der any plugin available for it?
JS Fiddle is : http://jsfiddle.net/RurTZ/1/
I created a solution with the demo table from Maddy (I hope you don't mind):
Use a range input and bind a handler for the input event to it. Then you can use jquery's .scrollLeft to scroll your table.
This way you can position the scroll bar wherever you want it, and even style it the way you want.
fiddle here
I don't know if this is what you want but, I suggest you to use the CSS property
overflow: scroll;
to your table.. This should do the work.
Try this, may be its helpful for you:-
Demo
<div style="width: 300px;overflow: scroll;height:400px">
<div>
<div style="height: 100%;">
<table class='sample'>
If you can use javascript, you can access the documents height using document.height.
Then calculate your elements css positioning accordingly, set the height of the tables parent div to document.height - 100px etc.
NOTE: this will require proper testing as it will not work for many scenarios. But if you have a simple page and understand the basics of page layout and css positioning it could do the trick.
Since you asked for a plug-in or something, try datatables , this would be easy to implement and can handle alot of customizations etc. , browser the docs. However if your requirements remain simple, this may be overkill.
Related
I’m having an issue with a container holding the marquee and i’m not sure what’s causing it.
Essentially, the container is stretching way too far, causing the animation to flash across extremely fast (because the animation accounts for the width).
I don’t want to state a width for the marquee because I want the container to stretch to whatever its siblings width is.
I’ve created a fiddle to display what’s happening. In the fiddle, i’ve included the exact html included on my own webpage.
I assume there’s an issue with the css of one of the other elements, but what? What's causing the container to stretch to extreme lengths?
FIDDLE: http://jsfiddle.net/uz9pG/
This is the jquery plugin marquee that i'm using http://jquery.aamirafridi.com/jquerymarquee/
Tables, fluid widths and overflow hidden tricks don't really get along well. You'll either need to change your code to use a different markup structure or put a fixed width on one the containing divs within your <td>.
Also, you have conflicting settings in your JS vs data-attributes in your markup. <div data-duration="2000" data-direction="right" class="marquee">
Here's a working version. http://jsfiddle.net/uz9pG/2/ Takes a second for the marquee to start. You'll need to adjust your margin code to sort that out. This one removes the tables altogether but you can just as easily add a fixed width to something like your .module_content div if that works for your design.
.module_content {
width: 400px;
overflow: hidden;
}
I'm wonder how the custom scrollbar on Facebook has been made.
Is it only css or some javascript as well?
If yes can i have an idea of what the code looks like?
This question is specific to Facebook scrollbar style and not how to simply have a custom scrollbar
This link should get you started. Long story short, a div that has been styled to look like a scrollbar is used to catch click-and-drag events. Wired up to these events are methods that scroll the contents of another div which is set to an arbitrary height and typically has a css rule of overflow:scroll (there are variants on the css rules but you get the idea).
I'm all about the learning experience -- but after you've learned how it works, I recommend using a library (of which there are many) to do it. It's one of those "don't reinvent" things...
Facebook uses a very clever technique I described in context of my scrollbar plugin jsFancyScroll:
The scrolled content is actually scrolled natively by the browser scrolling mechanisms while the native scrollbar is hidden by using overflow definitions and the custom scrollbar is kept in sync by bi-directional event listening.
Feel free to use my plugin for your project: :)
https://github.com/leoselig/jsFancyScroll/
I highly recommend it over plugins such as TinyScrollbar that come with terrible performance issues!
If you're looking for a Facebook like scroll bar, then I'd highly recommend you take a look at this one:
http://rocha.la/jQuery-slimScroll
I solved this problem by adding another div as a sibling to the scrolling content div. It's height is set to the radius of the curved borders. There will be design issues if you have content that you want nudged to the very bottom, or text you want to flow into this new div, etc,. but for my UI this thin div is no problem.
The real trick is to have the following structure:
<div class="window">
<div class="title">Some title text</div>
<div class="content">Main content area</div>
<div class="footer"></div>
</div>
Important CSS highlights:
Your CSS would define the content region with a height and overflow to allow the scrollbar(s) to appear.
The window class gets the same diameter corners as the title and footer
The drop shadow, if desired, is only given to the window class
The height of the footer div is the same as the radius of the bottom corners
Here's what that looks like:
All,
I'm using Wordpress widgets but I'd like to create a widget that floats down with the page as your scroll. Has anyone ever done anything like this? If so, can you give any recommendations on how to achieve such a widget? Is it done merely by Javascript/CSS?
Thanks!
The easiest way - to install this new WordPress plugin - Q2W3 Fixed Widget
It was specifically designed for this purpose!
Screenshots
All you need to do is set the position of the element in question to fixed via CSS, i.e.
.myFloatingWidget {position:fixed; left:0px; top:50%}
You need to give the widget a style of position:fixed;. Example at W3Schools.
slashnick's and maxedison's solutions will work.
If you'd like to have a dynamic scrolling box that doesn't always stay on the screen or minds the header, footer or any other div of your site, you might want to check out DropTheBit's sticky float jQuery plugin: http://dropthebit.com/74/sticky-floating-box/
I have to design a layout for my project. There are arrangements of divs, upper Div, lower Div, fixed height, scrolling etc. It is difficult to describe the problem in words, hence I have attached an image below. Please refer the screenshots.
What I want to achieve is to arrange panels with respect to the overall height of the browser window. Pink module is absolute positioned at the bottom of the parent Div. Upper Div is precious sibling of pink Div and it contains panels. when browser is resized scrollbars should not appear in UpperDiv. Instead panels should show scroll (show in second).
It can be done using HTML and CSS and not at all I am hesistant using javascript or jquery. I appreciate any of your approach in doing this. Many thanks.
Sorry I couldn't made HTML properly. Currently my html shows scroll in upperDiv (instead scroll should appear in panels). Here I have created a fiddle. Please check.
here
Made some changes to the CSS, hope this is kinda what you are looking for.
http://jsfiddle.net/vCVUL/embedded/result/
Regards.
You could use ExtJS for this. Have look at the demo page. There you find "Layout Managers" how will do the job for you.
I can't think of a much better way than, after page load, setting the dynamic section's height.
And to handle the resize, we can just bind the same function with JQuery.
http://jsfiddle.net/N3HWz/7/
Here's an example: http://la.truxmap.com/marker?id=thesweetstruck&t=1267058348000
The widget on the right usually overflows unless i set the height of the container to some fixed size like 1800px. What I want to do is have the div with the white background (container) always span AT LEAST until the bottom of the widget. I don't want to use overflow because I dont want anything hidden and i certainly dont want scroll bars.
Is there a css solution to this? I feel like ive tried most everything except writing a javascript solution, which i would like to avoid because im still very much an amateur with javascript. Thanks so much!
Edit:
I don't have any requirements as to how this can be done, id just like a solution. ive been trying to figure out this problem for over a week and its now driving me crazy.
Looks like you just need to clear your floats. After this div
<div id="truckLogo">...bunch of stuff...</div>
Add
<div style="clear:both;"></div>