so, I'm trying to make two adjacent divs, such that on mouseover the div on the right is moving left and the div in left is resizing (getting tighter). The div on the left contains text that when div is getting tighter the words in the must go to next line to fit new size, and that's exactly what I want. but the problem is that when words go to next line they just disappear from line and appear in the next. I want them to move to the next line instead of disappearing and appearing, like this:
here is the code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".SideMenu").mouseout(function() {
$(".mainTitleDiv").animate({
width: '900px',
}, {
queue: false,
})
$(".SideMenu").animate({
right: '-500px',
}, {
queue: false,
})
});
});
$(document).ready(function() {
$(".SideMenu").mouseover(function() {
$(".mainTitleDiv").animate({
width: '400px',
}, {
queue: false,
})
$(".SideMenu").animate({
right: '0px',
}, {
queue: false,
})
});
});
</script>
Here are options to achieve Fitting Text to a container
USING CSS vw
<h1>Fit Me</h1>
CSS
#import url('https://fonts.googleapis.com/css?family=Bowlby+One+SC');
h1 {
text-align: center;
font-family: 'Bowlby One SC', cursive;
font-size: 25.5vw;
}
USING jQUERY Library such FitText
Here is a sample after including the library in your HTML file
jQuery("h1").fitText(0.38);
Here are link to other library
textFit
I have created a data entry web application using asp mvc where the user can submit a record of their wellbeing. The data is saved to a SQL database and everything is working fine however, I would like to add a fixed reference point on the jQuery slider itself to show the user their most recent score. Maybe in the form of an additional fixed handle at the corresponding value...however I'm very new to javascript and have tried and failed so far.
Here is a screen shot of my sliders
The numbers at the bottom show the values for the previous entry
I have posted my JS code for the sliders below. Any help would be much appreciated.
$(function() {
var handle = $("#pain-handle");
$("#painSlider").slider({
min: 0,
max: 10,
value: 0,
animate: "fast",
create: function() {
handle.text($(this).slider("value"));
}
}
);
$("#painSlider").slider().slider("pips", {
labels: {
first: "No Symptoms",
last: "Worst Symptoms"
}
}
).on("slidechange", function(e, ui) {
$("#pain-handle").text(ui.value);
}
);
}
);
so it seems like you need to make specific pips visible. Just for information; the slider always has values, but the css hides them. So we just need to make the correct pips visible.
The steps are;
figure out the correct values (suggest to put them as html-data)
add a cssClass to those values
use css to display the correct pips (style accordingly)
Firstly, I've amended your JS a little so that you're using the float plugin for the pips to display the values on the slider handles. It'll be a little more robust than your solution. $(".slider").slider("float"); You can read about it here; https://simeydotme.github.io/jQuery-ui-Slider-Pips/#options-float
the final js code is;
$(function() {
// here we assume 4 sliders all with the same css class
var $sliders = $(".painSlider");
$sliders.each( function(k, el) {
var $slider = $(el);
var previousValue = $slider.data( "previous" );
// handle different labels for best/worst
var firstLabel = $slider.hasClass( "bestWorst" ) ? "Best Imaginable" : "No Symptoms";
var lastLabel = $slider.hasClass( "bestWorst" ) ? "Worst Imaginable" : "Worst Symptoms";
$slider.slider({
min: 0,
max: 10,
value: 0,
animate: "fast"
})
.slider("pips", {
labels: {
first: firstLabel,
last: lastLabel
}
})
.slider("float")
// add a css class to the correct values
// so that we can style them to be shown
.find(".ui-slider-pip")
.eq( previousValue )
.find( ".ui-slider-label" )
.addClass( "previous-value" );
});
});
and then there's a little bit of css to apply;
/* this is the magic to show the value */
.ui-slider-label.previous-value {
display: block;
}
/* these two styles are to show the "float"
labels inside the handle, instead of using
your own custom handle-text. */
.ui-slider-tip {
visibility: visible!important;
opacity: 1!important;
transform: none!important;
position: static!important;
background: transparent!important;
border: none!important;
color: white!important;
margin: auto!important;
width: auto!important;
}
.ui-slider-tip::before,
.ui-slider-tip::after {
display: none!important;
}
the fully, working code, is viewable here; https://jsfiddle.net/vzw53dge/
I try to put Morris js donut chart in the flex container with 2 flex items, I expect that chart in flex: 1 container will resize, but it does not. Does anyone know how to make the chart to be responsive in flex item?
Here is my example example try to resize it
JS:
$(function () {
Morris.Donut({
element: 'container',
resize: true,
data: [
{label: "Download Sales", value: 12},
{label: "In-Store Sales", value: 30},
{label: "Mail-Order Sales", value: 20}
]
});
CSS:
html, body {
height: 100%;
margin: 0;
}
body {
display: -webkit-flex;
}
#container {
flex: 1;
}
.flex1 {
flex: 1;
border: 1px solid red;
}
Add a $(window).on('resize', ...) event handler then call the graphs redraw() function.
If there is a dynamic UI element that causes the layout to "flex" based on user input, you will want to call redraw() there as well as there is no way to directly listen for the resizing of a div.
Here is your fiddle, updated with the fix.
jsFiddle
Also, here is a note from a developer of Morris.js
Note: I suggest you call redraw() sparingly as it's quite an expensive operation. Try using a setTimeout trick or similar to avoid calling it for intermediate resize events.
A way to heed this advice is below:
$(window).on('resize', function() {
if (!window.recentResize) {
window.m.redraw();
window.recentResize = true;
setTimeout(function(){ window.recentResize = false; }, 200);
}
});
Here is a fiddle with this implemented:
jsFiddle
My solution is to listen to resize events. If you have any resize event in the past second, you resize the chart. In this way you can't miss any window resize.
var haveToResizeCharts = false;
$(window).resize(function() {
haveToResizeCharts = true;
});
setInterval(function(){
if(haveToResizeCharts) {
chart1.redraw();
chart2.redraw();
haveToResizeCharts = false;
}
}, 1000);
The answer of thedarklord47 is partially wrong because if you already have an resize in the past 200 miliseconds, the final resize has no effect!
I'm trying to create a pie chart through the use of flot charts. I have successfully managed to create one with the following code:
HTML:
<div class="row">
<div class="col-md-6">
<div id="pie-chart"></div>
</div>
</div>
Javascript:
var data = [];
data[0] = { label: "Vertification successful", data: 9 };
data[1] = { label: "Vertification failed", data: 2 };
var series = Math.floor(Math.random() * 10) + 1;
$.plot($("#pie-chart"), data,
{
series: {
pie: {
show: true,
}
},
grid: { hoverable: true },
});
And it displays just fine.
The thing is, if I change the ID of the div element to "pie-chart1" (rather than "pie-chart")
and update the javascript accordingly:
$.plot($("#pie-chart1"), data,
I get the following error:
Uncaught Invalid dimensions for plot, width = 501, height = 0
What on earth could be causing this? I simply wanna rename the ID which apparently for some reason is impossible.
It's very likely that there is some CSS or possibly JS elsewhere on your site that expects the div to be called pie-chart. You need to ensure that it still applies to the new div. For example, if you had:
#pie-chart {
width: 400px;
height: 300px;
}
When you change the ID of the div, you need to update that reference too, or else the placeholder's height and width become undefined, which Flot cannot handle.
If your goal in adding that number is to create several charts, then you should use a class to apply the styles rather than an ID.
Im trying to make my rendered chart fill 100% of the parent div with no success. Is there any way I can remove the gap on the left and right sides?
http://jsfiddle.net/sKV9d/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
width: 300,
height: 200,
defaultSeriesType: 'areaspline'
},
series: [{
data: [33,4,15,6,7,8, 73,2, 33,4,25],
marker: {
enabled: false
}
}]
});
The issue is because of jquery UI. after rendering your chart call this code to reflow the chart. This fixed my problem
chart.reflow();
If you remove the options width: 300, height: 200 like this:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
defaultSeriesType: 'areaspline'
},
...
it will fill automatically the container.
Set minPadding and maxPadding to 0, see: http://jsfiddle.net/sKV9d/3/
I solved it by
window.dispatchEvent(new Event('resize'));
UPD:
remove width and height attributes.
add into .css the following code in order to adjust chart block to 100% of #container:
chart { width: 100%; height: 100%; }
2a. another way is - in case if not possible to define container size during "design" time you can reflow chart after chart load (i.e. call chart.reflow(); ):
chart: {
events: {
load: function(event) {
**event.target.reflow();**
}
}
},
See example http://jsfiddle.net/yfjLce3o/
just simply add CSS
.highcharts-container{
width: 100% !important;
}
.highcharts-root{
width: 100% !important;
}
Try this :
var height= $("#container").height();
var width= $("#container").width();
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
width: width,
height: height,
defaultSeriesType: 'areaspline'
},
series: [{
data: [33,4,15,6,7,8, 73,2, 33,4,25],
marker: {
enabled: false
}
}]
});
The issue with Highcharts already reported here.
To handle this we can do something like mentioned above.
I was also facing the same problem so I have solved it by using
window.dispatchEvent(new Event('resize'));
after rendering my chart like :
this.chartData={
... //some required data object to render chart
}
Highcharts.stockChart('divContainerID', this.chartData, function (chart) {});
window.dispatchEvent(new Event('resize'));
If you do not provide width property to the chart, it should automatically get the width of the container.
So just remove the width from the chart and give the container width: 100% and that should work.
If you want a specific width, just change the container width to a specific size. The chart should still be 100% of that size.
JSFiddle
Example:
HTML
<div id="container">
<div id="chart"></div>
</div>
JS
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
height: 200,
defaultSeriesType: 'areaspline'
},
series: [{
data: [33,4,15,6,7,8, 73,2, 33,4,25],
marker: {
enabled: false
}
}]
});
CSS
#container {
width: 100%;
height: 200px;
}
use updateChart function and call chart.reflow() inside that function
scope.updatechart = function(){
scope.chart.reflow();
}
call updatechart method every 30 seconds using any refresh mechanism
I tested it, and it is working very well:
chart-tab is div, and contains high chart div, so you first need to define two DIVs, first for containing the chart('chart-container'), and second the container of 'chart-container' which is 'chart-tab', then one library must be added('resizesensor') for adding the event for 'chart-tab' DIV on-change , and here is the function as follows:
new ResizeSensor($('#chart-tab'), function(){
if(chart){
var wid = document.getElementById('chart-tab').clientWidth;
var hei = document.getElementById('chart-tab').clientWidth;
chart.update({
chart: {
width: wid,
height: hei
}
});
}
});
You can make use of chart.update function from anywhere across your project.
Highcharts.charts.forEach(function (chart) {
chart.update({ chart: { width: some value } }, true, true, true);
})
In my case it was a loading issue that caused the chart container to be too narrow. If you make use of jQuery then load your chart like this
$(document).ready(function() {
let chart = Highcharts.stockChart('chart-container', {
[...]
}
}
Angular only:
if you are using angular-highchart library then remove style from your options and simple do this
<highcharts-chart
*ngFor="let stock of chartArray; let i = index"
[Highcharts]="Highcharts"
[constructorType]="'stockChart'"
[options]="stock.chartOption"
style="width: 100%; display: block"
>
</highcharts-chart>
style="width: 100%; display: block" here is the noticable part. Ignore the rest please
For me using Angular it was solved by moving setting the option in ngAfterViewInit!