Tigra Slider Control Product Family - Tigra Slider Control


	\| About Us \| Services \| Download \| Order \| Support \| \|

Not logged in [ Login | Register ]

SoftComplex Forums » Tigra Slider Control Product Family » Tigra Slider Control » Starting from a div

Last active: Never

Printable Version | Subscribe | Add to Favourites

Beef

Newbie

Posts: 1
Registered: 6/29/2007
Member Is Offline

posted on 6/29/2007 at 09:50 PM

Starting from a div

Hi,

I thought others might be interested in the change I made to the slider.js.

Basically I wanted to have all my Javascript in an external file (no inline) so I changed function slider() so it takes a div id. I also changed it so it would take the height and width from the source div if you don't provide n_controlWidth or n_controlHeight.

You call it as follows:
<div style="width:100px;height:100px" id="MyDiv"></div>
<form name="MyForm"><input type="text" name="MyInput" /></form>
<script>
new slider({
's_divid','MyDiv',
's_form,'MyForm',
........
});
</script>

I have only done minimal testing (FF 2.0 and IE 6) so you may want to test it before putting it on a live server.

To modify the slider() function replace the document.write()

<del>
// generate the control's HTML
document.write(
'<div style="width:' + this.n_controlWidth + 'px;height:' + this.n_controlHeight + 'px;border:0; background-image:url(' + this.s_imgControl + ')" id="sl' + this.n_id + 'base">' +
'<img src="' + this.s_imgSlider + '" width="' + this.n_sliderWidth + '" height="' + this.n_sliderHeight + '" border="0" style="position:relative;left:' + this.n_pathLeft + 'px;top:' + this.n_pathTop + 'px;z-index:' + this.n_zIndex + ';cursor:hand;visibility:hidden;" name="sl' + this.n_id + 'slider" id="sl' + this.n_id + 'slider" onmousedown="return f_sliderMouseDown(' + this.n_id + ')"/></div>'
);
</del>

lines in slider() with:

<replace>
/* Take over the div */
this.e_sourcediv = get_element(this.s_divid);
if(!this.n_controlWidth)
this.n_controlWidth=parseInt(this.e_sourcediv.style.width,10);
if(!this.n_controlHeight)
this.n_controlHeight=parseInt(this.e_sourcediv.style.height,10);
var workingdiv=document.createElement("div");
workingdiv.style.width=this.n_controlWidth+'px';
workingdiv.style.height=this.n_controlHeight+'px';
workingdiv.style.border=0;
workingdiv.style.backgroundImage="url("+this.s_imgControl+")";
workingdiv.id="sl"+this.n_id+"base";

var workingimg=document.createElement("img");
workingimg.src=this.s_imgSlider;
workingimg.width=this.n_sliderWidth;
workingimg.height=this.n_sliderHeight;
workingimg.border=0;
workingimg.style.position="relative";
workingimg.style.left=this.n_pathLeft + "px";
workingimg.style.top=this.n_pathTop + "px";
workingimg.style.zIndex=this.n_zIndex;
// workingimg.style.cursor="pointer"; // didn't like the hand
workingimg.style.visibility="hidden";
workingimg.name="sl" + this.n_id + "slider";
workingimg.id="sl" + this.n_id + "slider";
workingimg.setAttribute("n_id",this.n_id);
workingimg.onmousedown=function(){return f_sliderMouseDown(this.getAttribute("n_id"))};

workingdiv.appendChild(workingimg);

this.e_sourcediv.appendChild(workingdiv);
</replace>

chitgoks

Newbie

Posts: 1
Registered: 9/7/2007
Member Is Offline

posted on 9/7/2007 at 08:43 AM

hi, can you give a working sample when using div? i did your instructions but the script seemed to run endlessly..