I need help. My main page has a long table that will typically be approximately 2 screens "tall" (assuming a 1024x768 browser window).
I want
the user to be able to browse that table up and down, while always having a set of control buttons available in the currently visible portion of the page.
AND
to retain control over the color scheme of all elements on the page.
The problem is that both solutions I could think of that address the first point (using an overflown div or a frame) involve scrollbars that I cannot style. (At least on Firefox they will invariably be gray.)
I cannot implement a "pager" which breaks the data on the table into chunks which are served one at a time (eg, having a "next 40 results" link at the bottom). The user needs to refer to the full table to find and compare multiple rows throughout the table.
What are my options? My head hurts when I think of moving this entire page to Flash for this reason...
thanks in advance...
i would use jquery and a scrollable div.
Here are some resources to get you started.
http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div
http://flowplayer.org/tools/demos/scrollable/vertical.html
http://logicbox.net/jquery/simplyscroll/vertical.html
Don't change the styling of scrollbars unless you really know what you're doing! However, if you understand the usability implications (and try to make them as user-friendly as possible), try the following options:
If you use jQuery, try jScrollPane.
If you use MooTools, try MooScroll or MooScroller.
The following StackOverflow threads might also be useful:
How do I change the browser's scrollbar colours using CSS?
What's the deal with CSS and scroll bars?
How can one use scroll bar images?
Related
I've been experimenting with this for over a week and I'm about to give up, as I think this is not possible, but I wanted to reach out to this awesome community first.
What I'm trying to achieve is to, somehow, overcome the stacked z-index settings.
Let me show you an example so you maybe get the idea faster:
http://raulmellado.com/clientes/zindextest/
What I'd like is to have the green div (#shouldbeontop) on top of all elements (I am setting it to position:fixed).
In other responses in stackoverflow (yes I've read dozens of threads here), the answer is to change the html, move elements around, etc, but my problem is that I'm creating the #shouldbeontop and #scrollbar elements dynamically using js (my application is a bit more complex than this example, but I've tried to simplify to share my problem here).
I've created a js that can be embedded (ideally) on any webpage which will add the elements, so I can use js if needed, but I can just assume that the #shouldbeontop and #scrollbar elements will be there; the rest could be any html/css combination that's already there.
Usually, where there is no z-index in different divs, this works beautifully, but as soon as there is some stacking, it breaks :-(
If you would like to see a real life application of this, here you can find a quick & dirty demo: http://videngage.me/demo/demo1.html (here there is no z-index, so the video [#shouldbeontop in my simplified demo] is always shown on top (when you scroll down), but here http://www.members.skolahudbyonline.eu/rytmus-trening-majstra/ the video goes behind when you scroll down)
Is there an universal solution for this (using css and/or js), or should I just give up?
Thanks sooooooooo much for your help
I am building this form: http://codepen.io/anon/pen/gFoIG/
and so far I am satisfied. Unfortunately I have some issue that I seem not able to fix.
First of all, I want to enforce the label positions beside their respective inputs. Now the form breaks down easily (with the opera emulator for smartphone and tablet, the privacy label goes below the check, but I want that it stays beside it)
The other issue that I have is that I want it to fall back gracefully when there are small screens, like placing the second image below the first and placing the input controls one below the other and take the full screen width to be bigger and easier to interact with, but so far I only was able to break the layout with my tests.
This issue: the the form layout breaks, the internal control (input, button, etc) go outside the container div. How do I enforce the container to keep everything inside? I've experimented with blocks, floats and whatever, but if the layout breaks, the input boxes usually go outside the gray rectangle.
Last issue: If I insert this form inside an existing website (for example, a page in wordpress) the layout get completely destroyed because influences from the theme style. How do I enforce my style on my form, keeping it isolated from the other styles? I can think of the iframe as a solution, but it is the only one? It is a good practice?
Anyone can help me with that?
You might want to take a look here. Its a site I just set up to explain an approach to responsive using a jQuery plugin to manage redoing layout. I think it could work for your example quite easily. Also because it can target a container div at any depth in a web page, it could be helpful in the scenario where the layout you want to reflow is inside a 3rd party container (as long as you can run script on the page).
I've had immense trouble googling this, I guess I don't quite know the name for the concept. I have a section of the page where a series of text boxes will appear, the number might vary. I'd like to have them fill a div in a top-to-bottom then left-to-right manner. That is, the text boxes will stack (normal) until they reach the bottom then wrap around to the top again in a new column.
Like:
Textbox1 Textbox4 Textbox7
Textbox2 Textbox5 Textbox8
Textbox3 Textbox6
Is that possible in CSS, or will I need to actually code something to do this correctly?
You can use CSS columns, which is described on A List Apart.
Note that this only works in modern browsers. Otherwise you need JavaScript or extra HTML.
You want to Google "multi-column lists" using CSS.
I personally call this newspaper columns, and there is support for this in CSS 3
As mentioned, CSS3 allows for this, though browser support is going to likely be mixed.
It wouldn't be too hard to do via JavaScript, though.
Actually I think it is a bit design issue.
Question is, if you have programmatically generated tabs -let's say by using repeater control- at the top of your masterpage, how do you handle them after you have too many -so that they do not overlap the view-port of the browser?
I don't want to reinvent the wheel if there are already some patterns for such an issue.
Any recommendations?
Thanks
If your tabs are going to be dynamic you should probably move them to a vertical side bar as opposed to a horizontal tab, this would make it more scalable. To maintain a consistent look and feel its probably a good idea to have static main tabs at the top with dynamic associated vertical tabs. Not sure if this helps at all?
If you want to maintain a horizontal layout, you will need to reduce the nav to viewable items and have some sort of < and > at the left and right edges of the nav to enable the user to scroll to the prior or next viewable set.
Not sure if this is what you are looking for.
I'd like to add a description field to an application that can be as long as several lines (or even paragraphs) or as short as a one-liner.
Instead of taking up a lot of screen real estate or have scroll bars, it would be preferable to have the textbox grow based on its input.
On IE6 adding Style="overflow-y:visible" accomplishes this nicely (both on display of read only, and if we are in edit mode).
However, it has no effect on Firefox, or IE7 for that matter.
Is there a relatively easy fix for this?
Thanks!
You can accomplish this using jquery if you want to go down that route. It's a nice effect, kind of like the comment textarea in facebook.
http://javascriptly.com/examples/jquery-grab-bag/autogrow-textarea.html