Disable image compression in Chrome mobile browser - javascript

When using Chrome mobile on iOS and Android, we noticed that when "Reduce Data Usage" is turned on, the images on our modelling agency website get compressed by a significant amount. We would like to somehow disable this, since our portfolio has to consist of high quality photos.
Is there any HTML meta tag, CSS rule or any JS hack to force disable this function?

try <img src="example.png" pagespeed_no_transform> where
The 'Optimize Images' filter won't optimize an image (though it might still cache extend it) if it has the pagespeed_no_transform attribute.

Use some jquery
For example
$(document).ready(function(){
$("img").attr (" pagespeed_no_transform",true );
});

Related

Android with keyboard kills all of my CSS in the browser

I know it's not the first question on this topic, but I can't find any helpful solution on the web and my dev friends can't help me either.
I wrote a website (HTML, CSS) and it's responsive. But when I open the site on an Android phone, the keyboard messes up my CSS layout.
I used media queries, and didn't use much JS for the styling. I tried to use JS and I changed the viewport meta tag but it didn't help.
This is what it looks like in Chrome's Dev Mode

How to add js and css only smartphones?

I wonder how to add css and javascript code only when the site is accessed via smartphones.
Currently I'm using media queries, but it does not solve the problems, because currently some smartphones already have higher resolutions than even some tablets and desktops.
You can use feature detection via. Modernizr to check for touch events.
Alternatively you can use user-agents - check out http://detectmobilebrowsers.com/
The best bet however is to design your website using fluid grid website design so your site adapts well to mobile, tablet and laptop/desktops.
If you are trying to detect high-resolution screens (which doesn't just mean smartphones!), use the device-pixel-ratio media queries: http://css-tricks.com/snippets/css/retina-display-media-query/
What about smartphones are you actually trying to detect?
If possible, try checking the User-Agent HTTP header on the server side, and dynamically include the necessary css and js files.
You can check the browser's user-agent to see if the user is connecting from a smartphone.
Check out this relevant post

Dragging and dropping images from Firefox into Microsoft Powerpoint

I am trying to make a web page which allows users to drag and drop images into Microsoft Office applications, specifically Powerpoint.
By default (as of FF3.5), Firefox will insert the source URL when an image is dropped rather than the image itself. After adding the following Javascript/jQuery code (derived from https://developer.mozilla.org/En/DragDrop/Drag_Operations),
$('img').attr('draggable', true).bind('dragstart', function (event) {
event.originalEvent.dataTransfer.effectAllowed = 'copy';
});
dragging and dropping works from Firefox to Word and Excel, but not to PowerPoint. For an example of what happens, see http://slides.html5rocks.com/#drag-and-drop. I have tested this with FF3.6 and FF9.
How can I make it work with PowerPoint?
Just drag'n'drop outside the boundaries of the ppt slide (to make sure you're not dropping on a predefined textbox) - and release the mouse button -no coding needed!
Firefox drag will drop the image at the center of te ppt slide.
Status quo
Sadly there is nothing you can do from within your browser and the application to enable drop support for PowerPoint.
This is something that needs to supported at source level in PowerPoint (and it seem to be if you don't drop the image on an existing element but right outside the slide frame you want to drop it onto - but probably depending on version).
If it (for some reason still) does not support the image part of the drop but just the link (and if there is no option provided for changing this behavior) there is little to do but to hope Microsoft will update PowerPoint with this support in the future, - or - check the following options for work-arounds if needed:
Add-ins
You can look into writing an add-in (or possibly just use a macro - you might need to lower security to medium [PDF] for macros) for PowerPoint that will take the link that is dropped and replace it with the image the link refers to.
Here is one place to get you started making add-ins if this is a viable option.
Here is a commercial framework that makes creating add-ins very simple.
(disclaimer in this regard: I am here assuming this will be possible due to add-ins such as this which allow you to show a live web page inside PP).
Pipe-line / work process
There is also the option of injecting a third-party applications in the pipe-line to do screen snapshots of the image and have it inserted automatically into PP.
SnagIt is such an application (and there are probably others) and it has free extensions that will allow you to integrate "snags" directly with PowerPoint.
Or (the perhaps too obvious option): simply copy the image in browser and paste it into PowerPoint.
What is your version of Powerpoint?
It's very important because image format support may be lacking.
If that's the case your code needs a minimum version warning addition.
Could also ask to convert image to suitable format.
It may even be the case that it's impossible to the version of Powerpoint you're using to support this in the way you want.
You could try to use html code.
This code might help you:
http://classroomtech.org.uk/2008/08/drag-and-drop-in-powerpoint/
Other possibilities are OLE object with a link to a image.
Could check how other Microsoft applications, that do something similar, handle things.
If that doesn't work you could try to generate an OLE object with a link to the image in it.

How to make a few webpages display different on mobile devices

I have a webpage that is quite wide and short on about 3 pages, the pages that are wide and long display fine on a mobile phone browser, but the pages that are short show up on only less than half the screen.
Is there anyway I can make a seperate page for each of those 3 pages and have them come up only when someone is using a mobile phone.
Thanks
You need to insert some JavaScript that will sniff out the User Agent (web browser & version) on each page. Here is a link that explains how to do this:
http://www.quirksmode.org/js/detect.html
Once you have done that, then swap your CSS file for that page to the one appropriate for the device, or redirect to a special HTML page for that device.
If you search Google for 'Responsive Design', there is lots of advice on how to use the same page, but make it appear differently on mobile devices.
Along with "responsive design" you should investigate "media queries" which will allow you to adjust your CSS and help align the elements to the display size of each device viewing it. No javascript necessary.
How to use Media Queries in Mobile
Like others have stated. Responsive web design with Media Queries is best. Check out these sites.
http://www.alistapart.com/articles/responsive-web-design/
http://www.stuffandnonsense.co.uk/projects/320andup/

Image uploading that doesn't fail

Is there a plugin out there that will take an image that is uploaded and resize it to a smaller size so it doesn't fail in the upload process. Basically I have a need for an avatar and the users are uploading various images that are huge from their digital cameras and they tend to be about 2mb or bigger which causes the script to fail... Is there a jQuery plugin that can help me out? I kind of want if to work like the Facebook uploader where it doesn't fail. Any ideas?
By the way this a ColdFusion script, but my expertise is not in ColdFusion so I was hoping jQuery could help.
Javascript cannot resize images. For that you'll need Flash or java.
Flash upload image resize client side
Or you could do it in PHP and use GD to resize images. Don't need active x or flash or anything else but notepad and a php enabled server.
There are some JS scripts that do this for you, but they usually use Flash in the background to do the resizing.
Checkout SwfUpload or PlUpload.
As mentioned you can't resize images client-side.
I've successfully used IglooLabs jquery Plugin (http://www.igloolab.com/jquery-html5-uploader/).
I edited their plugin to do client-side file size (<2MB) and type (jpg, png etc) checks before allowing upload. I can provide edited plugin if you want...
On Upload to the server you can then do an image resize using two lines of code e.g.
<cfimage action="resize" height="" width="750" source="/img/image_to_resize.png" destination="img/resized.png" overwrite="yes" name="resized_image">
(Be warned thought that ColdFusion has a bug resizing some jpeg images. Best to convert to .png first)

Categories