Apply JQuery UI in Joomla!1.5 site

Before that, I want to report one discovery:

When I create my view layout for my component, if I use:

<table width=800px>

it won't work, its width is not affected.

However, if I use:

<table style="width: 800px">

generally speaking, it will work.

We've already known how to get the scroll bar in JQuery UI work, and now its time to place it into Joomla!.

Gathering Info From Joomla! on the topic:

I got this idea from the book <JQuery for Dummies>, that there are plug-ins for Joomla! to integrate jQuery. By performing a search on extension directory:

http://extensions.joomla.org/search?q=jquery

Now we get some candidates:  

From the snapshot, you can view the type, rating, popularity and availability of the extensions, the last one is a Module, that may imply its capability is limited. And the last two require registration to download, that is annoying.

I pick jQuery++ Integrator, let's try it out.

Using JQuery++ Integrator:

And now copy the updated files into the installation path:

Now configure Integrator as:

And backup the original files(which are the embedded jquery files), its another way of removing them:

The next up is to create a layout PHP file for one view of my component in Joomla!:

<?php // no direct accessdefined('_JEXEC') or die('Restricted access'); ?><style>#demo-frame > div.demo { padding: 10px !important; }.scroll-pane { overflow: auto; width: 99%; float:left; }.scroll-content { float: left; }.scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; }* html .scroll-content-item { display: inline; } /* IE6 float double margin bug */.scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }.scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto;  }.scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }.scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; }.scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }</style><script>jQuery(function() {//scrollpane partsvar scrollPane = $( ".scroll-pane" ),scrollContent = $( ".scroll-content" );//build slidervar scrollbar = $( ".scroll-bar" ).slider({slide: function( event, ui ) {if ( scrollContent.width() > scrollPane.width() ) {scrollContent.css( "margin-left", Math.round(ui.value / 100 * ( scrollPane.width() - scrollContent.width() )) + "px" );} else {scrollContent.css( "margin-left", 0 );}}});//append icon to handlevar handleHelper = scrollbar.find( ".ui-slider-handle" ).mousedown(function() {scrollbar.width( handleHelper.width() );}).mouseup(function() {scrollbar.width( "100%" );}).append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" ).wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();//change overflow to hidden now that slider handles the scrollingscrollPane.css( "overflow", "hidden" );//size scrollbar and handle proportionally to scroll distancefunction sizeScrollbar() {var remainder = scrollContent.width() - scrollPane.width();var proportion = remainder / scrollContent.width();var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );scrollbar.find( ".ui-slider-handle" ).css({width: handleSize,"margin-left": -handleSize / 2});handleHelper.width( "" ).width( scrollbar.width() - handleSize );}//reset slider value based on scroll content positionfunction resetValue() {var remainder = scrollPane.width() - scrollContent.width();var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :parseInt( scrollContent.css( "margin-left" ) );var percentage = Math.round( leftVal / remainder * 100 );scrollbar.slider( "value", percentage );}//if the slider is 100% and window gets larger, reveal contentfunction reflowContent() {var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );var gap = scrollPane.width() - showing;if ( gap > 0 ) {scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );}}//change handle position on window resize$( window ).resize(function() {resetValue();sizeScrollbar();reflowContent();});//init scrollbar sizesetTimeout( sizeScrollbar, 10 );//safari wants a timeout});</script><div class="scroll-pane ui-widget ui-widget-header ui-corner-all"><div class="scroll-content">  <table style="border: 1px solid; width: 1550px";>    <tr>      <th>header0</th><th>header1</th><th>header2</th>    </tr>    <tr>      <td><?php echo $this->testStr ?></td><td></td><td></td>    </tr>    <tr>      <td><?php echo $this->error ?></td><td></td><td></td>    </tr>    <tr>      <td></td><td><?php echo $this->mon ?></td><td></td>    </tr>  </table></div><div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"><div class="scroll-bar"></div></div></div>  <div id="vin-btn-1" style="background: red; width: 150px; height: 50px;float: left; margin: 10px;">this is a but</div><div id="vin-btn-2" style="background: red; width: 150px; height: 50px;float: left; margin: 10px;">this is a but</div><div id="vin-btn-3" style="background: red; width: 150px; height: 50px;float: left; margin: 10px;">this is a but</div><div id="vin-btn-4" style="background: red; width: 150px; height: 50px;float: left; margin: 10px;">this is a but</div><div id="vin-btn-5" style="background: red; width: 150px; height: 50px;float: left; margin: 10px;">this is a but</div><div id="vin-btn-6" style="background: red; width: 150px; height: 50px;float: left; margin: 10px;">this is a but</div><div id="vin-btn-7" style="background: red; width: 150px; height: 50px;float: left; margin: 10px;">this is a but</div>

And view the result in the three browsers:

As we can see, it does work in the browsers, but with the CSS lost. Actually we get errors:

According to this report, the CSS file, the jQuery file and jQuery UI file, they were all failed to load.Then view the source code of the page in Chrome:

So, the plugin hard coded the jQuery and UI script files' name, and because I removed them, then the load failed. As to the CSS, it seems to be a bug, the plug-in fails to figure out the right relative path for CSS link, if the website files is not directly under the web root folder.

But there is a big question mark: since no valid jQuery script file get loaded, who did the function???????

Solving the Problems:

Now, we disable the customized CSS for a while, by setting it to NO in parameter panel.

Then walk through the source php code of this plug-in, open file: /plugins/system/jqueryintegrator.php

Pinpoint the code that  store the version number string, and update them:

Now refresh the page, there is no error on those problems.

Let's take a look at the CSS problem, first of all, we don't need a so big bundle of style rules at all, most of them are useless. It is due to the plugin can't handle the relative path correctly, so we need to add the subfolder's name to CSS's path:

add /soccer to the beginning of the path.

Further Problems:

According to some people discussion, the $ should be replaced with jQuery, due to it is used by Mootools, which is the default framework in Joomla!. But I found that, it works so far so perfect, with no error, maybe because I make no use of Mootools, so means I don't have to change anything. However, I still made a try, I replace the first $ with jQuery, and I got an error saying that "can't call load method on a null", which is labeled on:

var scrollbar = $( ".scroll-bar" ).slider(

To a beginner like me, that is really weird and confusing!!! 

 Why doesn't the green bar style show up?

The scroll bar's style doesn't rendered correctly, even the CSS file was loaded. To inspect that, compare the code generated by the separate demo and the Joomla! component:

The following is the code generated within Joomla!:

 

The following is generated by the simple demo:

There are many tags missed!!! So, some jQuery function which append HTML elements did not get invoked!!!

Replace all $ with jQuery:

Do that within the script block. And the result comes:

But it malfunctions, the wrapper of the scroll bar will automatically hiding, the content below be moved upward. Why is that? The code:

From the code, what we find is one extra div tag is created to wrap the scroll bar div, and its height gets changed to response mouse movement when the button of mouse is pressed.