Crossfading jQuery breaks when I replace tags with more 's












1















I have a funky jQuery cross-fading text carousel from borrowed code (from here/here), and I'm providing formatted text via Included html generated dynamically by external php. It's exactly the effect I needed.



The thing is, it works fine... but only if I use a ton of <FONT COLOR> tags to get the desired formatting (several colors per word). I've read repeatedly that it's imperative that I don't use <FONT> since it's deprecated and therefore will makes babies cry or something.




Working MCVE:






$("#caption").css("width", $("#caption > span:first-child").width());

$("#caption").css("height", $("#caption > span:first-child").height());

var captionIdx = 0;

var captionItemCount = $("#caption > span").length;

setInterval(function() {

  $("#caption span:eq(" + captionIdx + ")").fadeOut("slow");

  captionIdx = (captionIdx + 1) % captionItemCount;

  var $next = $("#caption span:eq(" + captionIdx + ")");

  $("#caption").css("width", $next.width());

  $("#caption").css("height", $next.height());

  $next.fadeIn("slow");

}, 2000);

#container {

  text-align: center;

  display: block;

}



#caption {

  padding: 0px;

  display: inline-block;

  position: relative;

  vertical-align: bottom;

  -webkit-transition: width 0.25s linear;

  -moz-transition: width 0.25s linear;

  -ms-transition: width 0.25s linear;

  -o-transition: width 0.25s linear;

  transition: width 0.25s linear;

}



#caption>span {

  display: none;

  position: absolute;

  top: 0px;

  left: 0px;

}



#caption>span:first-child {

  display: inline-block;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<body>

  <div id="container">

    This task is

    <span id="caption">

<span><a href="http://lnk1.co"><font color=red>Confu</font><font color=green>sing</font></a></span>

    <span><a href="http://lnk2.co"><font color=green>Frust</font><font color=blue>rating</font></a></span>

    <span><a href="http://lnk3.co"><font color=blue>Tire</font><font color=red>some</font></a></span>

    </span>

  </div>

</body>





...so I'm trying to switch to using CSS instead, but it 'breaks' the carousel, presumably since I need additional <SPAN>s to apply the formatting, while the jQuery uses <SPAN>'s as the delimiter in phrase rotation.




Broken MCVE:



Note the only difference is 3 lines of <style> and the 3 lines within <span id="caption">.






$("#caption").css("width", $("#caption > span:first-child").width());

$("#caption").css("height", $("#caption > span:first-child").height());

var captionIdx = 0;

var captionItemCount = $("#caption > span").length;

setInterval(function() {

  $("#caption span:eq(" + captionIdx + ")").fadeOut("slow");

  captionIdx = (captionIdx + 1) % captionItemCount;

  var $next = $("#caption span:eq(" + captionIdx + ")");

  $("#caption").css("width", $next.width());

  $("#caption").css("height", $next.height());

  $next.fadeIn("slow");

}, 2000);

.w1 { color: #FF0000; }

.w2 { color: #00FF00; }

.w3 { color: #0000FF; }



#container {

  text-align: center;

  display: block;

}



#caption {

  padding: 0px;

  display: inline-block;

  position: relative;

  vertical-align: bottom;

  -webkit-transition: width 0.25s linear;

  -moz-transition: width 0.25s linear;

  -ms-transition: width 0.25s linear;

  -o-transition: width 0.25s linear;

  transition: width 0.25s linear;

}



#caption>span {

  display: none;

  position: absolute;

  top: 0px;

  left: 0px;

}



#caption>span:first-child {

  display: inline-block;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<body>

  <div id="container">

    This task is

    <span id="caption">



<span><a href="http://lnk1.co"><span class="w1">Very</span><span class="w2">Frustrating</span></a></span>

<span><a href="http://lnk2.co"><span class="w2">Just</span><span class="w3">Alright</span></a></span>

<span><a href="http://lnk3.co"><span class="w3">Totally</span><span class="w1">Perfect</span></a></span>



    </span>

  </div>

</body>





I've been experimenting with various combinations of divs & spans, and Display properties like inline-block but since I'm not clear on what the jQuery is doing, I can't get it working while still on a single line.



Is there a quick fix?




Bonus Question:
Is it really a big deal to use deprecated tags like <FONT> or <B>? I can't imagine that any browser is going to allow them to just "stop working" with an update anytime soon; rendering millions of old pages non-functional (while their competition still supports the deprecated tags)...?






javascript jquery html css fade







share|improve this question





























    1















    I have a funky jQuery cross-fading text carousel from borrowed code (from here/here), and I'm providing formatted text via Included html generated dynamically by external php. It's exactly the effect I needed.



    The thing is, it works fine... but only if I use a ton of <FONT COLOR> tags to get the desired formatting (several colors per word). I've read repeatedly that it's imperative that I don't use <FONT> since it's deprecated and therefore will makes babies cry or something.




    Working MCVE:






    $("#caption").css("width", $("#caption > span:first-child").width());
    
$("#caption").css("height", $("#caption > span:first-child").height());
    
var captionIdx = 0;
    
var captionItemCount = $("#caption > span").length;
    
setInterval(function() {
    
  $("#caption span:eq(" + captionIdx + ")").fadeOut("slow");
    
  captionIdx = (captionIdx + 1) % captionItemCount;
    
  var $next = $("#caption span:eq(" + captionIdx + ")");
    
  $("#caption").css("width", $next.width());
    
  $("#caption").css("height", $next.height());
    
  $next.fadeIn("slow");
    
}, 2000);

    #container {
    
  text-align: center;
    
  display: block;
    
}
    

    
#caption {
    
  padding: 0px;
    
  display: inline-block;
    
  position: relative;
    
  vertical-align: bottom;
    
  -webkit-transition: width 0.25s linear;
    
  -moz-transition: width 0.25s linear;
    
  -ms-transition: width 0.25s linear;
    
  -o-transition: width 0.25s linear;
    
  transition: width 0.25s linear;
    
}
    

    
#caption>span {
    
  display: none;
    
  position: absolute;
    
  top: 0px;
    
  left: 0px;
    
}
    

    
#caption>span:first-child {
    
  display: inline-block;
    
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    

    
<body>
    
  <div id="container">
    
    This task is
    
    <span id="caption">
    
