I got a div where I place a Java Script generated chart. Also, I got another div where I print out a table with chart data results.
One example is:
However, for UX purposes I prefer the table to be placed on the right side of the chart. Or what's more, making it appear on the right side. (I already use jQuery to do a $("#resultados").remove() and $("body").append("<table...</table>).
How can I make the chart div, which markup is <div id="placeholder" style="width:1200px;height:700px"></div> resize down and make place to another generated div to its right side?
So far, thinking about already marked up divs I tried this but I'm not getting the results I want as:
The table div appears first and I want the opposite.
They don't take together the whole outer div width.
Wrap your table with a right floating div by settting float:"right" in its style.
Make placeholder div to float on left (float:left).
To dynamically change its size, use : $("#placeholder").css({"width":"600px");
Finally , add a clear div (clear:both);
Use class instead of inline css chart.
CSS
.first{
width:1200px;
height:700px;
}
.second{
width:400px;
height:200px;
}
Code
$("#placeholder").appendTo("#anotherPlaceholder").toggleClass("first second");
Related
I implemented a function which is able to show/hide the content of a table row or column with a sliding animation.
What the code does:
Retrieve all cells of the column (th, td)
Wrap the content of each cell in a <div class="wrapper" />
Animate the width of the wrapper div with jQuery.animate();
After finishing, unwrap the cell contents (remove the div)
The reason why I need the wrapping div is because jQuery can't perform a slide animation on table cells directly - see How to Use slideDown (or show) function on a table row?
See this codepen for the code and demonstration. I removed as much JS code as possible to demonstrate my problem. (You can ignore the html and css, they don't contain relevant information)
Everything works perfectly for rows and columns, in except of one (two?) problems:
When a column is shrinked, the content eventually starts wrapping when there's not enough space left. When this happens, the cell height suddenly increases, resulting in an ugly jump.
When a cell content doesn't need the whole space of it's cell, the show-animation for this content is faster, resulting in ugly output.
What I want to achive is a constantly changing width without affecting the layout. The other columns must not be affected.
Any ideas how I can achieve that?
You could nest your div in another div with overflow hidden:
.crop {
overflow:hidden;
width:100px
}
.inner {
min-width:300px;
width:auto;
}
http://jsfiddle.net/mikatalk/7xwLjp2e/
I need help sizing the post-title div correctly at the following link. If you scale the result panel so that it is narrower, eventually the title will overlap the date. Rather than overlapping as shown here:
I would prefer that the title wrap onto a new line to avoid this collision. optimally, I would like it to also make use of the area above the the date like so:
Currently, the title will wrap once it reaches the end of the containing post div, as shown by the blue line beneath the title.
I have included a JSFiddle for you to test with.
http://jsfiddle.net/sph74/
You can use float: right on the date to get close to what you want. No more absolute positioning:
http://jsfiddle.net/sph74/1/
This is done via float: right (and that alone on the date). The .post-title element has to be display: inline or inline-block You could also use float: left, but that makes things a lot more hectic.
You also need to properly clear after the .post-heading element which I have done the old fashioned way via overflow: hidden.
I am a very new (see: about a week) CSS user trying to do something that I think is pretty simple. I'm trying to (in a paragraph of text) post an image that is a help icon, that will display more information when you hover over it.
I'm having a bit of a problem with getting my divs to align correctly. I'd like the div containing the picture to only trigger when you hover over the help icon itself, not the entire line it's on. On my code (although not exactly in jsfiddle), I can do this with positioning it absolutely, however this causes the text below it to be overlapped when you use the hover. If I position it any other way, it doesn't overlap, but it isn't fit to the picture. It's back to only working on the entire line.
Is there a way to both fit a div to its contents (a small ~25x25 help icon) and then cause the hover below to not overlap what's under it? I'm trying to keep it on just css.
http://jsfiddle.net/YbGE6/ <--- Very basic jsfiddle format.
<div id = "Big">
<div id = "one"> "Hover" <div id="two"> "Hover text" </div></div></div>
Change the CSS for the div with the help icon to include display: inline-block;, which will cause it to fit its contents. div is by default display: block; which stretches across the entire line. Do not position the div absolutely, use the default static position, and have it float to wherever you want. The text will flow around it, and when the size of the help div changes on hover, it will push the text aside and the text will reflow around it.
Here is some documentation for float: https://developer.mozilla.org/en-US/docs/Web/CSS/float
I'm working with a embedded custom page used in a system the uses javascript to load html and display.
I have created a basic testing example to work out some bugs with two DIV elements. One is displayed with text and contains a mouse over and mouse out function call.
The functions are processed against the second div which should then be displayed to provide additional information.
When the second div is displayed though, it is being displayed behind the other elements in the page. I tried giving it a high z-index value thorough a css rule but it is still appearing behind other items.
Any suggestions appreciated.
Code:
So my CSS for the "hidden" div that i want to display onmouse...() is:
.description{ display:none; position:absolute; border:5px solid black; background-color: yellow; padding: 5px; z-index:10000;}
and my js. function is:
function ShowContent(d) { var dd = document.getElementById(d); dd.style.display = "block"; };
The vertical axis position of the element depends on several factors. One of them being the stack level value for a particular stack context (z-index)
To apply a z-index property your element must be positioned.
But its much more than that playing the game. Which are the display and position value of the surrounding elements, including the anestor of your div?
May be you are applying a z-index value to an element participating in other stacking context !
And their display value? Are you using the default block values or is there an inline level box ?
Are any floting element in the neighbourg ?
Show your HTML and css and I will give you a more precise answer.
Maybe what I am trying to accomplish is not feasible but the general idea is that when a person clicks a table row, the page dims (like a modal) but leaves that row visible for editing. I tried setting the z-index of the table row itself but it did not work. It will work if I set the table rows position attribute to absolute but that seems to remove the table row from the table completely.
I can only think of more complicated solutions like these:
You'll need 3 transparent gray divs instead of 1. Use the first to gray out the whole page. Set the z-index of the whole table to bring it above that div. Use the 2nd div to gray out everything above your row, and the third to gray out everything below your row, leaving just your row un-grayed.
Gray out the whole page. Create a duplicate table with a single row that you hover above the original table. When you edit this new table, sync those values with the underlying table.
I've successfully done this just now using
div.milk { position:absolute; z-index:2; width:100%; height:100%; opacity:.5; }
tr.raised { position:relative; z-index:3; }
so, in short, position:relative seems to work ?
I must admit, I came here because I still have some weird issues.
but overall it seems to work ?
*-pike
If you're using jQuery, try this:
$("<get the tr>").css("z-index", <value>);
i don't think you'll be able to accomplish your desired effect with z-index. using overlay divs to mask everything around the table row seems like a more workable approach.