I am making a CMS for a website. In the CMS I want to make a drag/drop/select -able index.
Dragging and dropping on a placeholder was not really smooth. But after I added overflow: auto to the div's where you can drag/drop/select, it is way more smoother and easier to work with.
Can someone explain me why this is happening?
It only shows if you have many div's in your webpage. (Like in an almost finished website.)
This happens in Chrome and Firefox. (I didn't test it in other browsers.)
With overflow auto <-- smoother
Without overflow auto <-- It doesn't do what you want
You must think about the HTML elements. Every HTML element is wrapped within its own 'box'. For each box, you can set its CSS properties like height, width, margin, padding, and so on. Each box is designed to expand with its content, even when you give it a set height. This state is known as overflow: visible; and is the default for every element.
In your case, you are dragging elements within an element to another element. Let's break this down a little. Before we begin dragging, our element lives within another element, inheriting its properties as well. The child element will do its best to fit within the parent element. When we drag the child element, jQuery is allowing the child element to be free from the parent element, and it will no longer inherit the parent element's properties. The child element's content will now expand to its own CSS properties until you drag it into another parent element, at which point it will inherit the new parent's properties.
In the same sense that the child is affected by the parent, the parent can be affected by the child element as well. After all, its default is overflow: visible; and wants to show all the content that is contained within it. So if the parent is 100px in width and the child is 200px, the child will be visible for 100 px outside the parent's original size.
As designers want to contain our elements to a fixed size, whether it is a px value or % fraction based on the parent element, so we need a way to prevent child elements overflowing outside of our parent element. This is were CSS overflow: hidden;, scroll;, and and auto; comes into play. I do want to note that there are overflow-x and overflow-y properties, however, I won't cover them too much as they are self-explanatory. Overflow: hidden; will simply hide the content that would overflow outside the parent element. This option will give no scrollbars for the user to view the overflowed content. So Overflow: Scroll shows the scrolling bars so that the user can scroll and see hidden overflowed content within the parent element. This option will always show vertical and horizontal scrollbars. Note: This is why there are overflow-x and overflow-y properties, however with overflow: auto;, they are not necessary.
Overflow: auto; is the solution for having only the necessary scrollbars for the content, and as a bonus, if the content does not overflow, no scrollbars are shown. So when we look at your div.sortobject, without overflow: auto;, it will attempt to visually stretch out to fit it's child elements. When you begin to drag elements around, the potential parent divs are overflowing visually trying to resize both for the child element and the jQuery helper element, the element that shows the user where to drop content. Setting overflow: auto; will cause the parent element to always retain its set width and height, so that when you drag your child element, it will appear smoothly as no potential parent elements are resizing. jQuery loves to calculate current exact dimensions of the elements it affects, and will also improve the animation as well.
I hope this gave some insight.
The default value for overflow is "visible", meaning that the overflow is not clipped. It renders outside the element's box.
The value auto means that if overflow is clipped, a scroll-bar should be added to see the rest of the content.
The smoothness effect that you refer to is simple that in default overflow, rendering outside the element's box will probably be slower/jumpier than when set to auto which moves the rendering into the actual element. This was especially noticeable for me in firefox looking at your fiddle example after moving all the elements to one column then trying to move them back.
Surprisingly in IE11, there was no noticeable difference between auto/default that I could see.
Please Read: Official W3 Documentation for Visual Effects
In the overflow-auto, I noticed there is a horizontal scroll bar in some of your boxes. If you take off any overflow, the div width will expand due to the content contained within them. When you get fatter divs, you'll get mixed div widths, and can cause quirky div placements when you drag them within a parent container. Think of a bucket with fat apples and small apples, versus a bucket with apples of all the same size; the position of the apples will be scrunched up differently between the two.
Bucket of fat apples with small apples: (div width of different sizes)
If you don't believe me that the div's are fat, you made the under lay of the divs the same size, but open up your link without the overflow = auto, you'll notice your images go over the right hand side of the border.
Bucket of apples of equal size (div width of same sizes)
With overflow set to auto, if you get beyond a certain width, the scroll bar will appear, and the width of the content will flow through, not changing the width of the div; so nothing gets quirky.
Hi I'm working on 'page' style transitions between elements on a page. My approach is pretty much this which works fine but when I put something with position 'fixed' inside one of the 'pages' the functionality just isn't happening - its working more like absolute positioning. The code is basically..
<nav id="navigation-bar">
<!-- Content Goes Here --->
</nav>
#navigation-bar {
position: fixed;
top: 0;
width: 100%;
}
Does anyone know if theres a solution to this? Or if not a possible alternative? If you position the navigation bar outside of the 'page' it works but I'm not sure how to link the #navigation-bar to 'transition' at the same time/style as the slide I also think this makes things more complicated - there is also an element on the mobile view that needs to be in the page to work that is also position fixed and I need an approach that essentially works with positioning the html inside the panel/page but can be positioned fixed and works.
That's the way position:fixed works extract the element of all the DOM.
An element with position:fixed is fixed with respect to the viewport. It stays where it is, even if the document is scrolled.
On other side position:absolute is able to extract the element but position it relative to another containing block.
Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper’s page box. To demonstrate this, in the example below you will make one of your elements fixed. You will make the other one very tall in order to cause a scrollbar, to make it easier to see the effect it has.
So if you have one element with fixed position inside each div it doesn't matter because is extracted and positioned in relation to the primary container. Then the best you can do is work with position:absolute.
I have 2 nested DIVs, with the inner one having images of fixed height (but arbitrary width) aligned one near each other horizontally.
I want to use jScrollpane so that there is horizontal scrollbar to display the images outside the viewport of the div. The list of images is not known beforehand, it will come dynamically from a CMS, so I cannot hardcode the width of the internal DIV in the CSS.
When I harcode the width of the internal div the horizontal scrollbar works fine. However, the moment I remove it the horizontal scrollbar disappears, even though the DIV has display:inline-block and I checked through Chrome's element inspector that its width is in fact expanding.
I also noticed that when I pass the autoReinitialise: true property to the jscrollpane, the horizontal scrollbars appear after a few seconds. But it seems this slows everything down because it keeps checking every few seconds.
What is the right way to make the jScrollpane realise that the internal div is larger than the outer scrollable div?
I have created a JSFiddle here: http://jsfiddle.net/793CB/1/
I have put a comment in the CSS (last line) which shows the fixed width, and if removed demonstrates the problem.
The images aren't loaded yet when you initialize the scroller, so the width isn't available.
This seems to fix it: http://jsfiddle.net/793CB/3/
$(window).load(function () {
$('#scroller').jScrollPane();
});
... on $(document).ready(), DOM is loaded, but images may still be in progress
I'm having trouble with setting 2 div's position without one of them moving to the right/left the width of the other div. They push any elements either side over by they're own width.
What I mean by this, a visual:
How can I stop this from happening, whilst keeping both of the divs relative?
EDIT:
I realize, absolute is right for what I need as found here http://css-tricks.com/absolute-positioning-inside-relative-positioning/. However... I need them to be draggable, but if the #wrapper is set to relative, then they can't be dragged. Is there a way to make the elements so that they can be draggable with the #wrapper being relative?
Link to example http://jsfiddle.net/QddTt/13/
Found out the problem. My wrapper had z-index:-99; in there for some reason. Removing that allowed me to drag my elements when the wrapper was static.
So the main solution: setting the position to absolute for both elements.
So I have a large amount of floated elements inside of a container with an overflow setting of auto. These elements (depending on screen-size) will almost always overflow to the next line as they should, however, I want to be able to center the parent div so these elements will always be centered in the page. The container is 100% of the screen width.
Oh, and to make things interesting: the size of the floated elements... is subject to change.
Here's what I'm referring to.
There's a lot of great solutions out there that I've found that have to deal with a single row of floated elements, but I'm almost never going to be dealing with that few items. I will overflow to the next line practically every time, which is why those methods don't work.
Would I be best inserting clear divs every few elements, setting the width and centering the container, or is there a better way to do this without Javascript? Thanks for any and all help!
You should be able to fix this with CSS. Put a width on your container div, and add a margin: 0 auto; to it. I found on your page it works well with a width of 1000px. The problem is if you use a width of 100%, you can't control how many of your floating divs will fit in one row, and when it will wrap because you don't know the viwer's window size. If you set a fixed width you have control over how many boxes will fit in each row.