I am using Modernizr to detect whether browsers support the CSS3 property background-size for a mobile site I'm building.
I'm testing the site in the Opera Mini 6 Simulator on the official Opera website, and Modernizr detects that the browser supports background-size and adds the class 'backgroundsize' to the <html> element accordingly.
However when I then use the background-size property in my CSS it is not supported.
Here's the head:
<script src="modernizr.js" type="text/javascript"></script>
<style>
body {
background:url('background.gif') no-repeat 0 0 #FFF;
}
.backgroundsize body {
-o-background-size: 100% auto;
background-size: 100% auto;
}
</style>
And the body content
<p>Content</p>
<script>
if (Modernizr.backgroundsize == true) {alert("Background size is supported");}
</script>
I am expecting the single background image to be stretched across the full width of the browser, instead it repeats; the page can be seen here - http://so.ajcw.com/mobile.htm
I guess one of five things has happened - does anyone know the reason and can offer a solution?
Modernizr does not work properly and has given a false positive
Opera Mini 6 incorrectly tells Modernizr it supports background-size when it doen't
The simulator is not an accurate emulation and the real Opera Mini does support background-size
I have written my code incorrectly
Or something else?
background-size is not supported in Opera Mini
I wrote this as a quick work around:
var isOperaMini = (navigator.userAgent.indexOf('Opera Mini') > -1);
if(isOperaMini) {
var root = document.documentElement;
root.className += " opera-mini";
}
It add's a class "opera-mini" to the html element. Therefore you can target Opera Mini. An example below:
.icon {
background-image: url("icon-social.svg");
background-size: 32px;
}
html.opera-mini .icon,
html.no-svg .icon {
background-image: url("icon-social.png");
}
See more at: http://anthonydillon.com/blog/#sthash.VUV1hIy2.dpuf
It seems things have changed. For my Opera Mini 7.5 on Android.
Modernizr.backgroundsize == true;
And it responds correctly to percentage values as well as to cover and contain.
#anthony's answer doesn't work as it's not resetting / removing the background-size property for Opera Mini. The correct way to do this is:
.class {
-o-background-size:cover;
-background-size:cover;
}
x:-o-prefocus, .class {
-o-background-size:;
background-size:;
}
The x:-o-prefocus targets just Opera browsers.
Related
Does anyone have examples of Google Street View working on Squarespace using the API?
I have been able to use other examples to display google maps (non street view) but when I try to get Google's street view example to work... nothing.
Here is my attempt:
http://keweenaw.squarespace.com/googlemapsapitest
I have this code in my page header code injection
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#street-view {
height: 100%;
}
</style>
<script>
var panorama;
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('street-view'),
{
position: {lat: 37.869260, lng: -122.254811},
pov: {heading: 165, pitch: 0},
zoom: 1
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key= AIzaSyBSlsYgCGP7KfS5doe_q0X9guiJ3WNrfns&callback=initialize">
</script>
And this in a code block on the page:
<div id="street-view""></div>
You've got a number of issues which, once corrected, do in fact generate a working embedded Google Street View on a test Squarespace account.
You have a space at the beginning of your API key, causing it to be invalid.
You have an extra set of double quotes on <div id="street-view""></div>
Your CSS rule `#street-view {height: 100%;} won't work. Briefly put, you'll have to define a height in pixels, like "400px" or a similar 'fixed' unit.
You are loading the API over HTTPS but your site is HTTP. You need to either enable SSL on your Squarespace site or change the API url to http://maps.googleapis.com/maps/...etc. The prior is likely preferred.
By opening your browser's console (F12) you can see the specific error messages and work through them one by one (although, having seen these before certainly makes diagnosis faster).
To get you back on the right track, I would put the following code entirely in a code block on the page, where you want the map to appear. You can adjust width and height via your CSS. Once you get it working, you can experiment (if you choose) with moving your CSS to the CSS Editor and your Javascript to Code Injection.
<div id="street-view"></div>
<style>
#street-view {
height: 400px;
width: 100%;
}
</style>
<script>
var panorama;
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('street-view'),
{
position: {lat: 37.869260, lng: -122.254811},
pov: {heading: 165, pitch: 0},
zoom: 1
}
);
}
</script>
<script async defer src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBSlsYgCGP7KfS5doe_q0X9guiJ3WNrfns&callback=initialize"></script>
Also, note that the code above is using HTTP for the Maps API so that it will work with your current configuration. If you choose to enable SSL as mentioned, you'll need to change the Maps API url to HTTPS.
Here is a working example, using HTTPS. This example will quit working soon.
I'm working on a site that uses media queries. I can see in my desktop browser that they are working correctly, but when I navigate to the site on my WP8 device, no CSS is loaded. I've created a very simple HTML page to replicate the problem and show what solution I tried, but couldn't get to work.
Here is the entire code:
<html>
<head>
<title>WP8 Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
#-webkit-viewport{width:device-width}
#-moz-viewport{width:device-width}
#-ms-viewport{width:device-width}
#-o-viewport{width:device-width}
#viewport{width:device-width}
#media screen and (min-width: 1024px) {
body {
background-color: red;
}
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
body {
background-color: blue;
}
}
#media screen and (min-width: 480px) and (max-width: 768px) {
body {
background-color: green;
}
}
#media screen and (max-width: 480px) {
body {
background-color: yellow;
}
}
</style>
<script type="text/javascript">
if (navigator.userAgent.match(/IEMobile\/7\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"#-ms-viewport{width:auto!important}"
)
);
document.getElementsByTagName("head")[0].
appendChild(msViewportStyle);
}
</script>
</head>
<body>
text
</body>
</html>
As you can see, it is very simple, there are 4 different "breakpoints" where the body's background color will change for different screen widths. After noticing how it doesn't work in IE on my WP8 device (a Lumia 822), I began googling the issue, and it seems to be a pretty well known issue. So the solution I found, and tried, came from here:
http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
It seems pretty straightforward, in that I add the five lines to the top of my CSS:
#-webkit-viewport{width:device-width}
#-moz-viewport{width:device-width}
#-ms-viewport{width:device-width}
#-o-viewport{width:device-width}
#viewport{width:device-width}
And then add some JS to detect the IE Mobile browser from the UA. I have two issues with that:
First - When I alert my user agent string, I get the following from my WP8 device:
Mozilla/4.0 (compatible; MSIE 7.0;Windows Phone OS 7.0; Trident/3.1;IEMobile/7.0;NOKIA; Lumia 822
According to the article above, and this article, it should be IEMobile/10.0 instead. Any ideas on why mine is different? This appears to be the Windows Phone 7 user agent string. Why would my WP8 device show that?
Because of that difference, I had to change the JS to match 7.0 instead of 10, otherwise the if condition would never be met.
So, even still, with my code above, nothing happens, and my screen loads white on my WP8 device. Can anyone see what I'm doing wrong?
UPDATE:
It appears the JS was throwing an error:
Unexpected call to method or property access
So I found a solution for that, here:
if (navigator.userAgent.match(/IEMobile\/7\.0/)) {
var s = document.createElement("style");
s.setAttribute('type', 'text/css');
var cssText = "#-ms-viewport{width:auto!important}";
if(s.styleSheet) { // IE does it this way
s.styleSheet.cssText = cssText
} else { // everyone else does it this way
s.appendChild(document.createTextNode(cssText));
}
document.getElementsByTagName("head")[0].appendChild(s);
}
But, even now that the code executes successfully, my media queries are still ignored and I still see a white page load. Any ideas?
UPDATE 2:
I found another article, here (scroll to bottom), that says as of the GDR3 update (which I have, through the dev program):
Great news! Microsoft have fixed the viewport issue in WP8 Update 3
(GDR3).
Using device-width in a CSS #-ms-viewport rule now correctly renders
pages at the device-width, instead of the resolution width.
So, again I tried removing the Javascript, and adding only this to the top of my CSS:
#-ms-viewport{
width:device-width
}
But again, no CSS loads.
UPDATE 3:
It appears my User Agent may be correct. When I navigate to whatsmyuseragent.com on my WP8 device, it shows the correct UA. Maybe it has something to do with it being a local IIS 8.0 site when it reports the incorrect one? If that's the case am I not able to test my site locally from my Windows Phone? Has anyone ever done this?
It looks like you've sorted it now with bootstrap, but it's possible the site kicked in to EmulateIE7 (for compatibility) for some reason. It seems Lumia can also pick up on this for example if you have the <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> tag and of course media queries are not supported on IE7.
I'm using SASS with Rails 3.2.3 and Ruby 1.9.3 in RVM.
My issue is that, for one reason or another, my SASS box-shadow mixin causes Internet Explorer 8 to crash on page load, no error from IE, just completely closes. If I remove the mixin, it opens perfectly...The mixin looks like:
#mixin boxShadow($params) {
-moz-box-shadow: $params;
-webkit-box-shadow: $params;
box-shadow: $params;
}
I have this at the top of my application.scss
#import 'mixins';
I'm using the mixin as such:
#include boxShadow(0px 1px 3px #999);
Any idea why this could be happening?
Turned out to be an old version of respond.min.js blowing things up!
I am using JS to hide and show a flash video object at various stages in a flow. The function works perfectly in all browsers including Safari 5.1 on OSX 10.6, but does not work on Safari 5.1.3, 5.1.4 and 5.1.5 on OSX 10.7. It repositions on the page but remains visible.
You can see the issue here.
Any help really appreciated!
Embed code:
var swfVersionStr="10.2.0";
var xiSwfUrlStr="/video/expressInstall.swf";
var flashvars={
sToken:"#{#stream_name}",
sSWFPath: "/video/Recorder.swf",
sConfigPath: "#{current_recorder_config_file}"
};
var params={
bgcolor:"#FFFFFF",
allowfullscreen:"true",
allownetworking:"all",
allowscriptaccess:"always",
base:".",
devicefont:"false",
menu:"false",
play:"true",
quality:"high",
salign:"tl",
scale:"showall",
seamlesstabbing:"false",
swliveconnect:"true",
wmode:"window"
};
var attributes={
id:"Recorder",
name:"Recorder"
};
swfobject.embedSWF("/video/Recorder.swf", "flashContent", "384", "318", swfVersionStr, xiSwfUrlStr, flashvars, params, attributes);
JS for Hide and Show:
function hideVideo() {$('.step_video, #flashContent').css({visibility:'hidden', height:1})}
function showVideo() {$('.step_video, #flashContent').css({visibility:'visible', height:'auto'})}
Already had this bug before you shouldn't hide it, it's a bug with flash.
My workaround was :
position: absolute;
left: -5000px;
I configuring standart badge on https://developers.google.com/+/plugins/badge/config
For it Google+ rendering iframe content.
How i can change classes styles inside iframe?
At this time it seems there is currently no way to do it. I tried editing the CSS to get rid of the annoying border and white background:
.yeb {
background-color: none !important;
border: 0px solid gainsboro !important;
}
But since the CSS is in the Google server you can't override the iFrame. It is a current feature request in the Google forums.
You can do a little trick:
The HTML for the iframe:
<div id="social_gplus_circle">
<div id="social_gplus_circle_inner"><g:plus href="https://plus.google.com/105379671042990608528" size="smallbadge"></g:plus></div>
</div>
The CSS for the trick:
#social_gplus_circle{overflow: hidden;width: 105px;height: 45px;padding-top: 7px;}
#social_gplus_circle_inner{overflow: hidden;position: relative;top: -20px;left: -130px;height: 50px;width: 276px;}
iframe{display: block!important;}
I did not made this myself, I got it from a google forum.
You can't change it , because the google plus code is not on your server.
You can only modify the iframe CSS , if your page and the iframe code is on the same server.