Note: You may have problems with your first installation of SilverStripe FlexSlider, there is a trick.
Have faith, the SilverStripe FlexSlider does work. The installation appears straight forward. Loading of images can be a bit clumsy, but is functional. The use of shortcode is easy, and insertion into the template files is simple. The details on loading and use of SilverStripe’s implementation of FlexSlider is at http://www.netefx.de/Silverstripe-flexslider.php.
However, there are two problem with the installation.
There is a problem with one step in the instructions
Install flexslider as explained on the page referenced above, but:
When the instructions tell you to add Object::add_extension(‘Page’, ‘FlexSliderExtension’) ;
to mysite/_config.php, stop,
Run dev/build?flush=1 first,
Then go to mysite/_config.php and insert the line, and
Follow that with another dev/build?flush=1.
If you install the add_extension() before building the database,
you will get an installation error.
Line 219 of flexslider/code/FlexSlider.php must be commented out
The line “Requirements::javascript(THIRDPARTY_DIR . ‘/jquery/jquery.js’);” at line 219 of flexslider/code/FlexSlider.php must be commented out. This line loads jQuery.js, but, the default install of SilverStripe loads jquery.js. If jquery.js is loaded twice, jquery code becomes confused and jquery calls, such as calls to $FlexSlider() become confused and fail.
The new HTML5 attribute placeholder for the input tag could be wonderful if implemented correctly. Unfortunately, at the moment we have a problem on Firefox. When using placeholder on firefox, when focusing on the input field, the placeholder does not vanish. This gives the user the erroneous feel that the text is really there and attempts to “erase” it doesn’t work … it is in the background. The appearance is a bit confusing.
The following code can be used to create the “placeholder” behavior. Place a default value in an attribute called data-default, and that value will act as the placeholder.
<script type="text/javascript">
$(function() {
$('input[type="text"]').focus(function() {
if (!$(this).attr('data-default')) $(this).attr('data-default', $(this).val());
if ($(this).val()==$(this).attr('data-default')) $(this).val('');
});
$('input[type="text"]').blur(function() {
if ($(this).val()=='') $(this).val($(this).attr('data-default'));
});
$( 'input[type="text"]' ).each(function( index ) {
if ($(this).val()=='') {
$(this).val($(this).attr('data-default'));
}
});
}) ;
</script>
jQuery is used, rather than simple javascript because the javascript getAttribute(‘data-function’) may not work correctly and new HTML5 data() may not work on all browsers. It is currently safest to use jQuery until HTML5 is a bit more mature.
I know, there are dozens of e-commerce carts. WP has carts, Drupal has carts, Joomla has carts, Zen-Cart is popular, osCommerce has been here forever. You can find OpenCart, PrestaShop, Magneto is the “top of the line,” and people (like BigCommerce) will charge to host your site. Everyone seems to have a favorite or an angle.
I am not offering a favorite. But, I am going to mention Tomato Cart. Recently, I installed it for a client. It has a really easy administration interface, and the client loves it.
Tomato Cart is not the best. It is derived from osCommerce, so, it does have old code at it’s heart. However, It does have new code, making it have some very interesting administration changes. It doesn’t feel anything like osCommerce for the administrator. It’s extremely friendly. The default template is nicer than the default osCommerce cart and many others. Creating templates is not all that bad either. It is slower than some in the administration area because of all the mootools handling, but, the front end works as smoothly (and quickly) as most stores work. It is not slow like Magneto by any stretch of the imagination, and will not require a dedicated server.
There are some bug in Tomato Cart. The install I did required a javascript correction in the variants handling, but, as a whole the problems are minimal. It is getting better fast. You may want to try it.
See my later notes for the correction to the variants handling to correct that Tomato Cart problem.
I love it, the HTML5 new worker is going to really help smoothing out the behavior of websites, and open new vistas. Now, we can control multiple JavaScript tasks simultaneously on the client computer.
Until now, we were confined to AJAX to allow the off-load of some of the work. AJAX allows the page displayed on the client computer to communicate with the server to off-load some work. AJAX allows the client computer to access the server database and server files. AJAX can do computation and send information to the client computer. AJAX is good, but, workers open up a new opportunity.
HTML5 Workers open the opportunity to control and use multiple JavaScript tasks on the client computer. This lowers the traffic between client and server and gives the client a new manner to eliminate interface (display) blocking that happens when a long task has to crank and complete before the display can continue communicating with the user.
To use a new Worker you:
Create a separate JavaScript file that encapsulates the JavaScript task.
Activate the JavaScript worker thread functionality.
Start using the thread.
Here is a sample:
JavaScript Support Activity
Create a JavaScript file that encapsulates the needed task. As a sample create a file (worker.js) that has the following code:
// JavaScript Document worker.js
/*
use importScripts to include alternate files needed JavaScript.
No extra code will be needed for this sample.
importScripts("foo.js") ;
*/
/* For sample, let you know the thread has been spawned and
can be used. */
postMessage("I'm waiting to do some work ...") ;
/* define the support action this thread provides */
onmessage = function(evt) {
/* To pass data, you receive evt.data from the caller */
var data = [] ;
for (var i = 0 ; i < 150 ; i++) {
data[i] = [] ;
for (j= 0 ; j < 150 ; j++) {
data[i][j] = Math.random() ;
}
}
/* return the information to the caller */
postMessage(data) ;
/* free up memory */
data = null ;
/* close the thread if it is not doing any more */
self.close() ;
}
Spawning and Using the Worker
When the new worker is defined in a separate file, you can use it in your main page script by defining the normal response handling, error response handling and calling the worker. The following is how the worker handling is defined, spawned and used.
var webworkers_support = !!window.Worker ;
if (webworkers_support == true) {
/* Workers are supported */
if (typeof(worker) == "undefined")
/* Spawn the worker */
var worker = new Worker("worker.js") ;
worker.onmessage = function(evt) {
/* define what to do with results of the worker. */
alert(evt.data) ;
} ;
worker.onerror = function(err) {
/* define what to do with errors in the worker */
document.write(
err.message + "<br/>" +
err.filename + "<br/>" +
err.lineno ) ;
throw err ;
}
/* Use/call the worker to do something */
worker.postMessage("msg") ;
/* If the main programs wants to control the termination
of the worker, you can use terminate ...
worker.terminate() ;
*/
} else {
/* if running on a browser that does not support workers
you will have to do something else ... sorry */
document.write("<br/>Sorry! No web worker Support ...")
}
Handling return errors
When an alternate thread has an error, the erroring thread will return an error code to the calling thread. The calling thread will have a function(err) defined to handle the error. The returning function can expect the following information returned:
err.message, err.filename, err.lineno
Information Passing
It should be mentioned, workers can't read any of the variables in the main site code. All data that the worker needs to be passed to that thread through the postMessage() calling the worker. Passing a simple variable works nicely in the simple case. In the complex case of multiple variables to be passed, consider using JSON data.
Passing Multiple Variables
To pass multiple variables, using JSON is good. To pass multiple variables, you might do the following:
/* Define the passed variables using JSON */
postMessage({ day: 2, month: 3, year: 1960 }) ;
/* Given the function(evt) in the receiving thread, the parameters
can easily accessed as: */
evt.data.day, evt.data.month, evt.data.year
Gradients may be used in backgrounds via CSS. This is not available by CSS in all browsers, but, the feature is coming along. Even browsers that support gradients may have some holes in their functionality. This feature is defined in CSS3, use it and include fallback handling. Though the CSS3 version is not supported by all new browsers, it will be available soon. It has been available for webkit, opera, mos, and ms for some time, at least to some level. The following explains how the gradient can be used reasonably reliable across browsers. While the oldest Safari and Chrome syntax is shown in the cross browser samples, they are very different format from the current CSS3 syntax. That will be used, but, not discussed here. Meanwhile the new Mozilla, and the more recent webkit, mos and ms are very similar in format to the CSS3 syntax, and will be discussed below.
angleOrlocation – This indicates the location/direction that the gradient will go. The value may be:
Defined in degrees, such as 30degree, or 190deg
Listed as {top, bottom, left, right, top left, top right, bottom left, bottom right, circle}, indicating where the gradient starts. Top would result in vertical gradient from top to bottom. Left would result in horizontal running left to right
stop1 x% – the color to start gradient and an optional percent, identifying where the stop is located, effecting the width of the transition band.
stop2 x% – the color to blend to from stop1 and an optional percent, identifying where the stop is located, effecting the width of the transition band
stop3 x% – the color to blend to from stop2 and an optional percent, identifying where the stop is located, effecting the width of the transition band
stop x% …. as many color and optional percent, identifying where the stop is located, effecting the width of the transition band
stopN – the color to blend to from the previous stop.
Note: In the previous discussion, I refer to the positioning of the color by %. Actually, the value can be given in % or other measuring method, such as; px, rem, em, …
[% %] – this is the location of the center of the shape, such as 80% 20%. If this field is not present, the shape is centered in the DIV.
type – identify if the shape will be {circle, ellipse }. If this field is not present, ellipse is used
size – the size is specified relative to { closest-side, farthest-side, closest-corner, farthest-corner, contain, cover }
stop1 x% – the color to start gradient and an optional percent, identifying where the stop is located, effecting the width of the transition band
stop2 x% – the color to blend to from stop1 and an optional percent, identifying where the stop is located, effecting the width of the transition band
stop3 x% – the color to blend to from stop2 and an optional percent, identifying where the stop is located, effecting the width of the transition band
stop x% …. as many color and optional percent, identifying where the stop is located, effecting the width of the transition band
stopN – the color to blend to from the previous stop.
Note: In the previous discussion, I refer to the positioning of the color and center by %. Actually, the value can be given in % or other measuring method, such as; px, rem, em, …
Using CSS to create a Horizontal Gradient Background on a DIV
Using CSS to Create a Vertical Gradient on a DIV
Using CSS to Include Multiple Band Gradients on a DIV
Using CSS to Create an Even Stop Gradient on a DIV
If you would like an even stop gradient on selected DIV, there is a CSS3 option to handle this situation.
This is available in CSS3, and special case options for old -webkit, and -mos browsers.
Using CSS to Create an arbitrary Stop Gradient on a DIV
If you would like an arbitrary stop gradient on selected DIV, there is a CSS3 option to handle this situation.
This is available in CSS3, and special case options for old -webkit, and -mos browsers.
Notice the use of 5% and 95% to affect the location at which the color band is to start, and therefore affects the width of the transition bands.
Using CSS to Create a Diagonal Gradient on a DIV
If you would like a diagonal gradient on selected DIV, there is a CSS3 option to handle this situation.
This is available in CSS3, and special case options for old -webkit, and -mos browsers.
Notice: To go from top left to bottom right, the standard requires the specification of the end location, bottom right. Safari (webkit) reverses the logic of the location to specify in the first parameter. Webkit expects the use of the begin point of the diagonal. If you want to go from top left to bottom right, specify top left.
Using CSS to Create an Angled Gradient on a DIV
If you would like a gradient at a specific angle on selected DIV, there is a CSS3 option to handle this situation.
This is available in CSS3, and special case options for old -webkit, and -mos browsers.
Using CSS to Create a Radial Gradient on a DIV
Notice: for circular gradients, the first parameter is replace with the value circle. You may use the percent on the color bands to position from the center of the circle.
Using CSS to Create a Positioned Radial Gradient on a DIV
If you would like a positioned radial gradient on selected DIV, there is a CSS3 option to handle this situation.
This is available in CSS3, and special case options for old -webkit, and -mos browsers.
