News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

JS grief

Started by Sir Osis of Liver, July 02, 2022, 12:28:55 AM

Previous topic - Next topic

Sir Osis of Liver

   How to replace document.write with innerHTML in this code -


                     var copyspeedltr=slidespeedltr
                     rightrightslideltr=\'<nobr>\'+rightrightslideltr.join(imagegapltr)+\'</nobr>\'
                     var iedomltr=document.all||document.getElementById
                     if (iedomltr)
                     document.write(\'<span id="templtr" style="visibility:hidden;position:absolute;top:-100px;right:9000px;">\'+rightrightslideltr+\'</span>\')
                     var actualwidthltr=\'\'
                     var cross_slideltr, ns_slideltr


"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Chief of Nothing

A little more context would make it a bit easier to say but judging by the non standard and very likely not supported by anything today <nobr> tag, the use of document.all and getElementById without specifying an id what your working with is ancient, and that piece of code from var iedomltr= to document.write looks to be targeted purely at Internet Explorer, though using the OR operator doesn't make sense in that regard. Are you sure you actually need this piece of code?

Anyway, to use innerHTML you need to find the containing elements id and then you can do something like this:

if (iedomltr) {
let el = document.getElementById('containing_element_id');
el.innerHTML += '<span id="templtr" style="visibility:hidden;position:absolute;top:-100px;right:9000px;">'  + rightrightslideltr + '</span>';
}

That's provided that the script isn't inline in the containing element, in that case I don't know if the above would work properly.

Sir Osis of Liver

It's an old scroller that's been on the forum for years.  Works fine, but we'd like to run several on board index in opposite directions.  Was able to change rtl to ltr, but can only run one scroller on same page, second one causes first to go blank.  Trying to replace document.write with innerHTML, but it collapses div.
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Sir Osis of Liver

#3
Put them in iframes, original code, both scrollers are displayed, but links don't work.  >:(

https://www.thekrashsite.com/ebook-mecca/

Got the links working, so far so good.
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Chief of Nothing

Well I was right about ancient, last updated in 2004. Made to work with FF1, IE5 and Opera7. That script really brings back memories of the days of the first browser wars. I feel all nostalgic now.

Given that much of the script is redundant these days (you won't find document.all and document.layers supported anymore) it shouldn't actually take much to rewrite it modern standards using innerHTML or createElement.

Sir Osis of Liver

Quote from: Chief of Nothing on July 03, 2022, 02:42:32 AMit shouldn't actually take much to rewrite it modern standards using innerHTML or createElement.

Yeah, well, that's easy for you to say.  JS has always been a mystery to me.  We tried finding a current script that does what this one does, didn't come up with anything.  Seems to be working, have to kick it around a bit before putting it in production.
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

live627

I wrote up a replacement for you using a CSS transformation on the GPU.

<div id="scroller-bg">
  <div id="scroller">
    <img src="http://via.placeholder.com/200x200/ff7070" alt="">
    <img src="http://via.placeholder.com/200x200/70ff70" alt="">
    <img src="http://via.placeholder.com/200x200/7070ff" alt="">
    <img src="http://via.placeholder.com/200x200/ff7070" alt="">
    <img src="http://via.placeholder.com/200x200/70ff70" alt="">
    <img src="http://via.placeholder.com/200x200/7070ff" alt="">
    <img src="http://via.placeholder.com/200x200/ff7070" alt="">
    <img src="http://via.placeholder.com/200x200/70ff70" alt="">
    <img src="http://via.placeholder.com/200x200/7070ff" alt="">
    <img src="http://via.placeholder.com/200x200/ff7070" alt="">
  </div>
</div>
#scroller-bg {
  background: palevioletred;
  overflow: hidden;
}
#scroller {
  display: flex;
}
the flex display is to collapse the whitespace between the images

const animateRtl = el => {
  const ani = el.animate(
    [
      // keyframes
      { transform: "translateX(" + el.scrollWidth + "px)" },
      { transform: "translateX(-" + (el.scrollWidth + el.clientWidth) + "px)" }
    ],
    {
      // timing options
      duration: 20 * el.scrollWidth,
      iterations: Infinity
    }
  );

  el.addEventListener("mouseleave", () => {
    ani.play();
  });
  el.addEventListener("mouseenter", () => {
    ani.pause();
  });
};
animateRtl(document.getElementById("scroller"));
this short snippet of JavaScript is what must command your attention
  • it specifics the animation
  • it will pause on mouse hover
  • it resumes on mouse exit
  • the block of images will come from the right
  • the code works despite new and strange syntax (ES6)
  • reverse the animated transforms to go the other way, like thisconst animateLtr = el => {
      const ani = el.animate(
        [
          // keyframes
          { transform: "translateX(-" + (el.scrollWidth + el.clientWidth) + "px)" },
          { transform: "translateX(" + el.scrollWidth + "px)" }
        ],
        {
          // timing options
          duration: 20 * el.scrollWidth,
          iterations: Infinity
        }
      );

      el.addEventListener("mouseleave", () => {
        ani.play();
      });
      el.addEventListener("mouseenter", () => {
        ani.pause();
      });
    };
    animateLtr(document.getElementById("scroller2"));

Sir Osis of Liver

Will give that a try, thanks.
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Sir Osis of Liver

Ok, got this running here, and can run it ltr or rtl.  Only thing I can't fix is there's a long blank after last image scrolls through and before first one appears again.
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

live627

I don't know how to make it continuous.

Sir Osis of Liver

That's too bad, it does everything else the old scroller does.  It's doing infinite iterations, just with a gap in between.  Will kick it around tomorrow.
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Sir Osis of Liver

Looking at the old scroller, I believe they're using actualwidth to set width of images and repeat end to end -


                     function fillup(){
                     if (iedom){
                     cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
                     cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
                     cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
                     actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
                     cross_slide2.style.left=actualwidth+slideshowgap+"px"
                      }
                     else if (document.layers){
                     ns_slide=document.ns_slidemenu.document.ns_slidemenu2
                     ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
                     ns_slide.document.write(leftrightslide)
                     ns_slide.document.close()
                     actualwidth=ns_slide.document.width
                     ns_slide2.left=actualwidth+slideshowgap
                     ns_slide2.document.write(leftrightslide)
                     ns_slide2.document.close()
                         }
                     lefttime=setInterval("slideleft()",30)
                     }
                     window.onload=fillup


No idea how it works.

"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Advertisement: