JSFiddle

  • CSS nav work

    No-Library (pure JS), HTML, CSS, JavaScript

    <div id="nav_container">
                <ul id="nav_secondary" class="secondary_nav">
                    <li><a href="http://shop.trex.com" target="_blank"><img src="/Custom/images/trexmd_013348.png"> Order Samples</a></li>
                    <li><a href="/find-trex/">Where to buy</a></li>
                    <li><a href="/find-a-contractor/">Find a deck builder</a></li>
                    <li><a href="/trex-owners/">Trex<sup>®</sup> Owners</a></li>
                    <li class="social" id="searchbutton"><a href="#" onclick="showhideGSA()"><i class="icon-search"></i></a></li>
                    <li>
                        <ul id="searchinput" style="display: none;">
                            <li class="quickSearch">
                                <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input type="text" class="ui-gsa-autocomplete-input ui-autocomplete-input" name="q" id="GSAHeaderQueryText" onkeypress="checkForEnter(event, this)" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" placeholder="search" style="color: rgb(135, 135, 135); font-style: normal;">
                                <button type="submit" onclick="doSearch('GSAHeaderQueryText')"><i class="icon-search"></i></button>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
  • Single line or long if

    Which is better?

    $("#btnShortIf").click(function(){
    	var count = $("#txtCount").val();
    	count != 1 ? $("#inputMessage-counter").html(count + " characters.") : $("#inputMessage-counter").html(count + " character.");
    });
    
    $("#btnLongIf").click(function ...
  • Textarea counter

    Someone said it was tricky. Doesn't look tricky.

    $("#test").keyup(function(){
    	var count = $(this).val().length;
      $("#numbers").html(count);
    });
  • Why sup TM?

    jQuery 3.1.1, HTML, CSS, JavaScript

    $("#supHeight").html($("p:nth-child(1)").height());
    $("#noSupHeight").html($("p:nth-child(2)").height());
  • JS Object

    No-Library (pure JS), HTML, CSS, JavaScript

    function Awesome() {
    	this.divID = "";
    	this.divElement = function(ID) {
    		return document.getElementById(this.divID);
    	};
      this.buttonID = "";
      this.buttonElement = function(ID) {
      	return ...
  • Interaction Class 2

    One way to make this like a class?

    var dealerSiteInteractions = {
    	backButtonID: "", 
    	backButton: "",
    	pageReferrer: document.referrer,
    	displayButton: function() {
    		if (this.pageReferrer.indexOf("trex.com") < 0) {
    			return "none";
    		}
    		else {
    			return ...
  • Interaction Class 1

    One way to make this like a class?

    function dealerSiteInteractions() {
    	this.backButtonID = "";
    	this.backButton = function(ID) {
    		return document.getElementById(this.backButtonID);
    	};
    	this.pageReferrer = document.referrer;
    	this.displayButton = function ...
  • JavaScript Namespace 3

    No-Library (pure JS), HTML, CSS, JavaScript

    var jeremy = {
    	TestVariable: "",
      TestVariableDay: function() {
    		var d = new Date();
    		var weekday = new Array();
    		weekday.push("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday ...
  • Object or namespace v. 2

    No-Library (pure JS), HTML, CSS, JavaScript

    var jeremy = jeremy || {};
    
    (function(){
    	var TestVariable1;
      this.TestVariableDay = function() {
      	var d = new Date();
        var weekday = new Array();
        weekday.push("Sunday ...
  • JavaScript Namespace 2

    No-Library (pure JS), HTML, CSS, JavaScript

    var jeremy = {};
    
    (function(){
    	var TestVariable1;
      this.TestVariableDay = function() {
      	var d = new Date();
        var weekday = new Array();
        weekday.push("Sunday", "Monday ...