<span><a href="http://lnk1.co"><font color=red>Confu</font><font color=green>sing</font></a></span>
    
    <span><a href="http://lnk2.co"><font color=green>Frust</font><font color=blue>rating</font></a></span>
    
    <span><a href="http://lnk3.co"><font color=blue>Tire</font><font color=red>some</font></a></span>
    
    </span>
    
  </div>
    
</body>





    ...so I'm trying to switch to using CSS instead, but it 'breaks' the carousel, presumably since I need additional <SPAN>s to apply the formatting, while the jQuery uses <SPAN>'s as the delimiter in phrase rotation.




    Broken MCVE:



    Note the only difference is 3 lines of <style> and the 3 lines within <span id="caption">.






    $("#caption").css("width", $("#caption > span:first-child").width());
    
$("#caption").css("height", $("#caption > span:first-child").height());
    
var captionIdx = 0;
    
var captionItemCount = $("#caption > span").length;
    
setInterval(function() {
    
  $("#caption span:eq(" + captionIdx + ")").fadeOut("slow");
    
  captionIdx = (captionIdx + 1) % captionItemCount;
    
  var $next = $("#caption span:eq(" + captionIdx + ")");
    
  $("#caption").css("width", $next.width());
    
  $("#caption").css("height", $next.height());
    
  $next.fadeIn("slow");
    
}, 2000);

    .w1 { color: #FF0000; }
    
.w2 { color: #00FF00; }
    
.w3 { color: #0000FF; }
    

    
#container {
    
  text-align: center;
    
  display: block;
    
}
    

    
#caption {
    
  padding: 0px;
    
  display: inline-block;
    
  position: relative;
    
  vertical-align: bottom;
    
  -webkit-transition: width 0.25s linear;
    
  -moz-transition: width 0.25s linear;
    
  -ms-transition: width 0.25s linear;
    
  -o-transition: width 0.25s linear;
    
  transition: width 0.25s linear;
    
}
    

    
#caption>span {
    
  display: none;
    
  position: absolute;
    
  top: 0px;
    
  left: 0px;
    
}
    

    
#caption>span:first-child {
    
  display: inline-block;
    
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    

    
<body>
    
  <div id="container">
    
    This task is
    
    <span id="caption">
    

    
<span><a href="http://lnk1.co"><span class="w1">Very</span><span class="w2">Frustrating</span></a></span>
    
<span><a href="http://lnk2.co"><span class="w2">Just</span><span class="w3">Alright</span></a></span>
    
<span><a href="http://lnk3.co"><span class="w3">Totally</span><span class="w1">Perfect</span></a></span>
    

    
    </span>
    
  </div>
    
</body>





    I've been experimenting with various combinations of divs & spans, and Display properties like inline-block but since I'm not clear on what the jQuery is doing, I can't get it working while still on a single line.



    Is there a quick fix?




    Bonus Question:
    Is it really a big deal to use deprecated tags like <FONT> or <B>? I can't imagine that any browser is going to allow them to just "stop working" with an update anytime soon; rendering millions of old pages non-functional (while their competition still supports the deprecated tags)...?






    javascript jquery html css fade







    share|improve this question



























      1












      1








      1








      I have a funky jQuery cross-fading text carousel from borrowed code (from here/here), and I'm providing formatted text via Included html generated dynamically by external php. It's exactly the effect I needed.



      The thing is, it works fine... but only if I use a ton of <FONT COLOR> tags to get the desired formatting (several colors per word). I've read repeatedly that it's imperative that I don't use <FONT> since it's deprecated and therefore will makes babies cry or something.




      Working MCVE:






      $("#caption").css("width", $("#caption > span:first-child").width());
      
$("#caption").css("height", $("#caption > span:first-child").height());
      
var captionIdx = 0;
      
var captionItemCount = $("#caption > span").length;
      
setInterval(function() {
      
  $("#caption span:eq(" + captionIdx + ")").fadeOut("slow");
      
  captionIdx = (captionIdx + 1) % captionItemCount;
      
  var $next = $("#caption span:eq(" + captionIdx + ")");
      
  $("#caption").css("width", $next.width());
      
  $("#caption").css("height", $next.height());
      
  $next.fadeIn("slow");
      
}, 2000);

      #container {
      
  text-align: center;
      
  display: block;
      
}
      

      
#caption {
      
  padding: 0px;
      
  display: inline-block;
      
  position: relative;
      
  vertical-align: bottom;
      
  -webkit-transition: width 0.25s linear;
      
  -moz-transition: width 0.25s linear;
      
  -ms-transition: width 0.25s linear;
      
  -o-transition: width 0.25s linear;
      
  transition: width 0.25s linear;
      
}
      

      
#caption>span {
      
  display: none;
      
  position: absolute;
      
  top: 0px;
      
  left: 0px;
      
}
      

      
#caption>span:first-child {
      
  display: inline-block;
      
}

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      

      
<body>
      
  <div id="container">
      
    This task is
      
    <span id="caption">
      
<span><a href="http://lnk1.co"><font color=red>Confu</font><font color=green>sing</font></a></span>
      
    <span><a href="http://lnk2.co"><font color=green>Frust</font><font color=blue>rating</font></a></span>
      
    <span><a href="http://lnk3.co"><font color=blue>Tire</font><font color=red>some</font></a></span>
      
    </span>
      
  </div>
      
