JavaScript

When learning Javascript I think that you need to ask yourself what you want to achieve. Do you just want to be able to perform a few things on your website and understand how it works or do you really want to be an expert Javascript programmer? If it is the former than there is no shame in copying examples from W3C Schools or other sources on the Internet. If it is the later then yoo will have to learn control strutures, data types, error handling and possibly Object Oriented and Functional approaches to name just a few topics.

For the developer of a simple website you need to know a bit about DOM manipulation, i.e. changing html and css programatically. If you really get into things then you may want to look at JSON and AJAX.

The menu/template for this page

The template design has been an on-going project. The accordian menus, shown on the left on a desktop, and the behaviour of tablet and phone displays, have been developed to what you see here.

My page on The JavaScript previousElementSibling property is key to the operation of this new design.

DOM Manipulation

This is the changing of the Document Object Model of documents used on the web. This all sounds pretty "high-level" but I have found that you only need to know a little.

I have a few Javascript functions that "service" the responsive bottom menu and the expandable text facility that I have incorporated into my designs. This is a good place for me to start.

Looking at my script.js file I seem to have the Google tracking code in two places (in the page itself and the js file). At the moment I am not sure if the tracking code works in an external css file. (IT DOESN'T!) To this end I will delete the tracking code from all new pages and see if tracking still reports in GA.
UPDATE: It doesn't! However, having removed the tracking code and accessed those pages that still had the tracking from a known location I am left wondering whether GA is really of any use as the tracking was almost totally wrong.

The Javascript that controls the tracking of website visitors by interogating the Document Object and then sends that information to Google. The Javascript function added to each page in turn generates another script that incorporates your account ID and the captured data from the page and the visitor. Further analysis of this Javascript is pointless as the underlying code is propretry to Google. However it is interesting to see the parameter passing that only means something to the Google engineers.

FBM - Fixed Bottom Menu - fbm.css

The Responsive bottom menu is determined by fbm.css and the function myFunction(). The function triggers the responsive behaviour when the "hamburger" (#9776) icon is clicked.

The menu item "☰ or #9776 in hex" is:

 <a href="javascript:void(0);"  style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>

and the css

@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
}

The ----- a:not(:first-child) - is interesting here. This is another example of a CSS pseudo Class in this case the "not" operator is being used

@media screen and (max-width: 600px) {
  .navbar.responsive .icon {
    position: absolute;
    right: 0;
    bottom:0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

Expandable Sections

This is described on my page Accordian and the behaviour is determined in accordian.css - this is a good example of where it can be used. Since starting this page I have improved my documentation and revisited the accordian code

accordian.css

.accordion {

  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

button.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
}

The following JavaScript function expand() was created when I didn't really understand the code. It resulted in a double click on the button panel. I have left the code as it was to illustrate how NOT to copy code!

the Javascript

function expand() {
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) { 
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
}

We have a control loop here. A for (.. the length of the accordian ..), build an array for the number of buttons adding event listeners that toggle the hidden panels when clicked. This example only has two button-panels

Topics

A few things

• Of course, the link to CSS
• JavaScript Functions
• Advanced JavaScript - this page needs to be written - a lot of the topics are contained in the dropdown menus at top of this page
• The agreement of terms and conditions for the submission of a form - Javascript and element.scrollHeight
• Shiming external links with JavaScript