Working around the 10,000 character custom code limit

aceon · November 29, 2018, 3:07pm

Hey guys, on my website (right now just a testing ground for features for the actual website) I’m working on a feature where, as the user scrolls down, a series of images scrolls through, replicating a video. I know there is a way to replicate this with HTML5 video but the quality is much lower. I already have this feature working on the site. HERE is the published version. Very rough around the edges but it gets the point across. Here’s where the problem comes in: I refer to the images in an embed widget in this format:

which works fine for a few frames but I’m trying to implement a video with 500 frames, and that’s way too much code for WebFlow to take. Is there a way to host an image source list somewhere else and iterate through it from WebFlow? Thanks guys.

aceon · November 30, 2018, 2:51pm

bump. Could I use a table in a hosted file to iterate through?

Siton_Systems · November 30, 2018, 7:33pm

If you open github Repository - add your js and load this asset - it should work fine (And free).

https://guides.github.com/activities/hello-world/

Adding a file to a repository

https://help.github.com/articles/adding-a-file-to-a-repository/

How to turn any GitHub repo into a CDN

The main drawback: Every time you need to update the code outside of Webflow.

iterate most of the time its by JSON & JS to HTML (Another topic). On webflow you only put the custom code (Your idea should work first on codepen or regular html).

Some examples (You should know JS):
https://stackoverflow.com/questions/24067718/convert-json-to-ul-and-li

aceon · November 30, 2018, 7:56pm

Thank you so much for your reply! I really appreciate it. I already have the file hosted HERE but my problem is that I am using an embed widget to function as the collection of images but when I use the script: <script type=“text/javascript” src=“http://yourjavascript.com/1101112308/scroll1.js”></script> it doesn’t recognize it as an image. However, if I paste the lines of code into the embed widget, the site works perfectly (but the code is too long). It seems like the solution you gave doesn’t really solve the problem unless I hosted ALL the code referring to the list of images in a .js file. If I do that, will I still be able to match the images to the location of the embed widget?

Siton_Systems · December 1, 2018, 2:35pm

By JS you dont need the embed widget.

https://stackoverflow.com/questions/584751/inserting-html-into-a-div

try this (before body wrap with script)

Create base vars:

// base vars
var content = '';
var baseClass = "class='animated'";
var baseSrc = "https://i.postimg.cc/";

image list (remember to add “,” in the end for each image + change p number)

// image list
var p = {
    "p1": "QCNjkcr8/Scroll-Anim2-100.png",
    "p2": "4y8s8nJz/Scroll-Anim2-101.png",
    "p3": "J7Kr7YbG/Scroll-Anim2-102.png",
    "p4": "FHkNZ9wL/Scroll-Anim2-104.png",
    "p5": "L6bmLqQS/Scroll-Anim2-105.png" 
     ....p100..anim2-200
};

Than by js loop throw list and put the html inside content var

    for (var key in p) {
      content+= "<img src=" + baseSrc + p[key] +'" />' ;    
    }

Last, on webflow add empty div with an id of data. And append content.

$("#data").append(content);

https://codepen.io/ezra_siton/pen/qQgrzp

aceon · December 3, 2018, 3:18pm

First of all I just want to thank you for your in-depth responses. Your help is greatly appreciated and I have learned a lot. I’m so close to getting this to work but I’m not very experienced with troubleshooting JavaScript and there’s a small problem.

After I implemented everything, the data div displays all the images at once in a long line as if it were one string instead of iterating through each image. Is there something wrong with my code? Did I not change it enough to work with the changes of the new code?

I’m so close to making this work, thank you again for all your help.

Published Link
Read Only Link
JavaScript Link

Also, I’m aware all the frames aren’t in order, I’ll fix it once this works.

Siton_Systems · December 3, 2018, 4:21pm

Looks very slow. Do you have a working example (Codepen) for this idea (Not yours)?

Anyway first try to solve your code by codepen (Its hard to debbug on Webflow).

aceon · December 3, 2018, 4:33pm

You’re right, it takes forever to load. I was thinking I could use a lower quality image but it might just be better to use an HTML5 video to scroll through and accept the lower quality.

This is the codepen I based my code off of. I’ve been trying to make the new code work on CodePen for the past hour and still can’t figure out what the issue is. Even when I add line breaks so there are 17 separate image sources, the function doesn’t want to iterate through them.

Siton_Systems · December 3, 2018, 5:07pm

Update codepen -
https://codepen.io/ezra_siton/pen/qQgrzp

In the codepen you find this line (to get scroll)

<div style="display: block; height: 20000px; width: 100px;"></div>

And update JS (related to the new id name “data”).

add the css:

<style>
#data {
  position: fixed;
}

.animated {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
}
</style>

Work fine (Not slow).

Anyway this code is not to much modular.

better idea ( * Won’t work on mobile)

aceon · December 3, 2018, 6:36pm

Thanks you!!! The problem was that I was using $(#‘data’) instead of $(#‘data img’) inside of the function. Thank you for the suggestion of the HTML5 video, I’ve already implemented it on a different version of the site to test it out but it skips frames and lags behind if the quality goes above 480p. I’ll try using more compressed images with this version so it will take much less time to load.

Siton_Systems · December 3, 2018, 6:39pm

You welcome

In general jpeg size < less than png (Most of the times) + try to use tinyjpg

veer-littlebigthings · April 10, 2023, 7:05pm

Another option by me: Overcome Webflow custom code 10,000 character limit with CloudFlare CDN