Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    42
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Question How to impressing code line in 'head' tag?

    Hi....
    Is there possible to write something in BODY section and impressing it in <HEAD>...</HEAD> tag?

    for example:

    Code:
    <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:

    Code:
    <html>
    <head><title>Test</title>
    
    <link rel="SHORTCUT ICON" href="http://www.domain.com/favicon.ico">
    
    </head>
    
    <body>
    
    </body>
    
    </html>

  • #2
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    Try:
    Code:
    <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>

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Code:
    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…

    Code:
    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…
    Code:
    var head = document.getElementsByTagName('head')[0];

  • #4
    New Coder
    Join Date
    Jun 2007
    Posts
    42
    Thanks
    11
    Thanked 0 Times in 0 Posts
    thank you so much. I'll try it out...

  • #5
    New Coder
    Join Date
    Jun 2007
    Posts
    42
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Unhappy

    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.

    Code:
    <html>
    <head>
    </head>
    
    <body>
    ... send parameter inside HEAD tag: <title>This is title</title>
    </body>
    
    </html>
    thank you so much..

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Code:
    <!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.

  • #7
    New Coder
    Join Date
    Jun 2007
    Posts
    42
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Unhappy

    Hi...

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

    Code:
    <!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..

  • #8
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Here's what I use when I bother…
    Code:
    <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.

    Code:
    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.

  • #9
    New Coder
    Join Date
    Jun 2007
    Posts
    42
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Thumbs up

    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!
    Last edited by frozenade; 07-17-2007 at 05:24 PM.

  • #10
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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.
    Code:
    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…
    Code:
    <body><p>Hello world!</p>
    </body>
    If you're using Firefox, it's worth grabbing the Firebug extension.
    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.

    Last edited by Bill Posters; 07-17-2007 at 06:41 PM.

  • #11
    New Coder
    Join Date
    Jun 2007
    Posts
    42
    Thanks
    11
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <html>
    <head>
    </head>
    
    <body>
    ...
    <script type="text/javascript" src="js1.js"></script>
    ...
    </body>
    
    </html>
    Inside js1.js:
    Code:
    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:
    Code:
    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.



    Is this a bug in FF or ... what is happened?
    Last edited by frozenade; 07-18-2007 at 03:52 PM.

  • #12
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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.

  • #13
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #14
    New Coder
    Join Date
    Jun 2007
    Posts
    42
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Unhappy

    .....
    Last edited by frozenade; 07-19-2007 at 03:47 PM.

  • #15
    New Coder
    Join Date
    Jun 2007
    Posts
    42
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Unhappy

    Hi...

    I get this code from www.dynamicdrive.com.
    Code:
    <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?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •