Zedric Myers

About Zedric Myers

Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
18 02, 2020

Mixitup and Bootstrap Data Toggle Interference Solution

By | 2020-02-18T07:58:14+00:00 February 18th, 2020|Categories: Web Development|Tags: , , , |

If using Mixitup and Bootstrap data-toggle attributes on the same page, you will notice conflicts where the Mixitup “mixitup-control-active” class will be applied to all data-toggle references for a toggle button.

To remedy this, you can add the following code to your Mixitup buttons and Mixitup script.

Add this attribute to each button of the Mixitup buttons only.




Next, add the following code to your Mixitup script.


6 09, 2019

Output HTML Syntax Characters from RSS Feeds to Preview Correctly for Cascade

By | 2019-09-06T09:25:33+00:00 September 6th, 2019|Categories: Web Development|Tags: , , , |

This applies to Cascade Velocity formats. If you’ve ever had to pull in content through an external feed that has rich HTML, this piece of code may help you. Sometimes you may see HTML tags or code output into the content of the page. Such as, <Content goes here.>.

This code will take the HTML syntax you would like to replace and output as standard HTML tags, so that when a user looks at the page, it’s properly formatted for them using the HTML provided in the feed.

With this code you can continue to add or daisy chain replaceAll code, as needed.

Example code to update:

$_SerializerTool.serialize($departmentContent, true).replaceAll(“&lt;”, “<“).replaceAll(“&gt;”, “>”)

4 06, 2019

Background Parallax Image Fix in Sliders or Content

By | 2019-05-31T14:57:14+00:00 June 4th, 2019|Categories: Web Development|Tags: , , , |

If your project requires parallax background images, you’ll want to keep this note in mind. If your slider or content area that the parallax resides in has a 3D transform attached, you’ll want to remove that code for the background parallax image to properly work. You’ll notice it works well in Chrome and Safari before doing this, but other browsers such as Edge and Firefox would not properly work.

Example code to update:

.parent { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; }

.sibling { background-attachment: fixed; }

7 05, 2019

Font Awesome 5 Custom CSS Icon Style Requirement

By | 2019-05-07T14:42:02+00:00 May 7th, 2019|Categories: Web Development|Tags: , , |

This is just a quick helpful how to tip for Font Awesome 5 custom CSS icon fonts. When adding your own custom styling to the fonts, be sure to add a font-weight: 900 style. This will allow the icon to properly show on the page. Otherwise, you may get an empty icon placeholder in the web browser.


Using a Font Awesome in CSS Styles:

.item:before { font-family: ‘Font Awesome\ 5 Free’; font-weight: 900; }

11 12, 2018

How to add ARIA Labels for HTML SECTION and DIV Tags

By | 2018-12-11T08:32:27+00:00 December 11th, 2018|Categories: Web Development|Tags: , , |

This is an example of ARIA labels for screen readers that read ARIA labels. It ultimately helps the end user.

When you have a portion on the content in a section, it must contain a Head tag. If however is does not contain a head tag, and needs an aria-label to describe the section, simply add the region role.

This will allow the screen reader to detect it as a new region and then it will read out the ARIA label.


Using a SECTION Tag:

<section aria-label=”Brief description of this section”> <h2>Heading Title</h2> <p>Content area content</p> </section>

Using a DIV Tag:

<div role=”region” aria-label=”Brief description of this area”> <p>Content area content</p> </div>

20 08, 2018

How to Close a Toggle Menu with an Outside Click

By | 2018-08-20T12:17:00+00:00 August 20th, 2018|Categories: Web Development|Tags: , , , , |

Adding a toggle menu is nice and straight forward with your preference of CSS or jQuery, but when you want to be able to click outside of the menu and close you will need to add a little more jQuery functionality.

This option adds a few extra lines of jQuery, but overall very simple way to close the menu when clicking outside the menu button area or the expanded menu, itself.

Please note, in this example we use specific areas instead of on “document” click. It can cause issues in certain browsers, depending on the options setup for the toggle menu. The example assumes you already have the toggle menu in place.

jQuery Example:

28 06, 2018

How to Add a Simple Visual Loading Technique

By | 2018-06-28T08:40:11+00:00 June 28th, 2018|Categories: Web Development|Tags: , , , , |

