detect JS with CI?

[eluser]mr_coffee[/eluser]
Possibly... what I'm doing here is bad form to begin with, but lets pretend it isn't for a second.

I have a default file for css, I load it in the head as usual. I have TWO other css files for screen resolution 800x600 and 1024x768. Since images and margins were involved, I figured this was the simplest solution. To prevent a massive delay during resize and multiple wasted image loads, I loaded one of the other two files with JS dependent on screen resolution. BUT... there's a drawback... of course. If JS isn't enabled, the user won't load either of the two files and the page will be ugly. I don't care so much that the page is ugly... but because I'm psychotic and made the navigation menu entirely out of graphics... and one of these two files is choosing the graphics... well... yeah. I don't want a user without javascript enabled to see NOTHING where the menu goes. I'd rather have it load the BIG version of the site all fuglified.

What works but doesn't validate xhtml strict:

Code:

<noscript>
&lt;?php echo link_tag('1024x768.css'); ?&gt;
</noscript>

So I did some searching, and found a novel solution to this: make two php files. Call one as javascript and have it set a session variable. Call the second as css and if that variable is set, display one css file, if it doesn't display a different one. This method, while quite effective, didn't take into account the possibility that I'm already manipulating a php file. Here's what I think SHOULD work, but doesn't:

Made a file checkforjs.php:

Code:

<?php
    $_SESSION['JavaScript'] = true;        
?>

Modified the head of the page (in my view) like so:

Code:

<?php echo link_tag('default.css'); ?>
<?php
  if (!(isset($_SESSION['JavaScript']))) {
      echo link_tag('1024x768.css');
  }        
?>

Thing is... it's always going to throw on the 1024x768.css file since this is in a view file... CI is loading the page for the client before the client loads the checkforjs.php file and so the variable won't be set before the view looks to see if there's a value for it, js enabled or not. I feel there should be a terribly simple solution built into CI that I just haven't noticed and wondered if someone else had an idea. Maybe there's something I can do with the controller to affect the view of the header file, etc. Let me know please?

[eluser]xwero[/eluser]
I think the best thing you can do is to set one screen resolution as the default and load the other css with rel="altenate". When javascript finds the viewport size it can decide if the default style stays or if the style needs to be changed. this way you always have a styled site.

About the graphics. For a menu it's best the graphics are only background images for accessibility reasons. So you will always have text to fall back on for the site navigation.

[eluser]mr_coffee[/eluser]
the nav images ARE backgrounds. so I can place hidden text later. I'd still like to "detect" if script is running though so i can avoid the delay for the smaller screens. I'm sure there's a decent method using CI, just not finding it yet.

[eluser]esra[/eluser]
What about using a pre_system hook. At this point of execution only the benchmark class is loaded. That is, write a plugin that discovers the clients screen resolution before the system loads.

[eluser]mr_coffee[/eluser]
Interesting... except my "plugin" would have to use JavaScript. I don't believe it will be possible to place JavaScript at that hook point, but I could be wrong. I'd basically need a page load. But in the end what you're suggesting won't be helpful for this particular situation since I'm trying to create a fall-back for the users who have JavaScript DISABLED. If I was able to detect the screen resolution, it follows that JavaScript is ENabled, and therefore my site isn't going to have any issues, and therefore I don't need a fix.

What would be ideal is to somehow have the page run the JavaScript that would attempt to set a session variable, and then have CI check to see if the session variable got set. I really wouldn't know where to begin as far as implementing such a "hack" since php is still server side and JavaScript is still client side.

Your idea may YET work, but it would be tricky to get the client to even attempt to load up a javascript only page to perform the test, and I'm really not sure what that would do to the site overall.

