How to make Wrapper div contain only non-overflowing divs - javascript

I have a div containing divs with content.
The outer div has a dynamic width (e.g. 80%).
The inner divs have a fixed width (e.g. 100px).
The problem is that i want to show only so much inner div's so that no inner div "overflows" / "is cut" as in figure 1.
I also want to "distribute" the "free" space as margin between the inner divs equally distributed, as shown in figure 2.
I hope somebody understands my problem, and knows how to realize this with css and as less javascript as possible :)
P.S.: If it is easy to do, would it be possible to have the first and the last div have a max. margin to the outer borders ?

Started this before you edited your question with more info, but I believe that the one missing piece you're after is the text-align: justify in the 'outer'.
.outer{
background: red;
width: 80%;
overflow: hidden;
height: 48px;
text-align: justify;
}
.inner{
background: blue;
width: 100px;
height: 40px;
margin: 4px;
display: inline-block;
}​
Here's a fiddle.
Not entirely sure what you mean by max-margin, but it sounds like that could be achieved by giving the container a fixed padding on the left and right.

Related

Centering Animated Divs

I have this jfiddle that I found that I modified a little bit to my liking. The problem is that I can not get the alignment correct. My goal is to have the five columns centered when they are all collapsed and have them centered when one is expanded.
http://jsfiddle.net/422MP/
#mainContainer
{
margin:0 auto;
width: 500px;
height: 100%;
overflow: hidden;
}
.sidebar
{
float: left;
height: 300px;
width: 20%;
/* left: 565px;*/
border: 2px red dashed;
/*position: relative;i*/
overflow: hidden;
margin:0 0px 0 10px;
}
** EDIT ** To be a little clearer, it seems that when one div is expanded it is centered. When they are all closed, they are aligned toward the left.
Thanks!
Demo here: http://jsfiddle.net/422MP/34/
It's a lot easier when you have fixed widths for your elements, which is what I did. But the javascript is much cleaner as well.
To center the elements, you simply get rid of the float: left style, which will wreak havoc with center alignment, and set the text-align of the container to center.
All of the sidebars are float: left and the javascript is actually making them width: 10% when they are closed, which means that they only end up occupying the left half of the container. The div containing all of the sidebars is actually centered. You probably want to alter the JS to leave them at 20% and widen the containing div when one opens.

Jquery mouseover dynamic p tag expansion

[this is another question related to something i posted earlier]
I have a p tag inside an anchor, there many be a variable number of instances of this during the loop. My goal is to on hover make the p tag expand and show more information. I have this so far in terms of mouseover.
$('.boxOPToneplustwo').mouseover(function (e) {
console.log("in");
$('p', this).addClass('popupHighlight')
});
I need to edit this code to allow the p tag to increase its height in relation to the amount of text in the element. if it needs three lines it will expand that amount and vice versa.
.popupHighlight {
height: 3.6em !important;
}
As you can see it is hard coded at this point to a certain height, is there a away to get around this issue?
you can do this by setting some values in css
.popupHighlight {
min-height:100px;
overflow:hidden;
}
it will expand according to the size of the content
Hey this thing is very easy to do.
Here is a fiddle
http://jsfiddle.net/robbiebardijn/vAyn9/
.boxOPToneplustwo{
background-color: red;
height: 1em;
line-height: 1em;
position: relative;
overflow: hidden;
transition: height 1s ease
}
.boxOPToneplustwo.popupHighlight{
height: 3em;
}

div position absolute... overflow-y:auto and then vertical scrollbar covers some of the content

I have a div with absolute position
inside some other divs.
http://jsfiddle.net/d8GYk/
<div style="position: absolute;
display: block;
outline: 0px;
margin: 0px;
padding: 0px;
top: 0;
text-align: left;
font-size: 11px;
font-family: arial;
cursor: default;
border: 1px solid rgb(170, 170, 170);
overflow-x: hidden; white-space: pre;
overflow-y: auto;
left: 0px;
height: 132px;"><div>a a END</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div></div>
As you can see the first div is not completely visible
That's because the vertical scroll bar covers it.
If I set overflow-y:scroll. The problem goes away.
However I don't want to do it because this div is autogenerated (via javascript) and in many cases I don't need the vertical scroll bar (for example if the list has one or two or three items)
Can somebody suggest how to resolve this problem ?
if the scrollbar may or may not show, use a content container with a wrapper that may or may not scroll. html:
<div class="container">
<div class="entries">
<div>ab a</div>
<div>ab</div>
...
</div>
</div>
and css:
.container {
height: 100px;
overflow-y: auto;
}
.entries div {
white-space: pre;
}
Demonstrator: http://jsfiddle.net/gFrbM
That said, if you absolute need pre white space handling, AND your lines are very long, you'll either need to turn on scroll for both directions, not just y, and that's a good indication that the way you're trying to present content is not a good way to go about it. The UX will be poor for your users, and depending on the content you're listing in these entry divs, there will be much better ways to show that data.
Du you really need "white-space: pre;"?
If you remove this part i think it is going to work
Use a margin-right for each div inside the container:
.container div{margin:0 20px 0 0}
http://jsfiddle.net/Karzin/d8GYk/2/
Add this to css
{padding-right: 20px;}
Reason: The border of the scroll is covering your div text. you need to give some space for the same.
http://jsfiddle.net/d8GYk/3/

Auto height on element with only relatively positioned children

As you can see here you need to apply a static height to #wrapper because else the div won't contain its children. (here is the fiddle) This is quite logical. I would want, however, that I can give #wrapper an auto height by which it can contain multiple rows of relatively positioned elements.
I suppose I could add an other wrapper around the individual items and position them staticly? But I would prefer to not add more HTML. If needed a JS/jQuery solution is possible.
There is an float is your child DIV's so you have to clear it's parent & remove height from it. write like this:
#wrapper {
background-color: white;
min-height: 360px;
margin: 50px auto;
overflow: hidden;
padding: 10px;
width: 1008px;
}
Check this http://jsfiddle.net/y5nYN/16/

DIVs overlapping. Need to move it over so they don't

Basically what the title says. Though the spacing needs to be the same on any resoulution. I tried to do it with css but on different resolutions it moves around a bit. It dosn't matter how you do it (javascript, css, html), as long as it works.
You can view the site that im having issues on here.
If the error is the Fatal Error. Check Code. bit at the top, then do this
Change
#newscontent {
top: 4px;
left: 14%;
position: fixed;
}
to
#newscontent {
top: 4px;
left: 18%; //CHANGE HERE
position: fixed;
}
This will keep the text from overlapping the Latest News bit, at least until the page shrinks smaller than the BB.
Even better would be to make #newscontent a span and place it inside the #news div, so there would be no overlapping or separation no matter what the screen size.
only #topbar should be positioned absolute (if needed), child divs can have float left and margin/padding right
OK, so bottom line is you don't want to solve this using absolute or fixed positioning with left-offset percentages. This approach will fail depending on screen resolution and length of text. A better approach is to float the items, which will allow them to "push" the next element to the right, if need be. Try this:
First, remove all your CSS for your #serverstats, #news, and #newscontent selectors.
Second, on all three of those divs, add a menu-item class:
<div id="serverstats" class="menu-item">...</div>
<div id="news" class="menu-item">...</div>
<div id="newscontent" class="menu-item">...</div>
Third, add the following CSS to your style sheet:
.menu-item {
float: left;
font: bold 120% Arial,Helvetica,sans-serif;
margin-left: 15px;
padding-top: 3px;
text-decoration: none;
}

Categories

Resources