I have an HTML page with the following divs that are being filled with a chart using Highcharts.
By default one of them is hidden and is then displayed based on selections on the page.
When I show the div programmatically it only takes a small part of the screen width but when I show it by default, i.e. without the CSS hiding then it takes the full screen width (which is what I want).
Can someone tell me how I can set the divs to keep full screen width or how to reset this after being shown ?
My divs:
<div id="containerR" style="height:600px; margin:0 auto; min-width:300px;"></div>
<div id="containerC" style="height:600px; margin:0 auto; min-width:300px; display:none"></div>
My JS function:
$('#viewC').on('click', function() {
$('#viewR').removeClass('btn-primary');
$('#viewC').addClass('btn-primary');
$('#containerR').hide();
$('#containerC').show();
});
Many thanks in advance for any help with this, Tim.
Problem is highChart probably draws according to available space, but if its hidden it messes up its calculation. Even if you show it later and set the width, the chart has already been drawn with the other size.
You need to unhide it when you draw the chart, and after that you can hide it again
Related
For instance, I have 10 left-float divs which take 20% of the container width with an aspect ratio of 1:1 (made using jQuery):
width: 20%;
float: left;
http://i1214.photobucket.com/albums/cc494/Golitan11/example1_zps7a24eb88.png
Now, when I click one of them, they take 40% of the container width (without losing the aspect ratio of 1:1) and the image is changed to a Soundcloud iFrame. In this example, I clicked the second one:
http://i1214.photobucket.com/albums/cc494/Golitan11/example2_zps9b7a9f48.png
The problem is, as you can see, the floating. In fact, I would like to fill the hole on the left. I tried using a table instead of divs, but in this situation, it makes it too hard to move the s to other (even with jQuery) when the clicked is getting colspan/rowspan. Any idea?
Thanks!
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");
Im trying to make a header with three sections. (all section are lined up horizontally) I want the middle section to adjust depending on the size of the content (text) within it. When I adjust this middle size, I want the other two to adjust accordingly so that the three sections always take up the full width of the site and stay even. my site width is 1000px, this is how I have it set up
< div .side_header> < div #header> < div .side_header>
I want to make a script that says something along the lines of:
"the width of .side_header equals (1000px minus the width of #header)*.5"
This is what I wrote but my syntax is off:
<script>
$(document).ready(function () {
$(".side_header").css("width", "$("#header_text").css("width") * .5");
})
</script>
css:
#title{
}
.side_header{
display:inline-block;
background-color:#999;
}
#header_text{
display:inline-block;
background-color:#3FF;
}
html:
<div id="title">
<div class="side_header"> </div>
<div id="header_text"> Header text</div>
<div class="side_header"> </div>
</div>
RESOLUTION:
Using javascript to make dependent values can be troublesome and can result in errors easily. It is better to use a css perpricessor like .less or .sass
You are trying to set the width to a string. Try
<script>
$(document).ready(function () {
$(".side_header").css("width", ($(document).css("width") - $("#header_text").css("width")) * .5);
})
</script>
Didn't get what you exactly want to do but just keep in mind that $.css("width") returns the CSS width of an element and not the actual width of it. So if you are trying to set the sidebars width as to occupy the rest of the page width available to them you should use $.width() to read the middle div width.
$(".side_header").css("width",((1000 - $("#header_text").width())/2) + 'px');
It is even better to use .outerWidth() as CSS wise they can be different. You can find docs about them on the following pages:
http://api.jquery.com/width/
http://api.jquery.com/outerwidth/
But after all if you want to position some div horizontally this is not a really good strategy. the width() method also works somehow not satisfactory as your CSS styling might be in a way that affects the middle div width itself. Using solid percentage width is more stable than using JS to achieve this.
Similar question, without a great answer:
How can I include the width of "overflow: auto;" scrollbars in a dynamically sized absolute div?
I have a <div> of fixed height that acts as a menu of buttons of uniform width. Users can add/remove buttons from the menu. When there are more buttons than can fit vertically in the <div>, I want it to become scrollable - so I'm using overflow-y:auto, which indeed adds a scrollbar when the content is too large in y. Unfortunately, when the scrollbar shows up it overlaps the menu buttons, and adds a horizontal scroll bar as a result - the big problem is it just looks horrible.
Is there a "right" way to fix this? I'd love to learn some style trick to make it work right (i.e. the scrollbar sits outside the div rather than inside, or the div automatically expands to accommodate the scroll bar when necessary). If javascript is necessary, that's fine - I'm already using jQuery - in that case, what are the right events are to detect the scrollbar being added/removed, and how do I make sure to use the correct width in a cross-browser/cross-style way?
JSFiddle: http://jsfiddle.net/vAsdJ/
HTML:
<button type="button" id="add">Add a button!</button>
<div id="menu">
</div>
CSS:
#menu{
background:grey;
height:150px;
overflow-y:auto;
float:left;
}
Script:
$('#add').button().click(function(){
var d = $('<div/>');
var b = $('<button type="button">Test</button>');
d.appendTo($('#menu'));
b.button().appendTo(d);
});
First: To remove the horizontal scrollbar set overflow-x: hidden; as Trent Stewart has already mentioned in another answer.
CSS Approach:
One thing I have done in the past is to add a wider wrapping div around the content div to make room for the scrollbar. This, however, only works if your container width is fixed... and may need to be adjusted (by serving different styles) in various browsers due to variable rendering of scrollbars.
Here a jsfiddle for your case. Note the new wrapper <div id="menu-wrap"> and its fixed width width: 95px;. In this case the wrapper div is doing the scrolling.
You could probably also solve this by giving the wrapper some padding on the right, and thereby avoid the fixed width problem.
jQuery Approach:
Another option is to detect the overflow using jquery as described here, and then increasing the width or padding of the div to make space. You may still have to make browser-specific adjustments though.
Here a jsfiddle with a simplified version for your example. This uses your click function to check the div height after every click, and then adds some padding to make room for the scrollbar; a basic comparison between innerHeight and scrollHeight:
if($('#menu').innerHeight() < $('#menu')[0].scrollHeight){
$('#menu').css( "padding", "0 15px 0 0" );
}
To make this more cross-browser friendly you could check for the scrollbar width (as outlined here) and then add the returned value instead of the fixed padding. Here another jsfiddle to demonstrate.
There are probably many other methods, but this is how I would go about it.
Have you tried simply using overflow-x: visible; or hidden
On the site there are several pie charts. All diagrams are created immediately after the page loads. At the moment of creation, part of the diagrams is hidden (the parent layer display: none)
Visible charts are set correctly, hidden charts have parameter is incorrect width.
The layer of the diagram
<div id="DGramm" style="width: 100%;"> </ div>
The result - the diagram created on the entire width of the page, but no of the width of the parent layer. How to do the right, to take the width of the hidden layer?
At this point, all that came up - to create a chart after the first showing of the hidden layer.
You could trigger the window.resize event to update the Chart size. Add this script to your page.
$(document).ready(function () {
$(window).trigger('resize');
});
See the answer here. Thanks, david.