Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
85
Weblider client side refresh
posted

Hello,

I have implemented infragistics web slider to one of my project pages. For the web slider track, I have dynamically set background image through style declaration and httphandler like this:

.igsli_ClaymationTrackH
{
    position:relative;
    text-align:left;
    margin-left:-1px;
    border:1px solid #D2D2D2;
    background:#F7F7F7;
    background-image: url(../../../HttpHandlers/SliderHandler.ashx?start=01022006&end=01022009);
    background-repeat: no-repeat;
    height: 30px;
    width: 700px;
    font-size:1px;
}

It works perfect, but my problem is unwanted refresh every time I will move my mouse on or off the web slider area. I can see my web slider are borders, because there is background color assigned, so every time I move my cursor to area, it will do a refresh. This means that background image for track is every time retrieved and that causes flashing for that image. It´s very annoying.

So is there some way to set this event off for the web slider?

 

Thanks.

Best regards,

Tommi Henttunen

 

 

  • 24497
    Suggested Answer
    posted

    Hi Tommi,

    Behavior you describe sounds strange. The default value of css used for mouseover state for track ".igsli_TrackHover" is empty, so, I would assume that it should not affect appearance (well maybe under IE....).

    There is no public option to disable logic related css functionality. The only thing you can try, is to hack into that logic and modify it for your needs (sorry, no support in case of misbehavior). Anybody can look at implementation of igSlider.js and figure out its logic. The slider uses _setCss member to adjust classNames of its elements. First param is the reference to element (main, track, etc), second param contains id of that element. In case of track it is 5. Either of those param can be used as a validation flag. Below is possible skip-hover hack.

    <script type="text/javascript">
    function initSlider(slider)
    {
     slider._old_setCss = slider._setCss;
     slider._setCss =
    function(elem, id, s1, s2, s3)
     {
      
    // check for track id
      
    if(id == 5) return;
      
    // or alternative: check for element
      
    //if(elem == this.getTrackElem() || elem == this.getTrackElem(0)) return;
      
    this._old_setCss(elem, id, s1, s2, s3);
     }
    }
    </script>

     

     

    <ig:WebSlider ID="WebSlider1" runat="server">
     <ClientEvents Initialize="initSlider" />
    </ig:WebSlider>