I am looking for solution method to visualize something similar to this. It should be a table where spans can go over multiple columns.
One should also be able to drag&drop these spans. These spans should reorder themselves correct.
I am not necessarily looking for a code solution, just the solution idea I should proceed with.
This looks mostly likely styling, CSS or Cascading Style Sheets. To achieve what you're looking for can be done pretty easily with Bootstrap 3 http://getbootstrap.com/ . But there are tons of CSS libraries you can use. It's really your preference and how custom you want.
You can also look on GitHub for similar solutions. These solutions show code examples and can give you even more insight on what you may or may not want to do.
Good luck to you
You can set position: relative to the all td's of the table and then position: absolute and a z-index bigger than the td's to the span's, so the spans will be drawn over your td's
Related
I'm trying to create a user experience that looks like this:
Basically, there is a <span> of non-editable text followed by a textarea/input and some other non-editable <span>s. A simple textarea/input poses no problem when the length of the gap is short, but when it's long, the layout gets pretty awkward. I've looked into contentEditable, but I'm not sure if it's what I need (I've also read several posts suggesting it's evil).
Do I have any other options?
Perhaps the contentEditable property can help you. Have a look here https://www.w3schools.com/JSREF/prop_html_contenteditable.asp
There is a tipical example
https://www.w3schools.com/JSREF/tryit.asp?filename=try_dom_body_contenteditable
You may switch on an editable mode for a span or inline div, for instance.
It is not possible to have an input as you're suggesting.
If you are having an issue with the layout at different sizes, perhaps look into media queries with CSS, which will allow you to alter the layout at different viewport sizes.
It might be easier for you to use a framework like bootstrap to help you layout your web page, although in my opinion frameworks like bootstrap can start to interfere with a custom design, but this will only be a problem when you are a little more experienced.
Here's a weird one that I've been wracking my brain on.
I want to do two things, in order:
Generate a masonry-style layout from a list of divs, imgs, or whatever. These will utilize images but they can be background images, within the divs, or some other method that works. This can be pure CSS or a jquery plugin.
Once the grid has been generated, apply a physics based plugin like '.throwable' to the individual divs/objects. The objects will fall on each other, but overall retain their structure, much like you'd see in Angry Birds or something.
The goal here is to paste in a list of divs, let a jquery plugin or even pure CSS automatically figure out how to align them, and then apply gravity to the masonry grid.
The problem I've run into over and over is that the masonry grid is generated... but then when I apply a physics system to it, the individual objects snap back to a different position. I think masonry wants them as "relative" while the physics system wants them in "absolute"? Not sure...
I have a rough version of my latest attempt up here if anyone wants to get an idea of what I'm attempting: http://cssdeck.com/labs/full/f5dm0zv8
Jasper's reply hinted at the solution, although I'm not sure why things seemed to work this time for me. I had tried multiple javascript/jquery based masonry plugins, and nothing had worked. I ended up trying "http://masonry.desandro.com/methods.html" and it ended up working for me. I thought I had tried this one already - maybe not? Anyways, I have a more or less working example here, but new issues have arisen: http://output.jsbin.com/runewidapi/2/
I am working with a joomla plugin that generates some html for a form. The problem I have is with the css.
The script generates several divs of varying height, all of which are stacked into a two column layout. The problem is that since they are all floated left, sometimes a second column tall div can block the next div from floating under the adjacent short first column div. Without further hand waving, here is a jsfiddle
What reasonably browser compatible css can I use to stack the floats correctly? Note that the second column divs have essentially no classes or ids to distinguish them from the first column divs.
Here are things I would preferably avoid:
Non compatible solutions like nth-child()
Changing the script to generate css hooks with the html
Javascript is sort of okay
EDIT: It seems the javascript comment is not prominent enough. As the jsfiddle stands, everything is working correctly. This is what I want the layout to look like. Unfortunately, I cannot use a correctfloat classname on the div, because I am not the one generating it. Remove the correctfloat classname to see what the problem is.
http://masonry.desandro.com/
Is this what you're looking for?
You use this style code in css file
#yourdiv{
float:left;
height:yoursizepx;
width:yoursizepx;
overflow:hidden;
}
using clear: left on the short class solves the issue in the example you've given:
.short{
height:100px;
clear:left;
}
See: http://jsfiddle.net/U5FV9/2/ and
http://jsfiddle.net/U5FV9/3/
However I can't help but feel that it may not solve the issue always, based on the information you've given about dynamically a created form. For example, what if a short element needs to be on the right?
I think a better solution for you would be to have two column containers that are floated and contain your short and tall elements. That way you can always ensure they appear correctly.
Here's an example of how you could implement that:
http://jsfiddle.net/U5FV9/5/
As per Mladen's request, I am posting the approach that worked best for me. I used an unobtrusive javascript library called selectivizr that enables cross browser support for the latest css in, get this, all browsers.
I then proceeded to use:
someclassname:nth-child(2n){
float:right;
}
to align every second column div to the right, without the actual need for a second column container. It is still not a perfect solution, since theoretically it is still possible for divs to pile up on one side, but I haven't seen it happening so far.
Thanks for your help folks.
If I am understanding correctly, have you tried modifying or adding an overflow property on the block?
overflow:hidden;
Sorry if others have asked this question already but I haven't been able to find any good answers yet or I'm phrasing my questions wrong.
Anyway, now I have something like this: http://jsfiddle.net/2nvwU/2/
Which does what it should, but I dont like the vertical gap which is between some blocks.
What could I try to have the same spacing between blocks in all direction with a starting point in the top left corner. Because the blocks will be dynamic. I'm guessing columns is the way to go, but how can I load the blocks in the three columns from left to right?
I would like something like this:
http://www.googleventures.com/
or
http://dynamit.us/
Try Isotope. It is a jQuery plugin and its really good at doing what you want to do.
In case you have elements that should go across two columns, you will sometimes have gaps in the layout with masonry or Isotope. In that case, you might be able to use this simple plug in and change it to your purpose. Otherwise, I agree with Uzair.
Or - you do it "on foot", because the dynamit code is nicely commented and laid out :D
Masonry is an advanced jQuery plugin with various options. Since my knowledge in jQuery is limited, I cannot understand how it works by reading the masonry code. What is the basic jQuery API behind a plugin like this for re-arrangement of DIVs? I mean how we can basically and simply re-arrange DIVs with the aid of jQuery?
NOTE: As discussed in the comments, Masonry was an example for the behavior I am referring to. I want to know how jQuery can basically re-arrange the position of DIVs.
Ok, so let's say you have 3 divs and you just want them arranged on load. Let's say by height. Let's also say for this example that you don't care to animate them, you just want them arranged by height.
Here's the jsfiddle:
http://jsfiddle.net/hMmLd/1/
using jquery I sort the elements by height then re-draw them in their new order on the screen.
I am learning how to do the same thing Ali. If you provide an example of specifically what you want to re-arrange, I can post a better answer. In the meantime, this link has been invaluable:
http://api.jquery.com/category/manipulation/
Also, I found that searching google with the terms 'JQuery DOM manipulation' provided lots of good information and some great tutorials.