Fancybox PDF (iFrame) loads in all browsers except Chrome. The loading gif stays forever, but never loads anything, however, the photos and videos work fine.
$(function() {
$(".fancypdf").fancybox({
padding : 5,
framewidth : 855,
frameheight : 470,
openEffect : 'elastic',
openSpeed : 'normal',
openEasing : 'easeOutBack',
closeEffect : 'elastic',
closeSpeed : 'normal',
closeEasing : 'easeInBack',
closeClick : true,
type:'iframe',
});
Also, on the ipad, the dimensions of the PDF are off. Width is correct, but height is about 200px and can't scroll. Everything else works fine.
Link here
Any help would be great! Thanks!!
Related
hello i am trying to generate multiple page dynamic pdf using html in my react js app. i got all the things right in pdf but the last line text of pages cuts if we set the dynamic pixels for html element it also cut table inside the html sometimes. here is my code
var pdf = new jsPDF({
orientation: "portrait", // landscape or portrait
unit: "mm",
format: "a4"//[250,250],
}
)
let pageHeight=pdf.internal.pageSize.height
pdf.html(html_element, {
callback: function (doc) {
doc.save();
},
x: 15,
autoPaging: "slice",
y: 15,
width: 170, //target width in the PDF document
windowWidth: 650 ,
margin:[10,7,10,7],
});
please help me with this
i have also tried jsdpf html2 convas examples but it did not give bottom margin in pages
I would like to insert a "slider" in my hybrid app.
I need each slide to contain an image and some text. And I would like it not to be a full page slider but a partly hidden in-page slider, like on the Amazon app:
Which is the best Jquery Mobile + Phonegap friendly slider ?
(I've heard of Photoswipe, Swiper, Flexslider, ...)
Thanks
I chose Flexslider V2 and it seems to work fine : http://www.woothemes.com/flexslider/
$(document).on('pageshow','#result-page', function(){
var suggestionSlider = $('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
//slideshow: false,
itemWidth: 70,
//itemMargin: 5,
pausePlay: false,
touch: true,
//useCSS : false,
pauseOnAction: true
});
var slider = $('.flexslider').data('flexslider');
for (i = 0; i < matched.length; ++i) {
slider.addSlide('<li><a class="suggestPro" proId="'+matched[i]['id']+'" href="#"><span><img src="images/boards/'+matched[i]['imageName']+'" /></span>'
+'<p class="flex-caption">'+matched[i]['model']+'</p></a></li>'
);
}
$('.flexslider').resize();
});
However V2.2 doesn't scroll well on Android phones (touch horizontal scroll), any hint would be apreciated.
I am trying to display a remote image url into webview in both iPhone & Android using Appcelerator Titanium. The remote image is displayed in webview but the full image doesn't fit into the webview in app.
Code:
var webView = Ti.UI.createWebView({
url : 'https://cloudinary-a.akamaihd.net/dhl5ctlq1/image/upload/v1364796700/business_logo_4_53_1364308382.jpg',
top : 0,
left : x(60),
height : '80dp',
width : '80dp',
scalesPageToFit : true,
showScrollbars : false,
scrollsToTop:false,
backgroundColor : "red"
});
Dont use a WebView, a WebView is for displaying web content (read: HTML), instead just use a ImageView, these support remote URL's, just remember that on iOS these remote images are cached, but on Android they are NOT (big oversight on appcelerator's side). Try this instead:
var image = Ti.UI.createImageView({
image : 'https://cloudinary-a.akamaihd.net/dhl5ctlq1/image/upload/v1364796700/business_logo_4_53_1364308382.jpg',
top : 0,
left : x(60),
height : '80dp',
width : '80dp'
backgroundColor : "red"
});
I'm using fancybox to create a fullscreen gallery on my site. It's a rather long site and when the fancybox is initiated, you can still scroll, which I imagine could be quite confusing to the user. Is there a way I could disable scrolling while the fancy box layer was initiated?
Thanks.
I also had the same problem with fancybox. After some googling i found the answer.
$.fancybox({
maxHeight : '200',
width : '38%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
scrolling : 'no',
autoDimensions : 'true',
closeEffect : 'none'
});
in your jQuery set
Hope this help you.
UIScrollView *scrollView = // get your scroll view
scrollView.scrollingEnabled = NO;
// initialize your fancybox
scrollView.scrollingEnabled = YES;
I'm having a problems to make a jQuery horizontal ui scrollbar work in Chrome. It works just fine in FireFox and even IE, but in Chrome I simply can't make it calculate the correct width of my "content" area. The "container" has a 920px fixed width, so no problem with that, but my "content" is, "on this page", exactly 4983px wide but when calculating with outerWidth() and even outerWidth(true), it will return a nonsense value that's a lot smaller than it should be!
Here's the link to the page I'm working on.
And here's the code I have until now. It's a mess because I'm still working and doing some tests...
var container = $('.gallery');
var content = $('.content', container);
var itemsWidth = content.outerWidth(true) - container.width();
var width = 0;
$('figure').each(function() {
width += $(this).width();
});
console.log('I dont know if I chose width: ' + width);
console.log('Or if I chose itemsWidth: ' + itemsWidth);
console.log('Actually, none of them is working on Chrome/webkit browsers');
$('.slider', container).slider({
min: 0,
max: itemsWidth - 20,
stop: function(event, ui){
content.animate({ 'margin-left' : ui.value * -1}, 500);
},
slide: function(event, ui){
console.log(ui.value);
content.css('margin-left',ui.value * -1);
}
});
Notice that I'm trying to calculate the width value in two different ways: itemsWidth (var) and width (var). None of them work. Strange thing is... if you keep refreshing the browser (Chrome), it will eventually grab the correct width of the "content", but it's like once in every 10–15 tries =\
It seems to be a Chrome/Webkit bug, but I have no idea about how to solve that!
Thanks for your time and help!