hello ppl,
THIS IS VERY URGENT....give it your best shot
I am using the slider bar htc component for IE in my app. This is primarily used for selecting a time range.
We have time represented in cummulative centiseconds(1/100 th of a second) internally,
so if we have a time range with
start time = 22/03/2005:14:22:30:300 ( dd/mm/yyyy:hh:mm:sec:msec)
===> cum_cent_sec = 0
stop time = 24/03/3005:14:22:30:300 ( dd/mm/yyyy:hh:mm:sec:msec)
===> cum_cent_sec = 17280000
(Since one day has 8640000 centiseconds....2 days will have 17280000 centi sec)
The htc code is pasted below.
Now my problem is when the slider bar moves the display is in centi seconds and makes no sense to the user.
I need to map it back to real date/time ( dd/mm/yyyy:hh:mm:sec:msec)
.
I need functionality so that when the slider bar moves....the date time changes accordingly and is displayed on screen as an
odometer.
please suggest how i can change present htc code to add this functionality or suggest any other component which will act as a slider bar.....when real time( dd/mm/yyyy:hh:mm:sec:msec)
is given as input.
rgds,
Vinod
slider.htc code:
<public:component tagname=slider>
<public:property name=movelr />
<public:property name=moveud />
<public:property name=backgroundColor />
<public:property name=backgroundImage />
<public:property name=backgroundRepeat />
<public:property name=thumbColor />
<public:property name=thumbSize />
<public:property name=value id=propValue put="setValue" get="getValue" />
<public:attach event="oncontentready" onevent="initialize()" />
<public:defaults viewLinkContent />
<public:event name="onslide" id="eSlide" />
<body>
<div id=theParent style="background-color: scrollbar; position: relative; width: 100%; height: 100%;">
<div id=theDiv style="border: outset 2px; background-color: scrollbar; cursor: hand; position: absolute; top: 10px; left: 0px; width: 15px; height: 50px; z-index: 5; font-size: 1px">
</div>
<div id=theMiddle style="font-size:1px; background-color: black; position: absolute;"></div>
</div>
<script>
var dragElement, dragParent, realValue;
function initialize() {
var parentHeight, parentWidth;
dragElement = theDiv;
dragParent = theParent;
parentHeight = dragParent.style.pixelHeig
ht;
parentWidth = dragParent.style.pixelWidt
h;
if (element.movelr) {
// left to right movement
if (element.thumbSize) {
theDiv.style.width = element.thumbSize;
} else {
theDiv.style.posWidth = Math.round(parentWidth / 20);
}
theDiv.style.posHeight = Math.round(parentHeight * .9);
theDiv.style.posTop = Math.round(parentHeight * .05);
theDiv.style.posLeft = 0;
theMiddle.style.width = "98%";
theMiddle.style.height = "2%";
theMiddle.style.top = "49%";
theMiddle.style.left = "1%";
}
if (element.moveud) {
// top to bottom movement
theDiv.style.posWidth = Math.round(parentWidth * .9);
if (element.thumbSize) {
theDiv.style.height = element.thumbSize;
} else {
theDiv.style.posHeight = Math.round(parentHeight / 20);
}
theDiv.style.posTop = parentHeight - 1 - (parentHeight / 20);
theDiv.style.posLeft = Math.round(parentWidth * .05);
theMiddle.style.width = "2%";
theMiddle.style.height = "98%";
theMiddle.style.top = "1%";
theMiddle.style.left = "49%";
}
if (element.backgroundImage) {
theParent.style.background
Image = element.backgroundImage;
}
if (element.backgroundColor) {
theParent.style.background
Color = element.backgroundColor;
}
if (element.backgroundRepeat)
{
theParent.style.background
Repeat = element.backgroundRepeat;
}
if (element.thumbColor) {
theDiv.style.backgroundCol
or = element.thumbColor;
}
dragElement.attachEvent("o
nmousedown
", startDrag);
}
function startDrag(e) {
dragElement.setCapture();
mx = e.clientX;
my = e.clientY;
dragElement.attachEvent("o
nmousemove
", doDrag);
dragElement.attachEvent("o
nmouseup",
endDrag);
}
function doDrag(e) {
var dragPosition;
var event;
dx = e.clientX - mx;
dy = e.clientY - my;
if (element.movelr) {
dragElement.style.posLeft += dx;
}
if (element.moveud) {
dragElement.style.posTop += dy
}
noResetX = false;
noResetY = false;
if (dragElement.style.posTop + dragElement.style.posHeigh
t > dragParent.style.pixelHeig
ht) {
dragElement.style.posTop = dragParent.style.pixelHeig
ht - dragElement.style.posHeigh
t - 1 ;
noResetY = true;
}
if (dragElement.style.posLeft
+ dragElement.style.posWidth
> dragParent.style.pixelWidt
h) {
dragElement.style.posLeft = dragParent.style.pixelWidt
h - dragElement.style.posWidth
- 1;
noResetX = true;
}
if (dragElement.style.posLeft
< 0) {
dragElement.style.posLeft = 0;
noResetX = true;
}
if (dragElement.style.posTop < 0) {
dragElement.style.posTop = 0;
noResetY = true;
}
if (element.movelr) {
dragPosition = Math.round((dragElement.st
yle.posLef
t / (dragParent.style.pixelWid
th - dragElement.style.posWidth
- 1)) * 255127);
}
if (element.moveud) {
dragPosition = 255127 - Math.round((dragElement.st
yle.posTop
/ (dragParent.style.pixelHei
ght - dragElement.style.posHeigh
t - 1)) * 255127);
}
if (!noResetX)
mx = e.clientX;
if (!noResetY)
my = e.clientY;
if (!noResetX && !noResetY) {
event = createEventObject();
event.sliderValue = dragPosition;
realValue = dragPosition;
eSlide.fire(event);
}
}
function setValue(newValue) {
if ((newValue < 0) || (newValue > 1000)) {
return;
}
if (element.movelr) {
ppV = dragParent.style.pixelWidt
h / 100;
dragElement.style.posLeft = ppV * newValue;
}
if (element.moveud) {
ppV = dragParent.style.pixelHeig
ht / 100;
dragElement.style.posTop = ppV * (100 - newValue);
}
realValue = newValue;
propValue.fireChange();
}
function getValue() {
return realValue;
}
function endDrag() {
dragElement.detachEvent("o
nmousemove
", doDrag);
dragElement.detachEvent("o
nmouseup",
endDrag);
dragElement.releaseCapture
();
}
</script>
</body>
