Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Using Javascript to pick CSS based on broswerUsing Javascript to pick CSS based on broswer
Previous
 
Next
New Post
3/26/2008 11:38 AM
 

I am trying to use javascript to change the css being called based on the browser. I have the following code but something is missing / not working right. Any help is welcomed.

<!-- The code below enables multiple css files to be called up
for browser hacks and a print.css file -->
<script type="text/javascript" language="javascript">
// BEGIN: styleSheetPicker object definition
// <![CDATA[
function styleSheetPicker()
{
   this.ieScreen = this.iePrint = this.otherScreen = this.otherPrint = "";
}

styleSheetPicker.prototype.render = function()
{
   if (document.createStyleSheet)
   {
    if (this.ieScreen)
     document.createStyleSheet(this.ieScreen);

    if (this.iePrint)
        {
     var ieP = document.createStyleSheet(this.iePrint);
            ieP.media = "print";
        }
   }
   else
   {
        var head = document.getElementsByTagName("head")[0];
    if (this.otherScreen != "")
            head.innerHTML += "<link rel=\"stylesheet\" href=\"" + this.otherScreen + "\"/>";

    if (this.otherPrint != "")
            head.innerHTML += "<link rel=\"stylesheet\" media=\"print\" href=\"" + this.otherPrint + "\"/>";

   }
}
// END: styleSheetPicker object definition

var picker = new styleSheetPicker();

// IE stylesheets
picker.ieScreen = "<%= SkinPath %>iehacks.css";
picker.iePrint = "<%= SkinPath %>print.css";

// Other browser stylesheets
// Don't need this: picker.otherScreen = "default.css";
picker.otherPrint = "<%= SkinPath %>print.css";
picker.render();
    // ]]>
</script>

I have the iehacks.css file in the skin package. I know though for a fact that IE is still calling the default.css skin instead of the iehacks.css file

If there is a much easier way to do this let me know. Problem I am having is IE wants to shift my vertical menus around which is not working well for me. Trying to have the iehacks pull and resolve my issues.

 
New Post
3/26/2008 11:46 AM
 

The best method for loading a different stylesheet for IE5+ is to use a Conditional Comment.

Basically, something like:

<!--Load different stylesheet for IE5-6-->
<!--[if lte IE 6]>
<link href='<%=SkinPath%>iehacks.css' rel='stylesheet'/>
<![endif]-->

Hope this helps,


Brian Dukes
Engage Software
St. Louis, MO
866-907-4002
DNN partner specializing in custom, enterprise DNN development.
 
New Post
3/26/2008 2:28 PM
 

Thanks, I had started there but had issues with the parser and the asp.net rendering but after putting it in my ascx file it worked. Just had to stick it in every div chunk that I need changed. Much thanks.

 

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Using Javascript to pick CSS based on broswerUsing Javascript to pick CSS based on broswer


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out