Webdevelopement « Encodez Blog

Adding link to Banner Image (Multi-transition Banner)

by Muneer Shaheed 03 Feb 1 Comment

I received comments and email from many of our visitor requesting “How to make the large image as clickable link?” under the post Javascript Multitransition Banner released. I am writing this post in response to them.

To create a link on the large image of the banner,, we need to alter the function encTransformBanner = function(ids)
Add the following code at the end of the function

	$("div#bannerContainer").css("cursor", "pointer");
	$("div#bannerContainer").click(function() {		
		window.location.href = encBannerTexts[ids][2];
	});

The final code will looks like following for the function.

encTransformBanner = function(ids)
{
    encCurrentBanner = ids;
    var currentBg = $("div#bannerContainerCover").css("background-image");
    $("div#bannerContainer").css("background-image", currentBg);
 
    var cssObj = {"opacity": "0.1", "background-repeat": "no-repeat", "background-image": "url(" + encImg [ids].src + ")"}
    $("div#bannerContainerCover").css(cssObj);
 
    if(encTransitionType == "slide")
    {     
        $("div#bannerContainerCover").css("background-position", "-50px 0");                
        $("div#bannerContainerCover").stop().animate({backgroundPosition:"(0 0)", opacity:"1"}, {duration:600});
    }    
    else if(encTransitionType == "slideDown")
    {      
        $("div#bannerContainerCover").css("background-position", "0 -50px");                
        $("div#bannerContainerCover").stop().animate({backgroundPosition:"(0 0)", opacity:"1"}, {duration:600});
    }
    else
    {      
        $("div#bannerContainerCover").stop().animate({opacity:"1"}, {duration:1000});
    }
 
	$("div#bannerContainer").css("cursor", "pointer");
	$("div#bannerContainer").click(function() {		
		window.location.href = encBannerTexts[ids][2];
	});
}

Cool. Thats it.

Do it simpler : Image thumbnail and resize in PHP

by Muneer Shaheed 19 Nov 0 Comments

resize2 One of the common complex task among webdevelopers is image resizing. It is a big headach when using multiple size images in multiple pages of a single version of image. For long I was using a an script that would create one thumnail version of the image when the image is uploaded. It was not a suitable solution. Many time we will need different size of thumbnails to be used in different location and pages.

I came across PHPThumb. It was a very much better one for me where it can deliver following types of resizing mechanism.

adaptiveResize ($width, $height)
crop ($startX, $startY, $cropWidth, $cropHeight)
cropFromCenter ($cropWidth, $cropHeight = null)
resize ($maxWidth, $maxHeight)
resizePercent ($percent)
rotateImage ($direction = ‘CW’)
rotateImageNDegrees ($degrees)
save ($fileName)
show ()

You can learn more about this script here

Well,I have written a simple script that can work with phpThumb. What it would do is, when I request for a resized version of an original image, it will check for a same resized version. If the one resized version exist, it will return the path of that. Otherwise, a new
resized version will be created and saved before returning the path. This will help to use any size of thumbnail image at any time without wasting match resources.

The script

