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

1
2
3
4

	$("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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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.

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

• Dropdown Menu problem
• Adding link to Large image in Banner

.

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.

1
2
3
4
5
6
7
8
9
10
11
12
13

<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.

1
2
3
4
5
6
7
8
9
10
11
12

<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!

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 :

1. Sample 1
2. Sample 2

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#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.