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
Related
Here is the the framework I have:
....
var showChart = new showChartView({
el: this.$el.find("#my-chart-div");
// Other parameters passed in to build the chart
});
showChart.render();
The above view renders a chart graph on the browser.
The css for the div above looks like:
my-chart-div
{
height: 100,
width: 300
}
The html:
<div id="my-chart-div"></div>
What I want to do is that when I hover over the div (my-chart-div), there should be an overlaying chart rendered in a bigger size (rendered as an instance of the same view above - ShowChartView but with larger width and height), so the css of that would look something like:
overlay-chart-div
{
height: 200,
width: 500
}
Any ideas?
So you just want a slightly bigger chart when you hover over it?
If that is the case this should work perfectly for you:
#my-chart-div:hover {
transform: scale(1.1) translate(4%, 4%);
}
For bigger just up the scale() to 1.2.
You can use the mouse events(mouseenter, mouseleave) to perform this:
events: {
'mouseenter #my-chart-div' : 'show_overlay',
'mouseleave #' : 'hide_overlay',
},
show_overlay: function(event){
// show the overlay div, load/copy bigger chart...
},
hide_overlay: function(event){
// restore it here or simply call the render function
},
Regarding the overlay content, you can always use the same content or copy it from my-chart-div (jquery detach() function), or if the chart needs to be preloaded with the new dimensions, you just call the chart rendering function in the overlay element
So, for making the element "my-chart-div" 1.1 times larger on hover, simply add the following code to the css for the element:
#my-chart-div:hover {
transform: scale(1.1);
}
Above solution works to resolve the issue.
I have a DIV with content that is inserted dynamically using jQuery. I want that div to appear as if it was enlarged from size 0px to the size it suppose to take when the div is rendered with its content.
The content is text, so I have no information about the size it will take when it is appended to the document. I know how to animate the div using jQuery Animate when I know the final size, but don't know how to do it when I don't know it.
if I use width: "+=10" for example, I get a div that is larger than the one that I get without animating. Thanks.
Insert your item, save the width and the height, and then set the width and the height of the item to zero. This will happen too quickly to be visible, and you'll have the final width and height values you need for animation.
Live Demo
var $div = $('<div>', {
text: <your text>
});
// <append your element>
var width = $div.width();
var height = $div.height();
$div.css({
width: 0,
height: 0
});
$div.animate({
width: width,
height: height
}, {
duration: 'slow',
easing: 'linear'
});
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.
I have a list of items, and each one has a Bootstrap popover associated with it (docs here). They are initiated like this:
$('#my_list li').popover({
placement: 'left'
});
This works, but at small widths the popover is lost from the viewport. I'd like to make the placement conditional based on $(document).width();, however I can't see a way to over-ride the initial options (e.g. at at width of around 1000px, switch the placement to 'above').
I've put together a simplified version at jsfiddle here. Many thanks.
placement can also take a function as its value. In this function you can return the appropriate value based on width of viewport. For eg.
$(document).ready(function(){
$('#my_list li').popover({
placement: wheretoplace
});
});
function wheretoplace(){
var width = window.innerWidth;
if (width<500) return 'bottom';
return 'left';
}
Its change placement from left to top on window smaller than 768
placement: function(){return $(window).width()>768 ? "auto left":"auto top";}
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
})