Assuming I have 2 elements on a responsive design like this:
<div id="container">
<div class="first"></div>
<div class="second"></div>
</div>
both of them with style contains:
width: auto;
display: inline-block;
float: left;
And because I'm expecting different screen sizes to view page, so, according to screen size, sometimes they will be rendered/displayed on the same row, and sometimes they will not!, the second DIV will be moved to a separate row.
So, I'm wondering, how can I check if they are on the same line with JavaScript?
Thank you
"on the same line" would require inline elements or floating block elements of the exact same height. DIVs are block elements by default. So either use <span> tags instead of <div>, or add display: inline-block;to the CSS rule of those DIVs
ADDITION after EDIT OF QUESTION:
width: auto for a <div> means 100% of the parent element (in this case full width). As I wrote: If you have blocks, use display: inline-block; in their CSS. If you want them to have the same height, put them into a common container DIV (which you already have) and apply the following CSS:
#container {
display: table;
}
.first, .second {
display: table-cell;
width: 50%;
}
Aha (edited question), Javascript: Well, read out the DIV widths, add them and compare the result to the (read-out) container width.
You can use the element bounding boxes and check for overlap:
var rect1 = $('.first')[0].getBoundingClientRect();
var rect2 = $('.second')[0].getBoundingClientRect();
var overlaps = rect1.top <= rect2.bottom && rect2.top <= rect1.bottom;
This checks for any overlap which will probably be sufficient for your use. I used jQuery to get the elements but you can use pure js in the same way, it would just be a bit more verbose.
There is no concept of line on a page. You can check the x and y position of any element in the window and then decide if that meets whatever criteria you have for "on the same line".
By default, a div is the full width of a window so the two divs inside your container in this HTML:
<div id="container">
<div class="first"></div>
<div class="second"></div>
</div>
will be one above the other unless there is some other CSS you have not disclosed that controls the layout to allow them to be in the same row. If they are indeed width: auto and don't have any other layout rules affecting this, then they will each be full width and thus first will be above second in the layout stream. They would never be "on the same line" by any typical definition of that phrase.
Feel free to try it out here: https://jsfiddle.net/jfriend00/y0k7hLr8/ by resizing the right pane to any width you want. In all cases, the first will stay on top of the second.
If, on the other hand, you allow the div elements to have a different type of layout such as let them be display: inline-block and define a width for them, then the layout engine will fit as many on a given row as possible like here: https://jsfiddle.net/jfriend00/229rs97p/
Something tells me display: flex might help you in this. Read https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more info.
Related
It is quite easy to make two div overlap when the size of the container div is known but what if the div heigh cannot ?
I tried to do it without manipulating container height:
http://jsfiddle.net/AJfAV/
But #text2 go over #text3 and do not "push" it.
How can the #container be resized automatically ?
I manage to achieve my goal using jquery ui but I feel this is not an elegant solution:
http://jsfiddle.net/AJfAV/6/
Is this what you need?
Updated fiddle:
I'm setting height to the default, auto, using jQuery, like this:
$("#container").css("height", "auto");
You can also set: height: auto; in CSS.
Do you need position:absolute? You can use absolute positioning if you don't want to do any arrangement, but a placement. The absolute positioning takes an element completely out of the flow of elements. They know nothing of its existent.
You may use floats and a technique to enclose floats. I'm using clear:
.cl-left {
clear: left;
height: .1px;
font-size: 0;
line-height: 0;
}
Don't forget to add <div class="cl-left"> </div>.
In addition, a negative margin is used. Therefore, #text2 is nailed to the right.
http://jsfiddle.net/AJfAV/7/
this can be solved if you removed absolute positioning of #text1 and #text2.
and make #text2 overlap #text1 by making both float:left and set margin-left:-30px for #text2.
now let's test it: http://jsfiddle.net/RPe4H/
the problem now is that when #text1 is toggled, #text2 will float to top left of #container, this happening because JQuery set display:none on the element when toggling is done.
now to solve this, put #text1 and #text2 inside containers with same width, so #text doesn't affect the flow when it is set to display:none, also you must set min-height:1px on the container of #text1.
now it is working as expected http://jsfiddle.net/MyyF6/1/
I have a div called calendar that is inside a div called cal-container. The calendar has width:100% so currently it takes up the whole cal-container.
I need to add a side-panel div. This div will have a fixed width of 150 pixels. Thus, #calendar width should be #cal-container width - 150px. Is this possible with CSS or am I forced to use a table?
If it is possible, is there an example? I googled it but nothing like what I want came up.
The side-panel can be hidden and shown by click a button so adding padding will not work.
Here is an idea of what I mean:
The days part is #calendar, and the Unscheduled part is the side panel of 150px.
I tried floating the calendar left, and cloating the side panel right and giving it a width of 150px. But the idea is if I hide that div, the calendar should then take 100%.
Thanks
Like this, the blue would be side and calendar be the left, but calendar needs to take up the room side does not when hidden.
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html
Result of float:
Got a working solution for you here.
The code to get this working basically hinges on the following structure:
<div class="sideBar">
...
</div>
<div class="tableWrapper">
<table>
...
</table>
</div>
Next, make sure the elements have these significant CSS properties:
.sideBar {
float: right;
}
.tableWrapper {
overflow: hidden;
}
table {
width: 100%;
}
What's happening here is that the .sideBar floats right, and takes up whatever space it needs to. Meanwhile, the .tableWrapper will take up whatever space is left by virtue of overflow: hidden. Finally, tell the table to take up 100% of its available width.
Click the button in the demo to see the table automatically resize.
All major browsers and IE10 support flexbox. Not supported < IE10.
plz see the below link :
Long File Name Inside A Div
when you see those long file names with firebug you will find a span that tell us ->
.FileName {
float: left;
width: 438px;
}
we have predefined width for this span!
q#1 : so why we have overflow in that div and how can i fix that ?
q#2(important) : is it possible to make that file name scrollable without showing scroll bars ?
edit
(with jquery or javascript or css)
thanks in advance
You have an overflow because this text can't break (there are no spaces):
R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210
You could change the span's into div's and give them a height and an overflow:hidden.
Html:
<div class="FileName">R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210 asangsm.com.rar</div>
Css:
.FileName{
float: left;
width: 438px;
height: 20px;
overflow: hidden;
}
I don't think it's possible to make that file name scrollable without showing scrollbars.
If you don't want a scrollbar, but do want to scroll, then the most apparent solution would be to use some javascript. If you're into jquery, here's some:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
I've tried one of them (http://www.demo.creamama.fr/plugin-scrollbar/), setting the div containing the text to overflow: hidden; and the div containing the scrollbar to display: none; to mimic your situation, and that gives me a scrollable div with no scrollbar.
However, I think from a UI point of view it's not the best idea to have a scrollable section without a scrollbar. At least something should light up (as with the Mac OS Lion scrollbars) indicating you can, or are, scrolling. You could style one of the javascript solutions out there to make this happen, for instance with a tiny scrollbar or indicator.
Short of using CSS3's marquee, I can see no simple solution. You would have to use Javascript.
As per avoiding the line break, you can use white-space: nowrap;.
I need to create a sort of cart, where I store elements created by the user.
I've created a simple scheme to help you understand my needs:
.buttons are two div containing an image (an arrow), where I'll bind an onclick event to scroll elements (#scroller). The layout has fixed sizes, thus the exact length of ul#scroller (the element that will contain items and that needs to be scrolled) is 900px.
I think the size of any #scroller child <li> will be ~100px.
There's a button (not present in the scheme) that allows the user to store in #scroller an item.
Actually when there are too many items the next will go on the bottom (beginning a new line). Instead I'd like that the new elements go ahead on the same line, but hidden (without hit #button_right).
I was thinking to do this with javascript, storing elements in an array, and keeping visible only the first 9 (x 100px), then by clicking on the arrow (let's say, the right one) hide the first item and show the 10th.
Do you think this is a good solution?
If not, what do you suggest? What CSS rules could help me to do it?
Thanks in advance.
you need to create an extra div with a very long width, and put it inside #scroller and make #scroller have an overflow: hidden so it doesn't show the scrollbar.
like this:
html:
<div id="scroller">
<div id="inner">
(your items)
</div>
</div>
css:
#scroller {
width: 900px;
overflow: hidden;
}
#inner {
width: 90000px;
}
P.S. now the items won't go to another line but you need to code the buttons so they scroll the content depending on the number of items, depending on their width behing the same it can be more simple or not.
Let say I have this HTML code snippet:
<div id="container">
<div id="textContent">Text Content Te</div>
<div id="anotherText">Another Text Content</div>
</div>
Original HTML output http://img26.imageshack.us/img26/1571/beforeeffect.gif
I wonder how I could dynamically resize the div's textContent width so that it fits its text content nicely (neither the text will be wrapping nor scrolling nor truncated).
Desired HTML output http://img26.imageshack.us/img26/5851/desiredeffect.gif
I am open to any solution using CSS and/or JavaScript.
I wonder how could I dynamically
resized the div's width to fit the
text content (without wrapping)?
Assuming the content would fit without overflowing, you could use a float without a width set (width isn't required in CSS 2.1 or greater). Without more detail, I can't suggest where to put it or what other properties to set to get the desired effect (eg, floats float down around following content, so put it at the beginning of a paragraph).
If you're not concerned with the effect looking perfect on old browsers like Internet Explorer, you could use display: table or display: table-cell, with the caveat that tables don't overflow: they stretch. That stretching may be desirable if you want to avoid overflow of your div, but allow it to overlow the viewport -- eg, a film strip that scrolls horizontally. In that case, altCognito's suggestion of white-space: nowrap would be very useful.
<style>
div {
white-space: nowrap;
}
</style>
This will do the trick (though you probably should be more specific about the divs that you want to change. This means the divs that you do use this on won't have any line feeds unless you specify them yourself. But I'm guessing you're using this for labels, so you should be all set.
See an example.