I may have another idea... inline javascript to set some sorta variable and then load a php file as "file.php?width=xvariset" and then if (!width) { // client doesn't have js enabled } might work. I'll experiment further, or perhaps you could elaborate on the plugin thing as I've never written one for CI.

[eluser]esra[/eluser]
A pre_system hook would not work as you indicate, but one of the others might. The hook needs to be invoked after the session class is initialized.

The user_agent class for CI only goes so far, but it might be possible to extend it. On the php.net site, do a search for HTTP. I seem to recall reading information about a PECL module called HTTP which might allow you to request HTTP header information from the user agent.

[eluser]esra[/eluser]
Might be useful:

http://www.456bereastreet.com/archive/20..._switcher/

[eluser]mr_coffee[/eluser]
Here's the methodology I'd prefer to implement:
http://webreflection.blogspot.com/2007/0...fixed.html

As I feel this SHOULD work without cookies enabled as well. Better yet... what I'd like to do is use a combination of the method mentioned here with some fun js so that I could not only check to see if js was enabled, but if it was enabled, pass something useful like screen size off to php and let php pick the stylesheet as a direct result.

Mayhaps... something a bit like this:

Code:

function prepstylesheetreq(){
        include_rpc('sylesheet_select.php?screenWidth='+window.getWidth())
    }
    function include_rpc(script_filename) {
        var html_doc = document.getElementsByTagName('head').item(0);
        var css = document.createElement('link');
        css.setAttribute('rel', 'stylesheet');
        css.setAttribute('type', 'text/css');
        css.setAttribute('href', script_filename);
        html_doc.appendChild(css);
        return false;
    }

And then prep up the stylesheet_select.php a bit like this:

Code:

<?php      
    $screen=$_GET['screenWidth'];    
    session_start();
    $output = file_get_contents(
     ($screen >= 950) || !($screen) ?
      '1024x768.css':
      '800x600.css'
    );
    header('Content-Type: text/css');
    header('Content-Length: '.strlen($output));
    $_SESSION['JavaScript'] = false;
    exit($output);
?>

I only cringe at the multiple session_start()'s and still don't feel this method will work with CI in this manner since I can't seem to get a session variable stored - as yet - with the fooling around I've done so far. This may be where the hooks you were mentioning before would come in handy... but it's unlikely if not impossible for me to not only set a session variable but pass along some javascript generated value through during one of those hooks.

The major flaw HERE is that I use javascript to call the php as it's the only method I know of to effectively get the javascript value ported over to the php file. But then I'm stuck with the same problem I started with: what if javascript is disabled? None of this will happen is what. I'm sure there's a way. Like... set a session variable to equal the screen width or something... then call the php file straight up. One php to set the variable (called as javascript), another to check if it's set and either provide the appropriate css file or provide the default. Something like that might work, but I'm still testing.

I'm still open to suggestions...

[eluser]Pascal Kriete[/eluser]
There is no really easy way to do this. You could try playing with dynamic layouts.

You will just have to choose a css file to use as your non-js standard. Then you could do something like this:

Code:

<head>
<meta http-equiv="content-type" content="text/html charset=utf-8" />
<title></title>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8">

    cssloader = function() {        
        var w = $(window).width();
        
        if (w < 800)
            document. write('&lt;link rel="stylesheet" href="./test2.css" type="text/css" media="screen" title="no title" charset="utf-8"&gt;');
        else
            document. write('&lt;link rel="stylesheet" href="./test1.css" type="text/css" media="screen" title="no title" charset="utf-8"&gt;');
    }();

&lt;/script&gt;

<noscript>
&lt;link rel="stylesheet" href="./test1.css" type="text/css" media="screen" title="no title" charset="utf-8"&gt;
</noscript>

&lt;/head&gt;

You could, of course, replace the document. write (no space) with an ajax call.

Only tested in Safari

[eluser]mr_coffee[/eluser]
Well if the <noscript> in the head would validate, I wouldn't be trying to find a work-around, heh. In fact, if that's all there was to it, I'd have been done already.

What I've done is created three stylesheets. One impacts fonts and the most basic of page settings, it will get loaded either way. But when it came to setting margins and certain elements with image backgrounds, I made two more... one for 800x600 screens and another for 1024x768 screens. Currently, the selection of either of the other two is done exactly like this:

Code:

if (window.getWidth() < 950 ) {
  new Asset.css('800x600.css');
  } else new Asset.css('1024x768.css');

Which works perfectly (and is not as flawed as document write). Instead of jquery I'm using mootools, so the above is rather "simple" in fact. The downside is... if the user doesn't have javascript enabled... neither of the follow up files will be loaded == lack of backgrounds set, etc.

As you've suggested... and I've tested it and it DOES function... I could use the noscript tag and load the bigger of the two... torture those poor souls with their javascript disabled with the need to scroll around the page that exceeds their screen size. I'm absolutely fine with that. The problem is: noscript in the head means the page doesn't validate.

So really, the selection thing isn't my issue... in fact, the least of my worries. What I'm trying to accomplish is to sneak in the larger version of the css files if javascript isn't available to use. This would be a lot easier if there was some way to set a session variable by using javascript before CI finished displaying the header view... if the session variable was NOT set by the same file that chose the CSS, then it would include it automatically.

To break that down... say this is my header view - assume it's all going in the "head" and that I've got other views to do the meta tags, etc - that's going to be on every page:

Code:

<script src="mootools-release-1.11.js" type="text/javascript"></script>
  <script src="alljs.js" type="text/javascript"></script>
  
    
  <?php
      echo link_tag('default.css');
      
      if (!isset($_SESSION['JavaScript'])) {
          echo link_tag('1024x768.css');
      }
  ?>

In a perfect world, alljs.js would set the session variable. If it didn't get set, then it would dump at least the big version of the css since I'd have no idea about the client's screen size at this point. Now it IS possible to swap out the js call with something like this:

Code:

<script src="alljs.php" type="text/javascript"></script>

And set the headers with php, cap off the php coding and just dump all my js in there. I don't think I can do that without calling a SECOND php file though, that way if JS was working I could send a javascript value in via query string. It doesn't even have to be a session variable I don't think.

But I guess in the beginning I over-simplified my question. I'd like to see THIS much work, but what would be a billion times better would be to get this portion of the page to talk directly to CI. Somehow set a value that CI is going to remember site-wide because the CSS isn't the only thing that would change. In fact, every image I load on the site would change in size. I currently have javascript swapping out the source of the images dependent on screen size, but it would be far more efficient and waste a lot less bandwidth if CI changed the source of the image before generating the page. My GUESS is that if I could somehow set a php session variable at this point in the page... CI could check to see what it's set to and then manipulate the views accordingly.

Every php method I've seen so far uses either cookies or javascript to do this. And that's... not going to work. If javascript is disabled... well that was my problem to begin with, so all javascript solutions are out. Cookies... but then what if cookies are disabled? If a client had the foresight to disable javascript, they aren't likely allowing cookies either. So I'm pretty certain that a session variable is my best bet... but I'd need to set one with javascript. And my issue with CI appears to be that when this is done on a view, the session variable doesn't get set under any condition, JS enabled or not. Does this make any more sense or am I just confusing you now?