I have the following example:
<style type="text/less">
#bg: black;
#fg: white;
body {
background-color: #bg;
color: #fg;
}
</style>
<script type="text/javascript" language="JavaScript"
src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.js">
</script>
<title> test </title>
</head>
<body>
test
<script type="text/javascript" language="JavaScript">
alert("test");
</script>
</body>
</html>
It shows a JavaScript alert and white text on black ground in Firefox, Chrome and Opera. For some reason, it does not work in IE11: The alert is being shown, but the LESS parsing does not happen. I made the IE11 Developer Tools break on all exceptions, but nothing seems to go wrong.
The alert is here because I was worried that Internet Explorer might not be executing scripts at all, but this is clearly not the case.
Btw, I also tried this with the earlier version
https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.min.js
instead of the one from cdnjs.cloudflare.com, no luck either.
As far as I know, LESS should be supported on IE11. I would be very grateful if anyone had any idea why it is not working.
Edit It seems like this may be a problem with my internet explorer configuration. I am on a Windows 2008 R2 machine with all my Internet Explorer settings at default.
Place your LESS code after the <script>tag.
<script type="text/javascript" language="JavaScript"
src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.js">
</script>
<style type="text/less">
#bg: black;
#fg: white;
body {
background-color: #bg;
color: #fg;
}
</style>
<title> test </title>
If you place it before you include less.js the browser doesn't know what to do with that piece of code. That is why it doesn't get parsed.
Another approach: remove language="JavaScript" on all <script> tags as the attribute has been deprecated.
Related
I am trying to make a local html file so that I can embed Cryptowat.ch's embed API into a desktop application through a webview.
I have found an NPM package that demonstrates how to use the API, and it seems really easy. It even comes with a sample JSFiddle.
Before digging into any of the customization I simply copied the JSFiddle to a local file:
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<style>
#chart-container {
width: 550px;
height: 186px;
}
</style>
<div id="chart-container"></div>
<script type="text/javascript" src="https://static.cryptowat.ch/assets/scripts/embed.bundle.js"></script>
<script type="text/javascript">
function loadChart() {
var chart = new cryptowatch.Embed('gdax', 'btcusd', {
timePeriod: '30m',
width: 550,
height: 186
});
chart.mount('#chart-container');
}
window.onload = loadChart;
</script>
</body>
</html>
It works fine in the JSFiddle, but it doesnt work in ANY browser I've had installed. On Chrome, I see the chart, but no data and the page becomes unresponsive. On Firefox I only see a black square. On Internet Explorer, it's just a blank page.
Is there something obvious I'm missing?
There simply seemed to be a momentary blip in the API.
I was experiencing the exact same issues as you described, using your above code.
Without modifying the code at all, it now appears to be working correctly.
I added to a website a plugin that shows a calendar and the user can choose several days. It works fine on Firefox, but it does not execute on Chrome and Opera. The strange thing is that I isolated the plugin in another website, just with this code:
<title>jQuery Datepicker</title>
<style type="text/css">
#import "jquery.datepick.css";
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.datepick.js"></script>
<script type="text/javascript" src="jquery.datepick.lang.min.js"></script>
<script type="text/javascript" src="jquery.datepick-es.js"></script>
<script type="text/javascript">
$(function() {
$('#popupDatepicker').datepick({multiSelect: 999, monthsToShow: 2,dateFormat: 'yyyy/mm/dd', showTrigger: '<button id="showcal" type="button" class="trigger ">' +
'<img src="img/calendar.gif" alt="Calendario"></button>'});
//$.datepick.regional['es']));
});
</script>
</head>
<body>
<p>A popup datepicker <input type="text" id="popupDatepicker"></p>
Which is the minimum code to get the plugin working and it does work in Chrome (plugin site here)1
The problem is when I implement it on the complete website, which doesn't work. It is the same code with the same libraries included, but obviously with other code.
I have checked firebug and it does not return any error, so I am a bit lost.
Just in case in needed, my Chrome version is 18.0.1025.162, but should not be relevant.
What can be wrong?
One last thing: Is there any kind of javascript standard which would work on all browsers?
Thank you very much in advance
jQuery UI has an excellent datepicker and is a good bet to be compatible with most browsers.
I'm new to JS and I need to detect whenever someone enters to my site with the Interent Explorer Browser. So, I made the following code and the div that I created is being scripted on other web browsers I assume the problem is with the .getElementById or such.
So after the talking, here's the code:
<html>
<head>
<script type="text/javascript">
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer")
{
document.getElementById("example");
}
</script>
</head>
<body>
<div id ="example">You're Using Interent Explorer. </div>
</body>
</html>
Thanks alot for helpers.
These HTML comments are only rendered by internet explorer
<body>
<!--[if IE]>
<div id ="example">You're Using Interent Explorer. </div>
<![endif]-->
</body>
most of the time it's for CSS, because you can target IE 6,7,8,etc or greater than IE 7:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Example
1 To begin with, you should hide the div (display:none).
2 You need to actually do something with the div in your script (fiddle).
<html>
<head>
<script type="text/javascript">
window.onload = function(){
if (navigator.appName === "Microsoft Internet Explorer")
{
document.getElementById("example").style.display = "block";
}
}
</script>
</head>
<body>
<div id ="example" style="display:none;">You're Using Interent Explorer. </div>
</body>
</html>
Otherwise, you could just add the div contextually (fiddle)
window.onload = function(){
if (navigator.appName === "Microsoft Internet Explorer")
{
document.body.appendChild(
document.createElement("div")
).appendChild(
document.createTextNode("You're Using Interent Explorer"));
}
}
First of all, JavaScript should not be used to detect browsers. Like, for Chrome, it gives the result "Netscape". Anyways to answer your question, what about an alternative:
<html>
<head>
<script type="text/javascript">
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer")
{
document.getElementById("example").innerHTML="You're using Internet Explorer!";
}
</script>
</head>
<body>
<div id ="example"></div>
</body>
</html>
What it does is it will have no content in the specific div element, that is, example. Only if JavaScript detects that one is using Internet Explorer, it writes "You're using IE" in the div element. For example, you can check out http://www.ducksearch.in/ using Internet Explorer. It shows an alert box that some features may be missing if you use IE. Very basic JavaScript, indeed :)
Good luck on your way ahead, and all the best coding in JavaScript.
I had a problem with some functionality working in all browsers except for Safari, and I have reduced the problem down to this.
In my page I have the following script declarations at the end of my body element:
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-ui-1.8.11.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.ui.autocomplete.html.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.textchange.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.reveal.js"></script>
<script type="text/javascript" src="../../Scripts/mainScript.js"></script>
Then inside the mainScript.js file, I have put the following code:
$(function () {
alert("found");
});
In all other browsers, it displays a message box, but in Safari it does nothing.
Safari's javascript debugger lists the script, and can see the contents, but for some reason it's not included.
I found this problem since I tried to call a function in mainScript.js from an inline script inside the html page (the inline script was defined below the mainScript.js definition), and the Safari debugger complained that the function was not found anywhere.
What have I done wrong here, and why does not Safari include this script. All the jquery scripts are included and are working fine.
Your code seems good.
I tried with this code
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Test</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
alert("Test");
});
</script>
</body>
</html>
and it works fine (Safari 5.0.5 7533.21.1 on Windows 7).
A couple of questions:
Have you tried calling your function manually from the Error Console? Does it work?
If you place a simple alert("Test."); outside of the document ready function, is it displayed?
If you call jQuery's function from the Error Console, what do you get? Do they work?
The problem was found elsewhere in mainScript.js.
{ class: 'someclass' } was sent as parameter to some method, and class is a reserved word.
This should probably have given errors in other browsers as well, but they gladly ignored it and kept on going.
The fix was simply to change it to { 'class': 'someclass' }
I have a bug in IE8, but works in firefox, chrome and safari. Here's my HTML code
<!DOCTYPE html>
<html dir="ltr">
<head>
<style>
header {display:block; background-color:#333; color:#fff;height:30px;}
</style>
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="bug">
<header><h2>h2</h2></header>
</div>
<button type="button" onclick="$('#bug').html(' <header><h2>h2</h2></header>');">press</button>
<script type="text/javascript" language="javascript" src="jquery.tools.min.js"></script>
</body>
</html>
You can see the code in action here - http://evermight.com/jquerybug/index.html
In IE8, how come when I press the "press" button, the h2 with black background turns to white background instead of remaining as black background? When I remove the white space in between html(' and <header> of the button's onclick event handler, then the black bakground persists as expected.
Why does an empty space affect the CSS appearance of the header tag in IE8?
This isn't a jQuery bug -- its an IE combined with HTML5shiv bug. Or you could just call it an IE bug in general.
If you try your code, replacing
<header> .... </header>
with
<div class='header'> .... </div>
you'll find it works correctly, even with the leading space.
If you read the issues page on the html5shiv site this is a known bug (dynamically created HTML5 elements not styling).
You can also read this stackoverflow post for more information on what's going on and some workaround suggestions.
You need the innershiv.