LESS client side

Question

I'm trying to get this fiddle to work locally. It does not render properly. I've no idea why. The linked .less file is copied directly from the fiddle. The result of my markup is a blank page. I opted to use the CDN because when I downloaded the source I was unsure which less.js file to copy.

Here's the markup:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>radial-progress</title>
<link rel="stylesheet/less" type="text/css" href="styles/radial-progress.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
</head> 
<body>
    <div class="radial-progress" data-progress="0">
        <div class="circle">
            <div class="mask full">
                <div class="fill"></div>
            </div>
            <div class="mask half">
                <div class="fill"></div>
                <div class="fill fix"></div>
            </div>
            <div class="shadow"></div>
        </div>
        <div class="inset">
            <div class="percentage"></div>
        </div>
</div>
<script>
$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
window.randomize = function() {
$('.radial-progress').attr('data-progress', Math.floor(95));}
    setTimeout(window.randomize, 200);
    $('.radial-progress').click(window.randomize);
</script>
</body>
</html>

locally as on a local server or as on the file protocol? – epascarello Jul 09 '15 at 16:30 — epascarello, Jul 09 '15 at 16:30

score 1 · Accepted Answer · edited May 23 '17 at 10:26

1

My guess is you are running off the C: drive instead of a local server so the relative protocol link is breaking.

src="//cdnjs..."

needs to be

src="http://cdnjs..."

Better yet look into running your own server. It is simple with python or node.

edited May 23 '17 at 10:26

Community

1
1

answered Jul 09 '15 at 16:32

epascarello

204,599
20
195
236

Is it not possible to run through the file protocol? – Ayaz Memon Jul 09 '15 at 16:39
You can run on file protocol, but it is a bad idea. The file protocol has different browser restrictions than the web and will make your job a nightmare. – epascarello Jul 09 '15 at 16:41
I made the change you suggesting; nothing changed. I'll research running with python or node – Ayaz Memon Jul 09 '15 at 16:43
Error in the developer console? – epascarello Jul 09 '15 at 16:44
unsure of your question; I've never used a developer console. This is my first attempt – Ayaz Memon Jul 09 '15 at 16:46
**Developer Tools:** [Chrome](https://developer.chrome.com/devtools/docs/console) or [Firefox](https://developer.mozilla.org/en-US/docs/Tools/Web_Console) or [IE](https://msdn.microsoft.com/en-us/library/dd565625(v=vs.85).aspx) or [Safari](https://developer.apple.com/safari/tools/) – epascarello Jul 09 '15 at 16:50
plenty, apparently this is only an issue on chrome .. it partially works in ff, I'm still unable to get the transition to show – Ayaz Memon Jul 09 '15 at 18:00
@Ayaz It's [possible](http://stackoverflow.com/questions/18529733) to use file protocol in Chrome too. Aditionally note that you don't need `$('head style[type="text/css"]').attr('type', 'text/less'); less.refreshStyles();` stuff, it's used only to hack jsfiddle to compile it's css code as less one. – seven-phases-max Jul 09 '15 at 20:15

LESS client side

1 Answers1