</body>





      ...so I'm trying to switch to using CSS instead, but it 'breaks' the carousel, presumably since I need additional <SPAN>s to apply the formatting, while the jQuery uses <SPAN>'s as the delimiter in phrase rotation.




      Broken MCVE:



      Note the only difference is 3 lines of <style> and the 3 lines within <span id="caption">.






      $("#caption").css("width", $("#caption > span:first-child").width());
      
$("#caption").css("height", $("#caption > span:first-child").height());
      
var captionIdx = 0;
      
var captionItemCount = $("#caption > span").length;
      
setInterval(function() {
      
  $("#caption span:eq(" + captionIdx + ")").fadeOut("slow");
      
  captionIdx = (captionIdx + 1) % captionItemCount;
      
  var $next = $("#caption span:eq(" + captionIdx + ")");
      
  $("#caption").css("width", $next.width());
      
  $("#caption").css("height", $next.height());
      
  $next.fadeIn("slow");
      
}, 2000);

      .w1 { color: #FF0000; }
      
.w2 { color: #00FF00; }
      
.w3 { color: #0000FF; }
      

      
#container {
      
  text-align: center;
      
  display: block;
      
}
      

      
#caption {
      
  padding: 0px;
      
  display: inline-block;
      
  position: relative;
      
  vertical-align: bottom;
      
  -webkit-transition: width 0.25s linear;
      
  -moz-transition: width 0.25s linear;
      
  -ms-transition: width 0.25s linear;
      
  -o-transition: width 0.25s linear;
      
  transition: width 0.25s linear;
      
}
      

      
#caption>span {
      
  display: none;
      
  position: absolute;
      
  top: 0px;
      
  left: 0px;
      
}
      

      
#caption>span:first-child {
      
  display: inline-block;
      
}

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      

      
<body>
      
  <div id="container">
      
    This task is
      
    <span id="caption">
      

      
<span><a href="http://lnk1.co"><span class="w1">Very</span><span class="w2">Frustrating</span></a></span>
      
<span><a href="http://lnk2.co"><span class="w2">Just</span><span class="w3">Alright</span></a></span>
      
<span><a href="http://lnk3.co"><span class="w3">Totally</span><span class="w1">Perfect</span></a></span>
      

      
    </span>
      
  </div>
      
</body>





      I've been experimenting with various combinations of divs & spans, and Display properties like inline-block but since I'm not clear on what the jQuery is doing, I can't get it working while still on a single line.



      Is there a quick fix?




      Bonus Question:
      Is it really a big deal to use deprecated tags like <FONT> or <B>? I can't imagine that any browser is going to allow them to just "stop working" with an update anytime soon; rendering millions of old pages non-functional (while their competition still supports the deprecated tags)...?






      javascript jquery html css fade







      share|improve this question
















      I have a funky jQuery cross-fading text carousel from borrowed code (from here/here), and I'm providing formatted text via Included html generated dynamically by external php. It's exactly the effect I needed.



      The thing is, it works fine... but only if I use a ton of <FONT COLOR> tags to get the desired formatting (several colors per word). I've read repeatedly that it's imperative that I don't use <FONT> since it's deprecated and therefore will makes babies cry or something.




      Working MCVE:






      $("#caption").css("width", $("#caption > span:first-child").width());
      
$("#caption").css("height", $("#caption > span:first-child").height());
      
var captionIdx = 0;
      
var captionItemCount = $("#caption > span").length;
      
setInterval(function() {
      
  $("#caption span:eq(" + captionIdx + ")").fadeOut("slow");
      
  captionIdx = (captionIdx + 1) % captionItemCount;
      
  var $next = $("#caption span:eq(" + captionIdx + ")");
      
  $("#caption").css("width", $next.width());
      
  $("#caption").css("height", $next.height());
      
  $next.fadeIn("slow");
      
}, 2000);

      #container {
      
  text-align: center;
      
  display: block;
      
}
      

      
#caption {
      
  padding: 0px;
      
  display: inline-block;
      
  position: relative;
      
  vertical-align: bottom;
      
  -webkit-transition: width 0.25s linear;
      
  -moz-transition: width 0.25s linear;
      
  -ms-transition: width 0.25s linear;
      
  -o-transition: width 0.25s linear;
      
  transition: width 0.25s linear;
      
}
      

      
#caption>span {
      
  display: none;
      
  position: absolute;
      
  top: 0px;
      
  left: 0px;
      
}
      

      
#caption>span:first-child {
      
  display: inline-block;
      
}

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      

      
<body>
      
  <div id="container">
      
    This task is
      
    <span id="caption">
      
<span><a href="http://lnk1.co"><font color=red>Confu</font><font color=green>sing</font></a></span>
      
    <span><a href="http://lnk2.co"><font color=green>Frust</font><font color=blue>rating</font></a></span>
      
    <span><a href="http://lnk3.co"><font color=blue>Tire</font><font color=red>some</font></a></span>
      
    </span>
      
  </div>
      
</body>





      ...so I'm trying to switch to using CSS instead, but it 'breaks' the carousel, presumably since I need additional <SPAN>s to apply the formatting, while the jQuery uses <SPAN>'s as the delimiter in phrase rotation.




      Broken MCVE:



      Note the only difference is 3 lines of <style> and the 3 lines within <span id="caption">.






      $("#caption").css("width", $("#caption > span:first-child").width());
      
$("#caption").css("height", $("#caption > span:first-child").height());
      
var captionIdx = 0;
      
var captionItemCount = $("#caption > span").length;
      
