Can Someone please tell me how to disable jqzoom on mobile device because it doesn't work
I'm using prestashop 1.6
thanks
a couple of months later with the answer but maybe this will help someone, (I am using Prestashop 1.6.1.9) locate the file product.js (In my example is located on C:\xampp\htdocs\prestashop\themes\default-bootstrap\js\product.js), about line 153 find jqzoom, add the following:
compensante = scrollCompensate();
if (($(window).width()+scrollCompensate()) >= 768) {
.
.
.}
For example:
compensante = scrollCompensate();
if (($(window).width()+scrollCompensate()) >= 768) {
//set jqZoom parameters if needed
if (typeof(jqZoomEnabled) !== 'undefined' && jqZoomEnabled)
{
if ($('#thumbs_list .shown img').length)
{
var new_src = $('#thumbs_list .shown img').attr('src').replace('cart_', 'large_');
if ($('.jqzoom img').attr('src')!= new_src)
$('.jqzoom img').attr('src', new_src).parent().attr('href', new_src);
}
$('.jqzoom').jqzoom({
zoomType: 'innerzoom', // Default : standard - The others admitted option values are 'reverse','drag','innerzoom'
xzoom: 400, //zooming div default width(default width value is 200)
yzoom: 400, //zooming div default width(default height value is 200)
offset: 21 //zooming div default offset(default offset value is 10)
title: false
});
}
}
Note: the method scrollCompensate() is located on file global.js
"C:\xampp\htdocs\prestashop\themes\default-bootstrap\js\global.js"
Related
I installed this cool demo http://tympanus.net/codrops/2014/06/26/draggable-dual-view-slideshow/ on this website http://wedding.halocommunication.com
What I try to do, with no success, is to update url (like in this site wild.as) when a slide changes.
This demo use dragdealer plugin skidding.github.io/dragdealer
One of my experiment was to add this line at the end of this function, but generates errors
/**
* DragDealer plugin callback: update current value
*/
DragSlideshow.prototype._navigate = function( x, y ) {
// add class "current" to the current slide / remove that same class from the old current slide
classie.remove( this.slides[ this.current || 0 ], 'current' );
this.current = this.dd.getStep()[0] - 1;
classie.add( this.slides[ this.current ], 'current' );
window.location.href = 'http://test.com/' + this.slides.attr('data-content');
}
Anyone could help me with some hints?
Thank you
Thank for taking a while reading this post.
I am writing a PDF file on the fly with ZendPdf, but in the moment to add a picture to the PDF it is shown mirrored:
Here is the effect to better understand:
http://snag.gy/ZYbWp.jpg
The original image is fine.
Could anybody tell me why is the image mirrored and how could I render it as the original one?
I paste here the whole action where it is generated the pdf.
public function createPdfAction()
{
$country = $this->params()->fromRoute('lang', null);
$pdf = new \ZendPdf\PdfDocument();
// Add new page generated by ZendPdf\Pdf object
// (page is attached to the specified the document)
$pdf->pages[] = ($page1 = $pdf->newPage('A4'));
$width = $page1->getWidth();
$height = $page1->getHeight();
$imageFile = dirname(__FILE__) . '/../../../../../html/img/site/logo_peug_scooter.jpg';
if ( !isset( $pdf->imageCache[$imageFile] ))
{
try {
// Create new image object
//$stampImage = ZendPdf\Image::imageWithPath($imageFile);
$pdf->imageCache[$imageFile] = ZendPdf\Image::imageWithPath($imageFile);
} catch (ZendPdf\Exception $e) {
// Example of operating with image loading exceptions.
if ($e->getMessage() != 'Image extension is not installed.' &&
$e->getMessage() != 'JPG support is not configured properly.') {
throw $e;
}
$pdf->imageCache[$imageFile] = null;
}
}
if (null != $pdf->imageCache[$imageFile]) {
$page1->drawImage( $pdf->imageCache[$imageFile], 50, $height, 50 + 220, $height - 70 );
}
// Create new font
$font = ZendPdf\Font::fontWithPath(dirname(__DIR__) . '/../../../../html/fonts/peugeot_style-webfont.ttf');
// Apply font and draw text
$page1->setFont($font, 16)
->setFillColor(ZendPdf\Color\Html::color('#0b2333'))
->drawText('DJANGO', 50, $height - 18 - 18 - 50);
if ('uk' == $country) {
$locale = 'en_GB'; //. strtoupper($country);
} else {
$locale = $country . '_' . strtoupper($country);
}
setlocale(LC_MONETARY, $locale);
$price = money_format('%i', 2660);
$font = ZendPdf\Font::fontWithPath(dirname(__DIR__) . '/../../../../html/fonts/peugeot_normal-webfont.ttf');
// Apply font and draw text
$page1->setFont($font, 16)
->setFillColor(ZendPdf\Color\Html::color('#0b2333'))
->drawText($price, 447, $height - 18 - 18 - 50);
$pdf->save('/tmp/pdfs/sample2.pdf');
$this->layout('layout/empty');
$viewModel = new ViewModel();
$viewModel->setTerminal(true);
return $viewModel;
}
I will appreciate any guide.
Thank you.
Note that the coordinate System has it's origin in the bottom left corner and also expects the 4 coordinate-parameters of drawImage to be provided in that order. From the bottom left corner of the image to the top right corner.
You were measuring from the bottom but handing the top left corner first:
$page1->drawImage( $pdf->imageCache[$imageFile], 50, $height, 50 + 220, $height - 70 );
Zend interprets the 2nd coordinate value as the bottom of the image. You set it to $height (top edge of the page) and then the top of the image is at $height-70 measured from the bottom. (70px below the top edge of the page)
So the top of the image for Zend is below the bottom of the image. Hence the mirrored Image. (I know, lots of tops and bottoms.. in doubt: shuffle the 4 values until you're lucky.) It should instead be:
$page1->drawImage( $pdf->imageCache[$imageFile], 50, $height - 70, 50 + 220, $height);
I've currently got an existing application that uses Highcharts. Everything in the application works perfectly and in all browsers. The graph consists of multiple series all with different colours.
Recently I added the ability server side using PhantomJS to generate automated PDF reports from various of the application pages. Including the Highcharts rendered graph.
I do this using the following command:
phantomjs convertpage.js url file size
The convertpage.js contains the following:
var page = require('webpage').create(),
system = require('system'),
address, output, size;
if (system.args.length < 3 || system.args.length > 5) {
console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]');
console.log(' paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');
phantom.exit(1);
} else {
address = system.args[1];
output = system.args[2];
page.viewportSize = { width: 600, height: 600 };
if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {
size = system.args[3].split('*');
page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }
: { format: system.args[3], orientation: 'portrait', margin: '1cm' };
}
if (system.args.length > 4) {
page.zoomFactor = system.args[4];
}
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
phantom.exit();
} else {
var timeout = address.indexOf('graphs')>-1 ? 20000 : 500;
console.log('Timeout: '+timeout);
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, timeout);
}
});
}
On the application page that is rendering chart I am setting the series in the following manner, which is working well on the pages themselves via a browser:
$.each(dbFields, function (key, field){
var tmp = new Object();
tmp.name = fieldsObject[key];
tmp.color = colorsObject[key];
tmp.data = filtered[field];
tmp.min = 0;
tmp.lineWidth = 1.5;
seriesCalculated.push(tmp);
});
However, when I generate it using the script above and PhantomJS none of the colours are applied and neither the line thickness... it's simply a very thick light grey line for each series.
Any help/ideas would by much appreciated!
Sample of incorrect output can be found here
In one file, I have
go
In t2.html I have
<script>
document.write(window.opener);
</script>
On Safari on iOS, and on Chrome on the Mac and on pretty much every other browser, it prints out [object Window] like you'd expect.
On Chrome on iOS, I get null.
How do I get to the window that opened this window?
This code solves the problem you are talking about (specifically for issues with Chrome ios not liking "pop ups"), but in reference to Paypal Adaptive Payments where it opens a "pop up" and redirects to Paypal page for payment.
The key is that you have to:
Initiate the window.open directly from a button/link click
You must use the _blank as the window "name" (and not choose your own)
The main thing you want/need is:
var win;
//VERY IMPORTANT - You must use '_blank' and NOT name the window if you want it to work with chrome ios on iphone
//See this bug report from google explaining the issue: https://code.google.com/p/chromium/issues/detail?id=136610
win = window.open(paypalURL,'_blank');
//Initiate returnFromPayPal function if the pop up window is closed
if (win && win.closed) {
returnFromPayPal();
}
Here is the full code that you can follow (ignore anything that doesn't apply to what you are doing).
<div>
<?php $payUrl = 'https://www.paypal.com/webapps/adaptivepayment/flow/pay?expType=mini&paykey=' . $payKey ?>
<button onclick="loadPayPalPage('<?php echo $payUrl; ?>')" title="Pay online with PayPal">PayPal</button>
</div>
<script>
function loadPayPalPage(paypalURL)
{
var ua = navigator.userAgent;
var pollingInterval = 0;
var win;
// mobile device
if (ua.match(/iPhone|iPod|Android|Blackberry.*WebKit/i)) {
//VERY IMPORTANT - You must use '_blank' and NOT name the window if you want it to work with chrome ios on iphone
//See this bug report from google explaining the issue: https://code.google.com/p/chromium/issues/detail?id=136610
win = window.open(paypalURL,'_blank');
pollingInterval = setInterval(function() {
if (win && win.closed) {
clearInterval(pollingInterval);
returnFromPayPal();
}
} , 1000);
}
else
{
//Desktop device
var width = 400,
height = 550,
left,
top;
if (window.outerWidth) {
left = Math.round((window.outerWidth - width) / 2) + window.screenX;
top = Math.round((window.outerHeight - height) / 2) + window.screenY;
} else if (window.screen.width) {
left = Math.round((window.screen.width - width) / 2);
top = Math.round((window.screen.height - height) / 2);
}
//VERY IMPORTANT - You must use '_blank' and NOT name the window if you want it to work with chrome ios on iphone
//See this bug report from google explaining the issue: https://code.google.com/p/chromium/issues/detail?id=136610
win = window.open(paypalURL,'_blank','top=' + top + ', left=' + left + ', width=' + width + ', height=' + height + ', location=0, status=0, toolbar=0, menubar=0, resizable=0, scrollbars=1');
pollingInterval = setInterval(function() {
if (win && win.closed) {
clearInterval(pollingInterval);
returnFromPayPal();
}
} , 1000);
}
}
var returnFromPayPal = function()
{
location.replace("www.yourdomain.com/paypalStatusCheck.php");
// Here you would need to pass on the payKey to your server side handle (use session variable) to call the PaymentDetails API to make sure Payment has been successful
// based on the payment status- redirect to your success or cancel/failed page
}
</script>
This seems to be a bigger story. See Bugtracker here:
http://code.google.com/p/chromium/issues/detail?id=136610&q=window.opener&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20OS%20Area%20Feature%20Status%20Owner%20Summary
But it seems, as if iframes could handle the parent-property, so maybe you could switch your app from using popups to using an overlay.
If you want to pass values from child to parent use the following code.
Add following code to parent page:
var hidden, state, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}
// Add a listener that constantly changes the title
document.addEventListener(visibilityChange, function () {
if (localStorage.getItem("AccountName")) {
$("#txtGrower").val(localStorage.getItem("AccountName"));
}
if (localStorage.getItem("AccountID")) {
$("#hdnGrower").val(localStorage.getItem("AccountID"));
}
}, false);
Add following in child page (Any preferred event)
function CloseChildAndLoadValuesToParent() {
localStorage.setItem("AccountName", 'MyAccountName');
localStorage.setItem("AccountID", 'MyAccountID');
window.close();
}
Say I wanted to have bit of text (actually 4 different addresses) that I'd like to be able to easily (and frequently) paste. Is there a way I can make a bookmarklet that will put those addresses into the clipboard?
I'd like to be able to click the appropriate one, then right click + Paste.
Yes it's possible, have a look at zeroclipboard (note: requires flash). Also see this previous question.
Try building a Firefox extension instead of a bookmarklet. Mozilla XUL (extension language) lets you do copy-paste. Another option is a Java Applet.
http://brooknovak.wordpress.com/2009/07/28/accessing-the-system-clipboard-with-javascript/
Method with no third-party libraries
While zeroclipboard could potentially work, this method will allow you to visually select an element and automatically copy the inner text to your clipboard without having to download any third-party libraries. It is based on this function by Arne Hartherz and modified to work both in HTTPS and HTTP contexts.
Readable version:
var overlay = document.createElement('div');
Object.assign(overlay.style, {
position: 'fixed',
top: 0,
left: 0,
width: '100vw',
height: '100vh',
zIndex: 99999999,
background: 'transparent',
cursor: 'crosshair'
});
document.body.append(overlay);
function copyToClipboard(textToCopy) {
// navigator clipboard api needs a secure context (https)
if (navigator.clipboard && window.isSecureContext) {
// navigator clipboard api method'
return navigator.clipboard.writeText(textToCopy);
} else {
// text area method
let textArea = document.createElement("textarea");
textArea.value = textToCopy;
// make the textarea out of viewport
textArea.style.position = "fixed";
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
return new Promise((res, rej) => {
// here the magic happens
document.execCommand('copy') ? res() : rej();
textArea.remove();
});
}
};
function getElement(event) {
overlay.style.pointerEvents = 'none';
var element = document.elementFromPoint(event.clientX, event.clientY);
overlay.style.pointerEvents = 'auto';
return element;
}
document.addEventListener('mousemove', function(event) {
var element = getElement(event);
if (!element) return;
var position = element.getBoundingClientRect();
Object.assign(overlay.style, {
background: 'rgba(0, 128, 255, 0.25)',
outline: '1px solid rgba(0, 128, 255, 0.5)',
top: '' + position.top + 'px',
left: '' + position.left + 'px',
width: '' + position.width + 'px',
height: '' + position.height + 'px'
});
});
overlay.addEventListener('click', function(event) {
var element = getElement(event);
var text = element.textContent || element.value;
text = text.replace(/\n[ \n]+\n/g, "\n").replace(/\n\n+/g, "\n\n").replace(/^\n+|\n+$/g, '');
if (!text.match("\n")) text = text.replace(/^ +| +$/, '')
copyToClipboard(text);
document.body.removeChild(overlay);
});
Minified version for use in bookmarklet:
javascript:void function(){function a(a){if(navigator.clipboard&&window.isSecureContext)return navigator.clipboard.writeText(a);else{let b=document.createElement("textarea");return b.value=a,b.style.position="fixed",b.style.left="-999999px",b.style.top="-999999px",document.body.appendChild(b),b.focus(),b.select(),new Promise((a,c)=>{document.execCommand("copy")?a():c(),b.remove()})}}function b(a){c.style.pointerEvents="none";var b=document.elementFromPoint(a.clientX,a.clientY);return c.style.pointerEvents="auto",b}var c=document.createElement("div");Object.assign(c.style,{position:"fixed",top:0,left:0,width:"100vw",height:"100vh",zIndex:99999999,background:"transparent",cursor:"crosshair"}),document.body.append(c);document.addEventListener("mousemove",function(a){var d=b(a);if(d){var e=d.getBoundingClientRect();Object.assign(c.style,{background:"rgba(0, 128, 255, 0.25)",outline:"1px solid rgba(0, 128, 255, 0.5)",top:""+e.top+"px",left:""+e.left+"px",width:""+e.width+"px",height:""+e.height+"px"})}}),c.addEventListener("click",function(d){var e=b(d),f=e.textContent||e.value;f=f.replace(/\n[ \n]+\n/g,"\n").replace(/\n\n+/g,"\n\n").replace(/^\n+|\n+$/g,""),f.match("\n")||(f=f.replace(/^ +| +$/,"")),a(f),document.body.removeChild(c)})}();