Total results: 27

Easy Javascript crossfading with jQuery

In today’s World Wide Web many websites are featuring projects or artwork on their homepage via a crossfading gallery. In the past this was normally done by an Adobe Flash movie but these days it is usually much easier to implement with Javascript.

A Javascript solution provides many benefits such as cross browser support, no plugins required and highly improved performance. There are many different ways to implement a crossfade in Javascript, many of them very complex, so today I will be showing you how this effect can be achieved with the jQuery framework, Cycle plugin and only a few lines of code.

First of all you must include the jQuery JavaScript by either downloading it from jQuery or including it right from their website.

Next we must download the Cycle plugin and include it from your computer.

Next step is to define your slideshow files in HTML. Simply write your img tags into a slideshow div tag.

Finally all you have to do is include an inline Javascript function to initiate the cycler. Remember to match up the class name of the slideshow div with the class name in the function.

<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>

That's it, a Javascript crossfading gallery in minutes. To see examples and additional effects that the cycle plugin can perform, please see the cycle plugin website.

Highlight textfield onclick

To highlight the value of a textbox when the user clicks on it, simply use the built in JavaScript function "select()"

Example:

<input onclick="this.select();" type="text" name="title" value="Title...">

Installing syntaxhighlighter error: XregExp not defined

I recently installed syntaxhighlighter. The useful JavaScript tool for professional formatting of code blocks for blogs etc. by Alex Gorbatchev.

I followed the installation guide properly adding the shCore.js and brush scripts I needed. I also included shCore.css and shThemeDefault.css style files but kept receiving the same JavaScript error: XregExp not defined in shCore.js

It turns out after a lot of trial and error that you do not use the JavaScript files in the "/src/" folder of the download files. These do not work. You must use the 3 files with the same name in the "/scripts/" folder, specifically:

  • shCore.js, 
  • shLegacy.js 
  • shAutoloader.js

© Blake Simpson, 2012 – 2018