I want to lock the horizontal scroll of my webpage in mobile Safari.
Specifying the width n height in background.js fixed the problem for iPad :
if(B.msie<=8 || B.iPad) (function() {
var mixin, i,
bg_tile = static_url('bg_tile');
if(B.iPhone || B.iPad) {
bg_tile = static_url('iOS_bg_tile');
}
for(i in mixin={
width: 768,
height: 600,
fade: false,
srcs: {
tile: bg_tile,
radial: static_url('bg_radial')
},
customCSS: function(el) {
el.style.background = 'url('+this.srcs.tile+')';
},
mainSrc: 'radial'
}) if(mixin.hasOwnProperty(i)) BG.BackgroundView.prototype[i] = mixin[i];
})();
But if I add a similar block for iPhone it's giving zooming problem.
Any suggestion how can I lock the horizontal scroll in iPhone?
Thanks in advance.. :)
Have you tried using a meta tag for viewport, fix the width as device width.
<meta name = "viewport" content = "width = 320">
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 new to javascript and jQuery and am trying to make a slideshow using Fancybox.
The problem is that I want the images to display on a box of the same size regardless of whether they are portrait or landscape images. My images are all either 700 X 525 for landscape or 525 X 700 for portrait.
The way I have it the landscape images load like it is showed on the top of the image below, the portrait images load as shown in the middle, and I want the portrait images to load as shown on the bottom, with the box with the same dimensions as if it were landscape:
I think what I should do is change the left padding depending on the image dimensions but I have no idea how.
Thank you for your help in advance.
I am using Fancybox version: 2.1.4 and I have set the defaults as such:
padding : 15,
margin : 20,
width : 800,
height : 600,
minWidth : 100,
minHeight : 100,
maxWidth : 9999,
maxHeight : 9999,
autoSize : true,
autoHeight : false,
autoWidth : false,
autoResize : true,
autoCenter : !isTouch,
fitToView : true,
aspectRatio : false,
topRatio : 0.5,
leftRatio : 0.5,
I know this post is 11 months old, but I thought I would share my solution in case it helps someone else out in the future.
Basically I have set a min-width css attribute onto the fancybox element and am comparing that against the current image width, if it is smaller I am adding padding to the fancybox element so that the fancybox element stays the same width but the image inside is horizontally centered.
Step 1: in your css set a min-width on the fancybox element. This is the width that you want your fancybox element to stay at regardless of image width.
.fancybox-wrap { min-width: 1120px; }
Step 2: add in the afterLoad function when you call fancybox
$(".fancybox").fancybox({
afterLoad: function(current) {
var $el = $(".fancybox-wrap").eq(0); // grab the main fancybox element
var getcurrwidth = current.width; // grab the currrent width of the element
var getdesiredwidth = $el.css('min-width'); // grab our min-width that we set from the css
var currwidth = Number(getcurrwidth);
var desiredwidth = Number(getdesiredwidth.replace('px', ''));
if (currwidth < desiredwidth)
{
var custompadding = (desiredwidth - currwidth) * 0.5; // if the width of the element is smaller than our desired width then set padding amount
this.skin.css({'padding-left': custompadding+'px', 'padding-right': custompadding+'px' }); // add equal padding to the fancybox skin element
}
}
});
I'm trying to take a screenshot using html2canvas:
var body = document.getElementById("body")
$(body).html2canvas({onrendered: function( canvas ) {
var urlData = canvas.toDataURL("image/jpeg");
}});
My body's background is transparent, and therefore urlData because of jpeg has black background (not white like in browser).
How can I fix this behavior and make background color white in this case?
I modified temporary: _html2canvas.Util.isTransparent from
_html2canvas.Util.isTransparent = function(backgroundColor) {
return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");
};
to
_html2canvas.Util.isTransparent = function(backgroundColor) {
return (backgroundColor === "transparent" ||
backgroundColor === "rgba(0, 0, 0, 0)" ||
backgroundColor === undefined);
};
and after that it was enough to call html2canvas with background parameter set:
html2canvas(screenshotElement, {
background: '#FFFFFF',
onrendered: function (canvas) {
// ...
}
});
For me... it makes sense to consider transparent a background that is undefined.
Try this
var body = document.getElementById("body")
$(body).html2canvas({background:'#fff', onrendered: function( canvas ) {
var urlData = canvas.toDataURL("image/jpeg");
}});
I'd say, it's even simplier now(30/05/18) - just pass backgroundColor: null in html2canvas options:
html2canvas(
document.querySelector("#some-id-to-export"),
{backgroundColor: null}
).then(canvas => {$("#id-to-render-transparent-bg-img").html(canvas);});
https://stackoverflow.com/a/23928038/1815624
simply add css background-color:#ffffff to your table :)
hope this helps
I wrapped the content into a div for each desired page and gave class="pdfpage" then set the css as pdfpage{background:#FFFFFF;}
As I had commented it was not first thoughts that I needed to set the background of the rendered element as white since it was white already...But in truth it was colorless...
var body = document.getElementById("body")
$(body).html2canvas({onrendered: function( canvas ) {
var urlData = canvas.toDataURL("image/jpeg");
},
background: '#fff'});
Two years later but updated version should accept a parameter like this . . .
No worries, Now just add background: '#FFFFFF' , its working fine
html2canvas(element, {
background: '#FFFFFF',
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
If you need the actual image data to be non-transparent, use fillRect(0, 0, width, height) with fillStyle 'white'.
Another way to do it but it's quite slow (few milliseconds maybe), is to use getImageData and putImageData and iterate threw each pixel to check rgba values and change them
html2Canvas and ngxcharts teams seem to have closed the bugs on this issue without providing any solution.
Setting up fill property for rect via css classes didn't work.
This is how I ended up solving it, surprisingly it works:
let rectElements = Array.from(document.getElementsByTagName('rect'));
if (rectElements.length > 0) {
rectElements.forEach(rect => {
rect.setAttribute('fill', '#ffffff');
});
}
I basically want the same functionality as facebook, twitter and all those other "infinite" scroll sites work, the code im using at the moment is
jQuery(document).ready(function(){
$ = jQuery;
$(window).scroll(function(){
if ($('.iosSlider').is(':visible'))
{
if($(window).scrollTop() + $(window).height() == $(document).height())
{
$.get('/our-work/fakework.php', function(data) {
$('#mobile-thumbs').append(data);
});
}
}
});
});
This works flawlessly on all desktop browers, and even on my blackberry sometimes it works after spamming the scroll down button.
However its not once been detected on either the iphone or ipad, I assumed it was something todo with the viewport on it but who knows.
I tried using the viewport height method of
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
but this didnt seem to fix it either!
So please could somebody share some light on it please as to how to detect the bottom of the page on the iDevices!
Thanks!!
Owen
After debugging for ages i found out that
if($(window).scrollTop() + $(window).height() == $(document).height())
was never actually getting met, well it WAS getting met however it seems that mobile safari doesnt run any javascript WHILST the viewport is moving.
This means that unless you stop the scroll EXACTLY on the document height (no bouncy bottom thing) it would very UNLIKELY to equal the same heights.
So I simply changed the code to instead of equaling the same height, to check if it was equal or more, this way it would trigger even if it had been scrolled past!
so the fix is here below
if($(window).scrollTop() + $(window).height() >= $(document).height()){
so the modified code now looks like
jQuery(document).ready(function(){
$ = jQuery;
$(window).scroll(function(){
if ($('.iosSlider').is(':visible'))
{
if($(window).scrollTop() + $(window).height() >= $(document).height())
{
$.get('/our-work/fakework.php', function(data) {
$('#mobile-thumbs').append(data);
});
}
}
});
});
and its now working like a charm!
Fully working multibrowser and multidevice-compatible solution:
function getDocumentHeight() {
return Math.max(
Math.max(document.body.scrollHeight, document.documentElement.scrollHeight),
Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
Math.max(document.body.clientHeight, document.documentElement.clientHeight)
);
}
And then....
$(window).scroll(function() {
var docHeight = getDocumentHeight();
if($(window).scrollTop() + window.innerHeight == docHeight)
{
// enter your code here
}
});
Don't forget about viewport meta too:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
I had the same issue. The code snippet works fine on desktop but not on iOS mobile devices. After replacing document with body the issue was fixed.
Also, it's better to check if you're near bottom of the screen:
if($(window).scrollTop() + $(window).height() > $('body').height() - 200)
This solution will work on every device:
window.onscroll = function() {
var d = document.documentElement;
var offset = d.scrollTop + window.innerHeight;
var height = d.offsetHeight;
console.log('offset = ' + offset);
console.log('height = ' + height);
if (offset >= height) {
console.log('at the bottom');
}
}
OK so I have a iframe canvas app with its height set to "Settable" with the facebook javascrip sdk calls to FB.Canvas.setSize(); and FB.Canvas.setAutoGrow();. These are working perfectly, as the iframe gets set to a certain pixel height based on its content.
The problem is that when I make a call to Fancybox, it positions itself based on this height. I know that's exactly what its supposed to do as the fancybox jQuery returns the viewport by:
(line 673 of latest version of jquery.fancybox-1.3.4.js):
_get_viewport = function() {
return [
$(window).width() - (currentOpts.margin * 2),
$(window).height() - (currentOpts.margin * 2),
$(document).scrollTop() + currentOpts.margin
];
},
But the problem is the iframe will, for a lot of viewers, be longer than their browser window. So the Fancybox centers itself in the iframe and ends up only partly visible to the majority of viewers. (i.e. iframe height is 1058px and users browser is say only 650px).
Is there a way to have fancybox just calculate the physical browser height? Or do I need to change some settings in my Facebook canvas app to make it work?
I like how the only scrollbar is the one on Facebook (the parent, if you will).
All suggestions GREATLY appreciated!
For fancybox 2 try:
find:
_start: function(index) {
and replace with:
_start: function(index) {
if ((window.parent != window) && FB && FB.Canvas) {
FB.Canvas.getPageInfo(
function(info) {
window.canvasInfo = info;
F._start_orig(index);
}
);
} else {
F._start_orig(index);
}
},
_start_orig: function (index) {
Then in function getViewport replace return rez; with:
if (window.canvasInfo) {
rez.h = window.canvasInfo.clientHeight;
rez.x = window.canvasInfo.scrollLeft;
rez.y = window.canvasInfo.scrollTop - window.canvasInfo.offsetTop;
}
return rez;
and finally in _getPosition function replace line:
} else if (!current.locked) {
with:
} else if (!current.locked || window.canvasInfo) {
As facebook js api provides page info, then we could use it, so
find
_start = function() {
replace with
_start = function() {
if ((window.parent != window) && FB && FB.Canvas) {
FB.Canvas.getPageInfo(
function(info) {
window.canvasInfo = info;
_start_orig();
}
);
} else {
_start_orig();
}
},
_start_orig = function() {
and also modify _get_viewport function
_get_viewport = function() {
if (window.canvasInfo) {
console.log(window.canvasInfo);
return [
$(window).width() - (currentOpts.margin * 2),
window.canvasInfo.clientHeight - (currentOpts.margin * 2),
$(document).scrollLeft() + currentOpts.margin,
window.canvasInfo.scrollTop - window.canvasInfo.offsetTop + currentOpts.margin
];
} else {
return [
$(window).width() - (currentOpts.margin * 2),
$(window).height() - (currentOpts.margin * 2),
$(document).scrollLeft() + currentOpts.margin,
$(document).scrollTop() + currentOpts.margin
];
}
},
I had the same problem, i used 'centerOnScroll' :true, and now it works fine...
Had the same problem. Thankfully fancybox is accessable through CSS. My solution was to overwrite fancybox's positioning in my CSS file:
#fancybox-wrap {
top: 20px !important;
}
This code places the fancybox always 20px from top of the iframe. Use a different size if you like. The !important sets this positioning even though fancybox sets the position dynamically at runtime.
Here's one way to do it by positioning the Fancybox relative to the position of another element, in my case an Uploadify queue complete div that displays a view link after the user uploads an image.
Have a style block with a set ID like so:
<style id="style-block">
body { background-color: #e7ebf2; overflow: hidden; }
</style>
Then the link to open the Fancybox calls a function with the image name, width, and height to set the content and sizes. The important part is the positioning. By getting the position of the queue complete div, generating a new class declaration (fancy-position), appending it to the style block BEFORE the fancybox loads (!important in class will override positioning from fancybox), then adding the new class using the wrapCSS parameter in the fancybox options, it positions the fancybox exactly where I want it.
function viewImage(image, width, height) {
var complete_pos = $('#image_queue_complete').position();
var css_code = '.fancy-position { top: ' + complete_pos.top.toString() + 'px !important; }';
$('#style-block').append(css_code);
var img_src = '<img src="images/' + image + '" width="' + width.toString() + '" height="' + height.toString() + '" />';
$.fancybox({
content: img_src,
type: 'inline',
autoCenter: false,
wrapCSS: 'fancy-position'
});
}