setInterval(function() {
      
  $("#caption span:eq(" + captionIdx + ")").fadeOut("slow");
      
  captionIdx = (captionIdx + 1) % captionItemCount;
      
  var $next = $("#caption span:eq(" + captionIdx + ")");
      
  $("#caption").css("width", $next.width());
      
  $("#caption").css("height", $next.height());
      
  $next.fadeIn("slow");
      
}, 2000);

      .w1 { color: #FF0000; }
      
.w2 { color: #00FF00; }
      
.w3 { color: #0000FF; }
      

      
#container {
      
  text-align: center;
      
  display: block;
      
}
      

      
#caption {
      
  padding: 0px;
      
  display: inline-block;
      
  position: relative;
      
  vertical-align: bottom;
      
  -webkit-transition: width 0.25s linear;
      
  -moz-transition: width 0.25s linear;
      
  -ms-transition: width 0.25s linear;
      
  -o-transition: width 0.25s linear;
      
  transition: width 0.25s linear;
      
}
      

      
#caption>span {
      
  display: none;
      
  position: absolute;
      
  top: 0px;
      
  left: 0px;
      
}
      

      
#caption>span:first-child {
      
  display: inline-block;
      
}

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      

      
<body>
      
  <div id="container">
      
    This task is
      
    <span id="caption">
      

      
<span><a href="http://lnk1.co"><span class="w1">Very</span><span class="w2">Frustrating</span></a></span>
      
<span><a href="http://lnk2.co"><span class="w2">Just</span><span class="w3">Alright</span></a></span>
      
<span><a href="http://lnk3.co"><span class="w3">Totally</span><span class="w1">Perfect</span></a></span>
      

      
    </span>
      
  </div>
      
</body>





      I've been experimenting with various combinations of divs & spans, and Display properties like inline-block but since I'm not clear on what the jQuery is doing, I can't get it working while still on a single line.



      Is there a quick fix?




      Bonus Question:
      Is it really a big deal to use deprecated tags like <FONT> or <B>? I can't imagine that any browser is going to allow them to just "stop working" with an update anytime soon; rendering millions of old pages non-functional (while their competition still supports the deprecated tags)...?






      $("#caption").css("width", $("#caption > span:first-child").width());
      
$("#caption").css("height", $("#caption > span:first-child").height());
      
var captionIdx = 0;
      
var captionItemCount = $("#caption > span").length;
      
setInterval(function() {
      
  $("#caption span:eq(" + captionIdx + ")").fadeOut("slow");
      
  captionIdx = (captionIdx + 1) % captionItemCount;
      
  var $next = $("#caption span:eq(" + captionIdx + ")");
      
  $("#caption").css("width", $next.width());
      
  $("#caption").css("height", $next.height());
      
  $next.fadeIn("slow");
      
}, 2000);

      #container {
      
  text-align: center;
      
  display: block;
      
}
      

      
#caption {
      
  padding: 0px;
      
  display: inline-block;
      
  position: relative;
      
  vertical-align: bottom;
      
  -webkit-transition: width 0.25s linear;
      
  -moz-transition: width 0.25s linear;
      
  -ms-transition: width 0.25s linear;
      
  -o-transition: width 0.25s linear;
      
  transition: width 0.25s linear;
      
}
      

      
#caption>span {
      
  display: none;
      
  position: absolute;
      
  top: 0px;
      
  left: 0px;
      
}
      

      
#caption>span:first-child {
      
  display: inline-block;
      
}

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      

      
<body>
      
  <div id="container">
      
    This task is
      
    <span id="caption">
      
<span><a href="http://lnk1.co"><font color=red>Confu</font><font color=green>sing</font></a></span>
      
    <span><a href="http://lnk2.co"><font color=green>Frust</font><font color=blue>rating</font></a></span>
      
    <span><a href="http://lnk3.co"><font color=blue>Tire</font><font color=red>some</font></a></span>
      
    </span>
      
  </div>
      
</body>





      $("#caption").css("width", $("#caption > span:first-child").width());
      
$("#caption").css("height", $("#caption > span:first-child").height());
      
var captionIdx = 0;
      
var captionItemCount = $("#caption > span").length;
      
setInterval(function() {
      
  $("#caption span:eq(" + captionIdx + ")").fadeOut("slow");
      
  captionIdx = (captionIdx + 1) % captionItemCount;
      
  var $next = $("#caption span:eq(" + captionIdx + ")");
      
  $("#caption").css("width", $next.width());
      
  $("#caption").css("height", $next.height());
      
  $next.fadeIn("slow");
      
}, 2000);

      #container {
      
  text-align: center;
      
  display: block;
      
}
      

      
#caption {
      
  padding: 0px;
      
  display: inline-block;
      
  position: relative;
      
  vertical-align: bottom;
      
  -webkit-transition: width 0.25s linear;
      
  -moz-transition: width 0.25s linear;
      
  -ms-transition: width 0.25s linear;
      
  -o-transition: width 0.25s linear;
      
  transition: width 0.25s linear;
      
}
      

      
#caption>span {
      
  display: none;
      
  position: absolute;
      
  top: 0px;
      
  left: 0px;
      
}
      

      
#caption>span:first-child {
      
  display: inline-block;
      
}

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      

      
<body>
      
  <div id="container">
      
    This task is
      
    <span id="caption">
      
<span><a href="http://lnk1.co"><font color=red>Confu</font><font color=green>sing</font></a></span>
      
    <span><a href="http://lnk2.co"><font color=green>Frust</font><font color=blue>rating</font></a></span>
      
    <span><a href="http://lnk3.co"><font color=blue>Tire</font><font color=red>some</font></a></span>
      
    </span>
      
  </div>
      
</body>





      $("#caption").css("width", $("#caption > span:first-child").width());
      
$("#caption").css("height", $("#caption > span:first-child").height());
      
var captionIdx = 0;
      
var captionItemCount = $("#caption > span").length;
      
