Is it possible to load a div if a mobile is detected or if a resolution is lower than 641px?
I have different menus for desktop and for mobile. Mobile menu uses image svg sprite, but for desktop i don't want that svg image to load to save HTTP request.
I can hide the div based on media queries, but how can i at least prevent the image from being loaded, or load the intire menu div only for mobile?
What is the best approach to this?
You can prevent the image from being loaded in certain condition's
$(document).ready( function() {
if(yourCondition){
$("img").removeAttr("src");
}
});
https://code.google.com/p/php-mobile-detect/wiki/Mobile_Detect
check above link, you can just use it in if else statement to show hide div on basis of device type
<?php
// Written By Adam Khoury # developphp.com - March 26, 2010
// PHP swapping CSS style sheets for target device layouts
// Make your index page of your site a .php file instead of .html
$styleSheet = "default.css";
$agent = $_SERVER['HTTP_USER_AGENT']; // Put browser name into local variable
if (preg_match("/iPhone/", $agent)) { // Apple iPhone Device
// Set style sheet variable value to target your iPhone style sheet
$styleSheet = "iphone.css";
} else if (preg_match("/android/", $agent)) { // Google Device using Android OS
// Set style sheet variable value to target your Android style sheet
$styleSheet = "android.css";
}
?>
above code is simply taken from http://www.developphp.com/view_lesson.php?v=310, check the complete code if you want.
If your biggest problem is to prevent loading some images if not needed I would recommend to stay with media query.
If you load different css-files (depending on media) you can add the needed images as "background-image:".
This should also work for SVG Spite.
How to use SVG Sprite Sheet as CSS background-image while maintaining aspect ratio and scalability
Related
For a project I need to load a pdf file onto a div. On clicking a button a canvas will be opened where the user will draw his signature and then on clicking the add button present in the canvas, the user should be able to place the canvas signature as an image on to the pdf. At last on clicking the final button the image should get merged onto the pdf.
I did the above task in the following way:
Converted pdf into series of images using GhostScript.
Loaded the converted images onto a div.
On clicking the button a canvas will be opened and the user will sign in it and on clicking the add button present in the canvas, the user will be able to place the image onto the image of pages loaded in the div.
I obtain the page Id which is the page number and the signature image placed coordinate using e.clientX and e.clientY.
Then I pass all those 3 values to a php script which uses fpdf and fpdi to merge the image onto the pdf.
I'm not able to place the image properly because e.clientX and e.clientY makes use of pixel as units where as fpdf uses mm as units. I'm trying to sort out that.
Is there any other way to do this in a simpler way. i.e., directly loading the pdf onto the div and merging the signature instead of what I've explained above.
You may try Firefox's PDF.js, which you can make use of, in your project. A sample code would be:
PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
// Using promise to fetch the page
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
There are Javascript-Libraries like Mozillas pdf.js that render PDF-Files directly in the browser into a canvas. That might be a possibility to circumvent the image-rendering process. But as far as I know those libraries have problems with CMYK-PDFs. Therefore the safe way would be to do the image rendering.
As for embedding the signature into the pdf I can't see any other way then the one described by you. The aforementioned libraries all are only displaying the PDF-file so they can not write into the PDF.
Hope that helps
You can look at Applidok PDF service, which allow to have signature area, so that form user will have the chance to either upload signature image, or to draw it on a canvas, so that it get merged on his custom PDF document generated at end.
An example is online at http://pipnee.com/P398D433C .
I'm having issues with adsense on responsive design. One solution I found is to not load them at all if window size is not big enough. So I thought I would create a separate php file with advertisement code, container etc... and than include it on a page. However, I can't figure out how to only include this file if, lets say, window width is 720px or above, else don't include this file.
Perhaps, javascript can be used some way, not sure how it will work with all the dom and php includes though.
You can try something like:
<script language=javascript>
if (screen.width >= 720 )
$('#place_holder_div').load('file_from_server.php');
</script>
Here #place_holder_div is a div in your html file. The syntax is Jquery but of course you can use plain javascript if you wish. The code looks at the screen width and if greater than 720 pixels, loads the php file file_from_server.php (which will contain your ad) into the placeholder div.
The only way to know what the window or screen size of a client is, is by using JavaScript.
window.innerHeight; // Available height of the browser for the document
window.innerWidth; // Available width of the browser for the document
window.outerHeight; // Browser height
window.outerWidth; // Browser width
window.screen.height; // Screen height
window.screen.width; // Screen width
After inspecting these, you could do a HTTP request for the relevant file. It is, however, probably not the best solution since the user can actually change any size mentioned above at any given time.
Is there any class in tcpdf that make Page Display -> Enable Scrolling default options (When i open it in adobe reader), please help, i lost half of day on this. I found this class, but not what I need.
// set pdf viewer preferences
$pdf->setViewerPreferences($preferences);
I was looking for the same answer and your question actually put me on the right track.
From inspecting the TCPDF class, ended up finding the answer in the TCPDF_STATIC class, in the static method TCPDF_STATIC::getPageLayoutMode().
The correct function to use would be TCPDF::SetDisplayMode($zoom, $layout, $mode). For your purpose I'd suggest:
$pdf->SetDisplayMode('default','OneColumn');
OR
$pdf->SetDisplayMode('default','continuous'); // continuous not documented, although should work.
Possible values for those parameters are as follows (from the method's PHPdoc):
$zoomThe zoom to use. It can be one of the following string values or a number indicating the zooming factor to use.
fullpage: displays the entire page on screen
fullwidth: uses maximum width of window
real: uses real size (equivalent to 100% zoom)
default: uses viewer default mode
$layoutThe page layout. Possible values are:
SinglePage Display one page at a time
OneColumn Display the pages in one column
TwoColumnLeft Display the pages in two columns, with odd-numbered pages on the left
TwoColumnRight Display the pages in two columns, with odd-numbered pages on the right
TwoPageLeft (PDF 1.5) Display the pages two at a time, with odd-numbered pages on the left
TwoPageRight (PDF 1.5) Display the pages two at a time, with odd-numbered pages on the right
$modeA name object specifying how the document should be displayed when opened:
UseNone Neither document outline nor thumbnail images visible
UseOutlines Document outline visible
UseThumbs Thumbnail images visible
FullScreen Full-screen mode, with no menu bar, window controls, or any other window visible
UseOC (PDF 1.5) Optional content group panel visible
UseAttachments (PDF 1.6) Attachments panel visible
public function SetDisplayMode($zoom, $layout='SinglePage', $mode='UseNone') {
if (($zoom == 'fullpage') OR ($zoom == 'fullwidth') OR ($zoom == 'real') OR ($zoom == 'default') OR (!is_string($zoom))) {
$this->ZoomMode = $zoom;
} else {
$this->Error('Incorrect zoom display mode: '.$zoom);
}
$this->LayoutMode = TCPDF_STATIC::getPageLayoutMode($layout);
$this->PageMode = TCPDF_STATIC::getPageMode($mode);
}
I'm creating a slideshow with 5 frames (each of which will have its own slideshow of images) with huge images and it takes some time for the first few images in each frame to be loaded(the rest of the images are loaded really fast). So I was thinking I could preload a simple black images (the background is black) and then start my slideshow once I know the images have loaded. Also, the slideshow images are dynamic, ie their urls change every day.
Does anyone know how I could do that? Because what I've found online only preloads an image but says nothing about how to start my slideshow after that.
Or if anyone has a better solution, please let me know!
FYI, for the slideshow I've used PHP to extract the image urls into a file and JavaScript to read them from it and display them in the slideshow.
Thanks!
A good way to preload images is to load them outside of the frame using css with position: absolute, i can remember reading that using display: none; it would not get downloaded by Safari.
This seems to be an elegant way to precache the images.
"Per Paul Irish, the canonical plugin for detecting image load complete events is now at:
https://github.com/desandro/imagesloaded"
Source: jQuery event for images loaded
This should work
/*You could populate this array through an xml to something if there are too many images*/
var arrUrls = ["image1.jpg", "image2.jpg", "image3.jpg"];
var nLoadCount = 0;
for(var i=0;i<arrUrls.length;i++)
{
var oImage = new Image ();
oImage.onload = function ()
{
nLoadCount++;
if(nLoadCount == arrUrls.length)
{
/*Show your content here*/
}
}
oImage.src = arrUrls[i];
}
Hi I want to detect ipad orientation in php, i know i can detect the iPad but how do i detect the orientation, i need it in php and not css because i want to show x pictures in my gallery in portrait and x in landscape.
here is the code i am using to detect the php for iPad:
if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPad') !== FALSE) {
} else {
}
i have checked on this site and on google but was unable to find anything which could help
thankyou
iPad orientation can change when the user holds her iPad differently. Therefore, there's no point of registering it in php - by the time your response reaches the client, it might already be different.
If there needs to be any plumbing that can't be done in CSS (like loading different images or so), handle the orientationchanged event in JavaScript.
This is not orientation detection but USER AGENT detection. It only detects what kind of browser is browsing your page.
Are you trying to detect the device or what way the device is rotated?
I believe you would have an easier time detecting the orientation of a device either in Javascript or CSS, have you looked into these yet?
Javascript:
<button onclick="detectIPadOrientation();">What's my Orientation?</button>
<script type="text/javascript">
window.onorientationchange = detectIPadOrientation;
function detectIPadOrientation ()
{
if ( orientation == 0 ) {
alert ('Portrait Mode, Home Button bottom');
}
else if ( orientation == 90 ) {
alert ('Landscape Mode, Home Button right');
}
else if ( orientation == -90 ) {
alert ('Landscape Mode, Home Button left');
}
else if ( orientation == 180 ) {
alert ('Portrait Mode, Home Button top');
}
}
</script>
CSS
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
The device orientation is dynamic - the user can rotate the device after the page has been loaded. Therefore, it makes no sense to include it in the user agent string.
Instead, you should use HTML and JavaScript to change the layout when the orientation changes.
Everyone is suggesting you do it in Java Script which is completely correct but I'm guessing you don't see that as an option from your question.
You should load enough images (or all if not a stupid number, it is only a URL string after all) from PHP to fill the largest size in JSON (json_encode($array of image URL's to use)) format. Then use JavaScript to detect orientation and populate the page with the correct number/layout of images.
You'll have an array in JavaScript of Image URL's to pick from and load dynamically.
use this code may be use full to you
var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';
A brutal way would be to store the orientation change in a cookie through jQuery and access it with the $_COOKIE variable in php.
However, you would still need the javascript hooks to detect the orientation change and possibly a page reload.