The Silverlight homepage great navigation bar only with javascript

• Download codeProjectArtical.zip - 131.62 KB

Introduction

with this article you can see how easy to build a nice nagivation bar for your websites that looks like the one on the silverlight home page only using script.aculos.us & javascript.

please, forgive me for the stupied graphics colors & that bad hover effect.

 i am not a talented graphics designer.

Background

this article suppose that you are a professional web developer had hands on javascript and know about the script.aculo.us javascript library and how to us it

Using the code

To see it ,please.download the zipped article files and run the html page.

now,let us talk about making such great animation.

when i first saw Silverlight i felt so excited. wanna learn it to be able to do such nice things. but as usual we as developers are  always with our heads to the wall of reality that there is no way to use the new technology in our projects that fast. for me our website host is only has .net 1.1 so the question is. can i do something like that with the tools i have?

I started my own trys from scratch and i was so close but not the perfect results and while searching the net i came by the genuis javascript library from script.aculo.us. which is free to use neat javascript library with out of the box effects and drag and drop features that u can use in your code without having the fear of being not supported on all broweser.

using this library will compact your javascript code and will make your javascript time more fun.believe me !! :)

by the way, with the source i uploaded the psd file of the bar so you can try your own graphics.

to start we need a normal bar with the rollover effects ready in our html page,we will skip talking about how to do so.

in our html code we need to reference the script.aculo.us library with this two lines in the head of our html & also the css file.

  
<script src="jsLib/prototype.js" type="text/javascript"></script>
<script src="jsLib/scriptaculous.js?load=effects" type="text/javascript"></script>
<link href="bar.css" rel="stylesheet" />

for furthor information about referencing the library you will need to go and read about it.

now declare script tag inside the head of your html page

and inside it we talk about the following javascript code.

var t;
var pos=0;
// hold the description text for every link
    var Mtext= new Array();
          Mtext[0]='Silver Light is a agreat Tech.';
    Mtext[1]='Genuis javascript platform.';
    Mtext[2]='Genuis Programers & Planners.';
 
// holds the arrow desired left position for every link   
   var arrowPositions=new Array();
    arrowPositions[0]='0';
    arrowPositions[1]='130';
    arrowPositions[2]='260'; 
    
 

t: will be used as a reference to the interval we will build for our animation.

pos:will hold indicator that leads to the current position of our hero arrow.

Mtext: array holds the text related to each link.

arrowPositions: array holds the exact left values of the arrow div for it to point at the middle of our links , the array number is defferent depending on how wide link divs is but is absolute to the container!!

now ,we set and think loadly about what we wanna do, we need to call a function every x sec to do animation that means we will need the setInterval function of javascript which will let us to code another function.so here it is,

function doAutoAnimate(){
    
    t = setInterval('autoAnimate()',3000);
}

this function excists only to start the animation by calling anther function(this is the technique used with setInterval javascript function). now,simply another function is screaming to be written,it is the one responsible for stoping the animation.

function stopAutoAnimate(){
     clearInterval(t);     
  } 

now here it is the autoAnimation function

function autoAnimate()
  {    
      var pos = parseInt(document.getElementById('_currentActive').value)
      document.getElementById('img'+pos).src=document.getElementById('img'+pos).src.replace("_","");
       if(pos<2)
       {
          pos +=1;
       }
       else pos=0;
     
     animateManual(pos,arrowPositions[pos]);
     document.getElementById('_currentActive').value = pos;
  }  

for autoAnimate i just forward the arrow along the bar one step a head-that is the job of the hidden field _currentActive and the pos variable - by calling the animation function giving it the target index (new position) so i can get the Description Text and Position of the arrow from the two mentioned arrays for that new position.

note that i need to change the current active link image to remove the hover effect which is done by the second code line above. 

here comes how genuis the javascript library i am talking about

just look at the hero code next.