setInterval(function() {
      
  $("#caption span:eq(" + captionIdx + ")").fadeOut("slow");
      
  captionIdx = (captionIdx + 1) % captionItemCount;
      
  var $next = $("#caption span:eq(" + captionIdx + ")");
      
  $("#caption").css("width", $next.width());
      
  $("#caption").css("height", $next.height());
      
  $next.fadeIn("slow");
      
}, 2000);

      .w1 { color: #FF0000; }
      
.w2 { color: #00FF00; }
      
.w3 { color: #0000FF; }
      

      
#container {
      
  text-align: center;
      
  display: block;
      
}
      

      
#caption {
      
  padding: 0px;
      
  display: inline-block;
      
  position: relative;
      
  vertical-align: bottom;
      
  -webkit-transition: width 0.25s linear;
      
  -moz-transition: width 0.25s linear;
      
  -ms-transition: width 0.25s linear;
      
  -o-transition: width 0.25s linear;
      
  transition: width 0.25s linear;
      
}
      

      
#caption>span {
      
  display: none;
      
  position: absolute;
      
  top: 0px;
      
  left: 0px;
      
}
      

      
#caption>span:first-child {
      
  display: inline-block;
      
}

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      

      
<body>
      
  <div id="container">
      
    This task is
      
    <span id="caption">
      

      
<span><a href="http://lnk1.co"><span class="w1">Very</span><span class="w2">Frustrating</span></a></span>
      
<span><a href="http://lnk2.co"><span class="w2">Just</span><span class="w3">Alright</span></a></span>
      
<span><a href="http://lnk3.co"><span class="w3">Totally</span><span class="w1">Perfect</span></a></span>
      

      
    </span>
      
  </div>
      
</body>





      $("#caption").css("width", $("#caption > span:first-child").width());
      
$("#caption").css("height", $("#caption > span:first-child").height());
      
var captionIdx = 0;
      
var captionItemCount = $("#caption > span").length;
      
setInterval(function() {
      
  $("#caption span:eq(" + captionIdx + ")").fadeOut("slow");
      
  captionIdx = (captionIdx + 1) % captionItemCount;
      
  var $next = $("#caption span:eq(" + captionIdx + ")");
      
  $("#caption").css("width", $next.width());
      
  $("#caption").css("height", $next.height());
      
  $next.fadeIn("slow");
      
}, 2000);

      .w1 { color: #FF0000; }
      
.w2 { color: #00FF00; }
      
.w3 { color: #0000FF; }
      

      
#container {
      
  text-align: center;
      
  display: block;
      
}
      

      
#caption {
      
  padding: 0px;
      
  display: inline-block;
      
  position: relative;
      
  vertical-align: bottom;
      
  -webkit-transition: width 0.25s linear;
      
  -moz-transition: width 0.25s linear;
      
  -ms-transition: width 0.25s linear;
      
  -o-transition: width 0.25s linear;
      
  transition: width 0.25s linear;
      
}
      

      
#caption>span {
      
  display: none;
      
  position: absolute;
      
  top: 0px;
      
  left: 0px;
      
}
      

      
#caption>span:first-child {
      
  display: inline-block;
      
}

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      

      
<body>
      
  <div id="container">
      
    This task is
      
    <span id="caption">
      

      
<span><a href="http://lnk1.co"><span class="w1">Very</span><span class="w2">Frustrating</span></a></span>
      
<span><a href="http://lnk2.co"><span class="w2">Just</span><span class="w3">Alright</span></a></span>
      
<span><a href="http://lnk3.co"><span class="w3">Totally</span><span class="w1">Perfect</span></a></span>
      

      
    </span>
      
  </div>
      
</body>





      javascript jquery html css fade




      javascript jquery html css fade






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Jan 19 at 22:18









      QHarr

      32k82042




      32k82042










      asked Dec 31 '18 at 9:34









      ashleedawgashleedawg

      12.6k42350




      12.6k42350
























          1 Answer
          1






          active

          oldest

          votes


















          2

















          $("#caption").css("width", $("#caption > span:first-child").width());
          
$("#caption").css("height", $("#caption > span:first-child").height());
          
var captionIdx = 0;
          
var captionItemCount = $("#caption > span").length;
          
setInterval(function() {
          
  $("#caption > span:eq(" + captionIdx + ")").fadeOut("slow");
          
  captionIdx = (captionIdx + 1) % captionItemCount;
          
  var $next = $("#caption > span:eq(" + captionIdx + ")");
          
  $("#caption").css("width", $next.width());
          
  $("#caption").css("height", $next.height());
          
  $next.fadeIn("slow");
          
}, 2000);

          .w1 { color: #FF0000; }
          
.w2 { color: #00FF00; }
          
.w3 { color: #0000FF; }
          

          
#container {
          
  text-align: center;
          
  display: block;
          
}
          

          
#caption {
          
  padding: 0px;
          
  display: inline-block;
          
  position: relative;
          
  vertical-align: bottom;
          
  -webkit-transition: width 0.25s linear;
          
  -moz-transition: width 0.25s linear;
          
  -ms-transition: width 0.25s linear;
          
  -o-transition: width 0.25s linear;
          
  transition: width 1s linear;
          
}
          

          
#caption>span {
          
  display: none;
          
  position: absolute;
          
  top: 0px;
          
  left: 0px;
          
}
          

          
#caption>span:first-child {
          
  display: inline-block;
          
}

          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          

          
<body>
          
  <div id="container">
          
    This task is
          
    <span id="caption">
          

          
<span><a href="http://lnk1.co"><span class="w1">Very</span><span class="w2">Frustrating</span></a></span>
          
<span><a href="http://lnk2.co"><span class="w2">Just</span><span class="w3">Alright</span></a></span>
          
<span><a href="http://lnk3.co"><span class="w3">Totally</span><span class="w1">Perfect</span></a></span>
          

          
    </span>
          
  </div>
          
