Develop Reference

What is the difference between <link> and <script> when using jQuery .append()?

When I do this:
$('head').append('<script type="text/javascript" src="script.js"></script>');
then script.css is loaded and executed, and is available for use immediately.
But when I do this:
$('head').append('<link rel="stylesheet" type="text/css" src="sheet.css" />');
then sheet.css is not loaded. However when I look at the generated source, the line in question has been added to the object.
Apparently scripts and style sheets are being treated differently by the browser.
Why?

For link element, specify the source of external stylesheet in href attribute. You need to update your code from
$('head').append('<link rel="stylesheet" type="text/css" src="sheet.css" />');
to
$('head').append('<link rel="stylesheet" type="text/css" href="sheet.css" />');

Lightbox Portfolio Window Not Popping Up

here's a link to the webpage causing my problems (WordPress site): http://brightpixelstudios.co.uk/portfolio/
When I click on the thumbnail to start a pop up window, the window doesn't appear as it should and there's a weird couple of 'next' and 'previous' links appearing in the bottom left of the screen.
It was working a month ago when I last checked. Is there anything in the code I can do to fix it?
Any help would be much appreciated!
Regards, Will

It looks as though the 3 stylesheets below are not being loaded by the page.
<link rel='stylesheet' id= href='http://brightpixelstudios.co.uk/ext/contact-form-7/includes/css/styles.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id= href='http://brightpixelstudios.co.uk/ext/wp-pagenavi/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
<link rel='stylesheet' id= href='http://brightpixelstudios.co.uk/skin/02/includes/css/prettyPhoto.css?ver=3.5.2' type='text/css' media='all' />
Probably because of the empty id= tag.
The lightbox seems to be loading at the bottom of the page but there are no styles being applied.

Changing Kickstrap Theme with Dropdown Menu?

I'm using Kickstrap to theme my bootstrap app and my client wants users to be able to change themes on the fly. I know that to change the theme, all you have to do is change the directory in the themes.less file but I don't know the best way to go about this. Also, I want to remember a user's theme preference so I need to store a cookie to do this, but I'm not entirely sure if it's possible to read cookies straight into LESS as variables.
Basically, I just want a dropdown menu that allows users to select a theme from a list.
Any suggestions would be great! Thanks!

Assuming you're just using plain HTML/CSS/JavaScript and not a server-side framework, there are a few ways to do this. One involves actually modifying the LESS source code but let me offer some simpler ways:
I would try keeping theme.less blank, so it will just show a default Bootstrap theme.
then you can load your Kickstrap theme on a separate line like this:
<link rel="stylesheet/less" type="text/css" href="kickstrap.less" />
<link rel="stylesheet/less" type="text/css" href="mytheme.less" />
<script src="less.js"></script>
Two theme files
Of course, your theme might have two files, like variable.less and bootswatch.less which may not work keeping them separate:
<link rel="stylesheet/less" type="text/css" href="kickstrap.less" />
<link rel="stylesheet/less" type="text/css" href="variables.less" />
<link rel="stylesheet/less" type="text/css" href="bootswatch.less" />
<script src="less.js"></script>
So instead, you can just #import the variables.less file into bootswatch.less.
#import "variables.less";
And then use the original example from above.
<link rel="stylesheet/less" type="text/css" href="kickstrap.less" />
<link rel="stylesheet/less" type="text/css" href="bootswatch.less" />
<script src="less.js"></script>
By the way, if you're not using LESS client-side, no worries. Just use the compiled CSS files for each instead.
<link rel="stylesheet/less" type="text/css" href="css/kickstrap.css" />
<link rel="stylesheet/less" type="text/css" href="css/bootswatch.css" />
Writing to the DOM
As far as changing this in the DOM, I would try taking advantage of the cssIfy() function already in kickstrap.js. This will take a string (the .css filename) and write it as a stylesheet to the DOM. If you need to write it as a .less file, you can probably just manipulate this function easily. Maybe something like this:
function lessIfy(filePath) {
var linkElement = document.createElement("link");
linkElement.setAttribute("rel", "stylesheet/less");
linkElement.setAttribute("type", "text/css");
linkElement.setAttribute("href", filePath);
document.getElementsByTagName('body')[0].appendChild(linkElement);
}
If you do it this way, you'll need to make sure less.js loads afterwards, so try either appending it before that or (worse) loading less.js again after that.

Take a look at how the "Included Themes" option changes the themes as you select them.

how can i add a css file to body of a page?

I am working on a page which has a print view so when the user clicks on "Print" a new window pops up and I want to add a .css file just for that window.
Thanks

When including your stylesheet, use this:
<link rel="stylesheet" media="print" href="stylesheet.css" />

You can add a print only style sheet
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
This stylesheet does not need to be "added" to popup windows. It will be ignored when the user is in the "normal" view and then only applied when the user goes to print the document.
If you want to be both visible and apply to the printed document, just have it cascade.
<link rel="stylesheet" type="text/css" href="normal.css" /> #normal styling
<link rel="stylesheet" type="text/css" href="print.css" /> #override normal styling
<link rel="stylesheet" type="text/css" media="print" href="print.css" /> #override normal, for printer
That way you get the best of both worlds. Override the css rules in normal.css with new rules in print.css, as needed to make the document look as you wish. The new document will visually look different and then also print out differently.

EDIT: Removed due to clarification. New answer:
Open the URL in a new window as such: blah.aspx?print=true
Then on your backend:
//Assuming you use .NET...
if(Request.Querystring("print").toLower() == "true" ) { //Convert to bool type if you are so inclined
printCSS.Visible = True;
}
HTML:
<head>
<link rel="stylesheet" type="text/css" href="..." visible="false" runat="server" id="printCSS" />
</head>
You could also use one of the jQuery methods shown to load it in using jQuery too.

$(document).ready(function () {
$(".print").click(function () {
$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel: "stylesheet",
type: "text/css",
href: "css/ecsPrint.css"
});
return false;
});
});
Unless this is a Internal Web Application, i wouldnt recommend loading css with JS.

Print Css not loading

I am trying to load my print.css but it does not seem to be loading. it work Fine in FF and Safari but the problem is only in IE.
I have the regular external css for the page inbetween the head tags
And when the user click on the print link . it loads the print css .
<div class="linkPrint">
<a target="_blank" href="?format=print">Print</a>
</div>
var format = getUrlParam('format');
if (format == 'print') {
$('head').append('<link href="/theme/print.css" rel="stylesheet" type="text/css" />');
}
But,in IE it load the standard css instead of the print.css.
How do can this be fixed for IE6?
Thanks

You can have the print CSS and your screen CSS both loaded at the same time on the page without them interfering with each other - you need to specify the media attribute on the link tag:
<link href="/theme/print.css" rel="stylesheet" type="text/css" media="print" />
<link href="/theme/screen.css" rel="stylesheet" type="text/css" media="screen" />
No need to go through the javascript trickery.
As for IE6 - it does support this, as can be seen on the comparison list on this page.

Try removing the <link> to the other css file when you append the print.css

try with document.write,
document.write('<link href="/theme/print.css" rel="stylesheet" type="text/css" />');