// do a single animation      
   function animateManual(target,off){
           
   var title = document.getElementById('fdet');                
    new Effect.Parallel([
    new Effect.Move('fdet', {x:0,mode:'absolute',transition: Effect.Transitions.full}), 
    new Effect.Appear('fdet',{duration:0.1, from:0, to:0.9}),       
    new Effect.Move('fdet', {x:30,mode:'absolute',transition: Effect.Transitions.reverse}),
    new Effect.Move('imgArrow', {x:off,y:0,mode:'absolute',transition: Effect.Transitions.linear})],
    {duration:0.4,beforeStart:function(){document.getElementById('descText').innerText=Mtext[target]; 
    document.getElementById('desImg').src = 'images/imgEmpty.png';},
    afterFinish:function(){document.getElementById('desImg').src = 'images/img'+target+'.png';}});    
    
    
    switch(target){
     case 0:
        document.getElementById('img0').src='images/sil_.jpg';
     break;
     
     case 1:
        document.getElementById('img1').src='images/scri_.jpg';
     break;
     
     case 2:
         document.getElementById('img2').src='images/mic_.jpg';
     break;
    }  
       
  document.getElementById('_currentActive').value = target; 
        
   }

thats it..!! all the magic done here.

this function takes two arguments

target:the index that gives the supposed to show text and animated description image beside it.

off: is the arrow left value where arrow must move to it.

Effect.Parallel  you can think of it as a scene or storybaord in silverlight but written from down up with javascript.

This Effect takes array of sub effects and can take options like what you see in code, for further reading about this you can check the library.i will go on talking about the code.

The parallel effect runs so many effects at the same time.

First, i need to move the description animated area down the links to the right and while that i need to hide it so user will see the new text and the blank image comes from the right to the left.

So i use effect.move to move the div to the start point where left=0..!! yes that is the start point not the right one cause while there i will use an effect that is being govern by a mathematical function already build inside the javascript library.to see all the option motions (Transitions) for the Effect.Move please check  reverse transition

then make the appear effect to make it like movie trailer.

then moving the arrow div to the desired place. note that the parallel makes all this for u all at the same time. really cool,isn't it?

one of the most nice things is that i have the ability for the javascript code to be executed before or after an effect.

with this i could be able change the down blank moving image to the target link descriptive one on the right time.

finlly, we ask ourselvs where exactly  to put the call to the functions?

the answer is on mouseover of li elements i call the animateManual function.

for the div that has the ul i call the function doAutoAnimate() and stopAutoAnimate() on mouseover and mouseout events.

so when user put mouse on the ul the auto animation stops and the animateManual will be called cause sure the user will be on one of the li elements.

and onmouseout i wanna do exactly the same like the silverlight nice animation by running the autoanimation back.

last thing to say i wanna by page load to the animation to start from the starting point so in the image loading function i called the manual animation directly to have an immediate move to the start point of animation and called the autoanimated function to let the autoanimation starts after x sec so it will work by itself none stop unless user is with her/his mouse on the bar.

finally,I wanna say thank you to the genuis guys at microsoft for the great efforts, stand up hats down to the great script genuis programmer behind the javascript library I used.

for all of you out there that got tears like me when seeing the nice silverlight bar and wanna have one just like it but don't have silverlight support with your host,I hope I could turn your crying reasons to somthing else ...:) thanks all for your time of reading.

note.I was not looking at how to make javascript code more neat or graphics I was just running after a very very nice animation bar.

Histroy

• upload the source code again to meet the reported no source file bug.

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 2 of 2 (Total in Forum: 2) (Refresh) FirstPrevNext

Source code contains no files? Member 2609519 0:19 6 Jan '09   The source code of this article is empty? Sign In·View Thread·PermaLink Re: Source code contains no files? matrix_resident 1:16 6 Jan '09   OH GOD , SO SO SORRY , I FIXED THIS STUPIED. FORGIVE ME. A.Farouk Sign In·View Thread·PermaLink

Last Visit: 13:36 6 Jul '09     Last Update: 13:36 6 Jul '09 1