I went through many posts and couldn't find a solution. (I came across with a similar problem in this post, but I can't really related to my exact situation).
Issue: I have to display a large data table (with more than 30 columns) on a screen. My challenge is - the client doesn't like Horizontal scroll bar of any mean.
I am thinking of splitting a table into pieces and using a simple sliders like Jquery: "serialScroll" or "ContentSlider". However, here is another challenge: for 508 compliance, my table needs to be a single table instead of splitting multiple table in different slides.
I am visioning I need a "view finder" div on top of "large table" with control to shift table the size of div Left and Right, http://img202.imageshack.us/i/tableviewfinderidea.jpg/.
My question is:
Is there a JS or Jquery solution out there doing this? (I seriously searched two weeks without any luck.)
Is there any other recommendation?
using a container div styled with 'overflow:hidden' allows you to do the masking as shown in your graphic. then it's easy to move the masked content by setting it to 'position:absolute' and tweaking the 'left' value.
i put a short example of this online at http://jsfiddle.net/BDZPj/
only thing is, you have to know the height of the content being scrolled, as you have to set a height for the mask too. you could read the height from the table on document.ready though, and apply it to the container initially.
anyway, like 'Pointy' says in the comment above, using a standard scrollbar is surely the best way to do it - sometimes the client has to move, too.
Related
I wonder how to achieve this effect on http://www.squarespace.com. What I mean is:
you scroll down and at one point the image of computer monitor stays at fixed position
after that, the images keep changing while you scroll.
How can you control content and change CSS using Javascript? It should be on window scroll event:
window.onscroll = function () {
// but I don't know what to use here
}
At smaller browser width, the above elements become a carousel, but I am not interested in that.
Because of the tags on this post I'm going to assume that this question is regarding the skrollr library
Skrollr is controlled via HTML data attributes. What you're seeing when the monitor scrolls, and then becomes fixed at a given position, is referred to as "pinning". How you define data attributes in Skrollr can be pretty confusing at first, but once that is understood, the library is kind of a dream to work with.
I printed and pinned Petr Tichy's cheat sheet next to my monitor the first few weeks of my first skrollr project.
An example of pinning in Skroller would be accomplished as such:
<div id="example"
data-100-top="position:fixed;"
data-anchor-target="#example">
These words are pinned 100px from the top of the screen
</div>
The purpose of Skrollr is that knowledge of jQuery/JavaScript isn't really required. The css is manipulated by the library, and defied in the data elements. The above example shows changing the position to fixed, but if you wanted the div to expand 100px from the top you could input width/height css parameters in there, or just about any other css you'd like.
If you're looking for a more robust skrolling library, in which jQuery knowledge is more of a requirement, I recommend you take a look at ScrollMagic (my lack of reputation prevents me from linking to scrollmagic).
I have made this webpage at http://www.caseums.com. I have used twitter bootstrap and fontaweome among other things , but I find that I am too much of a novice to determine the answer. I have searched the stack database but can't find a similar enough answer to answer my problem. If one was to re-size my page to be smaller, all of the items on page move in such a manner as to move out of the box they are in , namely the <p> elements.
I would love any information to help me answer this , I've been wrestling with it for awhile, thanks for your consideration.
I assume you are referring to the #Containment div? Try using percentages for your widths. You currently have the width set to 325px, which will overflow if your window size is less than 325px.
Also take a look at media queries, if you need certain portions of your site to size differently dependant on the viewport size.
If you change the width styles on #Containment and the <div> inside #Containment, to max-width instead, is that what you're after?
Alright here is my dilemma. I have a bunch of divs with the same width
(but variable heights). I want them to be displayed on the page one on top of the next UNTIL the bottom of the page, if there is space for a second column of these items on the page without scrolling then I want it to continue in the second column, third column, etc. If there is no available space left on the page then it goes off the page requiring a scrollbar to see things underneath.
This would essentially be akin to having float:top if it existed (which it sadly doesn't). Also I want this to change dynamically with the window size. If I shrink my window to one column width I want the data to go straight down one column. If I resize to two columns wide then it divides the data between the two columns.
Lastly the order of the divs MUST be preserved. I am willing to use jQuery and CSS including CSS3 to do this, anything else and I will have to look at it. I am sure that if I worked at it I could write some custom jQuery script to do this but I can't help but feel like it should be easier. I have looked at css3 columns but couldn't get them to do what I want so if they can do it the be specific as to how they do it.
Have you heard of media queries? At specific break points you can apply different CSS rules, so you could change the layout of your columns.
Have a read.
I have a large containing element with around ten DIVs inside - most are about 300px in width on average and are all set to float left. The end result is a widget/grid type layout. However, this style has been specifically built with responsive design in mind - we're using media queries to adjust the size and column count depending on device.
The issue is that we may have one or two boxes that are double-wide or double-tall. The double-wide doesn't really cause a problem with floating (that I can't solve anyway) but the issue is the double-tall. The double-tall would expand into the next row, but prevents other boxes from floating on the left of it. Float-right isn't an option because the tall box can't always be on the right.
I'm trying to find a way to dynamically figure out where each block can float to, like solving a puzzle. I've looked at a few javascripts like Masonry, jLayout, etc but they either don't work, or don't solve the problem of irregular boxes.
So:
I want to avoid absolutely positioning anything because we'd have to re-do that every time, for every element and they won't feel fluid.
I need to allow for double-wide and double-tall, but they may not always be present and eventually, users should be able to determine their location so we can't always just write javascript based on a known location.
I've tried moving around the elements via jQuery which does work, but has to be done on window resize, which is too much activity and results in elements flickering back and forth when you transition over the width that requires three columns to four.
Using css3 columns won't work because the DIVs are treated as text and are broken into two when they pass to the next column, and that doesn't allow for double-wide either.
Does anyone have any ideas or suggestions?
Use Jquery Masonry or Isotope, it'll arrange all the containers into the most space saving arrangement ( or if your using isotope, you can fiddle it around to prioritise other forms of arrangement)
Well, if you don't care too much about the order of your elements, a simple solution would be this:
Add your items to #main so that all .tall widgets are added first. Float .tall widgets to the right.
Likewise, make sure that all .wide widgets are added last and float these to the left.
It works in this case and I think will give you the most optimal use of space for any set of these elements.
I still have not found any real way to handle the situation. For now I've just written some custom javascript to swap around a few DIVs when the page resizes.
Seems like a simple thing at first, but becoming a bit more complex than I thought. I'm working on a simple portfolio site which I'm doing as one page with jquery to make it look like a full website. Currently my plan has been to have each piece of a content in its own div. I'll have the content, above, on either side and on the bottom. I specifically want to achieve this effect. How can I align these things so that there's a block of text to each of these directions, all aligned and in such a way that if there's window resizing the whole thing doesn't look broken?
I'm not able to imagine what you are looking for. It would help if you post a sample code or a image of what you are looking for. But you could try style="float:left;width:100px" for the DIV tags. All div tags will appear stacked next to each other.
Also ensure you put these child DIV tags in a parent DIV tag with style="overflow:auto"
I do not know what do you mean, but i think you can look for a css floating grid system.
Here for a starting point: CSS: Fun With Floating in the Grid
Search for a grid system and look at the css definitions.