</body>





          You need to use > to select only the immidiate child span and not all descendant spans in $("#caption > span:eq(" + captionIdx + ")").fadeOut("slow"); and var $next = $("#caption > span:eq(" + captionIdx + ")");. Since you did not use > all inner spans are animated too, that's why you see this strange effect.






          share|improve this answer


























          • When I predicted that it's probably a "quick fix", I didn't expect that fix to be literally one character... Awesome, thanks! (also, frustrating to think of how long I wasted because of one character!)

            – ashleedawg
            Jan 1 at 0:52











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53985839%2fcrossfading-jquery-breaks-when-i-replace-font-tags-with-more-spans%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          2

















          $("#caption").css("width", $("#caption > span:first-child").width());
          
$("#caption").css("height", $("#caption > span:first-child").height());
          
var captionIdx = 0;
          
var captionItemCount = $("#caption > span").length;
          
setInterval(function() {
          
  $("#caption > span:eq(" + captionIdx + ")").fadeOut("slow");
          
  captionIdx = (captionIdx + 1) % captionItemCount;
          
  var $next = $("#caption > span:eq(" + captionIdx + ")");
          
  $("#caption").css("width", $next.width());
          
  $("#caption").css("height", $next.height());
          
  $next.fadeIn("slow");
          
}, 2000);

          .w1 { color: #FF0000; }
          
.w2 { color: #00FF00; }
          
.w3 { color: #0000FF; }
          

          
#container {
          
  text-align: center;
          
  display: block;
          
}
          

          
#caption {
          
  padding: 0px;
          
  display: inline-block;
          
  position: relative;
          
  vertical-align: bottom;
          
  -webkit-transition: width 0.25s linear;
          
  -moz-transition: width 0.25s linear;
          
  -ms-transition: width 0.25s linear;
          
  -o-transition: width 0.25s linear;
          
  transition: width 1s linear;
          
}
          

          
#caption>span {
          
  display: none;
          
  position: absolute;
          
  top: 0px;
          
  left: 0px;
          
}
          

          
#caption>span:first-child {
          
  display: inline-block;
          
}

          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          

          
<body>
          
  <div id="container">
          
    This task is
          
    <span id="caption">
          

          
<span><a href="http://lnk1.co"><span class="w1">Very</span><span class="w2">Frustrating</span></a></span>
          
<span><a href="http://lnk2.co"><span class="w2">Just</span><span class="w3">Alright</span></a></span>
          
<span><a href="http://lnk3.co"><span class="w3">Totally</span><span class="w1">Perfect</span></a></span>
          

          
    </span>
          
  </div>
          
</body>





          You need to use > to select only the immidiate child span and not all descendant spans in $("#caption > span:eq(" + captionIdx + ")").fadeOut("slow"); and var $next = $("#caption > span:eq(" + captionIdx + ")");. Since you did not use > all inner spans are animated too, that's why you see this strange effect.






          share|improve this answer


























          • When I predicted that it's probably a "quick fix", I didn't expect that fix to be literally one character... Awesome, thanks! (also, frustrating to think of how long I wasted because of one character!)

            – ashleedawg
            Jan 1 at 0:52
















          2

















          $("#caption").css("width", $("#caption > span:first-child").width());
          
$("#caption").css("height", $("#caption > span:first-child").height());
          
var captionIdx = 0;
          
var captionItemCount = $("#caption > span").length;
          
setInterval(function() {
          
  $("#caption > span:eq(" + captionIdx + ")").fadeOut("slow");
          
  captionIdx = (captionIdx + 1) % captionItemCount;
          
  var $next = $("#caption > span:eq(" + captionIdx + ")");
          
  $("#caption").css("width", $next.width());
          
  $("#caption").css("height", $next.height());
          
  $next.fadeIn("slow");
          
}, 2000);

          .w1 { color: #FF0000; }
          
.w2 { color: #00FF00; }
          
.w3 { color: #0000FF; }
          

          
#container {
          
  text-align: center;
          
  display: block;
          
}
          

          
#caption {
          
  padding: 0px;
          
  display: inline-block;
          
  position: relative;
          
  vertical-align: bottom;
          
  -webkit-transition: width 0.25s linear;
          
  -moz-transition: width 0.25s linear;
          
  -ms-transition: width 0.25s linear;
          
  -o-transition: width 0.25s linear;
          
  transition: width 1s linear;
          
}
          

          
#caption>span {
          
  display: none;
          
  position: absolute;
          
  top: 0px;
          
  left: 0px;
          
}
          

          
#caption>span:first-child {
          
  display: inline-block;
          
}

          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          

          
<body>
          
  <div id="container">
          
    This task is
          
    <span id="caption">
          

          
<span><a href="http://lnk1.co"><span class="w1">Very</span><span class="w2">Frustrating</span></a></span>
          
<span><a href="http://lnk2.co"><span class="w2">Just</span><span class="w3">Alright</span></a></span>
          
<span><a href="http://lnk3.co"><span class="w3">Totally</span><span class="w1">Perfect</span></a></span>
          

          
    </span>
          
  </div>
          
</body>





          You need to use > to select only the immidiate child span and not all descendant spans in $("#caption > span:eq(" + captionIdx + ")").fadeOut("slow"); and var $next = $("#caption > span:eq(" + captionIdx + ")");. Since you did not use > all inner spans are animated too, that's why you see this strange effect.






          share|improve this answer


























          • When I predicted that it's probably a "quick fix", I didn't expect that fix to be literally one character... Awesome, thanks! (also, frustrating to think of how long I wasted because of one character!)

            – ashleedawg
            Jan 1 at 0:52














          2












          2








          2










          $("#caption").css("width", $("#caption > span:first-child").width());
          
$("#caption").css("height", $("#caption > span:first-child").height());
          
var captionIdx = 0;
          
var captionItemCount = $("#caption > span").length;
          