<?php
require_once("phpthumb/ThumbLib.inc.php");
/**
* Resize the image according to the given parameter 
* 
* This funciton resize the image to the given criteria and save it 
* in a well-named subdirectory. Then the path to the image will be returnd.
* I the image exists allready with give criteria, the image path is 
* returned simply.
* 
* @param string     $image          path to the source image
* @param integer    $width          required width
* @param integer    $height         required height
* @param string     $resizeStyle    style of resizing (ADAPTIVE , CROP, 
*                                   CROPCENTER, RESIZEPERCENT, RESIZE)
* @param integer    $percent        resize percentage
* @param integer    $starX          start pixel X axis
* @param integer    $starY          start pixel Y axis
* @param integer    $quality        picture quality
* @return string                    path to the reqested resized image
* 
* @author muneer <muneer@live.it>
* @version 1.0
* @copyright (c) 2009 encodez solutions http://www.encodez.com
*/
function getResized($image, $width, $height, $resizeStyle = "ADAPTIVE", 
                        $percent = 100, $starX = 0, $starY = 0, $quality = 80)
{    
    /* setting file name */
    $fileName = basename($image);
 
    /* creating the path for the resized image */
    $path = substr($image, 0, -(strlen($fileName)));
    if($resizeStyle != "RESIZEPERCENT")
    {        
        $path .= $width . "x" . $height . "-" . $resizeStyle;    
    }
    else
    {
        $path .= $percent . "-" . $resizeStyle;
    }
 
    /* 
     * checking whether image exists with the same criteria
     * If exist return the generated path,
     * If not, create the thumnail 
    */ 
    if(file_exists($path . "/" . $fileName) 
            && filemtime($path . "/" . $fileName) > filemtime($image))
    {
        return $path . "/" . $fileName;
    }
    else if(file_exists($image))
    {
        /* making directory for the image if it is not exists */
        if(!file_exists($path))
            mkdir($path, 0777);
 
        $options = array('jpegQuality' => $quality);
        try
        {
            /* creating the  PhpThumbFactory object */
            $thumb = PhpThumbFactory::create($image, $options);            
        }
        catch(Exception $ex)
        {
            echo "\n<!-- There was an error resizing the image \nSource 
                Image : " . $image . " \nError : " . $ex->getMessage() . " -->";
        }
 
        switch($resizeStyle)
        {
            case "ADAPTIVE":        // adaptiveResize
                $thumb->adaptiveResize($width, $height)->save($path . "/" . $fileName);
                break;
            case "CROP":            // crop
                $thumb->crop($startX, $startY, $width, $height)->save($path . "/" . $fileName);
                break;
            case "CROPCENTER":      // cropFromCenter
                $thumb->cropFromCenter($width, $height = null)->save($path . "/" . $fileName);
                break;
            case "RESIZEPERCENT":   // resizePercent
                $thumb->resizePercent($percent)->save($path . "/" . $fileName);
                break;
            case "RESIZE":          // resize
                $thumb->resize($width, $height)->save($path . "/" . $fileName);
                break;
            default:                // resize
                $thumb->resize($width, $height)->save($path . "/" . $fileName);
        }
        return $path . "/" . $fileName;
    }
    else
    {
        /* return 0 if the src image is not exists */
        return 0;
    }
} // end function getResized()

How to use this function?
scenario : Need a adaptive resize verion for /img/catalogue/sample1.jpg at 120px x 100px

solution :

1	<img src="<?php echo getResized("/img/catalogue/sample1.jpg", 120, 100, "ADAPTIVE") ?>" />

This will generate a “adaptive” resized image at the size of 120 px width and 100 px height.

This iamge will have the path

/img/catalogue/120×100-ADAPTIVE/sample1.jpg

This script might helpful you too. Please do not forget to put a comment if you like it Or any suggestion if you have.

Solution : Disabling image caching in browser (IE, Firefox, Chrome)

by Muneer Shaheed 04 Nov 1 Comment

There is a big headache among web developers with image caching. If you are using the same name while updating the image in the server, browser will not update it as quickly as you updated. This might occur in most cases where you update the image but not the file name. Confused? Let’s Make it clear,,

For example you have an image named “datasheet.jpg”. You are displaying this image on the webpage.

<img src="datasheet.jpg" />

Let’s say, if you are updating this image and leave it with the same name “datasheet.jpg”. Then also you image tag will be same.

<img src="datasheet.jpg" />

In many cases, browser will not know there is a new version of the same image and it will tend to display the content from the web cache. Even no-cache headers are not helping in these type of occasion (I tried and tired). So the returning visitor will see the same old image.

The simplest solution is to change the image filename. But how you will create a different name for an image that is in same name. Ok. Do it simply.

<img src="datasheet.jpg?mtime=1257316941" />

Do this -> Append a Query Sting

When you attach query sting in end of image file name, browser will treat it as a different file name and looks for the web server for new. This will not make the browser to display the cached content.

How to generate an optimized version of Query String for Image file name?

Using simply random value as query string will lead the browser to load the new version of image regardless of updated version. This will make the loading time of the web page too long even if the correct version of image is there on cache. This will become overhead. To overcome this issue, we can generate the query string using file modified time. So the query string will not be changed until file is modified next time. Once the file is modified, the query string will be changed and browser will load the new version.

Generate filename with query string using file modified time (PHP)

Use the filemtime($path) function to generate file modified time.

echo '<img src="datasheet.jpg?mtime=' . filemtime(="datasheet.jpg)  . '" />';

this will generate something similar to this

<img src="datasheet.jpg?mtime=1257316941" />

This will work for all types of browser including IE, FF, GC and all others.
I hope this will be useful for you. Don’t forget to leave a comment if you find any mistake on me.

Escaping ‘%’ in MySQL LIKE statement when sprintf

by Muneer Shaheed 01 Nov 0 Comments

I wanted to run a SQL query against MySQL database server which contains search string and need to be formated using sprintf. The problem arise when format. It is because of the sign “%” am using to advance my search term. The query was…

1 2	$sql = "SELECT * FROM user WHERE country = '%s' AND fName LIKE '%s%' ORDER BY fName"; $sql = sprintf($sql, $country, $searchTerm);

Here where the error fires. Thanks God, I found the solution for it.
This can be handled simply as follows,

1 2	$sql = "SELECT * FROM user WHERE country = '%s' AND fName LIKE '%s' ORDER BY fName"; $sql = sprintf($sql, $country, "%" . $searchTerm . "%");

but for a query like below, where it need multiple formating due to it complex and dynamic generation, I managed to prepare like below and worked fine for me.

$fieldArray = array("$t1.id", "$t3.avatar", "$t1.login", "$t1.firstName", "$t1.lastName", "$t2.title", "$t1.email", "$t1.active");
 
$sql = "SELECT DISTINCT ";
$sql.= "$t1.id, $t3.avatar, $t1.login, $t1.firstName, $t1.lastName, $t2.title AS groups, $t1.email, $t1.active ";
$sql.= "FROM $t1, $t2, $t3 ";
$sql.= "WHERE $t1.id = $t3.userId AND $t3.userGroup = $t2.id ";
if($searchField > 0 && $searchField < count($fieldArray))
{
    $sql.= "AND " . $fieldArray[$searchField] ." LIKE '%s' ";
    $sql = sprintf($sql, "%" . $searchVal . "%");
}
if($orderBy > 0 && $orderBy < count($fieldArray))
{
    $sql = str_replace("%", "%%", $sql);
    $sql.= "ORDER BY %s %s ";
    $sql = sprintf($sql, $fieldArray[$orderBy], $orderStyle, $start, $count);
}
$sql = str_replace("%", "%%", $sql);
$sql.= "LIMIT %d, %d";
$sql = sprintf($sql, $start, $count);

Before generating the next %, need to double the current % where it will become single % after formated.

Note this

$sql = str_replace("%", "%%", $sql);

Javascript Multitransition Banner released

by Muneer Shaheed 18 Jun 57 Comments

It is pleasure for me to share the codes that I have written for a banner. This is completely using Javascript/jQuery and CSS. Easy to customize and easy to install. Actually I was adopting the design from CISCO and IBM websites. I am not much good in Adobe Flash animation. It is the main reason to build this in Javascript. LOL.

.

Highlits:

100% pure Javascript/jQuery
Fast Loading
Auto animate banner
Easy to use link buttons
Enable or disable any texts
Easy to integrate with PHP, ASP.NET and any other servers

Demo

Click here to see a demo

Download

Link 1

Screenshot :

Screenshot 1

.

Screenshot 2

.

Screenshot 3

Installation:

Installation instruction found in source file.

This is not 100% complete. Please give me your feedbacks. I will make any changes for the improvement.

Use it for free & Please give me a link back if you like.

Bugs & Fixes

.

How to make a DIV layer centered!

by Muneer Shaheed 26 May 1 Comment

It is a challenge among many CSS designers to get the CSS page works same as they expected in all and every browsers. Different browsers render some of the CSS tags in different ways and some are omitted completely. No one will forget the IE 6 as a big headache and a bug full browser ever. It’s behavior torches all CSS designers. Thanks Microsoft they upgraded themselves with IE7.

Centering a layer is not that much harder part. It is simple but it is the start of most web page. So it is worth knowing the right syntex that works with almost all browsers today. Following is a sample style that works in all browsers.

CSS Style

 
body {
    margin: 0px;
    padding: 0px;
    text-align:center;
}
 
#outerWrapper {
    width:900px;
    margin:0 auto;
    border:1px #999 solid;
}

The Body

1	<div id="outerWrapper"></div>

Cool ! It is working fine. By the way, I have a absolute positioned layer. Will this work with this idea. No problem buddy. There is nother technique using the negative margin.

#outerWrapper{
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

Check wheather is this work for you. Probably it should.

My first step to Zend Framework

by Muneer Shaheed 25 Feb 1 Comment

Good Day !!!

I am just keeping my leg in to Zend Framework.

Extending the art & spirit of PHP, Zend Framework is based on simplicity, object-oriented best practices, corporate friendly licensing, and a rigorously tested agile codebase.

At the first step I faced several problems. Mainly the one was

Fatal error: Uncaught exception 'Zend_Controller_Dispatcher_Exception' with message 'Invalid controller specified (error)' in C:\wamp\library\Zend\Controller\Dispatcher\Standard.php:241 Stack trace: #0 C:\wamp\library\Zend\Controller\Front.php(934):
 Zend_Controller_Dispatcher_Standard-&gt;dispatch(Object(Zend_Controller_Request_Http), 
Object(Zend_Controller_Response_Http)) #1 C:\wamp\www\test\zendTest3\html\index.php(6): Zend_Controller_Front-&gt;dispatch() #2 {main} thrown in C:\wamp\library\Zend\Controller\Dispatcher\Standard.php on line 241

This is what made me fedup on earlier step.

But with my trustful effort I managed to find out the reason why I am getting this error. It was mainly because of Path. The path to controllers directory. I guess it is because of the OS what I was using is Windows. Linux users might not get this problem. To overcome this problem, it is best practice to specify the path by calling current directory using the script as follows.

<?php
 
defined('APPLICATION_PATH')
or define('APPLICATION_PATH', dirname(__FILE__));
$frontController = Zend_Controller_Front::getInstance();
$frontController->setControllerDirectory(APPLICATION_PATH.'/controllers');

This is the best coding practice given by Zend. Never forget the standards.

Broblem! Flash object overlapping menus and layers in Firefox and IE

by Muneer Shaheed 10 Feb 2 Comments

Hi all, hopefully many of the designer will face this problem. Most possible case is dropdown menu and flash banner. Both always come near by.

To overcome this issue, there is a possible way by using the code <object> and <embed> simply. I have illustrated the code below.

<object classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0 movie="myEncodez.swf" quality="high" wmode="transparent" width="600" height="150" version="8,0,0,0" bgcolor="#ffffff" >
 
   <param name=movie value="myEncodez.swf">
   <param name=quality value="high">
   <param name=wmode value="transparent">
   <param name=width value="600">
   <param name=height value="150">
   <param name=version value="8,0,0,0">
   <param name=bgcolor value="#ffffff">
 
   <embed src="myEncodez.swf" pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash type=application/x-shockwave-flash movie="myEncodez.swf" quality="high" wmode="transparent" width="600" height="150" version="8,0,0,0" bgcolor="#ffffff" >
   </embed>
</object>

Also this is a solution for the Microsoft’s recent security update which was annoying developers and users who faced a message saying “Click to activate and use this control” in all <embed> and <object> s. More info about this security update can be found in here

In contrast, Milonic has released a Javascript function which does the same as above <object> & <embed> tags. The code can be downloaded from here. It is very simple to use the code rather to write full <embed> tag in the HTML file. Thanks to Milonic Solutions.

How to use the Milonic’s Insert Active Flash Javascript file (insert_active_flash.js).

1. Download the file and make a reference at the header part of HTML file.

<script type="text/javascript" src="insert_active_flash.js"></script>

2. Create a Layer using <div> and assign an id for that

1 2	<div id="myFlashDiv"> </div>

3. Use the following code withing the “myFlashDiv” layer which will be later replaced by insert_active_flash script.

<div id="myFlashDiv">
<script>
    myFlashObject=new Object
     myFlashObject.movie="flashfile.swf"
     myFlashObject.quality="high"
     myFlashObject.wmode="transparent"
     myFlashObject.width=850
     myFlashObject.height=550
     myFlashObject.version="5,0,0,0"
 
     commitFlashObject(myFlashObject, "myFlashDiv")
</script></div>

This is it. It is simple right?

When later the flash function execute, it will dynamically replace the above javascript code in to <object> code and will embed the movie using classic method. No worry for us!

Javascript Smooth Scroller

by Muneer Shaheed 26 Jan 25 Comments

I am happy to share the Javascript Scroller which I created for one of my project. Javascript Scroller has been built up with combination of CSS and Javascript.

Scroller Preview 1

Scroller Preview 2

Examples :

Download Link

Link 1 – Link 2

Browser compatibility

Editing the width and height of Scroller

It is just simple to edit the size or any other style of Smooth Scroller.

CSS to change

#encFilmMain
{
   width:160px; /* full width */
}
#encFilm
{
   height:300px; /* height */
   background-color:#999;
   padding:5px 5px 5px 5px;
}
#encFilmInner
{
   background-color:#efefef;
   padding:5px 5px 5px 5px;
   height:290px;  /* height */
   overflow:hidden;
}

Javascript to change

1 2	var scrollAmount=240; // scroll amount var barHeight=290; //height

If you like or you have any doubts, please do not forget to leave your comment.

Archive for the ‘Webdevelopement’ Category