Several divs in a row, auto parent width - javascript

I am making a horizontal content slider, and need to put an arbitrary number of equally-sized elements in a row inside the slider div, so i can shift the slider div back and forth and display one element at a time on the page. These elements could be anything: divs, imgs, whatever.
Currently I am floating all the elements, and in order to prevent them from dropping onto the next row, using javascript to sum up the widths of all the elements on page load and manually fix the width of the slider in order to fit all of them.
Naturally I do not want to do this. I have looked at the CSS Flexible Box Model and it seems it would do what i need, but it does not appear very often outside of the W3C specification and i'm not sure how well supported it is. Does anyone have any experience using it? Apart from that, is there any other non-javascript way of lining up a bunch of divs side by side and having the parent expand laterally to fit?

Flexbox isn't really standardised or widely-supported enough to use yet. It's supported in newer browsers including IE10, but it's likely to be a long time before that's your baseline.
There are some ways to work around it. For example you can use white-space: nowrap to make inline children not fall down to the next line, in combination with float: left to make the parent shrink-wrap its width around the children. Then if you want the children to be stackable blocks you could use tables or inline blocks:
#slider { white-space: nowrap; float: left; border: dotted blue 1px;}
#slider .box { display: inline-block; width: 100px; border: dotted red 1px; }
<div id="slider">
<span class="box">foo</span
><span class="box">bar</span
><span class="box">bof</span
><span class="box">zot</span
>...
</div>
(Using <span> is needed for inline-block in IE7, and the odd > placement is to prevent unwanted whitespace between the boxes.)

As you may have seen, every browser may render things differently, but if you apply the style display:inline; to the elements in the slider, and width:auto; to the container element, they should not wrap.

Related

ui-sortable not working (for predefined DOM positions)

Please see this demo Click Here
Item 3 does not get sorted.How To make every element sort perfectly?
Note : Item 3 is float:right thats the need in project.
Acually in my project I have used DOM positions (eg:left:20px , right:10px) rather than float left or right.
If anyone can make this
Demo workable than it would be huge help.
What i want is all the elements should sort (specially item 3 which is not sorting).
What I tried is this .Which is not perfect.
Explanation :when user drags a element to left side of parent div and drops than the element sticks to left of div .. if dragged to right it sticks to right. thats the reason i am using DOM positions. Now I have to make it sortable too.
The sort works, it's the css that is causing you problems. Try this way:
https://jsfiddle.net/or6m2v4z/4/
What I changed:
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; float:left}
#sortable li:last-child {float:right}
And I also removed the inline styles :)
EDIT
I just read the explanation you provided, if you want to drop elements left or right, maybe you should use a left and a right container and try with the droppable function instead of sortable.
drag drop and change parent of a div in dom
EDIT 2
I did a little workaround for you. Try this:
https://jsfiddle.net/or6m2v4z/5/
By having float: right on Item 3, you're explicitely telling the browser to position to the right hand side of everything else in the same block that is not styled with float:right.
If you have a look at the DOM in your browser's dev tools after having tried to move Item 3, you'll see that it has actually been repositioned.
Edit:
I guess this does what you need? https://jsfiddle.net/or6m2v4z/6/
Instead of having the float style on the items themselves, they've been wrapped inside two containers floating left and right respectively.
Using the sortable connectWith option, both containers can be linked so that their contents can be moved freely among them.
The containers need minimum dimensions so they don't disappear if empty (that's also the reason I added the gray background).

Images placed with .append() / .load() not taking on the styles they should be

