Hello, I achieved what I was trying to do. Posting the code below.
this._bands=[];
for(var i=0;i<this._bandInfos.length;i++){
var band=new Timeline._Band(this,this._bandInfos[i],i);
this._bands.push(band);
}
this._distributeWidths();
//changed code -- start -- first add the side images
for(var i=0;i<this._bandInfos.length;i++)
{
var sideImage = SimileAjax.Graphics.createTranslucentImage
(Timeline.urlPrefix+(this.isHorizontal()?this._bandInfos
[i].sideImageURL:this._bandInfos[i].sideImageURL));
sideImage.className="timeline-sideimage-"+this._bands[i].getIndex
().toString();
sideImage.title=this._bandInfos[i].sideImageTitle;
containerDiv.appendChild(sideImage);
}
//and after that go through them top to bottom and assign top to their
class
var topTrick = 0;
for(var i=0;i<this._bandInfos.length;i++)
{
jsFnChangeCSS(".timeline-sideimage-"+this._bands[i].getIndex
().toString(), "top", topTrick + ((this._bands[i]._div.offsetHeight -
48)/2) + "px");
topTrick = topTrick + this._bands[i]._div.offsetHeight;
}
//changed code -- end
Also I added two parameters to the bandInfos constructor:
sideImageURL
sideImageTitle
jsFnChangeCSS searches css class and changes specific attribute.
And I have the following classes which I apply dynamically to the
images I add.
.timeline-sideimage-0 {
position: absolute;
top: 0px;
left: 0px;
z-index: 1000;
}
.timeline-sideimage-1 {
position: absolute;
top: 0px;
left: 0px;
z-index: 1000;
}
.timeline-sideimage-2 {
position: absolute;
top: 0px;
left: 0px;
z-index: 1000;
}
.timeline-sideimage-3 {
position: absolute;
top: 0px;
left: 0px;
z-index: 1000;
}
.timeline-sideimage-4 {
position: absolute;
top: 0px;
left: 0px;
z-index: 1000;
}
.timeline-sideimage-5 {
position: absolute;
top: 0px;
left: 0px;
z-index: 1000;
}
.timeline-sideimage-6 {
position: absolute;
top: 0px;
left: 0px;
z-index: 1000;
}
As you can see, top is changing from the code.
Thank you for your help Larry.
Malay
On Feb 17, 12:50 pm, Larry Kluger <[email protected]> wrote:
> Hmmm...
>
> The trick will be to add the image to the correct div.
> Each Timeline band consists of a number of divs.
> In some cases, the divs overlap and the z-index is used to order them.
> In other cases, the divs have children spaced out along the band.
>
> Use firebug with firefox to see the different divs.
> Since each of the important divs has a unique id, you can use
> window.document.getElementById
> to get the right div. Then add a child element to it.
>
> Main thing to watch out for is that some of the divs are V E R Y wide --
> these are the divs that are slid back and forth to give the effect of the
> infinite Timeline. Don't use those for your purpose, use a div that has a
> 'regular' width. You can see the widths in firebug.
>
> Regards,
>
> Larry
>
> ________________________________
> From: mthakershi <[email protected]>
> To: SIMILE Widgets <[email protected]>
> Sent: Tuesday, February 17, 2009 1:15:12 PM
> Subject: Re: Need help adding image on left side of a band
>
> Wow. Thank you for quick response.
>
> My only problem is how do I do this for each detailed band? If I do it
> at timeline level then I can't keep up with top/height of the band/
> image.
>
> IMG1 -- DETAILED BAND 1
> IMG2 -- DETAILED BAND 2
> NO IMAGE -- OVERVIEW BAND 1
>
> I want tot achieve something like the above.
>
> Thank you again Larry.
>
> On Feb 17, 12:10 pm, Larry Kluger <[email protected]> wrote:
>
> > Hi Malay,
>
> > You want to add an image that does not move? -- The Timeline band should
> > move behind your fixed image?
>
> > If that's the case, I think that your idea of using the software which
> > paints the Simile copyright onto the band is a good idea.
>
> > The code is in the timeline.js file, search for 'copyright'
>
> > Also, note that createTranslucentImage changes the image--it doesn't add
> > the image to the dom.
> > To add the image to the main container for the Timeline, I believe that
> > you'd use:
> > timeline_obj.addDiv(new_element);
>
> > Where timeline_obj is the object you receive back from the initial create
> > timeline call.
> > (Above has not been tested.)
>
> > Hope this helps,
>
> > Larry
>
> > ________________________________
> > From: mthakershi <[email protected]>
> > To: SIMILE Widgets <[email protected]>
> > Sent: Tuesday, February 17, 2009 12:45:34 PM
> > Subject: Need help adding image on left side of a band
>
> > Hello,
>
> > I need some help figuring out where to make changes.
>
> > I want to add an image to left side of each detailed band. So I tried
> > to follow the createTranslucentImage code that adds copy right
> > information in bands _div and _innerDiv but it doesn't work.
> > Basically, I think _innerDiv should start after that image.
>
> > Can someone help me?
>
> > Thank you.
>
> > Malay
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"SIMILE Widgets" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/simile-widgets?hl=en
-~----------~----~----~----~------~----~------~--~---
