hi
I try to implement this exampl please check this link
http://demos.telerik.com/aspnet-ajax/slider/examples/customscrollbar/defaultcs.aspx
but i given runat="server" for div tag.. its through java script error..
i have to load value in server side.. how can i implement please help me...
i give my code here Please check it..
asp code here..
<script type="text/javascript" language ="javascript">
var initialValue;
var initialValue2;
function HandleClientLoaded2(sender, eventArgs)
{
initialValue2 = sender.get_minimumValue();
HandleClientValueChange2(sender, null);
}
function HandleClientValueChange2(sender, eventArgs)
{
var wrapperDiv = document.getElementById('boxes_wrapper');
var contentDiv = document.getElementById('boxes_content');
var oldValue = (eventArgs) ? eventArgs.get_oldValue() : sender.get_minimumValue();
var change = sender.get_value() - oldValue;
var contentDivWidth = contentDiv.scrollWidth - wrapperDiv.offsetWidth;
var calculatedChangeStep = contentDivWidth / ((sender.get_maximumValue() - sender.get_minimumValue()) / sender.get_slideStep());
initialValue2 = initialValue2 - change * calculatedChangeStep;
if (sender.get_value() == sender.get_minimumValue())
{
contentDiv.style.left = 0 + 'px';
initialValue2 = sender.get_minimumValue();
}
else
{
contentDiv.style.left = initialValue2 + 'px';
}
}
</script>
<div >
<div class="Boxes">
<div id="boxes_wrapper" class="Boxes_Wrapper">
<div id="boxes_content" class="Boxes_Content" runat="server"> ! Note here
<%--<img src="../../Objects/Images/Arrow.gif" alt="Telerik products" />--%>
<%--<img src="../../Objects/Images/Arrow1.gif" alt="Telerik products" />
<img src="../../Objects/Images/flag_eng.jpg" alt="Telerik products" />--%>
</div>
</div>
</div>
<div class="BoxesSlider">
<telerik:RadSlider ID="RadSlider2" runat="server"
SmallChange="1"
Width="224"
Value="0"
Orientation="Horizontal"
OnClientValueChange="HandleClientValueChange2"
OnClientLoaded="HandleClientLoaded2"
Skin="WebBlue" />
</div>
</div>
Server side code...
'======================== new slider ==========================
'AvaliableContent = (vbTab & " <table cellpadding=""0"" cellspacing=""0"" border=""0"">" & vbNewLine) & _
' (vbTab & " <tr><td colspan=""3"" style=""height:24px;""></td></tr>" & vbNewLine) & _
' (vbTab & vbTab & "<tr>" & vbNewLine)
'For Each odrC In odtC.Rows
' AvaliableContent &= (vbTab & vbTab & "<td style=""height:50px; background-color:" & odrC.Item("ColorId") & ";""><img src=""../../Objects/Images/space.gif"" width=""80"" height=""1""/></td>" & vbNewLine)
'Next
'AvaliableContent &= (vbTab & "</tr></table>" & vbNewLine)
boxes_content.InnerHtml =avaliablecontent
I try to implement this exampl please check this link
http://demos.telerik.com/aspnet-ajax/slider/examples/customscrollbar/defaultcs.aspx
but i given runat="server" for div tag.. its through java script error..
i have to load value in server side.. how can i implement please help me...
i give my code here Please check it..
asp code here..
<script type="text/javascript" language ="javascript">
var initialValue;
var initialValue2;
function HandleClientLoaded2(sender, eventArgs)
{
initialValue2 = sender.get_minimumValue();
HandleClientValueChange2(sender, null);
}
function HandleClientValueChange2(sender, eventArgs)
{
var wrapperDiv = document.getElementById('boxes_wrapper');
var contentDiv = document.getElementById('boxes_content');
var oldValue = (eventArgs) ? eventArgs.get_oldValue() : sender.get_minimumValue();
var change = sender.get_value() - oldValue;
var contentDivWidth = contentDiv.scrollWidth - wrapperDiv.offsetWidth;
var calculatedChangeStep = contentDivWidth / ((sender.get_maximumValue() - sender.get_minimumValue()) / sender.get_slideStep());
initialValue2 = initialValue2 - change * calculatedChangeStep;
if (sender.get_value() == sender.get_minimumValue())
{
contentDiv.style.left = 0 + 'px';
initialValue2 = sender.get_minimumValue();
}
else
{
contentDiv.style.left = initialValue2 + 'px';
}
}
</script>
<div >
<div class="Boxes">
<div id="boxes_wrapper" class="Boxes_Wrapper">
<div id="boxes_content" class="Boxes_Content" runat="server"> ! Note here
<%--<img src="../../Objects/Images/Arrow.gif" alt="Telerik products" />--%>
<%--<img src="../../Objects/Images/Arrow1.gif" alt="Telerik products" />
<img src="../../Objects/Images/flag_eng.jpg" alt="Telerik products" />--%>
</div>
</div>
</div>
<div class="BoxesSlider">
<telerik:RadSlider ID="RadSlider2" runat="server"
SmallChange="1"
Width="224"
Value="0"
Orientation="Horizontal"
OnClientValueChange="HandleClientValueChange2"
OnClientLoaded="HandleClientLoaded2"
Skin="WebBlue" />
</div>
</div>
Server side code...
'======================== new slider ==========================
'AvaliableContent = (vbTab & " <table cellpadding=""0"" cellspacing=""0"" border=""0"">" & vbNewLine) & _
' (vbTab & " <tr><td colspan=""3"" style=""height:24px;""></td></tr>" & vbNewLine) & _
' (vbTab & vbTab & "<tr>" & vbNewLine)
'For Each odrC In odtC.Rows
' AvaliableContent &= (vbTab & vbTab & "<td style=""height:50px; background-color:" & odrC.Item("ColorId") & ";""><img src=""../../Objects/Images/space.gif"" width=""80"" height=""1""/></td>" & vbNewLine)
'Next
'AvaliableContent &= (vbTab & "</tr></table>" & vbNewLine)
boxes_content.InnerHtml =avaliablecontent