Skip to main content

Dynamically loading CSS in Safari and Google Chrome

Having developed a new AJAX enabled content viewer for a client's website I found that it would not load correctly in Google Chrome or Safari. The content being loaded into the viewer DIV included the CSS styles for the content and the HTML content itself, by loading the CSS into the container DIV it was being loaded outside of the document header - this is not valid in Safari as all style definitions must be placed in the head section - as a result the content loads without any CSS being applied.

To fix this the AJAX request has been split into two requests, the first loads the HTML into the DIV, the second loads the CSS and writes it into a style tag in the head section - this works in all browsers. Unfortunately this isn't as easy as it sounds due to various browser quirks when creating style elements, populating the element and adding it to the head section.

Essentially the following code will ensure the style element is created correctly:

function addCss(cssCode)
{
var styleElement = document.createElement(”style”);
styleElement.type = “text/css”;
if (styleElement.styleSheet)
{
styleElement.styleSheet.cssText = cssCode;
}
else
{
styleElement.appendChild(document.createTextNode(cssCode));
}
document.getElementsByTagName(”head”)[0].appendChild(styleElement);
}

Nicholas Zakas explains this in great and excellent detail:
http://yuiblog.com/blog/2007/06/07/style/

Comments

Popular posts from this blog

Take website screenshot using ASP.NET

Utilising a hidden web browser control it is possible to take a screenshot of any website. The code shown below is based on an article at plentyofcode.com (sorry the site now appears to be offline May 2012) but I have translated it from VB.NET to C# and will work in .NET so theoretically for any Windows or ASP.NET web project.
using System; using System.Drawing; using System.Drawing.Imaging; using System.Windows.Forms; using System.Diagnostics; namespace WebsiteScreenshot { public class GetImage { private int s_Height; private int s_Width; private int f_Height; private int f_Width; private string myURL; public int ScreenHeight { get { return s_Height; } set { s_Height = value; } } public int ScreenWidth { get { return s_Width; } set { s_Width = value; } } public int ImageWidth { get { return f_Width; } set { f_Width = value; } } public int ImageHeight { get { return f_Height; } set { f_Height = value; } } public string Website …

John Hamblin Furniture Restorer - New Website

I was asked to produce a new website for local furniture restorer and cabinet maker John Hamblin. Having struggled with another provider who failed to deliver a finished website I was asked to take the website on and produce a simple site that communicates their values of high quality workmanship and excellent customer service.

The new website is live and can be viewed here:
http://www.johnhamblinfurniturerestorer.co.uk/



Compress and de-compress strings in C#

A collection of resources on compressing and encrypting strings in C#.
Microsoft documentation on the System.IO.Compression.GZipStream class:
http://msdn.microsoft.com/en-us/library/system.io.compression.gzipstream.aspx
Helpful example class utilising GZip:
http://www.csharphelp.com/2007/09/compress-and-decompress-strings-in-c/
The GZipStream class is predominantly used for file compression but can be used efficiently for compressing strings of 300-400 characters or more. Below 300 characters there isn’t any measurable gain from the compression and for particularly short strings the compressed version may in fact be larger.
Class provided by C Sharp Help:
using System.IO.Compression;
using System.Text;
using System.IO;
public static string Compress(string text)
{
    byte[] buffer = Encoding.UTF8.GetBytes(text);
    MemoryStream ms = new MemoryStream();
    using (GZipStream zip = new GZipStream(ms, CompressionMode.Compress, true))����…