Hi all:
I’m experimenting with the Metro UI CSS framework to give a “Windows 8 look” to my website. So far it involves a lot of hand coding 
but I like the way it looks. However, while the CSS works I can’t get its JS scripts to run, even though FireBug tells me they’re loaded (in views/layouts/main.php). It seems that it requires jQuery to be loaded beforehand and because of Yii’s lazy loading I’ve had to force it by including an “invisible” zii widget, to no avail. Any ideas?
Thanks,
Yii::app()->clientScript->registerCoreScript('jquery');
Thanks Andy, but I already tried that and it didn’t work… 
. There’s something in the JS loading mechanism that doesn’t allow the MetroUI scripts to run. I also tried loading jQuery/jQueryUI from Google, to no avail. Admitedly I’m no JS expert but this one has me stumped…
Does it work for you without using Yii?
You can use nice ‘packages’ feature to resolve dependencies.
For example (config/main.php):
'clientScript' => array(
'scriptMap' => array(
'jquery.js' => 'http://code.jquery.com/jquery-1.8.2.js', // get jquery from CDN
'jquery.min.js' => 'http://yandex.st/jquery/1.7.1/jquery.min.js',
),
'packages' => array(
'jquery' => array(
'baseUrl' => '',
'js' => array(
'jquery.min.js',
'jquery-ui.min.js',
),
'css' => array(
'jquery-ui.css',
'css/jquery-ui-bootstrap/jquery-ui.css',
),
),
'knockout' => array(
'baseUrl' => '',
'js' => array(
'js/knockout-2.1.0.js',
'js/knockout.mapping.js',
'js/knockout.sortable.min.js',
'js/knockout.bindings.js',
),
'depends' => array('jquery'), // make dependency so 'knockout' package will be loaded AFTER jquery
),
),
),
More on this: http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail
At the risk of sounding stupid, I learned PHP because of Yii, so I really haven’t tried without it because prior to that all I knew was MS Expression Web and all that sillyness… The problem shows up in views/site/index.php rendered with the views/layouts/main.php layout in a “testdrive”-type webapp; very light stuff. I’ll see if I can remember how to do a plain web page 
Yes, I tried a custom scriptMap in config/main.php, even loading jQuery/JUI from directly from Google and not publishing assets or anything, to no avail.
I need to improve my skills… 
Thanks guys, keep the ideas coming. If I can solve this perhaps I can contribute an extension á-la-Bootstrap by @cniska.
Regards,
After a few days of rest I finally got it working… @andy_s, you were right; @ORey, I didn’t need your approach but I learned from it. To both of you, thanks!
One cannot use Yii’s smart lazy loading feature to load jQuery only upon the presence of a CJui widget; it must be directly loaded because none of the Metro UI widgets are Yii based.
One must load the scripts using CClientScript and not a <script> tag because they might get loaded in the wrong order.
The following views/layouts/main.php head section worked for me:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/metro-bootstrap.css" />
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/metro-bootstrap-responsive.css" />
<?php Yii::app()->getClientScript()->registerCoreScript('jquery.ui'); // also loads jquery.js as a dependency ?>
<?php Yii::app()->getClientScript()->registerScriptFile(Yii::app()->request->baseUrl."/js/metro/metro.min.js"); ?>
<title><?php echo CHtml::encode($this->pageTitle); ?></title>
</head>
<body class="metro">
...
As I said I’m not a JS/jQuery expert, but I’m learning…
Cheers,
No, I haven’t tried yet but wondering about it.
Try it, you may like it…
Hi,
I know this is quite an old post but I was wondering if anyone can help. I’ve created a nice dashboard using emetrotile, and everything works fine. The only problem is that on a mobile device, the tiles keep their dimensions. Is it possible to make them responsive?