A Little JavaScript Project: A Photo Slider

The following are lessons posted on Facebook, using a W3Schools project:

4/27/20: A Little JavaScript Lesson: Scope is More than Mouthwash

When we used the code from the W3Schools slider, we noticed one odd thing: the dots for each photo were on the other side of the page. Looking at the code I realized it was a scope problem; the dots are not inside the slideshow-container div because it ends right after the Previous and Next links.

When we moved the </div> under the dots, they were under the photo space where they belonged. That is called scope.

When the dots were in the wrong place, they were outside the scope of the slideshow-container layer. Once they were within the scope of the slideshow-container, they were positioned correctly.

<div class=”slideshow-container”>

<!– Full-width images with number and caption text –>

<div class=”mySlides fade”>
<div class=”numbertext”>1 / 3</div>
<img src=”img1.jpg” style=”width:100%”>
<div class=”text”>Caption Text</div>
</div><!– end mySlides (1) –>

<!– Next and previous buttons –>
<a class=”prev” onclick=”plusSlides(-1)”>&#10094;</a>
<a class=”next” onclick=”plusSlide

s(1)”>&#10095;</a>
</div><!– end slideshow-container –> – ooops, layer is closed too soon
<br>

<!– The dots/circles –>
<div style=”text-align:center”>
<span class=”dot” onclick=”currentSlide(1)”></span>
<span class=”dot” onclick=”currentSlide(2)”></span>
<span class=”dot” onclick=”currentSlide(3)”></span>
</div>

This is a g

ood example of why it’s so important to be able to read and debug code, even if you get the code from a trusted source.

5/5/20: Being Aware of Marketing
File names helpful to marketing

I’ve heard that a good optometrist can spot heart disease and diabetes by looking into the eye. I know that a good coder can spot web marketing problems by looking at file name

s. If your file names look like those in the first screenshot, your site has a marketing loss.

File names not helpful to marketing

In our little Javascript slider project, it might not seem like a marketing project, but why bother having the images on a website at all, if it’s not marketing. So, the question becomes, is the person doing the coding responsible to be concerned about a marketing topic?

I say yes! And, my clients can tell you I am most persistent about it.

5/15/20: You Need to Understand CSS, Too

One of the missing elements in learning to “program” for the web is that the basic structures of websites are HTML and CSS. All the programming is the furniture, not the walls. One time, I was asked to teach the basics of CSS … in 45 minutes. I failed miserably.

So, if you are planning to learn to program for the web, give yourself some time to learn CSS. Here is an example:
*
{
box-sizing:border-box;
}

This is the first line of CSS for the project.
1. * means that this set of rules applies to all layers (style).
2. { and } are the beginning and end of a layer.
3. What is between the curly braces is a rule. Rules are name – value pairs. The rule is box-sizing and the value is border-box.
4. A long term problem with CSS is that the width of a layer didn’t include the border or the margin. This was misleading because it didn’t tell you how much space a layer needed.
5. Now, you can set the box-sizing rule to content-box or border-box. Content-box is the old way of measuring. Border-box includes the margin and the border.

This project sets all layer sizes to the actual space it will take on the page.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.