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
Related
Alright, so the title may not be the best way to describe what i am trying to do, but i am not sure quite how to phrase it.
To start of (when the page loads) there are 20 'tiles' which serve as buttons on a page. They are divs. The 5 on top are larger and the rest of the rows are the same size.
Once one of the buttons is clicked, i want a div to show under the row of the button that is clicked. I know how to do this part using jquery toggle. Here is an example of what i will want it to look like once a button is clicked.
You can see in the drawing how i want it to sort of look like a tab once it is clicked. I am having trouble thinking of how i am going to add the part that ties the button div into the div that is toggled in the middle of the rows. This part:
I sort of thought that i could make 5 images, one for each column of buttons, that has that little part of background color, and toggle the image as well. I believe that there is a better way to do this so i am looking for a steer in the right direction. I have had some trouble searching for something like this as I dont really know what to call it so i thought i would come here for help. Thanks!
I would increase the height of the tile when it is clicked (so that it expands down from the upper red line to the lower red line shown in the last image).
It can all be done just with CSS (using the checkbox hack in the same way I made this div to increase its height) or with JavaScript (if you want reliable behaviour for IE8 and especially IE7).
Like this fiddle :
http://jsfiddle.net/techunter/ph8vY/
I'm trying to make sortable blocks with various heights using JQuery .sortable().
But if you try to move the big block to the right then one of small boxes moves to bottom and leaves blank place.
And when I set float: right to parent div instead of float: left I can't drag the big block to the left correctly.
I understand why it happens and how the float works but I can't find a workaround.
jsFiddle sample
UPDATE:
Here is complete picture of what I'm trying to do. All I want is to be able to create this structure from blank page using only 6 sizes of width, resizable height and sortable items.
Now works I originally had an almost working model using a second wrapping div around the short items. The bug is in my FF Win 7 (seemed okay in IE9) which sees a slight height difference between the large block and the group of blocks, so a lower float "hits" one to the upper left (if it is a large block) and does not go left. When I look in Firebug, FF is showing the computed border to be not 1px, but 0.916667px, so I don't know if that is the problem (fixed now below).
See http://jsfiddle.net/tnLcg/47/. I had originally enabled the ability to sort between short holders, but I think the correct functionality would be to make such a move a swap. Perhaps http://www.eslinstructor.net/demo/swappable/swappable_home.html might be implemented to work between the short holder stacks.
EDIT--Firefox fixed: I kept the short holder border but set it to transparent (so it calculates the same as the double height box) then used relative positioning of the elements inside to adjust for that and it works in FF now for me: EDIT: Improved version (4 column) http://jsfiddle.net/tnLcg/99/.
You could try jQuery Masonry for that sort of layout (if I understood your question right).
If you want the two halves to be able to move independently, split them into 2 columns, then use the connectWith option to make them draggable between the two:
http://jsfiddle.net/ujahd/
If you want the two halves to stay grouped together, then group them into one div:
http://jsfiddle.net/W5VzD/1/
There also this tutorial if you were interested in reading up on it. Hope you found your answer.
edit: it's not jquery though.
I'm trying to create a editable textbox with HTML/CSS/Javascript that looks and functions like a printed textbox with lines appearing every row.
It must look like this because the form may be printed on paper for people to write in.
I see three approaches to this method:
Table row with 'border-bottom' on each row and using javascript to determine when the text-overflows and move the cursor to the input box on the next row when it does.
This method is probably not very accurate.
Drawing absolute-positioned lines beneath the div/textarea that contains the text.
Using CSS3 repeating gradients to draw the lines behind the div/textarea. Like so: http://net.tutsplus.com/tutorials/html-css-techniques/lets-create-paper-with-css/
. This method is only compatible with modern browsers though.
Which method is the best and why?
Here’s one option. You need a div to draw each line, that could be done beforehand or with JavaScript.
In short, set an explicit line height on your textarea, then absolutely position a container element behind it. Inside that container put a set of elements with a height equal to the line height of the textarea, a one-pixel bottom border, and a negative-one-pixel bottom margin.
It’s most similar to your #2 but a little simpler.
The CSS3 method is best I think. As a fallback for browser that don't support it, you could put a background image of a line there, repeat it both horizontally and vertically, and use CSS to set the font size and line height so the typing aligns with the background image lines.
Well, the CSS3 method would at least let you use relative sizing like ems so people who've resized their fonts will still be ok. If it's not available in older browsers, I don't think that's hugely important, as it's an enhancement to make things easier if people print, rather than something that is essential to people interacting with the textarea.
Absolutely positioned lines might get un-aligned if the user resizes their browser/fonts/etc, although I haven't tested this to confirm. The Javascript seems like overkill for what is just a decorative effect unless the page is printed. And I'm not sure if you can even put tables inside a text-area, although again I haven't tested that.
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.
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.