I have a HTML application that works with three columns, each of which is a div in a container object.
| |
A | B | C
| |
I'd like to make it such that the three columns would each be adjustable, and the text would reflow and adjust inside of them.
This works trivially with Frames (See: http://www.tizag.com/pics/htmlT/frameindex.html ), but I'd like to replicate this behavior with my Divs.
Is there a jQuery plugin to do this? The best way I can think of is to create a slider div between the contents, similar to the implementation at http://www.catchmyfame.com/2010/08/12/adjustable-columns-with-jquery/
Is there any easier/cleaner/prettier way? This seems like it has to be a pretty standard request...
A rudimentary way to set them up all the same width:
div {
float: left;
width: 33%;
height: 300px;
overflow: scroll;
}
If you want to allow the user to resize the columns with a drag-n-drop method then you'll want to look into a JS framework. Here's a jQuery example:
http://docs.jquery.com/UI/API/1.8/Resizable
Related
I use tablesorter (https://github.com/Mottie/tablesorter), with widget scroller.
You can find examples here : http://mottie.github.io/tablesorter/docs/example-widget-scroller.html
My problem is when tablesorter is contained into other tables like
<table>
<tr>
<td>
table sorter table
</td>
</tr>
</table>
table sorter does not take 100% of the width... And the horizontal scrollbar does not appear automatically.
You can find a example here : http://jsfiddle.net/oqfq47fc/8/
Whereas if table sorter is not contained in other table, its works...
You can find a example here : http://jsfiddle.net/oqfq47fc/9/
Can you help me? I works in portal context and contents portlets are inside table, and it is not possible to remove nested tables.
I think it's just a matter of css, but I know no more...
EDIT
I need that table takes 100% of width like this picture :
And when I resize the browser and that the all table can not display in the available space, a horizontal scrollbar appear at the bottom of the table like this picture :
It works good in my first example.
But in my second example with the outer table, the table look like this picture :
And when I resize the browser, the horizontal scroll bar does not appear on table but on window like this picture :
table{
display: block;
max-width: 100%;
overflow-y: hidden;
overflow-x: scroll;
width: 100%;
}
table.data-table,table#tvar_1{
display: table;
}
html{
overflow-x: hidden;
}
.tablesorter-scroller-table{
width: 100% !important;
}
Fiddle
Adding this set of code is as close as I can get to reproducing what you want with strictly tables. You are using tables for layout and you really shouldn't be doing that. The best way to go is to use the div the way you are in the second iteration where it is correct. It obviously displays the correct and best way. Also, with what I had to do to these tables it is not nice.
Do your best to avoid tables where tables are not needed. This is tabular data so it is needed, but using a table to construct the page is not the right way to go.
I am working on a project that involves a lot of CSS. The customer wants to have a grid layout on the home page where he wants to be able to rearrange UI components with drag and drop. These UI components could be of different sizes: 1x1, 2x2 and 3x3. When I drop an UI item at the desired new location it should push the other components aside. Any possible holes should be filled with 1x1 components.
How it should work
Before I have draged a component
Draging the 2x2 component
Dropping the component in the middle, the two 1x1 components make room and adapt around the 2x2
Note that the size of the grid is not limited to 8 1x1, but the height as well as the width of it should be possible to expand and make smaller.
I’ll rather not use tables but other than that I am open to suggestions. Right now I've just used inline-block divs which I can drag and drop to switch the jQuery DOM objects. The effect isn't quite what the customer wants:
How it is now
I've made a lot dynamic layouts with the same idea. You need to think more in how your float behavior from block to block is stopping for the next following blocks, so they become correct repositioned like you want. So to define a float-stop element is necessary.
Your blocks will work with float:left maybe float:right. At some point you will figure out that this behavior has to stop somewhere best done with
CSS
.floatstop {
clear: both; //the important code here..
width: 100%;
height: 1px;
line-height: 1px;
margin-top:-1px;
}
and Html
<div class="floatstop"></div>
Made of all blocks who need border to the next block on the left side (maybe right side too) you have to define a base layout which has space for the very right placed block too with borderspace for it, otherwise it would float down under the block before.
But there is a more modern way!
You can use CSS3 codes to define your layout.
.columnblock {
width: 100%;
column-gap: 30px;
// for symmetric columned layouts use..
column-count: 3;
// or for not symmetric layouts use..
column-width: 280px;
}
<div class="columnblock">
<p>Lorem Ipsum</p>
<p>another Paragraph</p>
</div>
There other things to mention here but you can read about
http://www.w3schools.com/css3/css3_multiple_columns.asp
I would like to have vertically but not horizontally fixed div element. Currently, I am using jQuery to update the position top every time scroll occurs, but I don't want it seeing moving. I would like it to be fixed without moving. Is there a way to do this?
-----------------
| | |
| | |
| div A | div B |
| | |
| | |
| | |
-----------------
Scrolling down
-----------------
| div A | |
| | |
| | div B |
| | |
| | |
| | |
-----------------
I would like to be able keep Div B vertically fixed while Div A scrolls down and up. But when I scroll to the right and left, I wand Div A and Div B to move.
I noticed that Twitter uses something similar. Once you click on a tweet, the element on the right that display the tweet detail, is veridically fixed. I am not sure how they are doing it. See the second image, when scrolling down the right panel stays fixed.
Second image:
Twitter uses a css property: position: fixed; which sure is the best way to go.
This does exactly what it says it does, it fixes the position. By using the top, right, bottom and left properties you can set the exact position of your div.
Edit 13-12-11 (awesome date!)
The property position: fixed; can not influence a positioning property over one axis only. This means, that you can not scroll left or right, like you want to.
I highly suggest you should either avoid surpassing the screen width, using percentages for your element's width. You can also just stick to your javascript.
You could however go for the method I suggested at first, but change the left property using a scroll event listener so that when you scroll, the left offset is increased or decreased. Because jQuery's bad-ass cross-browser support I'd go for jQuery. I think you can do practically the same with the prototype library, but I'm not familiar with that library.
jQuery (worked in google chrome):
var offset = 400; // left offset of the fixed div (without scrolling)
$(document).scroll(function(e) {
// b is the fixed div
$('.b').css({
'left': offset - $(document).scrollLeft()
});
});
Have a look at the live demo
You might need to change the document object to another object or selector of your choice.
A whole lot of people want this, but unfortunately pure CSS does not offer a way to accomplish this very simple, very useful task. The only way that I have found is to give the div position:fixed. However, as you have found, this fixes the div on both the x and y axes.
This is a big failing in CSS, in my opinion. We really need something like CSS position:fixed-x and position:fixed-y. The only way I have found to do this is to have a piece of JavaScript code that's entered on a SetInterval( ) timeout (I use .10 second) that repositions the div on the axis that needs to change.
In your case (if I read your question correctly) you'd change the top: of DivB at each SetInterval( ) tick, moving DivB down to the position you want it in the viewport. Easy to do and it works, just a needless pain.
You might ask, and rightly, why you (and I) can't do this manipulation when the scroll event fires. The answer is that the scroll event doesn't fire in some versions of IE.
If you can make this depend upon scroll event cross-browserly, that would be a huge advance.
HTH.
This is easily done with the correct markup and CSS. You need a container (div, section, etc.) to contain your two content areas. In the following example, I exploit the way JSFiddle renders the fiddle's content, but the technique is the same outside of JSFiddle.
Live example.
First, we need the markup:
<div id="container">
<div id="divA">
<p>This div will scroll.</p>
</div>
<div id="divB">
<p>This div will not scroll.</p>
</div>
</div>
Next, the CSS:
#container {
height: 100%;
postition: relative;
width: 100%;
}
#divA {
background: #ccc;
height: 300%; /* So we can see scrolling in action */
left: 0;
position: absolute;
top: 0;
width: 25%;
}
#divB {
background: #c55;
height: 100%;
position: fixed;
right: 0;
width: 75%;
}
In this example, I take advantage of the fact that JSFiddle will create a view port of limited size. Thus, I can specify all of my sizes in percentages.
Notice that I set the container's position to relative. This is so that I can set the position model of divA and divB to "absolute" and "fixed" such that they will be positioned according to the box generated by "container". This is the key part of solving your problem.
use position:fixed as style and set a fixed width for div. also set top and left or right in pixel.
I am working on web application.
I wanted to apply auto height to textarea using CSS, dont want to use any script, jquery plugin and other stuff.
After applying class ( i.e. style property ) to textarea, it should automatically increase it's height not width as per content present it in.
In this case width should be fixed i.e. width: 98%; (In my case) only height needs to grow. So scroll bars should exist for text area.
I simply needed one CSS so that after applying to textarea, it should be auto grow like <DIV>.
Please folks do sugggest, is this possible using CSS. If this is not possible, then m okey if i get javascript statments to acheives my requirement.
Thanks,
Pravin
It's sort of semi-doable in html/CSS. There are, however, the usual caveats of browser support and, since it uses html5's contenteditable, it requires a fairly modern browser.
That said, the following works (in Chrome/Ubuntu 10.04):
<div id="wrap">
<div id="editThis" contenteditable>
</div>
</div>
With the following CSS:
div#editThis {
min-height: 4em;
height: auto;
width: 50%;
margin: 0 auto;
}
div#editThis:hover,
div#editThis:focus {
border: 1px solid #000;
}
Demo posted at jsbin
If you're only displaying text in a textarea and not using it to get more content input from the user then consider using a div and styling it to look like a textarea.
the other thing i have seen is an auto expanding textarea that grown in height as you type.
see here: http://james.padolsey.com/javascript/jquery-plugin-autoresize/
This is not possible with pure CSS, you will need to use JavaScript
I'm using MVC with the grid helper seen around. I'm trying to extend a column header since I have to put up and down arrows for a certain column. For example I call my header column sh and have the following using css to try to increase it but to no avail. I'm wondering if anyone has a better idea. I have heard of using javascript but I haven't used it before.
th.sh, td.sh
{
width:50px;
height:300px;
border-top: 100px;
padding-top: 100px;
text-align: center;
}
Have you checked the specificity of your selector? (see: http://www.w3.org/TR/CSS2/cascade.html#specificity ). Another property may be overriding what you are trying to set with th.sh