My situation -
Within a 4x4 table grid (16 cells total), I'm trying to display up to 7 divs in their own individual cell (whichever div is visible, have it be in its own cell - 1 div per cell).
What I need/My Question -
If divs "Test1", "Test3", "Test6" fade in, then have these divs display on a 3 different cells,..if 6 divs come in, 6 different cells, etc..
Note: The numbers appended after "Test" (Test0, Test1, etc.) are all being auto-generated and is actually 18 digits long (e.g., 123456789012345678), so I will never know the actual number. I was thinking of using the below function to find all the div id's containing "Test", place those results in the an array, and then somehow pull each result and append it to a random cell. But I'm not exactly sure how to go about it... :
$("div[id^='Test']").each(function(n, i) {
var id = this.id;
});
My main question - How can I display currently visible divs on their own cell?
What I have tried -
My work in progress : http://jsfiddle.net/xVDm9/
Edit: I commented out the black reappearing div out of the code as this might have been confusing and did not really make a case.
I'm not quite sure what you're trying to build. Hoewever, wouldn't it be easier to give all tablecells a div? And then fade those in and out? It would be faster than manipulating the DOM each time you want to show/hide a div.
This way, you could use the :visible selector to test if the selected div is already visible. If it is, fadeIn the next one.
Also, in some browsers, dynamically appending/mutating the table itself causes issues. Besides that, I'd recommend not using a table, but the following structure (it's easier to traverse and more scalable):
<div style="width: 400px;">
<div class="tcell">
<div id="yourUniqueID">
</div>
</div>
<!-- ...repeat the div.tcell as often as you need -->
</div>
and style it like so:
.tcell{
float: left;
height: 100px;
width: 33.33%; /* that's for 3 on a row, use whatever value you need */
}
.tcell > div{
display: none; /* hide by default, since you'll be using jQuery to fadeIn/Out */
width: 100%;
height: 100%;
background: #000;
}
Related
I have three buttons that set different output text when clicked and I'm trying to use W3.CSS animations to "slide" the text in and out. I almost have it working using two separate divs but cannot get them to align correctly under the buttons; the div for every other button click displays lower than the previous one.
I've tried float, vertical-align: top, display: inline-block, and a few other things so far but either used them incorrectly or something else (a conflicting parent div style, maybe?) is causing problems.
Image with a button's output displaying right under the buttons (as it should)
Image with the next button's output displaying lower than the first
I trimmed code that wasn't relevant while also leaving what was necessary to show the div structure for this particular section.
HTML: The divs with IDs old_output and new_output are what I'm trying to align below the buttons
CSS: div.button_output_container and div.button_output are used for the output divs and their container
JS: Handles button clicks, decides which animation should be used, and sets the output text (aside from demonstrating the issue I think it's mostly irrelevant)
JSFiddle link
I am not sure I totally understand your alignment requirement,
but if you just want your divs to render on the same height, you could opt for position:absolute like so:
div.button_output_container {
position: relative;
}
div.button_output {
margin: 16px 24px;
width: 450px;
position: absolute;
}
I am working on a memory matching game. Right now, when the user clicks on two identical images, they are removed. This part of the game works fine. When the images are removed, I want the other images to stay in place. However, they are shifting towards each other and not leaving space.
Demo: http://jsfiddle.net/kevinferri/bCP4G/
For example, click on the two flowers in the middle column. You will see that the the two outer columns will shift towards each other and fill that empty space. How can I change it so the images will stay in place after others are removed?
You probably don't want to be .remove()-ing elements if you want to the DOM to remember their original layout spacing and sizes. You want to just chuck those elements into hidden visibility so that they're hidden, but they maintain their size and position.
$(element).css('visibility', 'hidden');
That's visibility:hidden in CSS. Do take note of the difference between that and .show() / .hide() or even CSS display:none.
You'll want to give your tds some fixed sizes:
<style>
#playCards td { width: 200px; height: 200px; margin: 0; padding: 0 }
</style>
I have a table where users input data into columns. Each time the user enters data a new column is created. After a while they have a TON of columns and I need them to wrap.
I know how to wrap the text inside the columns, but I need the entire column to wrap below the first column and so on.
You shouldn't use tables for this.
You should use divs with "float: left" CSS style.
Here is a working example: http://jsfiddle.net/3MEJ5/
Instead of using table columns, try having each input data be a table on its own, wrapped inside a <div class="datainput">, using the following CSS:
.datainput {display: inline-block; vertical-align: top;}
Now, instead of adding a new column, duplicate the container. This will place it next to the existing ones, and wrap if/when needed.
Should it fail to wrap, apply this CSS to the element containing all these containers:
word-break: break-all;
it is actually not simple. The table/row/column structure is quite rigid. To achieve what you describe, you have to create each cell as a single-celled table in a giant outer cell. Then they will wrap. But then, they may not align well.
A good solution for this now is to use CSS3 Columns.
You can set the CSS properties on the container and the children will flow down and across.
You have the options:
div {
/* Make columns with a min width of 100px, create multiple columns as space permits */
column-width: 100px;
column-count: 3; /* Divide the text in a <div> element into three columns */
column-gap: 40px; /* Specify a 40 pixels gap between the columns */
/* Specify the width, style, and color of the rule between columns */
column-rule: 4px double #ff00ff;
}
For more details see: https://www.w3schools.com/cssref/css3_pr_columns.asp
For browser support see: https://caniuse.com/#search=css3%20columns
I am making a horizontal content slider, and need to put an arbitrary number of equally-sized elements in a row inside the slider div, so i can shift the slider div back and forth and display one element at a time on the page. These elements could be anything: divs, imgs, whatever.
Currently I am floating all the elements, and in order to prevent them from dropping onto the next row, using javascript to sum up the widths of all the elements on page load and manually fix the width of the slider in order to fit all of them.
Naturally I do not want to do this. I have looked at the CSS Flexible Box Model and it seems it would do what i need, but it does not appear very often outside of the W3C specification and i'm not sure how well supported it is. Does anyone have any experience using it? Apart from that, is there any other non-javascript way of lining up a bunch of divs side by side and having the parent expand laterally to fit?
Flexbox isn't really standardised or widely-supported enough to use yet. It's supported in newer browsers including IE10, but it's likely to be a long time before that's your baseline.
There are some ways to work around it. For example you can use white-space: nowrap to make inline children not fall down to the next line, in combination with float: left to make the parent shrink-wrap its width around the children. Then if you want the children to be stackable blocks you could use tables or inline blocks:
#slider { white-space: nowrap; float: left; border: dotted blue 1px;}
#slider .box { display: inline-block; width: 100px; border: dotted red 1px; }
<div id="slider">
<span class="box">foo</span
><span class="box">bar</span
><span class="box">bof</span
><span class="box">zot</span
>...
</div>
(Using <span> is needed for inline-block in IE7, and the odd > placement is to prevent unwanted whitespace between the boxes.)
As you may have seen, every browser may render things differently, but if you apply the style display:inline; to the elements in the slider, and width:auto; to the container element, they should not wrap.
I have a page with 3 columns of links at the bottom. Each column is put into a div and all three divs are wrapped into a big div that is centered on the page. Is this something that is better suited to a table or is a table the wrong element for the job?
You can also use <ul> & <li> for this.
#horizontal {
width: 100%;
background: #eee;
float: left;
}
#horizontal ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}
This will create horizontal columns using li elements, and then you can stuff the HTML to create individual links in each li.
The Rule of Thumb is:
Use Divs for layout, tables for tabular data.
On a side note, check out etymology of the term Rule of Thumb, quite humorous.
the question you want to ask yourself is, are your links a part of any tabular data?
if yes, tables are your choice. If no, then you should use divs.
Its important to use the semantically correect element to create a page, although other elements may result in the same effect, possibly with less effort.
As for your links, it seems they are not part of a table. I'd suggest the use of divs and proper css.
jrh
I don't think tables are a good choice for this. Simply having three columns doesn't constitute tabular data in my book. With some clean markup and a good stylesheet, you can have a much more flexible way to accomplish this. If you use left floated divs, simply give them a percent width so that they fill up the parent container (100 / number of elements)%. That way, if you want to add another column its a simple markup change a single stylesheet change. This way you wont have to deal with browser table wonkyness and have a great deal more flexibility in its design - on top of that you can change the layout completely without leaving your stylesheet.
The main principle behind HTML is to "markup" the MEANING of your data.
I'll use the above principle as a guide:
If you have 3 columns just because it looks nice - then there is no meaning to your columns, and you should try to use DIVs (which are meaningless "container" elements).
If you have 3 columns because there are 3 categories of links, then a TABLE is fine. Imagine if you gave headers to each list of links - this makes a TABLE with a THEAD necessary.
And in fact, each column is an "unordered list" - which translates into a UL element with LI elements.
And since you have a list of links, you will use, of course, A elements.
So from first-principles, you should have this structure:
<DIV> or <TABLE> (with <TR>/<TD>)
-> <UL>
----> <LI>
-------- <A>
Contrary to other answers, a table could be a semantic solution. If the three sections are distinct from each other and have a title, you can use <th> for the titles and <td> for each of the links. I think that's perfectly semantic.