My website has a few sort of "display containers", into which content is loaded using .load(), depending on which item is selected. These display containers can be a few different states, depending on wether your viewing on a mobile device etc, such as all the containers having word spacing to give the images in them a bit of breathing room, or setting the content to justify.
Now, if I include the images in these containers from the start—that is to say, they are part of the initial DOM—everything shows up fine. The images will be spaced apart using word-spacing if that's the state the containers are told to be in, or the content will be justified if you're on mobile.
The problem is, once content is added to these containers, whether it be using .load() to take it from a different document where it is being stored, or .append(), it is not taking on these properties.
I've made a fiddle to demonstrate here. Unfortunately, I can't demonstrate the .load() function due to only being able to use it on pages from the same domain (at least that's what the jQuery documentation tells me), but you can still see exactly what I'm talking about from the .append() side of things.
In short;
Images in DOM initially work
Images appended / loaded into DOM do not
When mixing (some elements initial, some elements appended), this still holds true for the images placed in each of their separate ways.
If you examine the source of the mixture of initial/loaded, all elements look the same. The first 2 imgs here are the ones with proper word-spacing, while the rest do not have it.
If you add some spaces between the images when appending them it will treat the images like "words" and apply the spacing.
The word-spacing property increases or decreases the white space between words. It's not good for the image. Below should be fine for you:
.projectPagePieces {
width: 100%;
text-align: right;
border: 1px dotted blue;
line-height: 0;
}
.projectPagePieces img {
vertical-align: top;
display: inline-block;
margin-left: 25px;
}

jquery append() weird interaction with css display:inline-block

I am trying to create a webpage with two div sections displayed next to each other horizontally. In one of them I want to append content that will change over time. I noticed that if I use css display:inline-block to align the two div sections and then I use append() to insert a paragraph in the first section, the second one is pushed down to align with the paragraph block. I know I can fix this problem by using float:left instead, but I still don't understand why inline-block behaves that way. I wonder if there is a way to make inline-block work in case I really need to use that instead of float. Here is JsFiddle: Link
<div id="left">left</div>
<div id="right">right</div>
#left, #right{
background-color:#ff0;
width: 100px;height: 100px;
display:inline-block;}
<script>
$("#left").append("<p>Paragraph</p>");
</script>
when using display: inline-block you have to add vertical-align: top if you want the elements to display at the top:
JSFIDDLE
The reason being inline-block elements are set to baseline by default

Is there a way to have a div tag without having a line break, or is there an alternative?

In my website, in asp.net 4 / vb, I have a situation where I need to include a class, "noprint", in my footer, as defined in print.css. But I already have a span class, so I wrapped div tags around it. And my tr's and td's all have classes in them already.
Basically, I have this in my footer:
Knowledge Base | Contact USS | Copyright © USS Vision Inc. 2012 | 888-888-8888
And the only thing I want printed out is the phone number.
I use
<div class="noprint">whatever I want omitted when printing</div>
And that works fine. But when viewing the webpage, I don't want the 888-888-8888 to appear below everything else, so I can't use div tags, I suppose. The noprint works great, but is there any way I can use the noprint in my footer without putting the phone number below the rest of the footer due to the div tags? Thanks for any help anybody can offer!
Update: My print.css stylesheet looks like this:
#media screen
{
/* whatever styles you have for display */
}
#media print
{
.noprint { display: none; }
}
So I don't know how to make the div tags display: inline, but I will search around and try to figure it out!
gd1 is absolutely right about span/div and display inline/block, but on a side note I'd add that what you're trying to achieve is often done with a list (as it really is a list of links in your footer)
<ul class="footer">
<li class="no-print">KnowledgeBase</li>
...
<li>888-888-888</li>
<ul>
with a css like
.footer li {
list-style-type: none;
display: inline;
padding: 0 10px;
border-right: 1px solid black;
}
.footer li:last-child {
border-right: none;
}​
hope that helps
Use <span>.
However you can make a div "inline" using the style display: inline, but in this case you just need a <span>.
use css
<div style="display:inline" class="noprint">whatever I want omitted when printing </div>
If not use the inline counterpart span, as a answer already said. But remember inline display donot have block properties like height, top-margin, bottom-margin.
If you still want to use an extra div, I recommend using display:inline, but if you just want the whole footer to have both classes you can do that as well.
You can add multiple classes like this:
<span class='footer lower noprint'></span>
In CSS this would look like:
.footer.lower.noprint{ display:none; }
Alternatively, the 'noprint' class will also work without specifying all three classes.
Here's an example: http://jsfiddle.net/yKRyp/
well set the specific width and height of the div using CSS and apply float
<div style='float:left; border:1px solid blue; width:100px; height:100px'>
div 1
</div>
<div style='float:left; border:1px solid red; width:100px; height:100px'>
div 2
</div><div style='float:left; border:1px solid orange; width:100px; height:100px'>
div 3
</div>
a live example here
http://jsfiddle.net/AGWGs/
div is a block-type element, it is usually used as to group and contain block-type elements.
Using CSS, you can change the display type of any element, however.
In a quick example:
display:inline Makes an element to show inline, they can be put side by side. span element is an inline element. This cannot use block-type-only css rules such as: margin, padding, width, height ...
display:block Makes an element to be displayed as a block. Unless inherited values or given CSS rules, they will take a line long, blocked. They can take block-type CSS rules. And they can be stacked side-by-side using float. However, unless the line is cleared(clear: left, clear:right or clear:both), following elements after the floated element will overflow the previous container.
display:inline-block Makes an element have block features, with inline displaying. This is pretty similiar to using float and making block-type elements shown in-line. However this rule is IE8+ support only, so I would encourage you to use floating to keep the maximum compatibility.
P.S: There are hacks that can be used to have display:inline-block feature used on IE5.5+.

