• w3.org
• csswizardry.com
• css-tricks.com

Order of elements for a CSS document.

• Root & Document
• Sections
• Groupings
• Text Level
• Forms
• Embedded Content & Scripts
• Tabular Data

Toggling dependencies

1. Toggling between two functions - Resolved
2. $(this) used for element specific triggers - Resolved
3. Inverted selections - Resolved
4. Double click toggles - Pending (browser issues)

After 2:30hrs a refined solution was accomplished:
Code was reduced and redesigned to work with an unlimited number of elements.

Research questions to follow up:

$("h1").one("click", handler1);
I'm unsure of the .one click as when the user double-clicks the mouse you encounter obvious issues. Look into a timer to listen for the interval between the two clicks.

Found two solutions for :
clickToggle(function()

However, the main outcome and frustration is the need for:
Simple tracking or a diagnostic method for toggling states and jQuery animations.

Note to self: look at how the code extractions are toggled.

z-index, works with position realtive.

• stackoverflow.com
• css-tricks.com

Landing page, populate via sub menu.

Manually entered content, provides further information specifically related to sub menu options for the projects landing page.

Nodes start a 1 not zero,

// background image runs throughout the animation,

//$("div.new-carousel ul li:first-child").show();

$("div.new-carousel ul li:nth-child(1)").show();

15/09/17

Responsive dropdown options.

Blocked URL calls,

When selected, don't request a browser URL refresh.
//$(this).addClass("click");$(this).removeClass("click");

Remove toggle functionality:

// e.preventDefault(); $(this).parent().toggleClass('tap');?

Remove element propagation

Remove element attribute from being transmitted through to child / sibling elements.
//event.stopPropagation(); //

Research:

• stackoverflow.com
• stackoverflow.com
• stackoverflow.com
• andismith.com
• stackoverflow.com

Unorthodox Code! Repeated class selectors

Okay, why not? Ahh, the inspector doesn't combine or provide all the repeated CSS statements.

I've seen on the web many examples of an element being called more than once in terms of defining CSS attributes.

This is often used, for instance with setting fonts to keep consistency throughout the site.

However, even though I've never seen this and it helps so much when navigating a CSS document. If you define the CSS into categories such as: wireframe and style etc.. The inspector does not distinguish between specificity as it should.

Here is an example of the same script written with single class selectors and with repeated same class selectors:

• nav.css (original code)
• nav-repeated-class-selectors.css (original code) Repeated class selectors.

When researching solutions and analysing code extracts.

Often programmers will name either constans or integers with either similar or the same names as variables, perhaps to save time or to establish the dependency.

This can create great confusion in the learning process.

One way of thinking about this is similar to:

Going to the library and asking for a book about books. Or as a band naming your album tracks. "Tracks".

Task, research and rough notes.

Further info,