SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Injecting CSS in style tag into page

    Hi,

    What I'm working on at the moment is an inline popup to hold a form which should appear above the text on the page and allow a user to interact with the form until they're ready to go back to the main page.

    Simple enough, right? Well, the very large spanner in this particular works is that I've been instructed to try and do this as a stand-alone script so that it can just be dumped in any page that needs to use this.

    This presents various problems - and I may be a frequent visitor to this forum over the coming days - but what's boiling my swede at the moment is the problem of how to put the css styles required by the popup into the page as part of the javascript package.

    I've tried various things. In the following examples, strCSS is some CSS code and bodyNode is the body element captured using getElementsByTagName.

    Code:
    var styleNode = document.createElement("style");
    var styleTextNode = document.createTextNode(strCSS);
    styleNode.appendChild(styleTextNode);
    bodyNode.appendChild(styleNode);
    Which fails because IE won't allow one to append nodes to a style tag.

    Code:
    var styleNode = document.createElement("style");
    styleNode.text = strCSS;
    bodyNode.appendChild(styleNode);
    Which I saw suggested on Quirksmode, but it doesn't work. No great surprise since .text isn't a property I recognise.

    Code:
    var bodyText = bodyNode.innerHTML
    bodyNode.innerHTML = strCSS + bodyText;
    This is ugly, but I was at least expecting it to work, but it doesn't seem to. The elements in the page with the appropriate class names don't pick up the styling.

    So now I give up on putting stuff inside a style tag at the top of the page and instead have a pop at setting the style attributes of the tags themselves. In these examples, spanNode is my dynamically created Node which contains all the form stuff I want to appear on the page.

    Code:
    spanNode.setAttribute("style", "top: " + heightOffset + ";left: " + widthOffset + "; z-index: 99;");
    Doesn't seem to work because - you guessed it - IE won't allow you to setAttribute on a style attribute. I'm starting to feel like Bill Gates hates me, personally at this point.

    Code:
    spanNode.style.cssText = "top: " + heightOffset + ";left: " + widthOffset + "; z-index: 99;"
    This is the suggested workaround. Doesn't seem to work either.

    Anyone got any idea how I can do this? I'd prefer to get the style tags in so I can manipulate className whenever I need to which is by far the neatest way of doing it.

    Cheers,
    Matt

  2. #2
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var styleNode = document.createElement("style");
    styleNode.text = strCSS;
    bodyNode.appendChild(styleNode);
    Doesn't work or doesn't work in all browsers? .text is not cross platform compatible. One type uses .text, the other uses .innerText.

  3. #3
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mattDP View Post
    Code:
    spanNode.style.cssText = "top: " + heightOffset + ";left: " + widthOffset + "; z-index: 99;"
    This is the suggested workaround. Doesn't seem to work either.
    That should work fine in IE, Firefox, Opera and Safari. Note though, that this will remove any existing CSS that the element might already have.

  4. #4
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE gives Style elements a styleSheet, and allows you to write to its cssText.
    Create the style element, check for a styleSheet and use the cssText,
    or add the text node to the other browsers.

    Code:
    function addStyle(str,t){
    	var el= document.createElement('style');
    	var atts= {type:'text/css',media:'screen'}
    	if(t) atts.title= t;
    	for(var p in atts){
    		if(atts[p]) el[p]= atts[p];
    	}	
    	if(el.styleSheet) el.styleSheet.cssText= str;
    	else el.appendChild(document.createTextNode(str));
    	return document.getElementsByTagName('head')[0].appendChild(el);
    }
    call it with any valid css string argument, exactly as you would write it in a style sheet.

    Adding a title makes it easier to find the element again, since ids are invalid for style elements (in html).

    It is more efficient to add new rules or edit an existing styleSheet using document.styleSheets methods,
    but this method is simpler, and more widely supported.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria View Post
    That should work fine in IE, Firefox, Opera and Safari. Note though, that this will remove any existing CSS that the element might already have.
    You're right - it does work. Thanks for this. and for the clarification that it's cross-browser. My prep up to that point had a vital flaw that was making it fail

    Thanks also for the heads-up on injecting css classes into the page. Very useful.


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
  •