Why does the following media query work fine in FF (22.0) and Chrome (28.0.1500.71), but Safari (6.0.5) ignores it?
In case it's relevant, I'm using Mac OS X (10.7.5) macbook pro 13"
Thank you for your help!
Also, does anyone know if it works in IE?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style type="text/css">
body {background-color:#efefef;}
h1 {color:black;}
#media only screen and (max-width:37.5em) {
body {background-color:#000000;}
h1 {color:white;}
}
</style>
</head>
<body>
<h1>Hi.</h1>
</body>
</html>
I found out why it wasn't working:
To test the media query, I was zooming in on the page, rather than resizing the browser window, and in Safari, unlike FF and Chrome, the media query doesn't kick in until you've refreshed the browser.
Related
I am currently working on a node app using express, and rendering html page using ejs.
When I used bootstrap in my .ejsfile, the .col-xs-*, .col-sm-* breakpoints worked well, but the breakpoints for the larger width cannot work as expected.
While I used bootstrap in the .html file and opened it in the browser, all breakpoints worked fine. And I've tried include bootstrap from both CDN and local, it resulted in the same situation. Can't figure what went wrong.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel='stylesheet' type='text/css' href='/bootstrap.min.css'>
<title>
TEST
</title>
<style>
.eight{
background-color: red;
}
.four{
background-color: blue;
}
</style>
</head>
<body class='container-fluid'>
<article class='row'>
<div class='col-sm-8 eight'>
8
</div>
<div class='col-sm-4 four'>
4
</div>
</article>
</body>
</html>
I want the red div to occupy three-fourths of the row, the blue one occupy the rest.
Suggestions and solutions to the problem are appreciated.(Not a native English speaker, sorry for the unclear expression if any.)
I'm working on webpage that was built to run on IE7, and now i'm in the process of upgrading the page to run in IE11 Edge mode by default.
What i've did in the page is that i added
<!DOCTYPE html>
I also added this
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Test Image Request</title>
<style type="text/css">
.auto-expand{overflow-y:visible}
</style>
</head>
Now whenever i open the page, the Emulation Panel in IE11 Developer mode says its rendering in IE7!
What did i miss?
Solved! there was <script> before <head>, moved it after <head> and now eveything works fine.
I've registered my SoundCloud app.
I'm trying to implement the SoundCloud JS example code with the "callback.html" API
https://developers.soundcloud.com/docs/api/sdks#authentication http://connect.soundcloud.com/examples/recording.html
When I upload a recording, I get the authorization-login popup.
After I login, the popup says "This popup should auto close..."
But the popup doesn't close.
And the recording isn't uploaded.
I'm positive SC.initialize has my correct "clientID" and is referencing "callback.html" correctly from my directory.
Am I missing something? maybe "client secret"?
SC.initialize({
client_id: "xxxxxxxxxxxxxxxxxxxxxx",
redirect_uri: "http://www.example.com/callback.html"
});
One time (fluke) instead of the normal pop msg "This should close", the message said "502 Bad Gateway". But I havent been able to reproduce this msg.
SoundCloud's sample code is broken.
This is from SoundCloud's callback.html
<body onload="window.opener.setTimeout(window.opener.SC.connectCallback, 1)">
This is how I got it to work:
<body onload="window.setTimeout(window.opener.SC.connectCallback, 1)">
SoundCloud's connectCallback uses this.location to collect the OAuth access token. If you set the timeout on window.opener, inside connectCallback this will refer to your app's window and the location will be your main page. Whereas setting it on window will bind this to the callback popup window, and this.location will contain the access token in the query arguments.
I also faced the same issue, and found the solution, if you change your callback.html to below two options, it will work -
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Connect with SoundCloud</title>
</head>
<body onload="window.opener.setTimeout(window.opener.SC.connectCallback, 1)">
<b style="text-align: center;">This popup should automatically close in a few seconds</b>
<script type="text/javascript">
window.opener.SC.connectCallback.call(this);
</script>
</body>
</html>
Or
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Connect with SoundCloud</title>
</head>
<body onload="setTimeout(window.opener.SC.connectCallback)">
<b style="text-align: center;">This popup should automatically close in a few seconds</b>
</body>
</html>
HTML5 Video tag fallback is not working for me. Embed tag without Video tag works fine.
Below code doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Video Demo</title>
</head>
<body>
<video width="549" height="309" controls autoplay>
<source src="small.3gp" type="video/3gpp">
<div>
No Movie
<embed width="549" height="309" autoplay="true" type="video/quicktime" src="small.3gp">
</div>
</video>
</body>
</html>
Below code works.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Video Demo</title>
</head>
<body>
<embed width="549" height="309" autoplay="true" type="video/quicktime" src="small.3gp">
</body>
</html>
I need to create a video player which can run any kind of video file and fallback to quick time if its not supported by native. Mp4 format works fine as its supported in native browser (Chrome , IE and FF also as decoder is already there).
I am testing fallback for other than Mp4. like 3gp in this case.
I have seen code examples of Video for everybody, videojs, diveintohtml5/video, but not able to execute the the above code.
Any help would be appreciated.
I'm having trouble figuring out why the viewport line from html5bp is causing a problem with colorbox. The problem arises when I view with my iPhone 4. The YouTube video in the popup modal is too big for the screen. On the desktop everything is fine.
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
If I don't use this line, my colorbox modal works great. However my page is not scaled well for mobile.
If I include this line, my colorbox modal is too big for the screen.
Here are example links showing both behaviors:
http://ivantown.com/cbtest/good.html
http://ivantown.com/cbtest/bad.html
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<title>colorbox youtube</title>
<link rel="stylesheet" type="text/css" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
<script>
$(document).ready(function(){
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:464});
});
</script>
</head>
<body>
<h2>colorbox youtube</h2>
<a class="youtube" href="https://www.youtube.com/embed/C0DPdy98e4c?autoplay=1">Link1</a>
</body>
</html>
Thanks for any help. Long time benefactor from the community here but first question.
Your problem lies here
$(document).ready(function(){
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:464});
});
If you pay attention to your code you are specifying the innerWith of the colorbox to 640px. (innerWidth:640, innerHeight:464) iPhone portrait width is 320px. That's why it is running over.
So you have two options: you can set the width and height as a percentage, or using javascript detect if the user is on a desktop or mobile device and set your width and height accordingly.