<!DOCTYPE html>
<!--
This page is shown when the extension button is clicked, because the
"browser_action" field in manifest.json contains the "default_popup" key with
value "popup.html".
-->
<html>
<head>
<title>Test title</title>
<style>
body {
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
}
#status {
/* avoid an excessively wide status text */
white-space: pre;
text-overflow: ellipsis;
overflow: hidden;
max-width: 400px;
}
</style>
</head>
<body>
<p>Example 1<br>
<a href="http://dummyimage.com/600x400/000/fff.png" download>Download this image</a></p>
</body>
</html>
The above, is a button (kind of) that downloads an image. It works fine on my laptop, but when I navigate to the url on my iPhone it doesn't download. Just takes me to the actual image.
Anyone know why? Or how I can fix this?
Thanks!
iPhone doesn't have a download functionality. You will need to tap-and-hold, and select "Save".
Related
Current configuration of hardware: iPhone 6s, iOS 10.0.1 (I have a software update pending for iOS 10.0.2)
I have the following html test code (p.s. I've also tested with iPhone 6s specific queries like specified in this answer)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
#media (max-width: 600px) { h1.query1 { color: red !important; } }
#media (max-width: 700px) { h1.query2 { color: purple !important; } }
#media (min-width: 300px) { h1.query3 { color: blue !important; } }
#media (min-width: 320px) { h1.query4 { color: white !important; } }
#media (max-device-width: 1125px) { h1.query5 { color: yellow !important; } }
#media (max-device-width: 1242px) { h1.query6 { color: violet !important; } }
</style>
</head>
<body style="margin: 0 0 0 0; padding:0; min-width: 100%; width: 100%; offset: 0; clear: both;">
<div style=" margin: 0; min-width: 100%; padding: 0; width: 100%;">
<h1 class="query1" style="color: green;">MEDIA TEST</h1>
<h1 class="query2" style="color: green;">MEDIA TEST</h1>
<h1 class="query3" style="color: green;">MEDIA TEST</h1>
<h1 class="query4" style="color: green;">MEDIA TEST</h1>
<h1 class="query5" style="color: green;">MEDIA TEST</h1>
<h1 class="query6" style="color: green;">MEDIA TEST</h1>
</div>
</body>
</html>
Live version is here: http://codepen.io/anon/pen/gwkbEK
When I send it to my account in Gmaill app on Android phone I get the following result (all lines are colored):
But when I open same mail in native iOS 10 mail application in iPhone 6, I get this result (all labels are green):
Am I doing something wrong, or iOS 10 mail client stopped supporting media queries?
Important to note: these screenshots are of Gmail app on iOS, not iOS Mail app. Until a few weeks ago, no mobile Gmail client anywhere supported media queries. Gmail recently started rolling out media query support based on platform, geo-location, and product. Results will vary across Google Mail products until the rollout is complete.
As of October 2016, U.S.-based Gmail accounts are starting to see media query support whereas U.K.-based accounts are not. Litmus Previews use UK Gmail accounts, so we won't see the update appear in Litmus regardless of where we're testing from.
Gmail is also rolling out based on Gmail product, so depending on what TYPE of Gmail product you're checking and the platform, results could vary. Here is a quick breakdown of where the rollout stands now:
More info and updated charts on Litmus
I've seen similar questions, but not this exactly.
Do CSS media queries have to be in an external CSS file to work properly?
I've got a client who I’ve only got access to an inline css block within WordPress. Their IT department has the CMS really locked down, and the only thing I have access to change is the CSS via a plugin called Improved Simpler CSS that puts an inline block of <style type="text/css"></style> before the <head> closes.
In doing the site, the browser seems to pick up the "inline" media queries OK, responding to changing the browser's width, but utilizing an iPhone or iOS simulator, I only get the desktop view, and I'm thinking iOS doesn't like the CSS not being externalized.
<style type="text/css">
/* Mobile-specific media query */
#media only screen and (min-width: 320px) and (max-width:767px) {
#wrapper,
.home #content,
.page #container,
.page .page,
#footer,
.page #content {
width: 100%;
}
#header {
margin-top: 50px;
margin-left: 20px;
width: 95%;
width: -moz-calc(100% - 20px);
width: -webkit-calc(100% - 20px);
width: calc(100% - 20px);
height: 151px;
}
}
</style>
No, they don't have to be external...
MDN's docs on Media Queries demonstrates the two main ways of setting media queries:
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- CSS media query within a stylesheet -->
<style>
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
Media queries are perfectly valid within <style>, they don't have to be within an external stylesheet.
Make sure you include the viewport meta tag in your head (if you haven't already):
<meta name="viewport" content="width=device-width, initial-scale=1">
It would also help if you include the CSS you currently have.
For some reason the internal (:host) styles for the Polymer custom element aren't loading. I'm using the actual fancy_button component from pub (https://pub.dartlang.org/packages/fancy_button).
hello_world.html
<head>
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/fancy_button/fancy_button.html">
<link rel="import" href="../lib/components/first-component/first-component.html">
</head>
<body>
<button is="fancy-button">Wooot!</button>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
fancy_button.html:
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<polymer-element name="fancy-button" extends="button">
<template>
<style>
:host {
background: linear-gradient(to bottom, #ff5db1 0%,#ef017c 100%);
box-shadow: 10px 10px 5px #888888;
border-radius: 5px;
font-size: 2em;
border: 0;
font-family: 'Tangerine', cursive;
padding: 30px;
}
:host(:hover) {
cursor: pointer;
}
:host(:active) {
font-size: 3em;
}
</style>
<content></content>
</template>
<script type="application/dart" src="fancy_button.dart"></script>
</polymer-element>
I tried your code and it works for me (I get a big pink 'Woot' button, which increases it's size when clicked)
when I comment out this line
<!--<link rel="import" href="../lib/components/first-component/first-component.html">-->
I also had to add
transformers:
- polymer:
entry_points:
- web/hello_world.html
to pubspec.yaml (for dev channel Dart version 1.5.0-edge)
This might be the reason why it work here but not for you
but I can't see anything in CSS that wasn't already supported in Dart 1.4.
I also kept the polymer dependency (0.10.1+1)
I upgraded to the Dartium from the Dev Channel (http://storage.googleapis.com/dart-archive/channels/dev/release/latest/dartium/dartium-macos-ia32-release.zip) and it worked. So styles in Polymer web components don't seem to work in earlier versions of Dartium – either get the Dev Channel version as Günter had suggested or pub build and see it working in regular Chrome instead.
I am applying draggable event of jQuery UI library to a popup window. Dragging works well,but the problem is, if the window has scroll and if I click on the scroll drag event is triggered and popup is being moved and drag event is not released even the scroll event is released... Can you please tel me how to overcome it...
Here is my code snippet.....Please check and let me know what's the error
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" ></script>
<style>
#Outer{
width:400px;
height:100px;
border:1px solid blue;
position:absolute;
overflow:auto;
}
#Hdr{
background:#ffcc99;
border-bottom:1px solid blue;
}
</style>
</head>
<body>
<div id="Outer">
<div id="Hdr">About India</div>
<div>
The Indian economy is the world's tenth-largest by nominal GDP and third-largest by purchasing power parity (PPP).
Following market-based economic reforms in 1991, India became one of the fastest-growing major economies; it is considered a
newly industrialised country. However, it continues to face the challenges of poverty, illiteracy, corruption, and inadequate public healthcare.
</div>
</div>
</body>
<script>
$(document).ready(function(){
$('#Outer').draggable();
});
</script>
</html>
You may want to use a handler to bypass that problem: Like here fiddle
HTML :
<div id="Outer">
<div id="Hdr">About India</div>
<div id="Inner">
The Indian economy is the world's tenth-largest by nominal GDP and third-largest by purchasing power parity (PPP).
Following market-based economic reforms in 1991, India became one of the fastest-growing major economies; it is considered a
newly industrialised country. However, it continues to face the challenges of poverty, illiteracy, corruption, and inadequate public healthcare.
</div>
</div>
CSS:
#Outer{
width:400px;
border:1px solid blue;
position:absolute;
}
#Inner {
width:400px;
height:80px;
position:absolute;
border:1px solid blue;
overflow:auto;
}
#Hdr{
background:#ffcc99;
border-bottom:1px solid blue;
}
JS :
$(document).ready(function(){
$('#Outer').draggable({handle: "#Hdr"});
});
I have a Grails application with a form in it. Once the user has entered the data and submitted it, and it's been validated etc.. I need a message to popup in a little window to give the user some feedback - it needs to popup, rather than be displayed on the page. Can anyone advise me on the best way to do this?
I have implemented the same mechanism for my application, and I am using the jQuery plugin 'smartmodal' (used by the Nimble plugin originally). See here
You simply have to redirect the request in the controller validation code to a GSP page containing the following code:
<script type="text/javascript" src="${resource(file: 'jquery-1.3.2.js')}"></script>
<script type="text/javascript" src="${resource(file:'jquery.smartmodal.js')}"></script>
<LINK rel="stylesheet" href="./css/smartmodal.css">
...
<body>
...
<g:javascript>
$(function() {
$("#msg").hide();
$("#msg").modal({hide_on_overlay_click:false});
$("#msg").modal_show();});
</g:javascript>
<div id="msg">
My feedback message is here
</div>
<g:link controller="..." action="...">Close</g:link>
I hope it helps,
Fabien
EDIT:
An extract of the smartmodal.css file that will render the 'modal effect' is:
#modal_content {
display: none;
position: fixed;
left: 50%;
padding: 0px;
top: 10%;
background: #FFF;
border: 0px solid #d2d2d2;
width: 400px;
margin-left: -200px;
text-align: left;
}
#modal_overlay {
background-color: #000;
}
However if you want the complete file, it is available inside the great Nimble grails plugin