setInterval(function() {
          
  $("#caption > span:eq(" + captionIdx + ")").fadeOut("slow");
          
  captionIdx = (captionIdx + 1) % captionItemCount;
          
  var $next = $("#caption > span:eq(" + captionIdx + ")");
          
  $("#caption").css("width", $next.width());
          
  $("#caption").css("height", $next.height());
          
  $next.fadeIn("slow");
          
}, 2000);

          .w1 { color: #FF0000; }
          
.w2 { color: #00FF00; }
          
.w3 { color: #0000FF; }
          

          
#container {
          
  text-align: center;
          
  display: block;
          
}
          

          
#caption {
          
  padding: 0px;
          
  display: inline-block;
          
  position: relative;
          
  vertical-align: bottom;
          
  -webkit-transition: width 0.25s linear;
          
  -moz-transition: width 0.25s linear;
          
  -ms-transition: width 0.25s linear;
          
  -o-transition: width 0.25s linear;
          
  transition: width 1s linear;
          
}
          

          
#caption>span {
          
  display: none;
          
  position: absolute;
          
  top: 0px;
          
  left: 0px;
          
}
          

          
#caption>span:first-child {
          
  display: inline-block;
          
}

          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          

          
<body>
          
  <div id="container">
          
    This task is
          
    <span id="caption">
          

          
<span><a href="http://lnk1.co"><span class="w1">Very</span><span class="w2">Frustrating</span></a></span>
          
<span><a href="http://lnk2.co"><span class="w2">Just</span><span class="w3">Alright</span></a></span>
          
<span><a href="http://lnk3.co"><span class="w3">Totally</span><span class="w1">Perfect</span></a></span>
          

          
    </span>
          
  </div>
          
</body>





          You need to use > to select only the immidiate child span and not all descendant spans in $("#caption > span:eq(" + captionIdx + ")").fadeOut("slow"); and var $next = $("#caption > span:eq(" + captionIdx + ")");. Since you did not use > all inner spans are animated too, that's why you see this strange effect.






          share|improve this answer


















          $("#caption").css("width", $("#caption > span:first-child").width());
          
$("#caption").css("height", $("#caption > span:first-child").height());
          
var captionIdx = 0;
          
var captionItemCount = $("#caption > span").length;
          
setInterval(function() {
          
  $("#caption > span:eq(" + captionIdx + ")").fadeOut("slow");
          
  captionIdx = (captionIdx + 1) % captionItemCount;
          
  var $next = $("#caption > span:eq(" + captionIdx + ")");
          
  $("#caption").css("width", $next.width());
          
  $("#caption").css("height", $next.height());
          
  $next.fadeIn("slow");
          
}, 2000);

          .w1 { color: #FF0000; }
          
.w2 { color: #00FF00; }
          
.w3 { color: #0000FF; }
          

          
#container {
          
  text-align: center;
          
  display: block;
          
}
          

          
#caption {
          
  padding: 0px;
          
  display: inline-block;
          
  position: relative;
          
  vertical-align: bottom;
          
  -webkit-transition: width 0.25s linear;
          
  -moz-transition: width 0.25s linear;
          
  -ms-transition: width 0.25s linear;
          
  -o-transition: width 0.25s linear;
          
  transition: width 1s linear;
          
}
          

          
#caption>span {
          
  display: none;
          
  position: absolute;
          
  top: 0px;
          
  left: 0px;
          
}
          

          
#caption>span:first-child {
          
  display: inline-block;
          
}

          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          

          
<body>
          
  <div id="container">
          
    This task is
          
    <span id="caption">
          

          
<span><a href="http://lnk1.co"><span class="w1">Very</span><span class="w2">Frustrating</span></a></span>
          
<span><a href="http://lnk2.co"><span class="w2">Just</span><span class="w3">Alright</span></a></span>
          
<span><a href="http://lnk3.co"><span class="w3">Totally</span><span class="w1">Perfect</span></a></span>
          

          
    </span>
          
  </div>
          
</body>





          You need to use > to select only the immidiate child span and not all descendant spans in $("#caption > span:eq(" + captionIdx + ")").fadeOut("slow"); and var $next = $("#caption > span:eq(" + captionIdx + ")");. Since you did not use > all inner spans are animated too, that's why you see this strange effect.






          $("#caption").css("width", $("#caption > span:first-child").width());
          
$("#caption").css("height", $("#caption > span:first-child").height());
          
var captionIdx = 0;
          
var captionItemCount = $("#caption > span").length;
          
setInterval(function() {
          
  $("#caption > span:eq(" + captionIdx + ")").fadeOut("slow");
          
  captionIdx = (captionIdx + 1) % captionItemCount;
          
  var $next = $("#caption > span:eq(" + captionIdx + ")");
          
  $("#caption").css("width", $next.width());
          
  $("#caption").css("height", $next.height());
          
  $next.fadeIn("slow");
          
}, 2000);

          .w1 { color: #FF0000; }
          
.w2 { color: #00FF00; }
          
.w3 { color: #0000FF; }
          

          
#container {
          
  text-align: center;
          
  display: block;
          
}
          

          
#caption {
          
  padding: 0px;
          
  display: inline-block;
          
  position: relative;
          
  vertical-align: bottom;
          
  -webkit-transition: width 0.25s linear;
          
  -moz-transition: width 0.25s linear;
          
  -ms-transition: width 0.25s linear;
          
  -o-transition: width 0.25s linear;
          
  transition: width 1s linear;
          
}
          

          
#caption>span {
          
  display: none;
          
  position: absolute;
          
  top: 0px;
          
  left: 0px;
          
}
          

          
#caption>span:first-child {
          
  display: inline-block;
          
}

          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          

          
<body>
          
  <div id="container">
          
    This task is
          
    <span id="caption">
          

          
<span><a href="http://lnk1.co"><span class="w1">Very</span><span class="w2">Frustrating</span></a></span>
          
<span><a href="http://lnk2.co"><span class="w2">Just</span><span class="w3">Alright</span></a></span>
          
<span><a href="http://lnk3.co"><span class="w3">Totally</span><span class="w1">Perfect</span></a></span>
          

          
    </span>
          
  </div>
          
