473,583 Members | 3,553 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Using JavaScript to change external css file at runtime?

hello, is it possible to determine the browser and version using
javascript at runtime and apply a browser specific external .css
file? If so, I'd appreciate code sample so I can see how it's done.

TIA

G
Aug 29 '08 #1
8 4923
On Fri, 29 Aug 2008 11:49:09 -0700, GiJeet wrote:
hello, is it possible to determine the browser and version using
javascript at runtime and apply a browser specific external .css file?
If so, I'd appreciate code sample so I can see how it's done.
If you are trying to load a separate style sheet for various versions of
IE, then look up "IE conditional comments."
Aug 29 '08 #2
On Fri, 29 Aug 2008 11:49:09 -0700 (PDT), GiJeet wrote:
hello, is it possible to determine the browser and version using
javascript at runtime and apply a browser specific external .css
file? If so, I'd appreciate code sample so I can see how it's done.

You can attempt to sniff the browser using the navigator object and then
dynamically attach a stylesheet with something like this:

var styleNode = document.create Element('link') ;
styleNode.setAt tribute('rel', 'stylesheet');
styleNode.setAt tribute('type', 'text/css');
styleNode.setAt tribute('href', 'style.css');
document.getEle mentsByTagName( 'head')[0].appendChild(st yleNode);

....or even have a single stylesheet and just set an id on the body element.
However, depending on what you are trying to accomplish, this is almost
certainly the wrong solution. If you give us more details we may be able to
advise you of a better solution.
--
Safalra (Stephen Morley)

A Colour Picker Widget For javascript:
http://www.safalra.com/web-design/ja...colour-picker/
Aug 30 '08 #3
>On Aug 30, 9:22*am, "Safalra (Stephen Morley)" <nos...@safalra .comwrote:
...or even have a single stylesheet and just set an id on the body element.
However, depending on what you are trying to accomplish, this is almost
certainly the wrong solution. If you give us more details we may be able to
advise you of a better solution.
sure. different browsers display the same page differently. so
rather then tweak a single css that displays correctly in all
browsers, i figure i could have a separate css for the few different
browser types. i now have code in javascript which fires a function on
the onload event and determines the browser type then sets the version
of css for that browser type at runtime so it displays correctly.
there are only a few different types and i'd rather make 3 or 4
versions of the css then break my hump trying to get one version to
work in all browsers.

however, if you know of a better way, i'm open to suggestions.

TIA
G

Aug 30 '08 #4
GiJeet meinte:
browsers, i figure i could have a separate css for the few different
browser types.
Normally two. IE and the rest of the world.
i now have code in javascript which fires a function on
the onload event and determines the browser type
Now that's interesting. How do you determine the browser - reliably? And
what if somebody has JS disabled?
however, if you know of a better way, i'm open to suggestions.
Jeremy has already mentioned conditional comments. 100% compatible, easy
to use, perfik!
Or tweak your markup/CSS so you don't need different stylesheets for
each and every browser. "Normal" designs hardly ever need that, anyway.

Gregor
--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Aug 30 '08 #5
>On Aug 30, 11:35*am, Gregor Kofler <use...@gregork ofler.atwrote:
Now that's interesting. How do you determine the browser - reliably? And
what if somebody has JS disabled?
if user has JS disabled then tons of other stuff won't work either so
with JS off, they may as well not browse the web... :)
Jeremy has already mentioned conditional comments. 100% compatible, easy
to use, perfik!
Or tweak your markup/CSS so you don't need different stylesheets for
each and every browser. "Normal" designs hardly ever need that, anyway.
hmmm...not sure I like the idea of having my css riddled with tons of
conditional comments. Makes it very hard to read. messy. With
separate css files coded per browser type the code is clean and making
a change in one does not effect the others.

Gi
Aug 31 '08 #6
GiJeet meinte:
>On Aug 30, 11:35 am, Gregor Kofler <use...@gregork ofler.atwrote:
>Now that's interesting. How do you determine the browser - reliably? And
what if somebody has JS disabled?

if user has JS disabled then tons of other stuff won't work either so
with JS off, they may as well not browse the web... :)
I suppose there's reason why quite a few FF extensions for controlling
JS exist.
hmmm...not sure I like the idea of having my css riddled with tons of
conditional comments. Makes it very hard to read. messy.
You need precisely *one*.

<!--[if IE]>
<link type='text/css' rel='stylesheet ' href='css/ie.css'>
<![endif]-->
With
separate css files coded per browser type the code is clean and making
a change in one does not effect the others.
That's precisely what happens with cc.

Gregor

--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Aug 31 '08 #7
Gregor Kofler wrote:
GiJeet meinte:
>hmmm...not sure I like the idea of having my css riddled with tons of
conditional comments. Makes it very hard to read. messy.

You need precisely *one*.

<!--[if IE]>
<link type='text/css' rel='stylesheet ' href='css/ie.css'>
<![endif]-->
Iff we were living in a nearly perfect world (in a perfect world, there
would not be something like IE in the first place). Currently, with a
more-than-average accessible layout, you would need at least one CC for IE 6
and one for IE 7. But we are getting pretty much off-topic here, are we not?
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8************ *******@news.de mon.co.uk>
Aug 31 '08 #8
On 1 Sep., 11:36, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
wrote:
Gregor Kofler wrote:
GiJeet meinte:
hmmm...not sure I like the idea of having my css riddled with tons of
conditional comments. Makes it very hard to read. messy.
You need precisely *one*.
<!--[if IE]>
<link type='text/css' rel='stylesheet ' href='css/ie.css'>
<![endif]-->
Yes and no. There are four types of browsers, really... IE6, IE7/8,
Other Legacy Browsers (NS4, IE4, O4 etc) and "everything else"
...
The guy is not interested in supporting Legacy Browsers (except IE)
which leaves three (types of) browsers.
Only IE will read the IE conditional comments.

