I wanted to increase the height of my div (id = scroller) and set it at the end of the success call back function. In the success callback function I dynamically inject some inner div's which are contained in the "scroller" div.
Default height of scroller div is 400 px. Dynamically it comes e.g. as 900px, then it should be set as 900px.
height = $('#content').innerHeight();
alert("outside: " + height);
$('#scroller').css('height', height + "px");
So far so good. Now, this resizing works if I have an alert statement. If I remove the alert, it doesnt resize itself.
What might be the problem ?
Thanks in advance.
P.S. height: auto doesnt work maybe because I am expecting this functionality on android emulator/cellphone and i am developing my mobile app using Phonegap.
how about creating a new div, loading your data into it, then using the jQuery replaceWith() method to replace the old content div with the new one. That might be one way to force the browser to recalculate the height of the (new) content div and everything around it.
Something like:
var newContent = $('<div id="content"></div>').load(toLoad,'',showNewContent());
$('#content').replaceWith(newContent);
Related
I use Puppeteer to generate receipts in PDF.
For each receipt, width is always the same, but height changes, according to the article count in the order.
For now, I'm using the article count to approximate the required height for my receipt. It kind of works, but it's not perfect and is a dirty way to do (you can notice useless blank space at the bottom of the picture bellow).
Is there way to tell Puppeteer : "Please automatically find the right PDF height, according to the HTML content, in order to NOT generate useless blank space" ?
As I understand correctly you are using width and height options of page.pdf(options) method (unfortunately you didn't provide your code). You may try to get height value of the loaded web page by evaluating JS function on the page. For example ...
const pageHeight = await page.evaluate(() => { window.innerHeight; });
const result = await page.pdf({ height: pageHeight + 'px' });
I am new to webix and have a problem with ui.window!
For me the window never adjusts to the parent HTML element. :(
I want the window to have the same width and height as the parent (100%).
What am I dowing wrong?
See code in Webix Snippets: http://webix.com/snippet/c5fe5e96
According to the documentation:
"Window Sizing and Positioning
The must-have parameters for the window are width and height. If you don't set [them], the window [...] will occupy the whole screen."
http://docs.webix.com/desktop__window.html
"adjust - adjusts the component to the size of the parent html container"
http://docs.webix.com/api__link__ui.popup_adjust.html
Window and Popup widgets are working for the whole app, they are not using container and can't use .adjust as well.
You can size the Window to the document by using fullscreen option
var popup = webix.ui({
view: "window",
fullscreen:true,
http://webix.com/snippet/93a5e3ba
or by using the complex position property
var popup = webix.ui({
view: "window",
position:function(state){
state.left = state.top = 10;
state.width = state.maxWidth - 20;
state.height = state.maxHeight-20;
},
http://webix.com/snippet/164a3955
I have managed to make the window inherit the size of the HTML container by getting the HTML container size by using getNode() and then using setPosition, config.width, config.height and resize().
See example below.
http://webix.com/snippet/056b9610
I am facing a problem with the Kendo Grid width. I want the grid to stretch to fit the content of the grid. This grid which I am working on is created dynamically, so at times it may have just 2 columns and at times it may have max 5 columns. I don't want the grid to expand and take the whole page for showing just two columns.
To get this working I added the following css
.k-grid table{
display: inline;
}
The problem is that when this style is applied, it completely messes up the column header and column alignment. Does anyone know how to fix this?
Actually this is really simple. But I wasted lot of time cause I did not get the correct source. You just need to implement following things.
Make the grid sortable: false
and use this CSS
#gridId table {
width: auto;
}
But with this you loose the scrolling feature. But you can wrap your kendo grid in another container and implement your own scrolling.
var grid = $("#kendoGridName");
grid.width(400);
Rather than trying to apply some css you could use some jQuery to perform this task. I do something similar in terms of height. So maybe something like this would work for you (I have modified this to do height and width).
function resizeGrid(size) {
if (size === null || size === undefined) {
size = 0.6;
}
var windowHeight = $(window).height();
var windowWidth = $(window).width();
windowHeight = windowHeight * size;
windowWidth = windowWidth * size;
$(".k-grid-content").height(windowHeight)
$(".k-grid).width(windowWidth);
}
so all this function does is scale the grid based on the current window size so for example if you want the grid to take up all the available space ie max height and width you would call resizeGrid(1) if you wanted it smaller say to take 50% of the screen size then you would use reszieGrid(0.5) if no value is used then the function just goes with a default of 60% of the available width/height.
so you could call this after your initialization of the grid and then scale the grid to an appropriate size.
by targeting the kendo css classes it makes this function easier to reuse.
if you need more info let me know.
I'm looking for a chart for displaying my values over a long time period. The problem is due to the timeline most charts are useless because there are to many points in it and I can't zoom in or out.
So I'm looking for a chart where I load my complete data and the user can choose which data he wants (e.g. Values1, values2) and click into the chart to see only that timespan he wants.
A perfect example is http://dataaddict.fr/prenoms but I don't know where to find a similar chart that I could use. I searched for hours but didn't find anything similar. On the left side the user could choose the data he wants and under the charts the user can choose the timespan.
I hope someone has a good tip for me :) Thanks!
Disclaimer: I am new at javascript and d3.js, so please be skeptical of everything I say, but I will try to help you.
I was able to solve a similar problem by creating a set of regular HTML buttons below the chart (with svg rects inside of each button to create a color square in each button).
//Create the legend div
var legendHtml = "<div style='width:" + (w+marginLeft+marginRight) + "px;'>";
//Size of Squares in legend buttons
var legendRectSize = 9;
//Create a button for each item
varNames.forEach(function(element, index){
legendHtml = legendHtml + "<button class='legend clickable active' id='" + varNames[index] + "'><svg width='9' height='9'><g><rect width='"+legendRectSize+"' height='"+legendRectSize+"' style='fill:" + color(varNames[index]) + ";'></rect></g></svg> " + varNames[index] + "</button>";
});
//Close out the legend div
legendHtml = legendHtml + "</div>";
I then added the a new legend div below my chart, which happened to be in a div with the id "employment."
//Add the legend div to the bottom of the chart
var legendDiv = document.createElement("div");
var legendIdAtt = document.createAttribute("id");
legendIdAtt.value = "legend";
legendDiv.setAttributeNode(legendIdAtt);
document.getElementById('employment').appendChild(legendDiv);
document.getElementById('legend').innerHTML = legendHtml;
Finally, I added an event listener to the legend (specifically the class 'clickable') that updates the chart by updating, adding, or removing the new data. I used jquery to do this because I was finding the the built in d3.on() method was not working on nodes that are dynamically created after the document loads.
//Event listener for updating the chart
$('body').on('click', '.clickable', function () {
var id = $(this).attr('id');
//Toggle the buttons active or not active
if ($(this).hasClass("active")) {
$(this).removeClass("active");
} else {
$(this).addClass("active");
}
change(id);
});
Your change function will be different depending on what you want to do, but in my case, I made sure that the id for the buttons was the same as the variable names in the data (I originally set the id by calling the variable names), and then went through the general update pattern to updates my line graph. This article helped me understand d3's general update pattern: http://bl.ocks.org/mbostock/3808218
Hope that helps! Cheers!
Edit:
You should be able to make one set of buttons that adds, updates, and subtracts data based on the data the user wants to add to the cart using this approach. You could use a similar method to create a set of html buttons that, when clicked, update the domain of the x scale.
I am using FabricJS to create an application. I am finding that scrolling a parent div/container offsets the selectable area of an object to the right in direct relation to amount scrolled.
So, if I have a canvas that is 1200x600 and a container div that is 600x600 and I add a rect to that canvas at 400, 120; when I scroll 200px, I can't click on the rect to select it. Rather, I have to move my mouse to 600, 120 (empty space) to get the cross bar and select the rect.
Not sure if this is known, or has a work around - but I would appreciate any help possible.
You'll have to modify FabricJs code to make it work.
The problem is in the getPointer function, if you search for it in all.js you'll notice the comment "this method needs fixing" from kangax.
A workaround can be substituting this function with
function getPointer(event) {
// TODO (kangax): this method needs fixing
return { x: pointerX(event) + document.getElementById("container").scrollLeft, y: pointerY(event) + document.getElementById("container").scrollTop };
}
where "container" is the wrapper div of you canvas. It's not nice, since you have to put the exact id, but it works.
Hope this helps.