Adding a simple loader message to a content heavy page adds for a better user experience. So for instance, if you have a large data table or directory listing that doesn’t load nicely. This can be updated to a simple loading message until the content has finished loading.

Also, adding in a little spinner or indicator is a nice touch to show the page is processing information.

Step 1: Create your loading CSS styles and HTML structure.

Step 2: Add the jQuery and update to your classes, as needed.

Step 3: Add the noscript tag with appropriate styles to show content for viewers browsers that have Javascript disabled.



.loading-content { visibility: hidden; }


jQuery(window).load(function () {





<div class=”loading”><strong>Loading Information </strong> <img src=”/images/icons/loader.gif” alt=”Loading”/></div>

<div class=”content-area loading-content”> Content that will be loaded. </div>



.loading-content { visibility: visible; }

.loading { display: none; }



21 05, 2018

Accessible Menus or Closed Items Using the Input Checkbox Method

By | 2018-05-21T07:02:38+00:00 May 21st, 2018|Categories: Web Development|Tags: , , |

When using the checkbox method to open and close an element, you don’t want to hide the input box. Doing that will make it non-accessible. Instead use this method for visual reference, but still allowing a keyboard to access the input checkbox.

Input Checkbox CSS:

input#IDname { position: absolute; display: inline; height: 0; width: 0; margin: 0; padding: 0; border: none; opacity: 0; }

Note: Make the action item the end user sees with an outline to indicate that they have something to access.

24 01, 2018

Cascade Velocity Locator Tool

By | 2018-01-24T09:14:18+00:00 January 24th, 2018|Categories: Cascade CMS|Tags: , , , , , |

The Cascade Velocity Locator Tool allows the Cascade page to render faster internally in the CMS system. It supports up to 500 query items on a page. For example, if you have a large list of data that needs to display on a listing page such as news articles, the Cascade Velocity Locator Tool is a great for rendering that data.

Please note, this is just within Cascade to help processing the page while loading information in the preview pane. This does not affect the actual page while in a live web browser.

The Velocity Locator Tool is very robust and this example is a simple setup for demonstration purposes to show the Locator tool and set values of different types. This assumes that you’ve already created the content type to pull from using the Locator Tool.

Example of setting the Locator Tool and initializing variables:

## Use the Locator Tool to find requested pages

#set ( $query = $_.query() )

#set ( $query = $query.byContentType(“site://***SITE NAME HERE***/Desired Page”) )

## Set the query tool to search by content type.

#set ( $query = $query.includePages(true) )

#set ( $query = $query.maxResults(500) )

#set ( $query = $query.siteName(“***SITE NAME HERE***”) )

#set ( $query = $query.sortBy(“created”) )

#set ( $query = $query.sortDirection(“desc”) )

#set ( $newsArticles = $query.execute() )

## Initialize variables

#set ( $newsDate = “” ) #set ( $title = “” ) #set ( $summary = “” ) #set ( $newsLink = “” ) #set ( $imageSrc = “” ) #set ( $imageAltText = “” )

## Set variables

#set ( $newsDate = $_EscapeTool.xml($newsArticle.getStructuredDataNode(“page-content/news-info/release-date”).textValue) )

#set ( $title = $_EscapeTool.xml($newsArticle.metadata.Title) )

#set ( $summary = $_EscapeTool.xml($newsArticle.getStructuredDataNode(“page-content/news-info/summary”).textValue) )

#set ( $newsLink = $newsArticle.link )

#set ( $imageSrc = $newsArticle.getStructuredDataNode(“page-content/news-info/image”).asset.link )

#set ( $imageAltText = $_EscapeTool.xml($newsArticle.getStructuredDataNode(“page-content/news-info/image-alt-text”).textValue) )

Source: Hannon Hill

13 12, 2017

WCAG 2.0 Checklist

By | 2017-12-11T13:31:39+00:00 December 13th, 2017|Categories: Web Development|Tags: , |

An accessible website is important for any website, but especially for higher education driven websites. 508 is equally important, but this article covers WCAG 2.0 specifically.

The WCAG 2.0 checklist is a great place to start.

There are three levels: A (beginner), AA (Intermediate) most colleges abide by this level, and AAA (Advanced)

At a glance:

A Level (Beginner):

1.1.1 – Non-text Content Provide text alternatives for non-text content

1.2.1 – Audio-only and Video-only (Pre-recorded) Provide an alternative to video-only and audio-only content

1.2.2 – Captions (Pre-recorded) Provide captions for videos with audio

1.2.3 – Audio Description or Media Alternative (Pre-recorded) Video with audio has a second alternative

1.3.1 – Info and Relationships Logical structure

1.3.2 – Meaningful Sequence Present content in a meaningful order

1.3.3 – Sensory Characteristics Use more than one sense for instructions

1.4.1 – Use of Colour Don’t use presentation that relies solely on colour

1.4.2 – Audio Control Don’t play audio automatically

2.1.1 – Keyboard Accessible by keyboard only

2.1.2 – No Keyboard Trap Don’t trap keyboard users

2.2.1 – Timing Adjustable Time limits have user controls

2.2.2 – Pause, Stop, Hide Provide user controls for moving content

2.3.1 – Three Flashes or Below No content flashes more than three times per second

2.4.1 – Bypass Blocks Provide a ‘Skip to Content’ link

2.4.2 – Page Titled Use helpful and clear page titles

2.4.3 – Focus Order Logical order

2.4.4 – Link Purpose (In Context) Every link’s purpose is clear from its context

3.1.1 – Language of Page Page has a language assigned

3.2.1 – On Focus Elements do not change when they receive focus

3.2.2 – On Input Elements do not change when they receive input

3.3.1 – Error Identification Clearly identify input errors

3.3.2 – Labels or Instructions Label elements and give instructions

4.1.1 – Parsing No major code errors

4.1.2 – Name, Role, Value Build all elements for accessibility

AA Level (Intermediate):

1.2.4 – Captions (Live) Live videos have captions

1.2.5 – Audio Description (Pre-recorded) Users have access to audio description for video content

1.4.3 – Contrast (Minimum) Contrast ratio between text and background is at least 4.5:1

1.4.4 – Resize Text Text can be resized to 200% without loss of content or function

1.4.5 – Images of Text Don’t use images of text

2.4.5 – Multiple Ways Offer several ways to find pages

2.4.6 – Headings and Labels Use clear headings and labels

2.4.7 – Focus Visible Ensure keyboard focus is visible and clear

3.1.2 – Language of Parts Tell users when the language on a page changes

3.2.3 – Consistent Navigation Use menus consistently

3.2.4 – Consistent Identification Use icons and buttons consistently

3.3.3 – Error Suggestion Suggest fixes when users make errors

3.3.4- Error Prevention (Legal, Financial, Data) Reduce the risk of input errors for sensitive data

AAA Level (Advanced):

1.2.6 – Sign Language (Pre-recorded) Provide sign language translations for videos

1.2.7 – Extended Audio description (Pre-recorded) Provide extended audio description for videos

1.2.8 – Media Alternative (Pre-recorded) Provide a text alternative to videos

1.2.9 – Audio Only (Live) Provide alternatives for live audio

1.4.6 – Contrast (Enhanced) Contrast ratio between text and background is at least 7:1

1.4.7 – Low or No Background Audio Audio is clear for listeners to hear

1.4.8 – Visual Presentation Offer users a range of presentation options

1.4.9 – Images of Text (No Exception) Don’t use images of text

2.1.3 – Keyboard (No Exception) Accessible by keyboard only, without exception

2.2.3 – No Timing No time limits

2.2.4 – Interruptions Don’t interrupt users

2.2.5 – Re-authenticating Save user data when re-authenticating

2.3.2 – Three Flashes No content flashes more than three times per second

2.4.8 – Location Let users know where they are

2.4.9 – Link Purpose (Link Only) Every link’s purpose is clear from its text

2.4.10 – Section Headings Break up content with headings

3.1.3 – Unusual words Explain any strange words

3.1.4 – Abbreviations Explain any abbreviations

3.1.5 – Reading Level Users with nine years of school can read your content

3.1.6 – Pronunciation Explain any words that are hard to pronounce

3.2.5 – Change on Request Don’t change elements on your website until users ask

3.3.5 – Help Provide detailed help and instructions

3.3.6 – Error Prevention (All) Reduce the risk of all input errors

Source: https://wuhcag.com/wcag-checklist/

Load More Posts