Problem with dynamicly creating href attribute - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Problem with dynamicly creating href attribute

Lookie

1:21 pm on Apr 18, 2005 (gmt 0)

10+ Year Member

Hello!

I have a problem regarding <link> href attribute. I have a function that dynamicly writes to <head> tag the <link> tag with attribute href which points to the certain .css file. href property is set to site root eg. href="/css/print.css" - which is simply done by document.write('<link href="....">'). The thing is browser doesn't interpret newly created <link> tag so that the <link> would have a document relative path instead just writes literal and the path is not valid. So the question is how do i "write" to the <head> tag that href attribute would be interpreted. Hope I was clear. I appreciate and help or tips. Thanks.

function Preview() {
var query;
var title;
var hidden;
title = window.location.href;
query = title.indexOf('?');
if (query!= -1) {
if (title.substr(query+1) == 'print=yes') {
hidden = document.getElementsByTagName("link");
hidden[0].disabled = true;
document.write('<link href="/css/print.css" rel="stylesheet" type="text/css" media="screen">');
document.write('<link href="/css/print.css" rel="stylesheet" type="text/css" media="print">');
}
}
}

Rambo Tribble

2:43 pm on Apr 18, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

I suspect the domain of a document generated with write() may be taken as local by the browser, and not the same as the page originally loaded.

Lookie

5:11 pm on Apr 18, 2005 (gmt 0)

10+ Year Member

Your suspicion is correct. The "original" href property of <link> containing reference to print.css that was hidden later in the function is interpreted by the browser to relative to document. Any ideas? Thanks.

Rambo Tribble

3:18 am on Apr 19, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

You might try the header element <base />, which takes an href value to establish the absolute URL for relative URLs to work off of.

Lookie

9:18 am on Apr 19, 2005 (gmt 0)

10+ Year Member

Is there any other solution that would write the header stream from server instead of writing it on client on render? Help needed. Thanks

natty

9:37 am on Apr 19, 2005 (gmt 0)

10+ Year Member

can you not add the link to the stylesheet, via JS on the fly?

document.styleSheets[] or something of the sort..

just a thought.

Lookie

10:01 am on Apr 19, 2005 (gmt 0)

10+ Year Member

Thanks for reply. The thing is I'm using Dreamweaver MX for development. If there are two <link> tags with two different .css references and different media attributes Dreamweaver renders both anyway in design view which makes harder to add content later on. So i think it would be better to write second <link> on the fly with javascript.

Lookie

11:49 am on Apr 19, 2005 (gmt 0)

10+ Year Member

I amended snippet like this now:

function Preview() {
var query;
var title;
var hidden;

var domain;
domain = document.location.hostname;

title = window.location.href;
query = title.indexOf('?');
if (query!= -1) {
if (title.substr(query+1) == 'print=yes') {
hidden = document.getElementsByTagName("link");
hidden[0].disabled = true;
document.write('<link href="'+domain+'"/css/print.css" rel="stylesheet" type="text/css" media="screen">');
document.write('<link href="'+domain+'"/css/print.css" rel="stylesheet" type="text/css" media="print">');
}
}
}

... and it still doesn't work. Any ideas?

Rambo Tribble

12:39 pm on Apr 19, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Once you do document.write, you're pretty much wiping out whatever came before in the document. It sounds like you need to lose document.write and go to using either node manipulation methods or innerHTML.

Bernard Marx

1:18 pm on Apr 19, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

I don't think innerHTML "does head".

It will have to be a DOM method,

document.createElement('link')
document.createStyleSheet()

?

Lookie

1:35 pm on Apr 19, 2005 (gmt 0)

10+ Year Member

Hi!

I know I'm a bit of a pain but beacause I'm not proficient (obviusly) in javascript I'm wondering how should I try to amend this snippet to work.

document.createElement('<link href="'+domain+'"/css/print.css" rel="stylesheet" type="text/css" media="screen">');

?
Thanks for your patience ;)

Lookie

7:46 am on Apr 20, 2005 (gmt 0)

10+ Year Member

As Bernard Marx suggested I shoul use something like this: var element = document.createElement('link') and then go with: element.setAttribute(...) .How would I then output all this to the head tag of the page? Does anybody have any alternatives for making this work finally? Thanks for reply.

Bernard Marx

8:05 am on Apr 20, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

You can certainly use setAttribute. I don't bother as yet, with standard attributes.
So it's like this. The function can be called, it appears, even from within the head element, before it has been closed.

[pre]
function addSheet(href)
{
  var sheet = document.createElement("link");
  sheet.rel = "stylesheet";
  sheet.type = "text/css";
  sheet.href = href;
  sheet.media = "screen";
  document.getElementsByTagName("head")[0].appendChild(sheet);
}
addSheet('test.css')[/pre]

A few notes:

- I think only IE supports this usage of createElement:
createElement('a whole opening tag with attributes')
createStyleSheet is also IE only

Lookie

9:18 am on Apr 20, 2005 (gmt 0)

10+ Year Member

Hi!

I amended the function and I think it might be more elegant solution then createElement method:

Function Preview() {
var title;
var query;
title = document.location.href;
query = title.indexOf('?');
if (query!= -1) {
if (title.substr(query+1) == 'print=yes') {
document.getElementById("default_css").href = "/css/print.css";
}
}
}
Preview();

I have a default .css in the link tag with id=default_css which href attribute is simply replaced when a function is called. Any thoughts?

Bernard Marx

11:23 am on Apr 20, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

I didn't realise that you had a pre-existing link tag to play with.
Sounds good. The last time I tried that sort of thing it worked (checked in IE & FF).

Your query string parsing approach forgets the convenience of a location.search property, and isn't capable of handling queries that have further params, or hash params, but it works for now, so who cares.