For example, i'd like to have a grid of boxes all floating left. I have the design here: atbskate.com/trusktr.
The boxes on my site are all float:left. However, when i expand a box by adding content into it (ajax) it shifts the other boxes and leaves an ugly empty space. I'd like for the boxes to fill up this empty space.
The idea would be similar to http://www.robclarke.com/. when you click on a box, it expans, and all the other boxes are shifted and there is no empty space. How can I avoid this empty space?
The code on robclarke.com is very complex so i ahven't had time to disect it...
Any ideas?
Have a look at the jQuery masonry plugin which provides for a lot of flexibility in handling content in boxes.
Related
I'm currently making a web app editor and I have already implemented the suggestions box. Right now, this suggestions box is fixed to the top of the page, but I would like to have a suggestions box that pops up underneath the text that I'm currently typing. Sublime's suggestions box is exactly what I'm looking for:
I've tried searching for tips on how to implement this kind of feature, but all I'm getting from my searches are for static fields (like search boxes that don't move) or drop down menus. I would like the suggestions box to pop up right under the current word I'm typing, meaning that it can't be fixed to a particular location.
Any tips on where to start with this? Thanks!
jQuery has a caret plugin that you can get the caret's position in. Then you could go $(textarea).caret();, then call the box's position a few pixels lower.
Interesting idea, my thoughts so far (not tried in combination) are listed below. Sorry for not providing many links, but I think every part is small enough to look up on demand.
Box itself
It's possible to build such a suggestion box by an unorder list,ul. Just format it for a maximum size, and it's ready to use.
Positioning
You want to place it under the cursor, I guess you're using a textarea. From a quick search, there's a plugin on GitHub, which gives you the window coordinates of the text cursor. So we have a position now which can be used to position the box, great. Hint: It's a fixed positioning, just update it for each new character.
Interaction
So far we hopefully have a styled and positioned suggestion box. I would grab the textarea value and trim it down to the last word in front of the cursor. This string can bee looked up via AJAX, local or whatever you like to use.
Once you have a set of suggestions and filled the suggestions box, at least I would like to have keyboard support. To do this, just add keyboard listeners for up/down arrow, enter and tab key. For all four you also need to prevent the textarea to react by default on this keys.
A click listener on suggestion elements could be useful as well. After click or tab/enter you just want to modify the textarea value at the cursor position.
I'm working with a mosaic (jsFiddle) made with simple CSS and HTML.
The mosaic has rows and columns of the same width and height. Each one of its cells should be filled by an entire box or a part of it. In other words, every box should occupy one or more boxes length-wise and one or more boxes width-wise.
When all the boxes take up only one row, everything works fine. However, when I try to make a box bigger than a row, the float:left stops working the way I want it to:
http://img198.imageshack.us/img198/5207/boxshoudgohere.png
jsFiddle with the issue as displayed above.
As illustrated above, the gray boxes that are (in the HTML) right next to the big box skip to the next row; I need to move the boxes to where the red arrows point. My question is: how can I prevent the gray boxes from moving?
Take into account that I would prefer a clean solution. In other words, moving the boxes with absolute or relative positioning wouldn't be the best option since the boxes and their width/height are generated by JavaScript (although feel free to post any answer).
Thanks for your time.
Jquery Masonry will do this for you. Unfortunately you won't achieve what you're after with simple markup and CSS.
You can't do that using a clean CSS code.
But you can use javascript, there are some jQuery plugins which do that, you could try Isotope
After a while thinking about this, I think I could use more brain power.
Imagine the following UI (courtesy of StackOverflow):
Note that the red lines are 'guides'. Imagine that they are <div/> boundaries.
What I want is that when a lot of text is added to the input box, enough to overflow, the input box should 'pop out' and overlay/autosize to the left, like the image below:
This is somewhat similar to how Stackoverflow's works, except that it resizes according to content. Also, similarly to stackoverflow, it need to retract when the input box looses focus.
Usually, I'd come to SO prepared with some code, but this time, it's a bit difficult.
What exactly should I use to 'fix' the input box to the right?
How do I find the internal/content width of the input box?
Note that I'm using a monospaced font, so this might be easier...
Well, I've found the answer....or uhm...created the solution.
It can be found here.
In short, it is mainly a lot of events and a 'fake' input box with absolute positioning.
I have a large containing element with around ten DIVs inside - most are about 300px in width on average and are all set to float left. The end result is a widget/grid type layout. However, this style has been specifically built with responsive design in mind - we're using media queries to adjust the size and column count depending on device.
The issue is that we may have one or two boxes that are double-wide or double-tall. The double-wide doesn't really cause a problem with floating (that I can't solve anyway) but the issue is the double-tall. The double-tall would expand into the next row, but prevents other boxes from floating on the left of it. Float-right isn't an option because the tall box can't always be on the right.
I'm trying to find a way to dynamically figure out where each block can float to, like solving a puzzle. I've looked at a few javascripts like Masonry, jLayout, etc but they either don't work, or don't solve the problem of irregular boxes.
So:
I want to avoid absolutely positioning anything because we'd have to re-do that every time, for every element and they won't feel fluid.
I need to allow for double-wide and double-tall, but they may not always be present and eventually, users should be able to determine their location so we can't always just write javascript based on a known location.
I've tried moving around the elements via jQuery which does work, but has to be done on window resize, which is too much activity and results in elements flickering back and forth when you transition over the width that requires three columns to four.
Using css3 columns won't work because the DIVs are treated as text and are broken into two when they pass to the next column, and that doesn't allow for double-wide either.
Does anyone have any ideas or suggestions?
Use Jquery Masonry or Isotope, it'll arrange all the containers into the most space saving arrangement ( or if your using isotope, you can fiddle it around to prioritise other forms of arrangement)
Well, if you don't care too much about the order of your elements, a simple solution would be this:
Add your items to #main so that all .tall widgets are added first. Float .tall widgets to the right.
Likewise, make sure that all .wide widgets are added last and float these to the left.
It works in this case and I think will give you the most optimal use of space for any set of these elements.
I still have not found any real way to handle the situation. For now I've just written some custom javascript to swap around a few DIVs when the page resizes.
How to determine on which row of textarea is the cursor with javascript?
I think it will involve fiddly calculations with font sizes, padding, borders, margins, and line breaks. I expect it'll be hard to get it right in the general case. You could take a look at the source code of the following, which displays an autocomplete dialog as you type in a textarea. It was posted on Ajaxian recently and does what you need to do: http://media.chikuyonok.ru/content-assist/