title: jQuery Mobile with x3dom diffuseColor control
body: <p>I followed an example code and ended up with a not working application. I checked and checked again and it 'should' work all right, however it doesn't. So I am asking you if you could pinpoint where did I go wrong :/</p>
  
  <p>Here's my html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
         &lt;title&gt;Web3D&lt;/title&gt;
         &lt;meta name="viewport" content="initial-scale=1, user-scalable=no, width=device-width"&gt;
         &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
         &lt;link rel="stylesheet" href="css/themes/css.css" /&gt;
         &lt;link rel="stylesheet" href="css/themes/css.min.css" /&gt;
         &lt;link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" /&gt;
         &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css" /&gt;
         &lt;link rel="stylesheet" type="text/css" href="http://www.x3dom.org/download/dev/x3dom.css"&gt;&lt;/link&gt;
         &lt;script type="text/javascript" src="http://www.x3dom.org/download/dev/x3dom.js"&gt;&lt;/script&gt; 
         &lt;script src="http://code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt; 
         &lt;script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"&gt;&lt;/script&gt;
         &lt;script src="js/colorScript.js"&gt;&lt;/script&gt;
         &lt;style&gt;
              label { width: 100px; float: left; clear: both; }
              #ctrlContainer { border: 1px solid #000; padding: 20px; float: left; width: 280px; margin-left: 20px; }
              #sliderContainer div { float:left; width: 200px; }
              #sliderContainer li { height: 25px; }
              #sliderContainer ul { clear: both; list-style-type: none; margin: 20px 0 10px 0; padding: 0; }
         &lt;/style&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
  &lt;!-- PAGE 1 --&gt; 
          &lt;div data-role="page" id="first" data-theme="a"&gt;
              &lt;div data-role="header" data-position="fixed"&gt;
                  &lt;h1&gt;Something Rotating | Homework 1&lt;/h1&gt;
              &lt;/div&gt;&lt;!-- /header --&gt;  
              &lt;!-- NAVIGATION --&gt;    
              &lt;div data-role="header"&gt;
                  &lt;div data-role="navbar"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#first" data-transition="flip" data-icon="info"&gt;Something Rotating&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#second" data-transition="flip" data-icon="user"&gt;Controlling Objects&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#third" data-transition="flip" data-icon="location"&gt;Inline Importing&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;&lt;!-- /navbar --&gt;
              &lt;/div&gt;&lt;!-- /header --&gt;
  &lt;!-- /NAVIGATION --&gt;       
  
              &lt;div data-role="content"&gt;
              &lt;x3d width="500px" height="400px"&gt;
      &lt;scene&gt;
          &lt;transform id="objectToAnimate"&gt;
              &lt;shape&gt;
                  &lt;appearance&gt;
                      &lt;material diffuseColor='red'&gt;&lt;/material&gt;
                      &lt;imageTexture url='textures/bamboo.jpg'&gt;&lt;/imageTexture&gt;
                  &lt;/appearance&gt;
  
                  &lt;box/&gt;
              &lt;/shape&gt;
          &lt;/transform&gt;
  
      &lt;timeSensor id="time" loop="true" cycleInterval="4"/&gt;
      &lt;orientationInterpolator id="objectAnimatation" key="0 0.5 1" keyValue="0 1 0 0  0 1 0 1.57079  0 1 0 3.14159  0 1 0 4.71239  0 1 0 6.28317"&gt;&lt;/orientationInterpolator&gt;
  
      &lt;ROUTE fromNode='time' fromField='fraction_changed' toNode='objectAnimatation' toField='set_fraction'&gt;&lt;/ROUTE&gt;
      &lt;ROUTE fromNode='objectAnimatation' fromField='value_changed' toNode='objectToAnimate' toField='set_rotation'&gt;&lt;/ROUTE&gt;
  
      &lt;/scene&gt;
  &lt;/x3d&gt;  
              &lt;/div&gt;&lt;!-- /content --&gt;
              &lt;!-- CONTENT --&gt; 
              &lt;div data-role="footer" data-position="fixed"&gt;
                  &lt;h4&gt;This is the footer&lt;/h4&gt;
              &lt;/div&gt;&lt;!-- /footer --&gt;
  &lt;!-- /CONTENT --&gt;  
  
          &lt;/div&gt;&lt;!-- /page --&gt;
  &lt;!-- /PAGE 1 --&gt;
  
  &lt;!-- PAGE 2 --&gt; 
          &lt;div data-role="page" id="second" data-theme="a"&gt;
              &lt;div data-role="header" data-position="fixed"  data-add-back-btn="true"&gt;
                  &lt;h1&gt;Controlling Objects | Homework 2&lt;/h1&gt;
              &lt;/div&gt;&lt;!-- /header --&gt;  
              &lt;!-- NAVIGATION --&gt;    
              &lt;div data-role="header"&gt;
                  &lt;div data-role="navbar"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#first" data-transition="flip" data-icon="info"&gt;Something Rotating&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#second" data-transition="flip" data-icon="user"&gt;Controlling Objects&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#third" data-transition="flip" data-icon="location"&gt;Inline Importing&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;&lt;!-- /navbar --&gt;
              &lt;/div&gt;&lt;!-- /header --&gt;
  &lt;!-- /NAVIGATION --&gt;       
  
              &lt;div data-role="content"&gt;
              &lt;h2&gt;Change the color of the cube using the RGB sliders, which updates the "diffuseColor" attribute of the Material node using jQuery.&lt;/h2&gt;
  &lt;!--SCENE STARTS--&gt;
  &lt;x3d xmlns="http://www.web3d.org/specifications/x3d-namespace" id="spheres" showStat="true" x="0px" y="0px" width="400px" height="400px" style="float:left;"&gt;
      &lt;scene DEF='scene'&gt;
          &lt;transform id="objectToAnimate"&gt;
              &lt;shape&gt;
                  &lt;appearance&gt;
                      &lt;material diffuseColor='0 0 0' specularColor='.2 .2 .2'&gt;&lt;/material&gt;
                  &lt;/appearance&gt;
  
                  &lt;box DEF='box'/&gt;
              &lt;/shape&gt;
          &lt;/transform&gt;
  
      &lt;timeSensor id="time" loop="true" cycleInterval="4"/&gt;
      &lt;orientationInterpolator id="objectAnimatation" key="0 0.5 1" keyValue="0 1 0 0, 0 1 0 3, 0 1 0 6"&gt;&lt;/orientationInterpolator&gt;
  
      &lt;ROUTE fromNode='time' fromField='fraction_changed' toNode='objectAnimatation' toField='set_fraction'&gt;&lt;/ROUTE&gt;
      &lt;ROUTE fromNode='objectAnimatation' fromField='value_changed' toNode='objectToAnimate' toField='set_rotation'&gt;&lt;/ROUTE&gt;
  
      &lt;/scene&gt;
  &lt;/x3d&gt;
  &lt;!--/SCENE ENDS--&gt;
  &lt;!--CONTROLLER STARTS--&gt;
     &lt;div id="ctrlContainer"&gt;
          &lt;div id="sliderContainer"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;label&gt;Red&lt;/label&gt;&lt;div id="redSlider" class="slider"/&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label&gt;Green&lt;/label&gt;&lt;div id="greenSlider" class="slider"/&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label&gt;Blue&lt;/label&gt;&lt;div id="blueSlider" class="slider"/&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;!--/CONTROLLER ENDS--&gt;  
              &lt;/div&gt;&lt;!-- /content --&gt;
              &lt;!-- CONTENT --&gt; 
              &lt;div data-role="footer" data-position="fixed"&gt;
                  &lt;h4&gt;This is the footer&lt;/h4&gt;
              &lt;/div&gt;&lt;!-- /footer --&gt;
  &lt;!-- /CONTENT --&gt;  
  
          &lt;/div&gt;&lt;!-- /page --&gt;
  &lt;!-- /PAGE 2 --&gt;
  
  &lt;!-- PAGE 3 --&gt; 
          &lt;div data-role="page" id="third" data-theme="a"&gt;
              &lt;div data-role="header" data-position="fixed"  data-add-back-btn="true"&gt;
                  &lt;h1&gt;Inline Importing | Homework 3&lt;/h1&gt;
              &lt;/div&gt;&lt;!-- /header --&gt;  
              &lt;!-- NAVIGATION --&gt;    
              &lt;div data-role="header"&gt;
                  &lt;div data-role="navbar"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#first" data-transition="flip" data-icon="info"&gt;Something Rotating&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#second" data-transition="flip" data-icon="user"&gt;Controlling Objects&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#third" data-transition="flip" data-icon="location"&gt;Inline Importing&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;&lt;!-- /navbar --&gt;
              &lt;/div&gt;&lt;!-- /header --&gt;
  &lt;!-- /NAVIGATION --&gt;       
  
              &lt;div data-role="content"&gt;
              &lt;h2&gt;Change the color of the cube using the RGB sliders, which updates the "diffuseColor" attribute of the Material node using jQuery.&lt;/h2&gt;
  &lt;!--SCENE STARTS--&gt;
  &lt;x3d xmlns="http://www.web3d.org/specifications/x3d-namespace" id="spheres" showStat="true" x="0px" y="0px" width="400px" height="400px" style="float:left;"&gt;
      &lt;scene DEF='scene'&gt;
          &lt;transform id="objectToAnimate"&gt;
              &lt;shape&gt;
                  &lt;appearance&gt;
                      &lt;material diffuseColor='0 0 0' specularColor='.2 .2 .2'&gt;&lt;/material&gt;
                  &lt;/appearance&gt;
  
                  &lt;box DEF='box'/&gt;
              &lt;/shape&gt;
          &lt;/transform&gt;
  
      &lt;timeSensor id="time" loop="true" cycleInterval="4"/&gt;
      &lt;orientationInterpolator id="objectAnimatation" key="0 0.5 1" keyValue="0 1 0 0, 0 1 0 3, 0 1 0 6"&gt;&lt;/orientationInterpolator&gt;
  
      &lt;ROUTE fromNode='time' fromField='fraction_changed' toNode='objectAnimatation' toField='set_fraction'&gt;&lt;/ROUTE&gt;
      &lt;ROUTE fromNode='objectAnimatation' fromField='value_changed' toNode='objectToAnimate' toField='set_rotation'&gt;&lt;/ROUTE&gt;
  
      &lt;/scene&gt;
  &lt;/x3d&gt;
  &lt;!--/SCENE ENDS--&gt;
  &lt;!--CONTROLLER STARTS--&gt;
     &lt;div id="ctrlContainer"&gt;
          &lt;div id="sliderContainer"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;label&gt;Red&lt;/label&gt;&lt;div id="redSlider" class="slider"/&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label&gt;Green&lt;/label&gt;&lt;div id="greenSlider" class="slider"/&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label&gt;Blue&lt;/label&gt;&lt;div id="blueSlider" class="slider"/&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;!--/CONTROLLER ENDS--&gt;  
              &lt;/div&gt;&lt;!-- /content --&gt;
              &lt;!-- CONTENT --&gt; 
              &lt;div data-role="footer" data-position="fixed"&gt;
                  &lt;h4&gt;This is the footer&lt;/h4&gt;
              &lt;/div&gt;&lt;!-- /footer --&gt;
  &lt;!-- /CONTENT --&gt;  
  
          &lt;/div&gt;&lt;!-- /page --&gt;
  &lt;!-- /PAGE 3 --&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is the content of 'js/colorScript.js' that is linked in the header:</p>
  
  <pre><code>$(document).ready(function(){           
      // Create the sliders
      $(".slider").slider({min: 0, max: 1, step: 0.01, slide: function(e, ui) {
          var newCol =   $("#redSlider").slider('option', 'value') + " " 
                       + $("#greenSlider").slider('option', 'value') + " "  
                       + $("#blueSlider").slider('option', 'value');              
          $("Material").attr("diffuseColor", newCol);
      }});
  });
  </code></pre>
  
  <p>It should work, however it doesn't...</p>