HERE Maps JavaScript API errors in Firefox and Chrome (but not IE) when there are style sheets in the body.
Working example:
<!DOCTYPE html>
<html>
<head>
<title>Working</title>
<script type="text/javascript" src="http://js.api.here.com/se/2.5.3/jsl.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/2008/site/css/minimum" />
</head>
<body>
<div id="map" style="height: 500px; width: 500px"></div>
<script type="text/javascript">
nokia.Settings.set('appId', *REMOVED*);
nokia.Settings.set('authenticationToken', *REMOVED*);
new nokia.maps.map.Display(document.getElementById('map'));
</script>
</body>
</html>
Failing Example:
<!DOCTYPE html>
<html>
<head>
<title>Failing</title>
<script type="text/javascript" src="http://js.api.here.com/se/2.5.3/jsl.js"></script>
</head>
<body>
<div id="map" style="height: 500px; width: 500px"></div>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/2008/site/css/minimum" />
<script type="text/javascript">
nokia.Settings.set('appId', *REMOVED*);
nokia.Settings.set('authenticationToken', *REMOVED*);
new nokia.maps.map.Display(document.getElementById('map'));
</script>
</body>
</html>
The problem appears to be from the following logic:
var f = c.styleSheets, p = f.length, a, k, m = c.createElement("style");
m.setAttribute("type", "text/css");
c.getElementsByTagName("head")[0].appendChild(m);
a = f[f.length - 1];
It looks like what's happening is document.styleSheets will have elements in the body after elements in the head, so this tries to manipulate an external style sheet instead of the style element it just created.
According to the HTML5 specification on link:
If the rel attribute is used, the link element is restricted to the head
element....
Therefore your HTML5 markup is invalid, since the link should not occur within the body, this is metadata content which should be placed in the head. Obviously IE is being more lenient for some reason (I guess there must be some sort of IE specific code being used here to try and get it to be standards compliant, which happens to accept the link in a body as a by-product)
Related
i dont see that my web page is changing according to the style defined in the css file. when i added the same in html file, it is working. can someone please help. dont know what is wrong.
below is my simple html file
<html>
<head>
<title>css</title>
<body>
<link rel="stylesheet" type="text/css" href="style.css">
test
</head>
</body>
</html>
below is my css file.
<style>
body
{
background-color:lightblue;
}
</style>
<style>
body {
background-color:lightblue;
}
</style>
is not a right way to write a .css file.
Remove those style tags from your .css file and check again.
Also,
Make sure your .html and .css files are on the same path
(In order to make things work without changing the link tag in your html head
Just noticed:
Your body tag is INSIDE your head tag. Which is incorrect.
Right way to do so is,
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test
</body>
</html>
Change css file as: Remove <style> </style>
body
{
background-color:lightblue;
}
Also correct the format of html as
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test
</body>
</html>
This works for Me. Make sure your html and css both the files should be in same folder.
Try this.
HTML-
<html>
<head>
<title>css</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
test
</body>
</html>
CSS-
body {
background-color: lightblue;
}
You wrapped the head tag around everything. And a link tag should always be placed between head tags and not in the body tag.
your code should be like the example below. All the rest seems fine.
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test
</body>
</html>
Css should be like this:
body {
background-color:lightblue;
}
always css link in head section, u can also see the path of the file, Do not use type attributes for style sheets (unless not using CSS),Specifying type attributes in these contexts is not necessary as HTML5 implies text/css and text/javascript as defaults. This can be safely done even for older browsers
type="text/css"
HTML
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
hello
</body>
</html>
You are using wrong CSS syntax. In a CSS file, there are no <style></style> tags, they are just rules. So you should have:
body
{
background-color: lightblue;
}
Also, you should link your CSS file into the <head> tag, it is better for your file's organization.
Flowplayer has an icon on the top left of the video which is "<>". When you click on it comes up with message "Paste this HTML code on your site to embed."
I want to remove that icon from my videos.
So I changed the fp-embed to display:none as per below.
However its still not working.
Any help would be appreciated.
Thanks
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flowplayer ยท iframe src</title>
<!-- optimize mobile versions -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The "minimalist" skin - choose from: "minimalist.css", "functional.css", "playful.css" -->
<link rel="stylesheet" href="//releases.flowplayer.org/5.4.6/skin/playful.css">
<style type="text/css">
.fp-embed {
display: none;
}
</style>
<!-- Flowplayer depends on jquery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/5.4.6/flowplayer.min.js"></script>
</head>
<body>
<div class="flowplayer color-light fixed-controls color-alt no-background"
data-fullscreen="true">
<video>
<source type="video/mp4" src="http://example.com/example.mp4">
</video>
</div>
</body>
</html>
the above mentioned method will Never work. I wasted a lot of time in doing it just by css.
instead of this :
<div class="flowplayer color-light fixed-controls color-alt no-background"
data-fullscreen="true">
use this :
<div class="flowplayer color-light fixed-controls color-alt no-background"
data-fullscreen="true" data-embed="false">
Your style gets overwritten by that of flowplayer itself.
If you be more specific with your CSS style selector you will be able to hide it:
.flowplayer .fp-embed {
display: none;
}
Use this:
flowplayer.conf = {
embed : false
};
Rer.: https://flowplayer.org/docs/embedding.html#disabling-embedding
I am using a jquery plugin nicescroll
I am loading different pages via iframe to a section of the div (i have to use iframes to sandbox the iframe content )
I have created this small page and i am having two issues?
1) if i try to scroll by touching the iframe content nothing moves, i have to touch outside the iframe to scroll it
2) it scrolls very slow and uneven.
I have hardcoded the width to work on the scrolling. I am going to have to resize the width after load once i have this initial problem fixed.
Thanks for any help
This is the simple page
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="/inc/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css">
<!-- jQuery and jQuery Mobile -->
<script src="/inc/js/jquery-1.9.1.min.js"></script>
<script src="/inc/js/jquery.validate.min.js"></script>
<script src="/inc/js/jquery.cookie.js"></script>
<script src="/inc/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="application/javascript" src="/inc/js/jquery.nicescroll.min.js"></script>
<script type="text/javascript">
$( document ).on( "pageinit", "#test", function( event ) {
$("#viewportdiv").niceScroll("#wrapper");
});
</script>
</head>
<body>
<div data-role="page" id="test">
<div data-role="header">
<h1>My Title</h1>
</div>
<div data-role="content" id="viewportdiv">
<div id="wrapper" style="width:1200px; height: 100%; ">
<ul>
<li>
<iframe id="myiframe" src="http://www.lipsum.com/feed/html" width="1200" height="600" seamless ></iframe>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
In regards to question no1, have you tried the niceScroll option oneaxismousemode:false
So something like this:
$(document).ready(function() {
var nice = $("html").niceScroll(); // The document page (body)
$("#div1").html($("#div1").html()+' '+nice.version);
$(".container-horizontal").niceScroll(".content",{cursorcolor:"#000",cursoropacitymax:0.7,touchbehavior:true,oneaxismousemode:false});
});
p.s. It may help to post an example link
... in fact all markup that i put before the
<div data-role="page">...</div>
is visible a very little time and when page is fully rendered, all these content disappears. Its still visible in Source / Firebug although.
i'm using HTML5Boilerplate for this project. Here's some code - maybe there are some collisions that i didn't find?!
<head>
<link rel="stylesheet" href="styles/normalize.css"/>
<link rel="stylesheet" href="styles/vendor/jquery.mobile-1.2.0.css"/>
<link rel="stylesheet" href="styles/vendor/jquery.mobile.structure-1.2.0.css"/>
<link rel="stylesheet" href="styles/vendor/jquery.mobile.theme-1.2.0.css"/>
<script type="text/javascript" src="scripts/vendor/modernizr-2.6.1.min.js">
</script>
</head>
<body>
<!-- header disappears after page is rendered :( //-->
<div data-role="header">
Here goes the Head-Content
</div>
<h3>This content disappears also :( ... </h3>
<!-- everything below this point stays visible! //-->
<div data-role="page">...</div>
</body>
...
<script type="text/javascript" src="scripts/vendor/jquery-1.8.3.min.js">
</script>
<script type="text/javascript" src="scripts/vendor/jquery.mobile-1.2.0.min.js">
</script>
As asked :)
In jQuery mobile, data-role="page" isn't a container for your content, it is literally the page that you want to serve, anything else won't be shown. You need to put your data-role="header" inside data-role="page", and it will work
Basic jQuery mobile page from jquerymobile.com:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
// Anything here will not be on the page
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
// Anything here will not be on the page
</body>
</html>
Proof here
I have this page
<head>
<title>Real Life Achievements</title>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width">
<link rel="stylesheet" type="text/css" href="frameworks/jquerymobile.css"/>
<link rel="stylesheet" type="text/css" href="application.css"/>
<script type="text/javascript" charset="utf-8" src="frameworks/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="frameworks/jquerymobile.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", initApp, false);
</script>
</head>
<body>
<div data-role="page" id="start">
...
</div>
</body>
I read here that I can apply styles for the whole data-role="page" container by doing this
.ui-page {
background: #eee;
}
but it doesnt work. My background for the page is always white. I dont want to use JQM styles. How can I apply my body-styles to the jquery mobile "page"?
.ui-content will style the data-role=content area. So for example if you want to style the whole page area you would do this:
.ui-content, .ui-page{background: #eee;}
Keep in mind you will have to move your css underneath the JQM style sheet as someone else already suggested.
Here is an example of it working http://jsfiddle.net/codaniel/7M4Pg/1/
You need to move the application.css header below the framework css files, because your styles are being overwritten by the framework loading. Alternatively, you can add !important to the background rule, like background: #eee !important;, to prevent being overwritten by later stylesheets.