Skip navigation

svilen's blog

CrossSlide - Create Pan and Cross-Fade Animations

CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself.

CrossSlide can do simple Static cross-fade, Slide + cross-fade and Ken Burns effect: panning, zooming and fading to specific points, to guide the eye of the viewer and convey meaning. This kind of effect relies on the browser for positioning, scaling and cropping images, through CSS and the DOM.

jCrop - Powerful Image Cropping Engine for jQuery

Jcrop is a powerful image cropping engine for jQuery. It’s been designed so developers can easily integrate an advanced image cropping functionality directly into any web-based application without sacrificing power and flexibility.

It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications. Jcrop also features clean, well-organized code that works well across most modern web browsers.

jQuery Image Crop

Linux Backup & Restore script


This is how it looks on screen:

|-------------------- Press CTRL+ALT+F1 at the GDM login
1) Backup
2) Exit

You simply just type: sudo backup and choose with your number keys the wanted action and press Enter on the keyboard.

OK, lets start.
Open a terminal window and type:
$ gedit backup

Copy the following code into your empty text file:

Filled in

MySQL Performance Tuning Primer Script

MySQL Performance Tuning Primer Script

This script takes information from "SHOW STATUS LIKE..." and "SHOW VARIABLES LIKE..."
to produce sane recomendations for tuning server variables.
It is compatable with all versions of MySQL 3.23 and higher (including 5.1).

Currently it handles recomendations for the following:

  • Slow Query Log
  • Max Connections
  • Worker Threads
  • Key Buffer
  • Query Cache
  • Sort Buffer
  • Joins
  • Temp Tables
  • Table (Open & Definition) Cache
  • Table Locking
  • Table Scans (read_buffer)
  • MyISAM Status

Highlight images on mouse over using Opacity

Sometimes you might want to blur (reduce the opacity) an image on default and bring it back to being opaque on mouse over. You can use this effect to keep the users focus on your content rather than those links bar on the top of the page: for e.g. you can make your full menu bar with links less opaque or more transparent by default and highlight them on mouse over.
So how do we acheive this? Very simple the answer to this is to use the “opacity” property.

Opacity property can have the following values: 0.0 to 1.0 any values outside this range will be clamped into this.

Opacity: 1.0 means that the element is 100% Opaque or in other words 0% transparent.
Opacity: 0.0 means that the element is 100% transparent or in other words 0% opaque.

according to W3C this is how opacity should be defined opacity: 0.5

But Mozilla and IE had their own ways of implementing this

IE wants this for opacity to work filter:alpha(opacity=50)

and Mozilla wanted this -moz-opacity: 0.5