SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Writing HTML in the <head></head> of a page with JS

    Hello all,
    I know this can be done with media-queries in CSS3, but i was experimenting with some javascript and noticed something odd that I was hoping someone could explain and help me fix.
    After attaching the jQuery library, I used js to get the width of the window browser-viewport) and store that in a variable.

    What I was aiming to do was write a <title></title> for the page and attach a stylesheet through <link /> using js only when the window's height was greater than 596px.
    So, I wrote the following:
    Code HTML4Strict:
    <!Doctype HTML>
    <html lang="en">
    	<head>
    		<script type="text/javascript" src="../assets/js/jquery-1.5.1.min.js"></script>
    		<script type="text/javascript">
    			$(document).ready(function() {
    				var $viewportWidth = null;
    				viewportWidth = $(window).width();
    				if(viewportWidth > 596){
    					document.write("<title>attaching stylesheet in specific viewport-sizes<\/title>");
    					document.write("<link href='bigViewport.css' rel='stylsheet' type='text\/css' \/>");
    				}
    			});
    		</script>
    	</head>
    	<body>
    		<h1>Heading!</h1>
    		<p>This is a paragraph!</p>
    		<p>This is a second paragraph!</p>
    		<br />
    		<p>This is a paragraph after a line-break</p>
    		<form>
    			<input type="submit" value="submit" />
    		</form>
    	</body>
    </html>

    The content in the body is placeholder content, but the reason i kept it there was to show you all something— as it has to do with the issue I am having.

    When I visit the page with just that html above, I assume both lines were written as the page has the title "attaching stylesheet in specific viewport-sizes". Why I said assume is that i can not see <link /> in the view-source.
    Anyway, the problem that occurs is that all of the content in the body is gone. Meaning, nothing shows up on the page— its a blank white-page.
    And, as I did, one can double-check that the placeholder-content is there normally if they just comment-out the js.

    So my issues are:
    1.) Is the <link /> line being written?
    2.) Why is all the body's content gone? And how can i get it to say while writing the html with js in that condition?

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,786
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    document.write creates a brand new page if it runs after the current page finishes loading (as it does with your code).

    Why not just use createElement() to create the title and link tags and appendChild() to append them to the head tag. That's what those JavaScript functions are for.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ah okay. Makes sense why all the previous content is gone.

    I didn't even know there were such functions

    Would the syntax just be or something like:
    Code JavaScript:
    $(document).ready(function() {
    	var $viewportWidth, $title, $link = null;
    	viewportWidth = $(window).width();
    	if(viewportWidth > 596){
                $title = document.createElement("<title>attaching stylesheet in specific viewport-sizes<\/title>");
                $link = document.createElement("<link href='bigViewport.css' rel='stylsheet' type='text\/css' \/>");
                $("head").appendChild($title);
                $("head").appendChild($link);
            }
    }

    Or nothing like that at all / was my guess completely off ?

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,786
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Not far off.

    Instead of

    $title = document.createElement("<title>attaching stylesheet in specific viewport-sizes<\/title>");
    $link = document.createElement("<link href='bigViewport.css' rel='stylsheet' type='text\/css' \/>");

    you would have

    $title = document.createElement("title");
    $title.innerHTML = "attaching stylesheet in specific viewport-sizes";
    $link = document.createElement("link");
    $link.href = $link = 'bigViewport.css';
    $link.rel = 'stylsheet';
    $link.type='text/css' ;
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ah okay. Thank you very much!

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    Or nothing like that at all / was my guess completely off ?
    It's close. Since you're using jQuery you can use:

    Code javascript:
    $(function () {
        if ($(window).width() > 596) {
            $('head').append('<title>attaching stylesheet in specific viewport-sizes</title>' +
                '<link href="bigViewport.css" rel="stylesheet" type="text/css" />');
        }
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You might like to try this approach. I split the original so that the first part gets the width and the second part fires on load and overwrites the content of the <title>. If you want to validate the page you need the title to be in place.

    Code:
    <script type="text/javascript">
        <!--
        var $viewportWidth = $(window).width();
        var $whichCSS=($viewportWidth > 596)? "bigViewport.css" : "smallViewport.css";
         { document.write('<link href="'+$whichCSS+'" rel="stylsheet" title="'+$viewportWidth+'" type="text\/css" \/>');  }
        $(document).ready(function() {
          document.getElementsByTagName("title")[0].text="viewport width= "+$viewportWidth+"px"; 
           });
        //-->
        </script>

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,786
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AllanP View Post
    { document.write('<link href="'+$whichCSS+'" rel="stylsheet" title="'+$viewportWidth+'" type="text\/css" \/>'); }
    That will completely overwrite the page.

    You should never mix document.write with modern JavaScript.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    That will completely overwrite the page.

    You should never mix document.write with modern JavaScript.
    I don't know about mixing document.write with "modern" JavaScript, but the way the script is structured does not overwrite the page. This is because I pulled the width detection out of the onload section of the script. This means that it finds the width, writes the <link>, loads the page and then overwrites the <title>. Doing it this way allows the page to be validated before changing the <title> content. Validation will fail if the title is dynamically generated as valdiation of the <head> needs a <title>.

    I also found a better way of addressing the title which is jQuery rather than JS. For clarification I have appended the whole page code so that youu can run it yourself.

    Code:
    <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 5.0" />
    <meta name="ProgId" content="FrontPage.Editor.Document" />
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <title>attaching stylesheet in specific viewport-sizes</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
        </script>
    <script type="text/javascript">
        <!--
        var $viewportWidth = $(window).width();
        var $whichCSS=($viewportWidth > 596)? "bigViewport.css" : "smallViewport.css";
         { document.write('<link href="'+$whichCSS+'" rel="stylsheet" title="'+$viewportWidth+'" type="text\/css" \/>');  }
        $(document).ready(function() {
          $(document).attr("title", "viewport width= "+$viewportWidth+"px");
           });
        //-->
        </script>
    </head>
    
    <body>
    
    <h1>Heading!</h1>
    <p>This is a paragraph!</p>
    <p>This is a second paragraph!</p>
    <p><br />
    This is a paragraph after a line-break</p>
    <form action="#">
      <p><input type="submit" value="submit" /></p>
    </form>
    
    </body>
    
    </html>


Bookmarks

Posting Permissions

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