Rollover image – Change image on hover/mouse over

Often when designing websites static or dynamic, PHP or ASP.Net, Laravel or WordPress, you have to design in a way if user hovers an image it gets changed and an alternate image is displayed. This can be easily achieved via simple HTML events. Here is the trick:

<img src="FIRST IMAGE URL GOES HERE"
onmouseover="this.src='SECOND IMAGE URL GOES HERE'"
onmouseout="this.src='FIRST IMAGE URL GOES HERE - AGAIN'" />

It is simple as that.

Create your first real-time AngularJS application

In my previous article I talked about creating real-time PHP application. That was on the server side and I demonstrated a very very basic client to connect with it. Let’s take that to next step and create a Javascript client with AngularJS.

Code

angular-client.html


<html>
 <head>
 css/bootstrap.min.css" rel="stylesheet">
 
 
 
 <script src="angular-client.js"></script>
<style>
 body { margin-top: 10px; }
 input.message { height: 30px; }
 </style>
 </head>
 AppCtrl">
 <form class="form-inline">
 <button ng-click="connect()" class="btn">Connect</button>
 <input type="text" ng-model="text" placeholder="input message to send" class="message"></input>
 <button ng-click="send()" class="btn">send</button>
 </form>
 
 <table class="table table-striped">
 <tr ng-repeat="message in messages">
 <td>{{message}}</td>
 </tr
 </table>
 </body>
</html>

 


angular-client.js


var app = angular.module('app', []);
app.factory('ChatService', function() {
 var service = {};
 
 service.connect = function() {
 if(service.ws) { return; }
 
 var ws = new WebSocket("ws://localhost:8080");
 
 ws.onopen = function() {
 service.callback("Succeeded to open a connection");
 };
 
 ws.onerror = function() {
 service.callback("Failed to open a connection");
 }
 
 ws.onmessage = function(message) {
 service.callback(message.data);
 };
 
 service.ws = ws;
 }
 
 service.send = function(message) {
 service.ws.send(message);
 }
 
 service.subscribe = function(callback) {
 service.callback = callback;
 }
 
 return service;
});
 
 
app.controller('AppCtrl', ['$scope', 'ChatService', function($scope, ChatService) {
 $scope.messages = [];
 
 ChatService.subscribe(function(message) {
 $scope.messages.push(message);
 $scope.$apply();
 });
 
 $scope.connect = function() {
 ChatService.connect();
 }
 
 $scope.send = function() {
 ChatService.send($scope.text);
 $scope.text = "";
 }
}]);


Details

It is pretty straightforward. We created an Angular Service and consumed that in our Angular controller. The only purpose of Angular service is handling communication. It will hand over the message to the subscriber in our case Angular controller and controller can do anything with that message. Here since we demonstrated the chat application so controller displays that message received.

That’s it! so simple.

Note: Both HTML and Javascript files are also available on Gist.

Code was referenced from here.

 

 

Give a new look to your osCommerce store

That’s how the osCommerce theme looks by default in version 2.3.1

the default redmond theme

What we want to do is, to change the light blue of the buttons, infobox headings and breadcrumb line (thats the line just under the header). In other words, we’re going to change the color theme of the store. The whole process won’t take more than some minutes, let’s start

1. Choose a theme from “themeroller”

Just go to the jquery-ui page and pick a new theme from themeroller. You can take one of the ready themes, you can make adjustements to an existing one or even create your own theme.

The jquery ui themeroller

There are really many themes to choose from. After you are done click “download”. You’ll be transfered to another screen.

Download your new theme

Leave all components checked and click “download” again. You’ll get a complete copy of jquery ui to your computer. Unzip the file and open the folder.  The folder will look like this

The themeroller folder

We don’t need all of it’s contents, because jquery ui is already installed in osCommerce. The part we need is marked with orange in the above image. It’s named by the name of the theme we choose. Here we need to do one change, to rename the file jquery-ui-1.8.6.custom.css to jquery-ui-1.8.6.css

2. upload the theme to your server

Use your favorite FTP program to upload the folder “ui-darkness” (the folder name depends on the theme you downloaded from themeroller) to following location

[catalog]/ext/jquery/ui/

3. activate the new theme

Last step is to “tell” to our store to use the new theme. To do this we need to go to file [catalog]/includes/template_top.php and change the path to the theme. This path is set in following line

29
<link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.8.6.css" />

This we change to

29
<link rel="stylesheet" type="text/css" href="ext/jquery/ui/ui-darkness/jquery-ui-1.8.6.css" />

Only thing we do is, to change the path to go to folder “ui-darkness” instead of “redmond” which is the default theme. You need ofcourse to set the right name, according to the theme you’re going to use

Lets see how our store looks now

jQuery Image SlideShow

So to get started you’re going to need jQuery and the Orbit plugin (make sure jQuery is attached first).

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.orbit.min.js" type="text/javascript"></script>

Now we can quickly hookup the CSS we need:

<link rel="stylesheet" href="css/orbit.css">

And finally, let’s dig into the markup.

Now, just a couple notes before moving on…

  • First, Orbit will dynamically determine the height and width of your set of images and scale accordingly, but make sure all your images are the same size or the larger images will peek out on the sides.
  • Secondly, you’ll notice that the “id” of the parent div is “featured”, but it doesn’t have to be. When you call the Orbit plugin, you set your own selector and the magical “orbit” class gets applied.

All we need to do now is activate the Orbit plugin.

<script type="text/javascript">
     $(window).load(function() {
         $('#featured').orbit();
     });
</script>

And there you have it. Orbit, implemented and ready to rock with all the default settings.

Article resource: http://www.htmldrive.net/items/show/928/Countdown-jQuery-Slick-Image-Slider-Plugin