...

View Full Version : How to impressing code line in 'head' tag?



frozenade
07-15-2007, 11:11 AM
Hi....
Is there possible to write something in BODY section and impressing it in <HEAD>...</HEAD> tag?

for example:


<html>
<head><title>Test</title>
</head>

<body>

... JS code to impressing line: <link rel="SHORTCUT ICON" href="http://www.domain.com/favicon.ico">
...

</body>

</html>

so, when page is executed, it impressing the source to be like this:


<html>
<head><title>Test</title>

<link rel="SHORTCUT ICON" href="http://www.domain.com/favicon.ico">

</head>

<body>

</body>

</html>

BarrMan
07-15-2007, 11:42 AM
Try:

<html>
<head>
</head>
<body>
<script type="text/javascript">
var head = document.getElementsByTagName("HEAD");
var script = document.createElement("LINK");
script.href= "http://www.domain.com/favicon.ico";
script.rel = "SHORTCUT ICON";
head.appendChild(script);
</script>
</body>
</html>

Bill Posters
07-15-2007, 01:54 PM
var head = document.getElementsByTagName("HEAD");

That won't work. Even though there's only one head element, getElementsByTagName always returns an array object.
You'll need to specify which item in the array.
As there's only one head element in the document, it will be the first (and only) item in the array.

You can specify the first item in the array simply…


var head = document.getElementsByTagName("HEAD")[0];


Fwiw, you're also better off using lowercase, as this means the method will crrectly identify the targeted elements in more situations.

So…

var head = document.getElementsByTagName('head')[0];

frozenade
07-15-2007, 02:21 PM
thank you so much. I'll try it out... :)

frozenade
07-15-2007, 04:09 PM
hi...
I've tried the script, but only works on Firefox, neither Opera and IE.
What happen?

Mmm, for easier to understand, could you make another simple example, such as put <title>...</title> from 'body' section.


<html>
<head>
</head>

<body>
... send parameter inside HEAD tag: <title>This is title</title>
</body>

</html>

thank you so much..

Bill Posters
07-15-2007, 06:01 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test</title>
<script type="text/javascript">

var headEl = document.getElementsByTagName('head')[0];
var scriptEl = document.createElement('link');
scriptEl.href= 'http://www.domain.com/favicon.ico';
scriptEl.rel = 'shortcut icon';
headEl.appendChild(scriptEl);

</script>
</head>
<body>

<p>blah</p>

</body>
</html>

You'll need to make sure that the href for the favicon points to the actual location of the file.

frozenade
07-16-2007, 12:23 PM
Hi...

This is the code (yours) what I've used:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test</title>
<script type="text/javascript">

var headEl = document.getElementsByTagName('head')[0];
var scriptEl = document.createElement('link');
scriptEl.href= 'http://www.bornmatic.com/friendster/favicon.ico';
scriptEl.rel = 'shortcut icon';
headEl.appendChild(scriptEl);

</script>
</head>
<body>

<p>blah</p>

</body>
</html>

In Firefox, the icon is showed. But, Opera don't. When I store favicon.ico in same location with the HTML file (not to outer link), it works.

But, IE neither both.. :(

Bill Posters
07-16-2007, 02:52 PM
Here's what I use when I bother…

<link type="image/x-icon" rel="icon" href="/favicon.png" />
<link type="image/x-icon" rel="shortcut icon" href="/favicon.png" />

So, maybe it's worth throwing in the type as well the alternative meta link.


var headEl = document.getElementsByTagName('head')[0];

var faviconEl1 = document.createElement('link');
faviconEl1.type = 'image/x-icon';
faviconEl1.rel = 'shortcut icon';
faviconEl1.href= 'http://www.bornmatic.com/friendster/favicon.ico';

var faviconEl2 = document.createElement('link');
faviconEl2.type = 'image/x-icon';
faviconEl3.rel = 'icon';
faviconEl1.href= 'http://www.bornmatic.com/friendster/favicon.ico';

headEl.appendChild(iconEl1);
headEl.appendChild(iconEl2);

Iirc, modern browsers will automatically pick up and use any file called favicon (i.e. favicon.ico, favicon.png, …) in the local root directory without the need to specify using an icon link.

frozenade
07-17-2007, 05:58 PM
thank you so much...
your help is so worthy for me..
thank you...

one last question. I hope you don't mind. :)

how to implement two tag like <script> and </script>. for example: <script type="text/javascript" src="test.js"></script>. Because document.createElement just create 'opening tag' but not the 'close tag'

thank you so much..
CF is the best! :):thumbsup:

Bill Posters
07-17-2007, 07:31 PM
document.createElement creates the DOM element/node, which will include both the opening and closing tags when it's added to the markup.

e.g.

var bodyEl = document.getElementsByTagName('body')[0];
var pEl = document.createElement('p');
var txt = document.createTextNode('Hello world!');

