I want to have a chart that resizes with the browser window, but the problem is that the height is fixed to 400px. This JSFiddle example has the same problem.
How can I do that? I tried using the chart.events.redraw event handler to resize the chart (using .setSize), but I guess it starts a never-ending loop (fire event handler, which calls setSize, which fires another event handler, etc.).
Just don't set the height property in HighCharts and it will handle it dynamically for you so long as you set a height on the chart's containing element. It can be a fixed number or a even a percent if position is absolute.
Highcharts docs:
By default the height is calculated from the offset height of the
containing element
Example: http://jsfiddle.net/wkkAd/149/
#container {
height:100%;
width:100%;
position:absolute;
}
What if you hooked the window resize event:
$(window).resize(function()
{
chart.setSize(
$(document).width(),
$(document).height()/2,
false
);
});
See example fiddle here.
Highcharts API Reference : setSize().
When using percentage, the height it relative to the width and will dynamically change along with it:
chart: {
height: (9 / 16 * 100) + '%' // 16:9 ratio
},
JSFiddle Highcharts with percentage height
Remove the height will fix your problem because highchart is responsive by design if you adjust your screen it will also re-size.
Alternatively, you can directly use javascript's window.onresize
As example, my code (using scriptaculos) is :
window.onresize = function (){
var w = $("form").getWidth() + "px";
$('gfx').setStyle( { width : w } );
}
Where form is an html form on my webpage and gfx the highchart graphics.
Another good option is, to pass a renderTo HTML reference.
If it is a string, the element by that id is used.
Otherwise you can do:
chart: {
renderTo: document.getElementById('container')
},
or with jquery:
chart: {
renderTo: $('#container')[0]
},
Further information can be found here:
https://api.highcharts.com/highstock/chart.renderTo
I had the same problem and I fixed it with:
<div id="container" style="width: 100%; height: 100%; position:absolute"></div>
The chart fits perfect to the browser even if I resize it. You can change the percentage according to your needs.
Related
Is there any option to use gridstack.js with each grid-stack-item height based on inner content like image.
In my scenario each images having different height so it's not showing correctly on card.
It gives scrollbar inside grid-stack-item to view image, that is wrong.
Any option or workaround or other JS plugin/library that will restrict fixed height based on any factor.
Current behavior
Expected behavior
Height will be 100% based on width so image aspect ratio preserves.
I managed to do by setting up cellHeight : 10 then get image in resizestop event and update updateWidget.
Below is sample code for that resizestop event.
$('.grid-stack').on('resizestop', function (e, item) {
let stackItem = me.findGridStackItem(item.element.find('img').data('Id'));
if (stackItem) {
setTimeout(() => {
stackItem.option.height = Math.ceil(($(stackItem.nativeElement).find('img').height() + 5) / 10);
me.gridStackMain.updateWidget(stackItem);
}, 200);
}
});
the problem you are facing is about creating "masonry layout". I think gridstack is not the tool you need to use to resolve this problem. Try https://masonry.desandro.com/ or any other masonry layout lib.
I'm using flot library to plot some data. Flot uses height and width property of that div to draw the data plot like so
<div id="graph" style="width: 300px; height: 300px;"></div>
I would like to make this graph(div) clickable which expands to a bigger size say 500*500. Which means the width and height of the plot should be 500*500 but should be first visible in 300*300. Upon clicking, it should expand and reveal its original size. I guess setting initial height and width is required for flot to work. How can I achieve this ?
Techniques that I've tried :
1) Using jquery toggle which takes the parent class and animates its height and width like this
$(this).parent().animate({'height': '500px'},{'width': '500px'});
You can use your code to expand the graph but you also have to redraw it with the new size.
With this code you can redraw the graph after the expanding has finished:
$('#graph').on('click', function () {
$(this).animate({
'height': '600px',
'width': '600px'
}, function () {
plot.resize();
plot.setupGrid();
plot.draw();
});
})
for animation try like this:
$('#graph').animate({'height': '500px','width': '500px'});
demo
for click + animation:
$('#graph').on('click', function(){
$(this).animate({'height': '500px','width': '500px'});
})
Demo
I want to create div which would behave in a following way:
it would always resize his height to 100% of browser window height.
it will adjust his width to maintain constant proportions (so that his width would be allays equal to 3/5 of his height for an instance)
There are some examples here which do opposite thing - maintain width at some fixed % value of browser window size, and adjust height accordingly but its not what i need.
Try the below jQuery:
$(window).resize(function(){
$('#resizable').width($('#resizable').height()*3/5);
});
$(window).trigger('resize');
Demo:
$(window).resize(function(){
$('#resizable').width($('#resizable').height()*3/5);
});
$(window).trigger('resize');
html,body,#resizable{
height:100%;
}
#resizable{
border:1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="resizable"></div>
I use jquery here:
window.onresize = function() {
var el_height = $(element).height(window.innerHeight);
$(element).width((el_height*3)/5);
}
What you could do is get the height of the browser window with jQuery and set the width of the div accordingly.
function changeDivSize(){
var wHeight = $(window).height();
var newDivWidth = height * 0.6;
$("#divId").height(wHeight);
$("#divId").width(newDivWidth);
};
$(document).ready(changeDivSize);
$(window).resize(changeDivSize);
i was going to support Nocky Tellekamp's answer but it misses couple of things :
first, in order to get window Hieght in cross browser you need to use $(window).innerHeight();
Proper code view :
$(document).ready(function() {
var WindowHeight = $(window).innerHeight(); //$(window).height() not working in I.E and part of other wierd browsers not based on mozila engine
$("#divId").css { //proper and more orgenized code view of css changing
hieght : WindowHeight,
width : WindowHieght * 0.6
};
});
you dont have to call method on window.resize (causes very bad performance issue if bigger algorithem involved), if it does bother's you, i would suggest to use different css properties such as clear:both when setting the div so actually it will spread on the entire window height and width.
At the moment, I can set width attribute to auto to take the full width of the window, and it dynamically adjust itself if the window size is being changed (e.g. re-sizing the browser windows or displaying it on a different screen size). Example: http://jsfiddle.net/NnsN2/
However, I can't get the height to work the same. It will always be the minimum height that will fit the content, even though I've tried setting it to auto.
The usual approach of getting the window height first ($(window).height()) and use that for height doesn't work here, because it will be static and will not dynamically adapt to change of window size.
How can I make the height always take the full height of the window as well as be able to adapt itself to window size change?
You can try to get the element's #id or .class at runtime and then make the width/Height according to the window width and height:
$(window).resize(function () {
$('.ui-dialog').css({
'width': $(window).width(),
'height': $(window).height(),
'left': '0px',
'top':'0px'
});
}).resize(); //<---- resizes on page ready
checkout in fiddle
Here is how I was able to "solve" this problem for jQuery UI Ver 1.8.17:
After the dialogue has been opened, and assuming that you have captured its id, use the following:
$("#DlgID").parent().css('height', $(window).height());
The actual height is dictated by the parent of your <div> containing the dialogue content, hence the reference. You can also use this method to control other properties of the parent.
Happy coding!
You can use jquery plugin :
$("#demo").dialog({
width: 500,
height: 300,
dialogClass: "dialog-full-mode" /*must to add this class name*/
});
//initiate the plugin
$(document).dialogfullmode();
i am initially centering div horizontally using jquery but when the window is resized it looks bad so what i want to do is keep it centered using jquery after the window is resized
is there a way to help?
EDIT
guys i have successfully made other elements centered but i am having another issue now :(
please check this
http://hrmanagementbradford.com/gallery/
and resize the window, you will see that the content doesn't get positioned correctly, i am trying to fix this for hours but can't find the solution please help with that
EDIT
solved! it was complex and my code is very specific so posting it here won't help :)
and
although i used jquery to center it but if we use the css thing then FutureKode's answer is best suited for me :)
Why are you using jquery to center horizontally when css can do it one line and it will stay in the center when the browser is resized:
div {
margin:0 auto;
width:800px
}
You can make it dead-centered like this:
$('#elementID').css({
position:'absolute',
top:'50%',
left:'50%',
width:'600px', // adjust width
height:'300px', // adjust height
zIndex:1000,
marginTop:'-150px' // half of height
marginLeft:'-300px' // half of width
});
Note that element will appear at the center but with scrolling it won't move. If you want to make it appear at center, you need to set position to fixed instead. However, this won't work in IE6. So decision is yours :)
You can also create quick simple jQuery plugin:
(function($){
$.fn.centerIt = function(settings){
var opts = $.extend({}, $.fn.centerIt.defaults, settings);
return this.each(function(settings){
var options = $.extend({}, opts, $(this).data());
var $this = $(this);
$this.css({
position:options.position,
top:'50%',
left:'50%',
width:options.width, // adjust width
height:options.height, // adjust height
zIndex:1000,
marginTop:parseInt((options.height / 2), 10) + 'px' // half of height
marginLeft:parseInt((options.width / 2), 10) + 'px' // half of height
});
});
}
// plugin defaults - added as a property on our plugin function
$.fn.centerIt.defaults = {
width: '600px',
height: '600px',
position:'absolute'
}
})(jQuery);
And later use it like:
$('#elementId').centerIt({width:'400px', height:'200px'});
To center it when window is resized, you would use resize event just in case it does not center like this:
$(window).resize(function(){
$('#elementId').centerIt({width:'400px', height:'200px'});
});
You can use
margin: 0 auto;
to centre a block element horizontally in CSS.
Like so:
div
{
width: 400px;
margin: 0 auto;
}
do this:
$(window).resize(function(){
// reposition div again here
})