</body>





          $("#caption").css("width", $("#caption > span:first-child").width());
          
$("#caption").css("height", $("#caption > span:first-child").height());
          
var captionIdx = 0;
          
var captionItemCount = $("#caption > span").length;
          
setInterval(function() {
          
  $("#caption > span:eq(" + captionIdx + ")").fadeOut("slow");
          
  captionIdx = (captionIdx + 1) % captionItemCount;
          
  var $next = $("#caption > span:eq(" + captionIdx + ")");
          
  $("#caption").css("width", $next.width());
          
  $("#caption").css("height", $next.height());
          
  $next.fadeIn("slow");
          
}, 2000);

          .w1 { color: #FF0000; }
          
.w2 { color: #00FF00; }
          
.w3 { color: #0000FF; }
          

          
#container {
          
  text-align: center;
          
  display: block;
          
}
          

          
#caption {
          
  padding: 0px;
          
  display: inline-block;
          
  position: relative;
          
  vertical-align: bottom;
          
  -webkit-transition: width 0.25s linear;
          
  -moz-transition: width 0.25s linear;
          
  -ms-transition: width 0.25s linear;
          
  -o-transition: width 0.25s linear;
          
  transition: width 1s linear;
          
}
          

          
#caption>span {
          
  display: none;
          
  position: absolute;
          
  top: 0px;
          
  left: 0px;
          
}
          

          
#caption>span:first-child {
          
  display: inline-block;
          
}

          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          

          
<body>
          
  <div id="container">
          
    This task is
          
    <span id="caption">
          

          
<span><a href="http://lnk1.co"><span class="w1">Very</span><span class="w2">Frustrating</span></a></span>
          
<span><a href="http://lnk2.co"><span class="w2">Just</span><span class="w3">Alright</span></a></span>
          
<span><a href="http://lnk3.co"><span class="w3">Totally</span><span class="w1">Perfect</span></a></span>
          

          
    </span>
          
  </div>
          
</body>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Dec 31 '18 at 10:03

























          answered Dec 31 '18 at 9:54









          DmitryDmitry

          3,656102629




          3,656102629













          • When I predicted that it's probably a "quick fix", I didn't expect that fix to be literally one character... Awesome, thanks! (also, frustrating to think of how long I wasted because of one character!)

            – ashleedawg
            Jan 1 at 0:52



















          • When I predicted that it's probably a "quick fix", I didn't expect that fix to be literally one character... Awesome, thanks! (also, frustrating to think of how long I wasted because of one character!)

            – ashleedawg
            Jan 1 at 0:52

















          When I predicted that it's probably a "quick fix", I didn't expect that fix to be literally one character... Awesome, thanks! (also, frustrating to think of how long I wasted because of one character!)

          – ashleedawg
          Jan 1 at 0:52





          When I predicted that it's probably a "quick fix", I didn't expect that fix to be literally one character... Awesome, thanks! (also, frustrating to think of how long I wasted because of one character!)

          – ashleedawg
          Jan 1 at 0:52


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid …



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53985839%2fcrossfading-jquery-breaks-when-i-replace-font-tags-with-more-spans%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          -

          Popular posts from this blog

          Mossoró

          Image
            Nota: Para outros significados, veja Mossoró (desambiguação). Município de Mossoró "Capital do Oeste Potiguar" [ 1 ] "Capital nacional do Semiárido" [ 2 ] [ 3 ] "Capital Cultural do Rio Grande do Norte" [ 1 ] "Terra de Santa Luzia" [ 4 ] "Terra do Sol, do Sal e do Petróleo" [ 5 ] "Terra da Liberdade [ 6 ] " Centro de Mossoró, com a Praça Vigário Antônio Joaquim e, ao fundo, a câmara municipal de vereadores (esquerda) e Catedral de Santa Luzia (direita) Bandeira Brasão Hino Fundação 15 de março de 1852 (166 anos) Gentílico mossoroense Padroeiro(a) Santa Luzia Prefeito(a) Rosalba Ciarlini Rosado (PP) (2017 – 2020 ) Localização Localização de Mossoró no Rio Grande do Norte Mossoró Localização de Mossoró no Brasil 05° 11' 16" S 37° 20' 38" O 05° 11' 16" S 37° 20' 38" O Unidade federativa Rio Grande do No...
          Read more

          Error while reading .h5 file using the rhdf5 package in R

          Image
          0 I'm importing a .h5 file into R by using the rhdf5 package. But a warning message showed and I found the DATE_TIME column of my data is NA when I view the imported file. Warning message: In H5Dread(h5dataset = h5dataset, h5spaceFile = h5spaceFile, h5spaceMem = h5spaceMem, : h5read for type 'TIME' not yet implemented. Values replaced by NA's. It's all normal when I use Vitables (Python) to open the .h5 file. But the DATE_TIME column is NA with HDFViewer open it. My code is: library(rhdf5) test <- h5read("mytestdata.h5", "/results") View(mydatatest) I want to use R to open .h5 file. Please give me some help! Thanks in advance! r hdf5 rhdf5 ...
          Read more

          Pushsharp Apns notification error: 'InvalidToken'

          Image
          1 1 I am currently working on automatic updates for Passbook (wallet) tickets and am experiencing some trouble using the Pushsharp library by Redth. I am using a Push notification certificate from the apple developer portal. I have tried to export my certificate as .p12, .pem and tried to use only the private key as .12 or .pem but nothing works. This is my full certificate (information is blanked out for security reasons): https://cdn.pbrd.co/images/HUJtb7b.png I dont have enough reputation to post images so a link is all i can provide. var succeeded = 0; var failed = 0; var attempted = 0; var config = new ApnsConfiguration(ApnsConfiguration.ApnsServerEnvironment.Sandbox, ConfigManager.CertPath + "PushCertificateV2.p12", ConfigManager.lvppass, fa...
          Read more