pEl.appendChild(txt);
bodyEl.appendChild(pEl);
…will produce…

<body>

<p>Hello world!</p>
</body>

If you're using Firefox, it's worth grabbing the Firebug extension (https://addons.mozilla.org/en-US/firefox/addon/1843).
It gives you quick an easy access to the DOM, and allows you to see and verify the changes made through your use of the createElement method.

:)

frozenade
07-18-2007, 04:47 PM
Thank you so much for helping me so far.... thank you... :)

I have index.htm and 2 JS files, they're: js1.js and js2.js

Inside index.htm:


<html>
<head>
</head>

<body>
...
<script type="text/javascript" src="js1.js"></script>
...
</body>

</html>

Inside js1.js:


var bodyEl = document.getElementsByTagName('body')[0];
var pEl = document.createElement('script');
pEl.type = "text/javascript";
pEl.src = "js2.js";

bodyEl.appendChild(pEl);

inside js2.js:

document.write("this should be works");

It just works fine in both IE and Opera. In Firefox, the result is showed, but it still in loading progress. I implemented code inside js2.js file with more code and there's no result, only loading process.

http://img254.imageshack.us/img254/7982/maoxev2.png

Is this a bug in FF or ... what is happened?

Bill Posters
07-18-2007, 05:57 PM
Due to the timing issues, you may be better off using innerHTML or the W3C DOM (instead of document.write) to insert text and/or elements into an existing elements during load.

Fwiw, document.write is increasingly being recognised as a bit of a down and dirty method and should be avoided whenever possible.

felgall
07-18-2007, 11:32 PM
if you do use document.write() then you should also use document.close() after it so that all browsers will recognise that you have in fact finished writing.

frozenade
07-19-2007, 04:38 PM
.....

frozenade
07-19-2007, 04:43 PM
Hi...

I get this code from www.dynamicdrive.com (http://www.dynamicdrive.com/dynamicindex17/stickynote.htm).


<style type="text/css">
#fadeinbox{
position:absolute;
width: 300px;
left: 0;
top: -400px;
border: 2px solid black;
background-color: lightyellow;
padding: 4px;
z-index: 100;
visibility:hidden;
}
</style>

<DIV id="fadeinbox" style="filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=1) progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135) ; -moz-opacity:0">
INSERT ANY HTML TO DISPLAY HERE. DO NOT REMOVE OUTER MOST DIV.<br>
Script © <a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>
<div align="right"> <a href="#" onClick="hidefadebox();return false">Hide Box</a>
</div>
</DIV>

I put those code in outer file (js2.js). I need to call the code (from index.htm) then put in below of <body>. I assume to put the code in a JS file then append document.write in every single line, then called from main.htm with JS source syntax. Works in IE and Opera, but FF don't.

How to solve this problem? :(

noPCtoday
07-19-2007, 09:42 PM
Hi...

I get this code from www.dynamicdrive.com (http://www.dynamicdrive.com/dynamicindex17/stickynote.htm).


<style type="text/css">
#fadeinbox{
position:absolute;
width: 300px;
left: 0;
top: -400px;
border: 2px solid black;
background-color: lightyellow;
padding: 4px;
z-index: 100;
visibility:hidden;
}
</style>

<DIV id="fadeinbox" style="filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=1) progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135) ; -moz-opacity:0">
INSERT ANY HTML TO DISPLAY HERE. DO NOT REMOVE OUTER MOST DIV.<br>
Script © <a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>
<div align="right"> <a href="#" onClick="hidefadebox();return false">Hide Box</a>
</div>
</DIV>

I put those code in outer file (js2.js). I need to call the code (from index.htm) then put in below of <body>. I assume to put the code in a JS file then append document.write in every single line, then called from main.htm with JS source syntax. Works in IE and Opera, but FF don't.

How to solve this problem? :(

It won't work because FF doesn't have filters like "filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=1)"

Bill Posters
07-19-2007, 09:54 PM
It won't work because FF doesn't have filters like "filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=1)"

I'm no fan of DD, but had you checked out the DD link, you would see that it doesn't rely entirely on MS proprietary filters and that it does work in FF.

frozenade
07-20-2007, 02:50 PM
yes, true. it works perfect on FF if I just paste all code into a single html file.
but, my problem is, FF cannot process code if I divide it onto fractional file. html, JS, and css. my method is like what I've explain at previous posts.

My only problem now is: how to process these html code with JS in order to works with FF. Because IE and Opera can understand my this method, but FF don't.


<DIV id="fadeinbox" style="filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=1) progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135) ; -moz-opacity:0">
INSERT ANY HTML TO DISPLAY HERE. DO NOT REMOVE OUTER MOST DIV.<br>
Script © <a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>
<div align="right"> <a href="#" onClick="hidefadebox();return false">Hide Box</a>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum