Encodez Blog » Javascript

Adding link to Banner Image (Multi-transition Banner)

Muneer Shaheed — Wed, 03 Feb 2010 09:55:02 +0000

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.

Javascript Multitransition Banner released

Muneer Shaheed — Thu, 18 Jun 2009 09:39:03 +0000

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

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

Muneer Shaheed — Tue, 10 Feb 2009 07:38:50 +0000

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 and 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">
 
   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 and 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 & tags. The code can be downloaded from here. It is very simple to use the code rather to write full 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

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 code and will embed the movie using classic method. No worry for us!

Javascript Smooth Scroller

Muneer Shaheed — Mon, 26 Jan 2009 10:12:51 +0000

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.