use of a CSS according to the navigator

« 
Previous topic
|
Setup & design
|
Next topic
 »
Author Message

tic 9

Wednesday 07 May 2008 4:21:27 am

hi!
I would like well that for each navigator that I can use a different CSS but my code does not function under eZ.
But the same code functions well apart from eZ.
Here my code javasript:

<script language="JavaScript" type="text/javascript">
var nn = (document.layers) ? true : false;
var ie = (document.all) ? true : false;
var dom = (document.getElementById && !document.all) ? true : false;
var oper= (document.all && (navigator.userAgent.toLowerCase().indexOf("opera") != -1)) ? true : false;
if (oper){
document.write( '@import url({"stylesheets/opera.css"|ezdesign(no)});');
}
else if (ie) {
document.writeln(''@import url({"stylesheets/ie.css"|ezdesign(no)});');
}
else if (dom || nn) {
document.write( '@import url({"stylesheets/nce.css"|ezdesign(no)});');
}
</script>

André R.

Wednesday 07 May 2008 6:34:31 am

You need to escape the bractes ( { & } ) used in you javascript code.
Take a look in the doc, search/look for the 'ldelim', 'rdelim' and 'literal' template functions.

eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription
@: http://twitter.com/andrerom

tic 9

Wednesday 07 May 2008 7:00:52 am

thank you for your answer but the problem always continues! I still do not manage to apply the CSS for each navigator here my modified code:
{literal}
<script language="JavaScript" type="text/javascript">
var nn = (document.layers) ? true : false;
var ie = (document.all) ? true : false;
var dom = (document.getElementById && !document.all) ? true : false;
var oper= (document.all && (navigator.userAgent.toLowerCase().indexOf("opera") != -1)) ? true : false;
if (oper){
document.write( '@import url({ldelim}"stylesheets/opera.css"|ezdesign{rdelim});');
}
else if (ie) {
document.writeln('@import url({ldelim}"stylesheets/ie.css"|ezdesign{rdelim});');
}
else if (dom || nn) {
document.write( '@import url({ldelim}"stylesheets/nce.css"|ezdesign{rdelim});');
}
</script>
{/literal}

Łukasz Serwatka

Wednesday 07 May 2008 7:12:46 am

Do not use {ldelim} together with {literal}. If you are using {literal} then replace {ldelim} with { and same for {rdelim}, repalce with }.

BTW, Opera, Gecko and Webkit based web browsers support web standards better then IE. In most cases the IE conditional comments are sufficient to fix issues. Do you really need this check?

Personal website -> http://serwatka.net
Blog (about eZ Publish) -> http://serwatka.net/blog

tic 9

Thursday 08 May 2008 2:36:06 am

hi!

I need really this control for the need for my site! For what of IE, I think find a means of resoudre the problem. But the difficulty remains on other navigators. Isn't it possible to make this control with eZ?

André R.

Thursday 08 May 2008 4:28:45 am

Here is how you could do it:

<script language="JavaScript" type="text/javascript">
<!--
if ( window.opera )
    document.write( '<link rel="stylesheet" type="text/css" href={"stylesheets/opera.css"|ezdesign} \/>');
else if ( document.all )
    document.writeln('<link rel="stylesheet" type="text/css" href={"stylesheets/ie.css"|ezdesign} \/>');
else if ( document.getElementById || document.layers )
    document.write( '<link rel="stylesheet" type="text/css" href={"stylesheets/nce.css"|ezdesign} \/>');
//-->
</script>

And here is how you use javascript brackets inside templates:

<script language="JavaScript" type="text/javascript">
<!--
if ( window.opera )
{ldelim}
    document.write( '<link rel="stylesheet" type="text/css" href={"stylesheets/opera.css"|ezdesign} \/>');
{rdelim}
else if ( document.all )
{ldelim}
    document.writeln('<link rel="stylesheet" type="text/css" href={"stylesheets/ie.css"|ezdesign} \/>');
{rdelim}
else if ( document.getElementById || document.layers )
{ldelim}
    document.write( '<link rel="stylesheet" type="text/css" href={"stylesheets/nce.css"|ezdesign} \/>');
{rdelim}
//-->
</script>

But this way of browser sniffing is not very modern, this is how web developer did things 5-10 years ago.
Today most web developers tend to code for new browsers, and have extra css that is added for older browsers, witch is mostly internet explorer..

<!-- first include you standard css, then for ie 6 and lower, then ie 7 -->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href={"stylesheets/ie6.css"|ezdesign} />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href={"stylesheets/ie7.css"|ezdesign} />
<![endif]-->

eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription
@: http://twitter.com/andrerom
Powered by eZ Publish™ CMS Open Source Web Content Management. Copyright © 1999-2014 eZ Systems AS (except where otherwise noted). All rights reserved.

eZ debug

Timing: Jan 18 2025 16:21:57
Script start
Timing: Jan 18 2025 16:21:57
Module start 'layout'
Timing: Jan 18 2025 16:21:57
Module start 'content'
Timing: Jan 18 2025 16:21:57
Module end 'content'
Timing: Jan 18 2025 16:21:57
Script end

Main resources:

Total runtime0.0138 sec
Peak memory usage2,048.0000 KB
Database Queries3

Timing points:

CheckpointStart (sec)Duration (sec)Memory at start (KB)Memory used (KB)
Script start 0.00000.0050 588.0313152.6406
Module start 'layout' 0.00500.0025 740.671939.4766
Module start 'content' 0.00750.0044 780.148497.4609
Module end 'content' 0.01190.0018 877.609442.3047
Script end 0.0137  919.9141 

Time accumulators:

 Accumulator Duration (sec) Duration (%) Count Average (sec)
Ini load
Load cache0.002719.4224140.0002
Check MTime0.00117.6271140.0001
Mysql Total
Database connection0.00064.623310.0006
Mysqli_queries0.002115.136530.0007
Looping result0.00000.086510.0000
Template Total0.001611.310.0016
Template load0.00085.836210.0008
Template processing0.00075.400210.0007
Override
Cache load0.00053.955410.0005
General
dbfile0.00021.640380.0000
String conversion0.00000.057140.0000
Note: percentages do not add up to 100% because some accumulators overlap

Templates used to render the page:

UsageRequested templateTemplateTemplate loadedEditOverride
1print_pagelayout.tpl<No override>extension/community/design/community/templates/print_pagelayout.tplEdit templateOverride template
 Number of times templates used: 1
 Number of unique templates used: 1

Time used to render debug report: 0.0001 secs