Jssor - Uncaught TypeError: Cannot read property &

Jssor is causing a JavaScript error on . It is the same problem for IE 8, and IE 11.

What I have tried:

Checked https://stackoverflow.com/questions/26465515/script5007-error-in-jssor-slider-in-ie8

Checked https://stackoverflow.com/questions/26632335/jssor-slider-js-error-on-testing-server

Checked JSSOR - Cannot read type property 'currentStyle' of undefined

Updated to latest version jssor on github.

Checked the code for error in the code.

Checked on other browsers and it works well.

Outcome

Couldn't get any working solution.

The error message

 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)

The code;

HTML

      <div class="sideshowcontc"><div class="slideshowc" id="slidemapc"><img class="slidelegendc" src="images/chlor_a-legend.png"><div id="slider1_containerc" style="position: relative; top: 0px; left: 0px; width: 640px; height: 612px; display: inline-block;">
        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 640px; height: 612px;"> <div><img u="CHLOR_A-2003-APR-MAY-JUN" src="data/chlor_a/seasonal/chlor_a-2003-Apr-May-Jun.png">
            <div style="position: absolute; bottom: 0px; left: 0px; width: 640px; height: 50px;
            background-color: #4f91da; opacity: 0.9; filter: alpha(opacity=90);">
          </div>
          <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;">CHLOR_A-2003-APR-MAY-JUN</div></div>
           <div><img u="CHLOR_A-2004-APR-MAY-JUN" src="data/chlor_a/seasonal/chlor_a-2004-Apr-May-Jun.png">
            <div style="position: absolute; bottom: 0px; left: 0px; width: 640px; height: 50px;
            background-color: #4f91da; opacity: 0.9; filter: alpha(opacity=90);">
          </div>
          <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;">CHLOR_A-2004-APR-MAY-JUN</div></div>
           <div><img u="CHLOR_A-2005-APR-MAY-JUN" src="data/chlor_a/seasonal/chlor_a-2005-Apr-May-Jun.png">
            <div style="position: absolute; bottom: 0px; left: 0px; width: 640px; height: 50px;
            background-color: #4f91da; opacity: 0.9; filter: alpha(opacity=90);">
          </div>

          <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;">CHLOR_A-2013-APR-MAY-JUN</div></div>
          </div>
        <span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 200px; left: 8px;">
        </span>
        <span u="arrowright" class="jssora03r" style="width: 55px; height: 55px; top: 200px; right: 8px">
        </span>

      </div></div></div>

jssor js in jquery ajax function:

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();

回答1:

The following lines are not necessary, please remove it.

  var _CaptionTransitions = [];

  $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
  },

回答2:

This Worked for me. Flicker in the chart was issue.

Check this for information:

function fixFlicker(docid, tname) {

var eDoc = document.getElementById(docid);
var cNode = eDoc.getElementsByTagName(tname);

//Copy All the Tag Name
 var arr = [];
 for (var i = 0; i < cNode.length; i++) {
   arr.push(cNode[i].id);
 } //End for loop

 //Delete the Container Elements
 eDoc.innerHTML = "";

//Add back each element
 for (var j = 0; j < arr.length; j++) {
     var newElement = {};
     var newElement = document.createElement(tname);
     newElement.setAttribute("id", arr[j]);
     eDoc.appendChild(newElement)
     console.log(newElement);   
   }
}//End of Flicker Clean Up

fixFlicker("div", "canvas");