Im trying to build comparison table from vertical lists.
Main goal is that first column must be fixed horizontaly only and horizontal scrollbar must be visible on screen all the time. I want to easy compare rows of first column with corresponding rows from other columns
like here jsfiddle example
I've managed to do this by using position absolute on 1st column and changing its css left property on scroll event.
$('#container').scroll(function() {
$('#main').css('left', $(this).scrollLeft());
});
That solution works fine except IE. On IE my fixed column is lagging and changing position is not smooth. I'm trying to fix it but i've run out of ideas for solution.
A part of the problem might derive from the fact that attaching anything to the scroll event can be quite heavy, just attaching a console.log() to it can be enough to understand the amount of calls.
You should give a try the solutions proposed in this thread, which will surely make it lighter on other browsers apart from IE as well.
I know you're searching for smoothness, you could animate the left property instead of changing it instantly, or finding a way to only do the smooth transition on IE, keeping it as is in the other browsers.
One other thing you could try would be will-change, but sadly it's not supported by IE. You could try giving transform:translate3D(0,0,0) to #main to trick the browser into using hardware acceleration, which might raise the performance on IE11.
--EDIT
Another thing that came to mind:
I can see you need to have the div absolutely positioned and not fixed since you need to scroll down while keeping it aligned with the other tables. Couldn't you use JS to give it position:fixed while scrolling horizontally and go back to absolute when the user scrolls vertically or stops scrolling horizontally?
Related
I know this question sounds confusing, so here's a better explanation:
I'm using a mobile. Say there's a scrollable element somewhere in the body. When I scroll the element and it reaches the bottom, I want instead of getting stuck for keep scrolling the element, it scrolls the page instead. That's also true if I reach the top of the element, it scrolls up the page, not getting stuck.
I tested it on two different mobile phones with the latest version of Chrome. The First one does exactly that. Weirdly enough, the second one only works when it gets to the top but not to the bottom. Is there any way to make it always work irrespective of the environment (mobile phone or browser) we are using?
Edit: What I'm trying to achieve with this
Desktop:
I want a way so that the buttons placed at the bottom of the content are not so distanced from the user's view. If we remove the scrollbar, then the users have to scroll all the way to the end of the content to be able to click the buttons.
The problem with this method is that, on mobile, in some browsers, it blocks the user from scrolling the page, even after reaching the end of the element. So they have to touch the edges of the screen to be able to scroll the page instead of the element.
What I want is, for users having difficulty touching the edges, they can still scroll the element. And when it reaches the bottom of the element, it scrolls the page.
I know this is weird. I know some of the better tricks like using the Read More-Read Less button, but it requires JavaScript I guess? I'm in a situation that's really hard to use JavaScript at the moment (shortly because of how bad the code is organized), and looking for a way if there's a simple trick using pure CSS. Any help or idea is appreciated!
I'm trying to make sortable blocks with various heights using JQuery .sortable().
But if you try to move the big block to the right then one of small boxes moves to bottom and leaves blank place.
And when I set float: right to parent div instead of float: left I can't drag the big block to the left correctly.
I understand why it happens and how the float works but I can't find a workaround.
jsFiddle sample
UPDATE:
Here is complete picture of what I'm trying to do. All I want is to be able to create this structure from blank page using only 6 sizes of width, resizable height and sortable items.
Now works I originally had an almost working model using a second wrapping div around the short items. The bug is in my FF Win 7 (seemed okay in IE9) which sees a slight height difference between the large block and the group of blocks, so a lower float "hits" one to the upper left (if it is a large block) and does not go left. When I look in Firebug, FF is showing the computed border to be not 1px, but 0.916667px, so I don't know if that is the problem (fixed now below).
See http://jsfiddle.net/tnLcg/47/. I had originally enabled the ability to sort between short holders, but I think the correct functionality would be to make such a move a swap. Perhaps http://www.eslinstructor.net/demo/swappable/swappable_home.html might be implemented to work between the short holder stacks.
EDIT--Firefox fixed: I kept the short holder border but set it to transparent (so it calculates the same as the double height box) then used relative positioning of the elements inside to adjust for that and it works in FF now for me: EDIT: Improved version (4 column) http://jsfiddle.net/tnLcg/99/.
You could try jQuery Masonry for that sort of layout (if I understood your question right).
If you want the two halves to be able to move independently, split them into 2 columns, then use the connectWith option to make them draggable between the two:
http://jsfiddle.net/ujahd/
If you want the two halves to stay grouped together, then group them into one div:
http://jsfiddle.net/W5VzD/1/
There also this tutorial if you were interested in reading up on it. Hope you found your answer.
edit: it's not jquery though.
i am using the autoresize plugin which increases the height as users type in stuff. It works great on FF/Chrome, but the behavior is messed up on IE (see screenshots below).
Essentially, the textbox, when resized, does not push the rest of the buttons down, which is weird, given that nothing on the page is absolute positioned.
I suspect the button and span on the right are in a relatively positioned container? I've encountered the same problem recently with positioned elements and expanding/collapsing siblings. Still searching for a proper solution, but removing the positioning can be a temp fix.
After googling around and finding a lot of ie bugs I still did not find a description of the problem I have.
The initial situation is a standard one. We have a tooltip which is actually a hidden div that will be displayed on mouseover at a given location. The div is hidden with display:none and contains a table with the content. We tried different libraries for showing the div (scriptaculous and jQuery Cluetip) but the effect is the same.
The problem:
Everything is fine as long as the contents fits the width of my window. But when I resize it until the horizontal scrollbar is activated the content of the hidden div will be shown at the end of the page when the tooltip is activated.
This is really strange as it happens only under these premises. When more than one tooltip is involved the browser might even crash (and under Vista takes the whole system with him duh).
I know it's a bit complicated to explain but I hope that someone at least had heard of that bug and can point me into the right direction.
Setting the width css property to "auto" (defined in the W3C standard) in IE will cause the <div> element to take up the entire space allotted to it. If the <body> element does not have a width applied, then this can result in a page miles and miles wide. This often crashes the browser, depending on the operating system. The best option is to just set it to null instead.
(This is based on actual experience coding for IE6 and may not necessarily apply to IE7+).
Another thing to keep in mind is that most browsers do what's called "lazy rendering" which means that if an element is hidden on the page, it won't render it. It won't even acknowledge its existence as a potentially visible object until it is unhidden. This means having no idea how big that object is going to be until you reveal it. This can cause problems if you're trying to figure out how big something will be once you make it visible. Basically the only way around it is to unhide it, read its size, re-hide it, then proceed.
The way that I did my tool tip is to use visibility hidden and visible. Once the mouse is off, I set the x and y to 0 to move the tooltip out of the viewing space.
This only works if the position is set to absolute.
Edit: How did you position the tooltip when showing it:
I positioned the tooltip by changing the css values of "top" and "left".
box.css("left, e.pageX+1);
box.css("top", e.pageY+1);
Where 'e' is my event variable from:
mousemove(function(e){});
I my working on the site that will have image gallery. Designer idea was to make buttons that switch photos be above the photos a bit.
Like this
Example http://img57.imageshack.us/img57/1253/showq.png
Currently I've made a javascript solution to this - it gets position of photo and applies absolute positioning to the button divs. There are some drawbacks - it works unstable in Opera and IE. Also I had to make some dirty haxx to make it stay in position after zooming. I wonder if there is a better way to do this, preferably without javascript.
you mean like here ? (dutch website, see photo browser in the center column at the top)
browser zooming works fine in browsers like firefox and safari because they zoom all the content and recorrect pixel-values. To make zooming work in ie(6) you'd need to style all in em's. But browser zooming is crappy for pixel data anyways…
Absolute positioning of the buttons (left 0 and right 0) is not a problem as long as the container element is positioned relative.
If I understand you correctly, you're trying to center those arrow buttons vertically in relation to the image. This is pretty easily accomplished with just CSS (no javascript required). Here's an example.
The basic idea is that you're using a couple of divs plus some absolute/relative positioning. There's an outer div that drops the top of the whole thing to the center of the parent element and then an inner div that pulls up your content so that the content is centered and not the top of the element.
A popular technique is to split the whole image into two huge (mostly transparent) links. The left half of the photo would take you to the previous image, the right to the next.
Of course you position you images of buttons appropriately and they would move around but I assume the problem you're finding is you have to keep moving your mouse to go through lots of images as the buttons move.... Well with this idea, you only need keep your mouse near the middle, and it should remain over the photo (and therefore a direction).
Example: http://gizmodo.com/photogallery/dreamhomespshop/1008251500
Mouse-over the image and you'll see it's active the complete way across. Not quite the same as your implementation, I'm sure, but the concept applies.