Brian's public fiddles
-
Example of a function
Simple example of a function in JavaScript. Note that it is generally considered best practice for function to have a single return, rather than two returns, one in the “then” clause and the other in the “else” clause of an if-then-else statement.
-
Array push, pop, and length demo
This demonstration enables studnets to experiment with the Array object and some of its methods.
-
Ternary operator
This simple demo shows the ternary operator in conjunction wtih strict and normal equalty/inquality operators
-
Equality and Inequalty operators
Demonstration of strict and normal equality and inequality operators
-
Shopping Cart - Basic Layout
Uses CSS to layout for a basic web site, such as might be used for a shopping service.
-
Div Button
A simple button using div element and CSS only.
-
Shopping Cart - DOM editing
This demo extends the shopping cart to include DOM editing.
-
relative positioning
Shows how child elements are positioed relative to the parent when the parent uses relative positioning.
-
CBOK example
No-Library (pure JS), HTML, CSS, JavaScript
-
Flow example 2
This is a progressive example examining document flow. The example changes flow properties for paragraphs, which uses block-level boxes by default.
-
Flow Example 2
This is a simple example of block-level flow using div elements.
-
CSS Box Model
Experiment with padding, margin and border.
-
Hover pseudo-class
This example shows the hover pseudo-class. The rule selects
-
Adjacent sibling combinator
An example of the adjacent sibling combinator.
-
child selector
This shows how the child combinator is used. This fiddle enables you to experiment with out this is different from the descendant combinator.
-
Table without tables.
This is a simple demonstration showing how to create a table without using tables. The example uses div and p tags with CSS only.
-
Descendant selector example
Select all paragrahs that are descendants of header and set the size.
-
Class Selector (.)
This style specification has a rule that says div tags will be 500x500 pixels and white. “.” is a selector used to match elements of a given class. This example defines a class called mydiv with width and height set to 100 pixels and background colour set to grey. It is a more specific rule that the element selecltor, but it only applies to elements of class mydiv. A class selector rule can be overridden with a more specific rule, such as one that selects id. The order of in which the element, id and class selectors as specified makes no difference with respect to the rule specificity. An id selector is more specific than a class selector. An a class selector is more specific than an element selector. Given this, what is the background color for div1, div2, div3, and div4? Use a class selector for a collection of things that will be styed in the same way. Can you think of an example of this in practice? Consider what might be defined as a class in web sites you visit regularly.
-
Example if id selector
Use the ID selector (#) to select an element with a unique ID.
-
Week 3 - Simple Menu
Simple horizontal menu using psuedo-class hover and block float left.