Struggling with LESS - javascript

I am trying to learn about LESS. After a very quick success on one site, I am now struggling on another while using pretty much the same code:
<link href="css/reset.min.css" rel="stylesheet" />
<link href="css/styles.less" rel="stylesheet/less" type="text/css" />
<script src="js/less-1.3.1.min.js" type="text/javascript"></script>
Should I change anything on the server to make it work?

I get a 404 when trying to access your LESS file: http://belleandvidere.co.uk/dev/styles.less
Please check your path.

At one point or another I ran into an issue with the order of the HTML properties (it shouldn't matter but it did).
I found that <link rel="stylesheet/less" type="text/css" href="styles.less"> would work, while <link href="styles.less" rel="stylesheet/less" type="text/css"> would not.
I'm pretty certain that less.js incorrectly checks for <link> elements. This may or may not still be an issue.

Try invoking the LESS JavaScript file before the LESS CSS Document.
I am assuming this due to the HTML DOM.
With the HTML DOM the HTML is loaded, the CSS is loaded, and then the JavaScript is loaded.
Try to place the script tag about the link tags.
Thanks,
I hope that helps.

Related

Fixed header table does not scroll (jquery)

See this demo
I'm using the fixedheadertable plugin available here
For some reason my sample table is not scrolling, what am I doing wrong?
Initialization is done at the bottom of the javascript code:
$("#fixed").fixedHeaderTable();
$("#fixed").fixedHeaderTable("show");
It looks like you were missing the required CSS from the demo files, I've added them to this fiddle and it seems to work for me now.
If you look at the Github page for the project, there's a demo folder, in there I had a look at test.html it included the following CSS references:
<link href="../css/defaultTheme.css" rel="stylesheet" media="screen" />
<link href="css/myTheme.css" rel="stylesheet" media="screen" />
I'm not sure specifically which styles are required for it to work as opposed to styles that are there just for cosmetic purposes as I don't have time (I just dumped all the CSS from those two files in the fiddle) but hopefully you should be able to figure that out :)

Bootstrap CDN not working with angular

I am trying to make a small app in angular and am trying to include the Bootstrap CDN into the head section. My current head section looks like this:
<head>
<script src="http://code.angularjs.org/angular-1.0.0rc3.min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="todo.css">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
</head>
When I go to refresh the page none of the bootstrap changed have been made. Is this something going on with Angular or am I just making a dumb mistake?
You have the wrong URL. You can plug it into your browser to see where it takes you.
yours:
http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css
correct one:
http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css
To make sure you have the correct one, always get it from here: http://getbootstrap.com/getting-started/
For me, Instead of using CDN, Adding and referencing the bootstrap css file locally in dist folder(or whatever folder you have generated via Angular fixed the issue.

Can I place conditional comments in the bottom of my html document? (in the body) or should it be in the head?

<script>if(BrowserDetect.browser=="safari"){document.write('<link rel="stylesheet" href="css/safari.css" type="text/css" media="all" />')}</script>
<!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="css/pie.css" /><![endif]-->
Can I place conditional comments in the bottom of my html document? (in the body) or should it be in the head?
Placing those in the bottom is better in terms of page speed or not?
You can have conditional comments anywhere. Only the specified version of IE will parse the contents. In this case, where you have CSS in your conditional comment, it should be in your <head>.
Also, it's not a good idea to use JS to insert a stylesheet. The user will see the unstyled (or incorrectly styled) content until the document.write fires, and the css file loads. Insert with a server-side script such as PHP first.
If the line in question is the one you posted....
Then no, that has to go at the top of the page, as it is a CSS file, and will likely be needed to style the page....so you need to load it in the <head>
But to answer your actual question...conditional javasript logic can really go anywhere...

SyntaxHighlighter only adding line numbers

I can't seem to figure out my problem with SyntaxHighlighter; It is only adding line numbers, not highlighting the text. I've been able to get the example page to work, but I can't figure out what's going wrong on my own page. I've looked at the page with firebug and ensured that all files are being loaded. The SyntaxHighlighter.all() function is firing, it just isn't doing the only thing I care about... highlighting.
Here is a link to my development server with the offending code. Only one of the code snippets (the first on the page) should be highlighted, and but it is only adding line numbers.
Thank you very much for any help.
You included the CSS files incorrectly as scripts, and not as "link" tags:
Bad:
<script type='text/css' src='/syntaxhighlighter/styles/shCore.css'></script>
<script type='text/css' src='/syntaxhighlighter/styles/shCoreMidnight.css'></script>
Good:
<link href='/syntaxhighlighter/styles/shCore.css' rel='stylesheet' type='text/css' />
<link href='/syntaxhighlighter/styles/shCoreMidnight.css' rel='stylesheet' type='text/css' />

jQuery undefined

Getting a weird error on a site I am developing. Even looked back at last couple of sites to make sure there was no differences... and nope, can not see any.
Getting an jQuery undefined error only in IE on the following page http://weesleekit.info/lotus/beta/ it's with regard to the easy slider part on the site, but have used easy slider multiple times before and never ever had an issue.
Can anyone shed some light into this, I am racking my brains and seem to be finding nothing.
Your problem is here:
<link rel="Stylesheet" type="text/css" media="screen" href="css/screen.css" /
><script type="text/javascript" src="js/easySlider1.7.js"></script>
There are several lines in between your / and > that shouldn't be there, and IE isn't including the <script> block that follows it.
I have no idea if this is related, but in the source of that site, before jquery.js is included there is an unclosed:
<link REL="SHORTCUT ICON" HREF="favicon.ico">
(make it: ```)
maybe IE is bugging out and not including jQuery since it is technically inside the <link> element. See if fixing that does anything (i kinda doubt it)
and a comment by #burningstar4 says that there is a link which is missing a closing tag as well:
<link rel="Stylesheet" type="text/css" media="screen" href="css/screen.css" /
should be
<link rel="Stylesheet" type="text/css" media="screen" href="css/screen.css" />

Categories

Resources