Here is the MSDN documentation on them:
http://msdn.microsoft.com/en-us/library/ms537512.aspx
You see, you can filter any IE versions your heart desires.

SO: make a stylesheet. add it to your page. Then add a second
stylesheet and tweak it for IE7. Comment it out conditionally and do
it again for IE6.

This is the way _recommended_ by both _Microsoft_ AND the W3
Consortium. So in endorsing any other method for doing this, one would
be contradicting industry leaders (who is the W3C? Not just the
standards-setter, but also a collaboration of browser vendors and
others) AND the manufacturer of the browser in question.

This is NOT a problem for javascript! It absolutely isn't. Although
only maybe three percent of humans surf without it, javascript is not
a dead language and browsers are not dead either. If you write a
script to try to sniff out all the versions of all the browsers, you
will fail. Sooner or later you will fail and you shouldn't bother even
designing a layout in the first place.
You, human, do not have an encyclopedia of exactly how every single
version of every single browser reacts in every single situation. And
you don't know what they will do next week. If you had this kind of
information, you wouldn't be asking how to detect browsers in
javascript to offer alternate stylesheets.

Just set it in the proper way and forget it.

Here are some tips for making your page look the same in all browsers:
- use a doctype that triggers standards compliance mode
--- because each browser has a very different quirks mode
- validate all your markup (and your css, actually)
--- because every browser will treat it differently when it
breaks
- separate your behaviour, presentation and structure if you can at
all
--- because you don't bang in a nail with a saw now, do you??

If you follow these rules (which are easy if you haven't formed any
bad habits) you will find that all browsers treat your code almost
exactly the same -- with the notable exception that Internet Explorer
is almost totally unpredictable and can be crashed by CSS. But all the
other browsers will mostly behave.

Anyway, using javascript for something that MUST work is not very
clever. You should make sure it works without javscript (where
possible... I mean you can't make javascript ping pong with no
javascript), and then use javascript to enhance it. Not the other way
around, because javascript changes faster than humans can cope.
Check out dynamic drive for good examples of this.

Or try to find a browser detection script that already detects Google
Chrome. .......
You don't know how next year's browsers will handle it, so use
something that will stand the test of time.

>
Iff we were living in a nearly perfect world (in a perfect world, there
would not be something like IE in the first place). *Currently, with a
more-than-average accessible layout, you would need at least one CC for IE 6
and one for IE 7. *But we are getting pretty much off-topic here, are we not?

I agree wholeheartedly with all of this!! Definitely! Except for the
getting off topic bit. The original poster THOUGHT that it was a
javascript question, but it wasn't at all.

We're on topic but the thread is in the wrong group.

Sep 3 '08 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

12
1601
by: Charles Law | last post by:
This is a bit of a vague question, but I am just starting on this, and wonder if anyone has ideas of where to start. I have a program that controls some external equipment. It sends messages in various flavours to cause the equipment to turn signals on and off, and change voltages and such like. Attached to this external equipment, is...
9
6887
by: Charley Kyd | last post by:
I'm a newbie who needs advice about how to use external files of JavaScript code. I spent an hour this afternoon browsing through JavaScript books at the local book store. In about 15 different titles, I found a total of about five pages that covered js files. For all practical purposes, these pages said, "You can use js files. But we won't...
12
3425
by: knocte | last post by:
Hello. I have always thought that the eval() function was very flexible and useful. If I use it, I can define functions at runtime!! However, I have found a case where eval() does not work properly. It works, for example, when invoking functions (alert('hello')), but not for defining functions. The case occurs when retrieving the...
12
3455
by: Charlie | last post by:
Hi: My host will not allow me use a trusted connection or make registry setting, so I'm stuck trying find a way to hide connection string which will be stored in web.config file. If I encrypt string externally, can it be used in it's encrypted form to connect to SQL Server? If I decrypt back to string for use in connection string during...
4
2810
by: Adam Smith | last post by:
Hello, How can I call or trigger an external javascript twice in a form? I have <script language="JavaScript" src="country_state.js" name="Country_State"> <script type="text/javascript" src="country_state.js"> </script>
4
1565
by: James Pemberton | last post by:
I have recently created a ASP site utilizing Master Pages and all works fine until I want to proces my javascripts. Just to let you know, most of cliewnt side scripting is new to me. But anyway, I can retrieve and updat ethe value a textbox on the page by using the document.getElementById('Goals_Main_tbProduct0').value
16
1863
by: howachen | last post by:
e.g. <script type="text/javascript" src="js/common.js"></script> but not <script type="text/javascript" src="js/common.js" /> for any reason?
8
2156
by: Bruce | last post by:
I am using VB in Vs2005. Am I missing something or does VB not have the concept of "builds" (release/debug) like in VC? I wrote an assembly and I would like to have a debug version of the DLL and a release version of the DLL. I would like to create some sample code that demonstrates my assembly in VB and would like to have two builds, one...
5
3647
by: lilOlMe | last post by:
I have an extern JavaScript file I've called "Utils.js". It will eventually hold all of the common JavaScript functions used throughout the ASPX pages that make up my website. Right now this file contains one JavaScript function. When I add the JavaScript function using Me.Page.ClientScript.RegisterStartupScript(Page.GetType,...
0
7821
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8320
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
8190
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6577
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5697
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3841
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2328
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1424
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1152
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.