side by side divs in full width

I have problems to place N divs side by side with full browser width
I want like this. when you resize browser space between divs must stay same and divs must resize in width.
|div| |div| |div|
| div | | div | | div |
One solution would be to use percentages:
div.mydiv {
width: 33%;
display: inline-block;
}
If you do this, be careful with padding: that adds to a div's width, possibly causing overflow. This can be fixed if you support only IE >=8, by doing
div.mydiv {
width: 33%;
display: inline-block;
-moz-box-sizing: border-box; /* OMG why doesn't Firefox support this yet */
-webkit-box-sizing: border-box; /* Safari below 5.1, including 5 */
box-sizing: border-box;
}
And if you do that, there's even one more possible problem: space between the divs. This occurs because you have empty text nodes in between them, and display: inline-block thinks that's OK: elements laid out in an inline-type fashion can be interspersed with blank text nodes. To fix this, there's a pretty bad hack:
div.containerOfAllTheDivs {
font-size: 0;
}
div.mydiv {
font-size: 12px; /* or whatever */
/* plus the above stuff */
}
This makes it so that any text (e.g. whitespace) that appears inside the container is zero-sized, unless it appears inside the divs you are stacking next to each other, in which case it reverts back to 12px. As I said, a pretty bad hack. But it works.
The more general solution is the new flexbox proposal, but that is still under heavy revision: there are two outdated versions implemented in various browsers, with the latest one not being implemented in any as of today (2012-05-15). If you know your exact environment, though, this might be a good solution.
For two divs, just do (Demo):
div
{
width: 49%;
float: left;
}
For three, do (Demo):
div
{
width: 33%;
float: left;
}
If you need an arbitrary number of divs, you have two options:
If the number is determined by the server (value is coming from a database or a session or whatever), you can generate appropriate CSS on the server side. This solution is preferable.
If not, you need JavaScript to calculate the viewport's width, and assign width values accordingly to your divs.
The same thing could be achieved using CSS3 Flexible Box Style Layout with very less coding. Well it depends upon the browser you are planning to support.
Now Flexible box layout is supported only in webkit engines & mozilla
Putting this as an answer because I guess it's valid and may serve you well. 960.gs and bootstrap both provide scaffolding for layouts identical to what you want. 960.gs is just layout but if bootstrap suits you, you can customize it on their site to just get the bits that deal with layout. One caveat for bootstrap, I haven't found a way to remove the left margin on the div columns. 960.gs includes alpha and omega classes that set margin-left and margin-right to 0 respectivley. I had to add these to bootstrap when I used it.
Using one of those scaffoldings will save you a lot of time and effort. If you have to hand your code off to somebody else later or even just have somebody else working on it with you, using a scaffolding will help them work with your code too.

Categories

Resources