Mini Scroller

image1_r
...
image2_r
...
image3_r
...
image4_r
...
image5_r
...
image6_r
...
image7_r
...
image8_r
...
image9_r
...
image10_r
...

Has this ever happened to you?

You are scrolling down a web page, looking for a particular image on the web page ... scrolling, scrolling, scrolling ... down, down, down ... and then you forget what you were looking for!

That won’t happen with “Click ’n Scroll,” a collaboration between “scrollPlaceholder.js” and “multi-aud-123.js.”

  • - “scrollPlaceholder.js” is the JavaScript attachment to a web page that toggles page images with smaller-file-size “placeholder" images whenever a page-image moves outside of your device’s “viewport” ... saving you precious bandwidth.
  • - “multi-aud-123.js” is the Javascript attachment to a web page that plays audio whenever you “click” on any pre-determined element on the web page that the javaScript file has provided with a “clicking” capability for audio!
image1

Here's how Click 'n Scroll works:

Step 1) You have a particular image in mind on a web page—that will be referenced by a “button” displayed on a convenient “Console” pop-up window positioned on the web page.

Step 2) You “click” on your chosen Console button.

What happens next?

Your browser then kicks in and whisks your web page to your particular image ... at which point a friendly voice will alert you that your desired destination has been reached. You don’t do a thing!

You may have turned to other activities during the scrolling process ... but now you can return to your web page and observe the image, along with its associated text, at your leisure.

You can find out more about the “multi-aud-123.js” JavaScript attachment (and about its sister JavaScript file: “multi-aud-321.js”) on this web page tutorial.

To learn more about the “scrollPlaceholder.js” attachment file, please keep reading ...

How does the 'scrollPlaceholder.js' file work?

The 'scrollPlaceholder.js' file works by replacing full-file-size images intended for viewing on a web page with smaller-file-size 'placeholder images.' This 'toggling' of images occurs whenever the images intended for viewing on a web page have moved above or below your viewing screen, as you scroll down, or scroll back up, the web page. This replacing of full-file-size images with smaller-file-size 'placeholder images' increases the speed with which a web page loads into a browser, and saves the viewer precious 'bandwidth.'

Once a link has been added to a web page’s HTML code—that points to the external javaScript/jQuery 'scrollPlaceholder.js' file—a Console panel will automatically be positioned on the web page via the 'scrollPlaceholder.js' file.

On the Console panel can be observed the following: For any image located within a device’s viewing screen (such an image will be referred to as an 'intended image' for this explanation) there will be information about that image highlighted in dark red on the Console. Whenever you scroll down (or scroll up) your web page, that 'intended image' will be replaced by a smaller-file-size 'placeholder image'—with the 'placeholder image' information highlighted on the Console in dark blue, whenever the 'intended image' moves above or below your device’s viewing screen.

image2

Steps for utilizing 'scrollPlaceholder.js'

Step 1) Add the following link to the bottom of your web page:

<script src="scripts/scrollPlaceholder.js"></script>

The external javascript/jquery 'scrollPlaceholder.js' file should be placed in a 'scripts' sub-folder within the same folder as the main HTML web page file (unless you adjust the link’s 'src attribute' value accordingly, should you place the .js file elsewhere).

Note 1: It is assummed that there is an external link on your web page to the 'jQuery library,' and that that jQuery link is positioned on the web page somewhere above the external 'scrollPlaceholder.js' link.

Example external links:

<script src="https://ajax.googleapis.com/
ajax/libs/jquery/3.4.1/jquery.min.js"
></script>

<script src="scripts/scrollPlaceholder.js"></script>
image3

Step 2) Add a class="imScr" class attribute to any or all 'img' tags on your web page. All such 'img' tags will require an 'id attribute' value in order for the 'scrollPlaceholder.js' file to work. Conveniently, any 'img' tag that does not have a set 'id attribute' value will be automatically assigned a 'temporary' id value by the 'scrollPlaceholder.js' script.

To illustrate: the first, blue-colored 'Article image1' main-page image further above, and the first, red-colored 'Mini Image 1' “Mini Scroller” image, located on the left side of this web page (or located below, on smaller screens), purposely lack a native 'id' attribute in their containing 'img' tags—so 'temporary' ids have been automatically added to each 'img' tag by their associated 'scrollPlaceholder.js/scrollPlaceholder-mini.js' javaScript file. (A 'native' id (or a 'temporary' id) allows the javaScript scripts to reference and act upon each 'img' tag as needed.)

Also, neither of the two images mentioned above had a class='imScr' class attribute manually added to their parent 'img' tags; but since their associated 'scrollPlaceholder.js' and 'scrollPlaceholder-mini.js' javaScript files had their 'addClassImScr/addClassImScrR' variables set to [true]—each 'img' tag has been automatically assigned a temporary class='imScr' class attribute.

Here is an example of an 'img' tag that has had an 'id' value and a 'class' value manually added to the tag:

<img id="firstImage" class="imScr" src="images/image1.png" alt="firstImage" title="Toggled first image">

