This renders a line across the middle of the screen. This works fine.
My problem: The line doesn't resize when I resize the browser window.
This is the whole code (written in CoffeeScript, flavored with jQuery and Snap.svg):
$ ->
content = Snap window.innerWidth, window.innerHeight
content.attr
id: 'app'
second part:
timeline = content.line 0, window.innerHeight / 2, window.innerWidth, window.innerHeight / 2
timeline.attr
id: 'timeline'
stroke: '#000'
strokeWidth: 2
The question is: How do you draw an SVG-line again and again, when the browser resizes?
Related
I'm trying out HTML2PDF javascript.
function createPDF(){
var element = document.getElementById('printMe');
var opt = {
margin: 1,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 1 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
When I use this the pdf converts etc but it appears halfway down the first page. All of the content is encapsulated in a div
<div id="printMe" style="padding: 20px;padding-right:30px;">.....</div>
I've tried setting the height and removing almost all the content but it still seems to be placing it in the middle of the page as the starting point.
Is there some way of forcing the code to start at the top of the page?
Add scrollY: 0 to the html2canvas object in the html2pdf options:
var opt = {
margin: 1,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 1, scrollY: 0 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
I solved the issue.
The movement in position of the print is affected by the scroll position of the window. So if the button to create the PDF is at the top of the page and you click it places the text at the top of the PDF. If the button is placed in the visible area of the page and you scroll down until it is at the top of the page - the amount you've scrolled is added to the top of the PDF document.
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
I used this code snippet to solve the issue. When I go to print I scroll to the top of the document before creating the PDF.
A combination of scrollX, scrollY, x and y worked for me to force the PDF generation from the top left:
const opts = {
margin: 0,
filename 'result.pdf',
image: { type: 'jpeg', quality: 1 },
html2canvas: {
backgroundColor: "#fff",
scale: window.devicePixelRatio,
y: 0,
x: 0,
scrollY: 0,
scrollX: 0,
windowWidth: 800,
},
jsPDF: { unit: 'px', format: [800, 1600], orientation: 'portrait', precision: 32 }
};
A hack to enforce the same result over all devices is to temporarily set the screen width to the configured windowWidth (this case 800px), e.g., using document.body.style.width = '800px', before creating the PDF, and setting it back to 100% after creating the PDF.
I am try to add cropper.js in semantic modal. i am doing following step.
1) I have button on page called [Choose image]
2) If i am click on choose image one modal is open name is [thumbs].
thumbs modal have 2 button [choose from local pc] and [choose media].
3) If i am click on choose from local pc file dialog is open and image picker is working and cropper.js is assign to selected image perfect
4) If i am click on choose media button they open [media] modal and i have lots of images there and i have one button on each image if i am click on image path is pass to previous modal called thumbs and cropper tool is assigned but size is smaller as given size, if i am open inspect element of chrome cropper size is perfect.
You will better idea using following images.
http://prnt.sc/cnof60
http://prnt.sc/cnofei
http://prnt.sc/cnofne
http://prnt.sc/cnofxs
If see last 2 images you can difference in image.
I am using https://fengyuanchen.github.io/cropperjs/ for cropper function.
Thanks
When you init your cropper pass minContainerWidth and minContainerHeight. here i am passing 846 and 280.
var image = $("#img-preview-media-mobile");
var cropper = image.cropper(
{
dragMode: 'move',
autoCropArea: 1,
cropBoxMovable: false,
cropBoxResizable: false,
viewMode: 3,
minContainerWidth: 846,
minContainerHeight: 280,
crop: function(e)
{
var image_data = e.x +"#"+ e.y +"#846#280";
$("#img-preview-media-web-image-data").val(image_data);
}
});
and in cropper.js file change following line
/*$cropper.css((this.container = {
width: max($container.width(), num(options.minContainerWidth) || 200),
height: max($container.height(), num(options.minContainerHeight) || 100)
}));*/
$cropper.css((this.container = {
width: options.minContainerWidth ,
height: options.minContainerHeight
}));
Line number 806 to 809 in cropper js
I have to put image loading at client side, which is basically right after browser finishes requesting a page, an ajax call is triggered to load list of images, then slides are added into sider container. Number of photos is not known after that ajax call.
I tried building html text of slides, and assign into slider container, then trigger the slider-starter. But the slider doesn't show properly.
Thanks a lot for any suggestion
I post what I did here in case it's helpful for someone:
//function to start the slider
jssor_slider1_starter = function (containerId) {
var options = {
$AutoPlay: false,
$SlideDuration: 800,
$FillMode: 2,
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$,
$ChanceToShow: 2,
$Lanes: 1,
$SpacingX: 14,
$SpacingY: 12,
$Cols: 6,
$Align: 156,
$Orientation: 2
}
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
};
//Ajax function to start the slider after loading the 'content' of slider
//getImgUrl is the url of page returning urls of images contained in slider. Format of response can be whatever as long as you can parse it, my sample is [[[url1,url2..]]]
$.ajax({
url:getImgUrl,
success:function(data){
var imgurls_str=data.substring(data.indexOf('[[[')+3,data.indexOf(']]]'));
var imgurls=imgurls_str.split(',');
var imgHtmls='';
for(var i=0;i<imgurls.length;++i){
imgHtmls+='<div><img u="image" src="'+imgurls[i]+'" /><img u="thumb" src="'+imgurls[i]+'" /></div>';
}
$("#slides").html(imgHtmls);
jssor_slider1_starter('slider1_container');
}
});
You are doing in a right way.
All you need is to check slides (you added dynamically) are correct or not.
To check html created dynamically, you can copy it out and test it in a standalone html file to see if the slider works.
I'm manually porting an extension I wrote in Chrome over to Firefox. I'm attaching a panel to a widget, and setting the content of that panel as an HTML file. How can I make the panel shrink and grow with the content? There's a lot of unsightly scroll bars and grey background right now.
var data = require("self").data;
var text_entry = require("panel").Panel({
width: 320,
height: 181,
contentURL: data.url("text-entry.html"),
contentScriptFile: data.url("get-text.js")
});
require("widget").Widget({
label: "Text entry",
id: "text-entry",
contentURL: "http://www.mozilla.org/favicon.ico",
panel: text_entry
});
Not setting the height property of the panel makes it quite tall.
You might want to check out this example that resizes the panel based on the document loaded. If you want to resize based on changes to the content size, at least on initial load:
https://builder.addons.mozilla.org/package/150225/latest/
( sorry for the delay in respinding, been afk travelling )
When using Sencha Touch to create a panel - you can tell the panel to enable a fullscreen property. THe panel will fill the space available by the device.
It seems to have a bug or not deal with a bookmark that has been saved to the home screen - and floats underneath the status bar at the top.
Is there a property or setting to manage this behaviour OR are am I going to have to program the logic to determine how much padding is required dependent on device and orientation ?
Example below will fit nicely in mobile Safari, but if you save to Home Screen and load it up - the Toolbar sits underneath the Status Bar.
var buttons = [
{text: 'Button'},
{xtype: 'spacer'},
{text: 'Blue', ui: 'action'},
];
var toolbar1 = new Ext.Toolbar({
dock: 'top',
title: 'Panel',
items: buttons
});
var windowHeight = Ext.Element.getViewportHeight();
var windowWidth = Ext.Element.getViewportWidth();
var homePage = new Ext.Panel ({
fullscreen: true,
cls: 'homePage',
dockedItems: [toolbar1],
layout: 'fit',
html: '<h2>Testing Ext.js Panel</h2><p>Height:' + windowHeight +'</p><p> Width:' + windowWidth +'</p>',
animation: 'slide'
});
Thanks in advance.
Hi Ket — This is actually the default behavior... The status bar is always visible, even in a fullscreen web app. There are three tips you may find useful:
You can use a translucent statusbar, which is still there but will overlay your content. To do this, in Ext.setup(), you can use "statusBarStyle: 'black-translucent'"
"window.navigator.standalone" will detect whether you're in fullscreen mode or not.
Instead of measuring window width/height, you could break your H2 and P into separate components, and give the P area a layout of 'fit'
Hope that helps-