title: Jssor - Uncaught TypeError: Cannot read property 'currentStyle' of undefined
body: <p>Jssor is causing a JavaScript error on . It is the same problem for IE 8, and IE 11. </p>
  
  <p><strong>What I have tried:</strong></p>
  
  <p>Checked <a href="https://stackoverflow.com/questions/26465515/script5007-error-in-jssor-slider-in-ie8">https://stackoverflow.com/questions/26465515/script5007-error-in-jssor-slider-in-ie8</a></p>
  
  <p>Checked <a href="https://stackoverflow.com/questions/26632335/jssor-slider-js-error-on-testing-server">https://stackoverflow.com/questions/26632335/jssor-slider-js-error-on-testing-server</a></p>
  
  <p>Checked <a href="https://stackoverflow.com/questions/25206272/jssor-cannot-read-type-property-currentstyle-of-undefined">JSSOR - Cannot read type property &#39;currentStyle&#39; of undefined</a></p>
  
  <p>Updated to latest version jssor on github. </p>
  
  <p>Checked the code for error in the code. </p>
  
  <p>Checked on other browsers and it works well. </p>
  
  <p><strong>Outcome</strong></p>
  
  <p>Couldn't get any working solution. </p>
  
  <p><strong>The error message</strong></p>
  
  <pre><code> Error line  `var jssor_slider1 = new $JssorSlider$("slider1_containerc", options);`
  
   Uncaught TypeError: Cannot read property 'currentStyle' of undefined     jssor.slider.min.js:2
  
  E jssor.slider.min.js:2
  V jssor.slider.min.js:2(anonymous function) jssor.slider.min.js:2
  f.$JssorSlider$ jssor.slider.min.js:2
  $.ajax.success map.js:584
  j jquery-2.1.1.min.js:2
  k.fireWith jquery-2.1.1.min.js:2
  x jquery-2.1.1.min.js:4(anonymous function)
  </code></pre>
  
  <p><strong>The code;</strong></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>      &lt;div class="sideshowcontc"&gt;&lt;div class="slideshowc" id="slidemapc"&gt;&lt;img class="slidelegendc" src="images/chlor_a-legend.png"&gt;&lt;div id="slider1_containerc" style="position: relative; top: 0px; left: 0px; width: 640px; height: 612px; display: inline-block;"&gt;
          &lt;!-- Slides Container --&gt;
          &lt;div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 640px; height: 612px;"&gt; &lt;div&gt;&lt;img u="CHLOR_A-2003-APR-MAY-JUN" src="data/chlor_a/seasonal/chlor_a-2003-Apr-May-Jun.png"&gt;
              &lt;div style="position: absolute; bottom: 0px; left: 0px; width: 640px; height: 50px;
              background-color: #4f91da; opacity: 0.9; filter: alpha(opacity=90);"&gt;
            &lt;/div&gt;
            &lt;div style="position: absolute; bottom: 0px; left: 0px; width: 640px; height: 50px;
            color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;"&gt;CHLOR_A-2003-APR-MAY-JUN&lt;/div&gt;&lt;/div&gt;
             &lt;div&gt;&lt;img u="CHLOR_A-2004-APR-MAY-JUN" src="data/chlor_a/seasonal/chlor_a-2004-Apr-May-Jun.png"&gt;
              &lt;div style="position: absolute; bottom: 0px; left: 0px; width: 640px; height: 50px;
              background-color: #4f91da; opacity: 0.9; filter: alpha(opacity=90);"&gt;
            &lt;/div&gt;
            &lt;div style="position: absolute; bottom: 0px; left: 0px; width: 640px; height: 50px;
            color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;"&gt;CHLOR_A-2004-APR-MAY-JUN&lt;/div&gt;&lt;/div&gt;
             &lt;div&gt;&lt;img u="CHLOR_A-2005-APR-MAY-JUN" src="data/chlor_a/seasonal/chlor_a-2005-Apr-May-Jun.png"&gt;
              &lt;div style="position: absolute; bottom: 0px; left: 0px; width: 640px; height: 50px;
              background-color: #4f91da; opacity: 0.9; filter: alpha(opacity=90);"&gt;
            &lt;/div&gt;
  
            &lt;div style="position: absolute; bottom: 0px; left: 0px; width: 640px; height: 50px;
            color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;"&gt;CHLOR_A-2013-APR-MAY-JUN&lt;/div&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 200px; left: 8px;"&gt;
          &lt;/span&gt;
          &lt;span u="arrowright" class="jssora03r" style="width: 55px; height: 55px; top: 200px; right: 8px"&gt;
          &lt;/span&gt;
  
        &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>jssor js in jquery ajax function:</strong></p>
  
  <pre><code>var _CaptionTransitions = [];
  var _SlideshowTransitions = [   
          //{$Duration:1200,x:0.3,$SlideOut:true,$Easing
          {$Left:$JssorEasing$.$EaseInCubic,$Opacity:$JssorEasing$.$EaseLinear},$Opacity:2}
          {$Duration:3000,$Opacity:4,$Brother:{$Duration:3000,$Opacity:1}}//Fade
   ];
  
   var options = {
                     $AutoPlay: true,                                      //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                     $DragOrientation: 1,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
                     $CaptionSliderOptions: {                            //[Optional] Options which specifies how to animate caption
                     $PlayInMode: 1,                                 //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
                     $PlayOutMode: 3                                //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
                                    },
                     $AutoPlayInterval: 1500,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
                     $SlideshowOptions: {                                //[Optional] Options to specify and enable slideshow or not
                     $Class: $JssorSlideshowRunner$,                 //[Required] Class to create instance of slideshow
                     $Transitions: _SlideshowTransitions,            //[Required] An array of slideshow transitions to play slideshow
                     $TransitionsOrder: 1,                           //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
                     $ShowLink: true 
                 },
                    $HWA:false,
                    $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
                    $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                    $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                    $AutoCenter: 0,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                    $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
                                    }
                                  };
  
  var jssor_slider1 = new $JssorSlider$("slider1_containerc", options);   // The error line is here.
  
  function ScaleSlider() {
          var parentWidth = $(".resulttab2").width() - 90;
          if (parentWidth) {
              jssor_slider1.$ScaleWidth(Math.min(parentWidth, 640));
          }
  }
  
  ScaleSlider();
  </code></pre>