[For initial page-testing, you may choose to leave the 'img' tag 'src attribute' values 'as is,' and set the 'scrollPlaceholder.js' variable 'pageImgOrArrayImg' to [true]—which will signal the script to auto-fill the 'imScrClassImages' array. See the 'Variable Options Section' at the top of the scrollPlaceholder.js file for details.]

For best web page performance when your web page goes 'live,' add smaller-file-size images as 'placeholder images' in lieu of the web page's 'intended images' in all script-associated 'img' tags:

<img id="firstImage" class="imScr" src="images/blank1.gif" alt="firstImage" title="Toggled first image">
image4

Step 3) Add 'placeholder images' to the 'placeholderImages' array at the top of the 'scrollPlaceholder.js' file, and add 'intended images' for the web page to the 'imScrClassImages' array—also at the top of the 'scrollPlaceholder.js' file (as shown below). Make sure that your smaller-file-size 'placeholder images' are of the same width and height as their 'intended image' counterparts, to avoid 'text-jumping' on the web page, a phenomenon that can occur when viewers scroll down or up a web page, and images used as 'placeholder images' are not of the same dimensions as the 'intended images' replacing them.

Here is an example of 'image' entries to the 'imScrClassImages' and 'placeholderImages' static arrays:

var imScrClassImages = [];
imScrClassImages.push("images/image1.png");
imScrClassImages.push("images/image2.png");
...
var placeholderImages = [];
placeholderImages.push("images/blank1.gif");
placeholderImages.push("images/blank2.gif");
...

[All 'placeholder images' used on this web page (blank1.gif ― blank10.gif) are less than 2 kilobytes in size.]

image5

Step 4) The variable 'showConsole' at the top of the 'scrollPlaceholder.js' file is set to a value of [true], by default. This default setting will result in the display of the Console panel on the web page when the web page has loaded onto your device. The Console can be used as part of the web page, or for just testing purposes.

When you are satified with your web page image-configuration, and you are going to go 'live' with your web page on a website, you can change the 'showConsole' variable’s value to [false]—and the Console panel will not display on the web page.

[The Console’s display-information can help you quickly identify the 'id,' 'file name,' and 'file dimensions' of any image on your web page that has the 'class="imScr"' class attribute added to that image’s hosting 'img' tag.]

Note 2: The 'scrollPlaceholder.js' file will also react to a web page whenever the web page is being 'resized' horizontally, as you will see documented above the Console.

Note 3: Here is a streamlined version of this web page, that utilizes 'scrollPlaceholder-light.js' and 'scrollPlaceholder-mini-light.js' javaScript files to toggle its images—with both files lacking a Console/'Mini C' console, respectively. The absence of the HTML code needed to display the Console/'Mini C' console on the web page greatly reduces each javaScript file’s 'kilobyte' size, thus saving bandwidth. You may choose to transfer your image-arrays and variable settings from this web page’s javaScript files to their associated streamlined javaScript files—once you are satisfied with how your web page displays its images.

image6

Page components

Below are links to all of the images and external files that make up this main web page (excluding the “Mini Scroller” images) should you wish to set the web page up on your home computer.

[For the images used for the “Mini Scroller,” on the left side of this web page, see this streamlined web page.]

  • Here is this page’s HTML code. ('saved' as 'scrollPlaceholder.html')
  • Here are the 'javaScript' files linked-to from this web page:
  • scrollPlaceholder.js. ('Save' to a 'scripts' sub-folder within the same folder as the 'scrollPlaceholder.html' file.);
  • scrollPlaceholder-mini.js. ('Save' to a 'scripts' sub-folder within the same folder as the 'scrollPlaceholder.html' file.);
  • multi-aud-123-sp.js. ('Save' this optional audio-playing file as 'multi-aud-123-sp.js' in a 'scripts' sub-folder within the same folder as the 'scrollPlaceholder.html' file—then create your own audio clips!);
  • multi-aud-123-spm.js. ('Save' this optional audio-playing file as 'multi-aud-123-spm.js' in a 'scripts' sub-folder within the same folder as the 'scrollPlaceholder.html' file—then create your own audio clips!).
  • Here are the “intended images” used on this main web page: ('Save' to an 'images' sub-folder within the same folder as the 'scrollPlaceholder.html' file.)
  • Here are the 'placeholder images' used on this main web page: ('Save' to an 'images' folder within the same folder as the 'scrollPlaceholder.html' file.)
  • Here is a 'generic placeholder image' that can be used on this main web page:
  • ('Save' to an 'images' sub-folder within the same folder as the 'scrollPlaceholder.html' file.)
  • Here is the 'generic placeholder image' that can be used with the “Mini Scroller” 'scrollPlaceholder-mini.js' file. [This 'generic image' is not included on the 'scrollPlaceholder-mini-light.html' page, as the streamlined 'scrollPlaceholder-light.js' and 'scrollPlaceholder-mini-light.js' javaScript-file equivalents on that web page do not include 'generic image' options—that would increase the overall size of each file.]:
  • ('Save' to an 'images' sub-folder within the same folder as the 'scrollPlaceholder.html' file.)
image7
Here is an example page where:
image8

The 'scrollPlaceholder.js' script is based largely on this stackoverflow.com article featuring this jsfiddle.net example by ally.

image9

Enjoy scrollPlaceholder.js!

Toggled blank/Article image10