Skip to main content
Code Review

Return to Question

Removed semicolon to preserve consistency with uses of 'use script' and 'be' somehow returned to question 2
Source Link
Chimera.Zen
Chimera.Zen
  • 257
  • 2
  • 12
  1. Some places had said just using 'use strict'; at the top is enough and there's no need to use the function method. Is there a reason I would prefer one over the other in this case?
  2. Is it be better to use pure JS for most cases and jQuery as a supplement rather than the framework? I'm curious about reducing load times, etc.
  3. Should most external sources be loaded async? I assume in this case, I want to ensure that jQuery has fully loaded before my script ever runs or else it'll throw some sort of jQuery is undefined error, but I can load my script async as long as I ensure all of my functions are scoped within a document.ready() function due to them interacting with the DOM?
  1. Some places had said just using 'use strict'; at the top is enough and there's no need to use the function method. Is there a reason I would prefer one over the other in this case?
  2. Is it be better to use pure JS for most cases and jQuery as a supplement rather than the framework? I'm curious about reducing load times, etc.
  3. Should most external sources be loaded async? I assume in this case, I want to ensure that jQuery has fully loaded before my script ever runs or else it'll throw some sort of jQuery is undefined error, but I can load my script async as long as I ensure all of my functions are scoped within a document.ready() function due to them interacting with the DOM?
  1. Some places had said just using 'use strict' at the top is enough and there's no need to use the function method. Is there a reason I would prefer one over the other in this case?
  2. Is it better to use pure JS for most cases and jQuery as a supplement rather than the framework? I'm curious about reducing load times, etc.
  3. Should most external sources be loaded async? I assume in this case, I want to ensure that jQuery has fully loaded before my script ever runs or else it'll throw some sort of jQuery is undefined error, but I can load my script async as long as I ensure all of my functions are scoped within a document.ready() function due to them interacting with the DOM?
deleted 1 character in body; edited title
Source Link
Jamal
Jamal
  • 35.2k
  • 13
  • 134
  • 238

jQuery Tab Scroller [Follow Up]-follow-up

  • callsCalls for jQuery and Font Awesome have been included in the HTML head
  • correctedCorrected naming conventions
  • removedRemoved multiple occurrences of 'use strict''use strict'
  • mergedMerged everything within a self-contained function
  • ;; at beginning is due to my reading that this helps prevent conflicts with other programs
  • renamedRenamed function tab_switch()tab_switch() to function toggle_class()toggle_class()
  • changedChanged .css().css() to .toggleClass().toggleClass()

QUESTIONSQuestions

  1. Some places had said just using 'use strict';'use strict'; at the top is enough and and there's no need to use the function method. Is there a reason I would would prefer one over the other in this case?
  2. Is it be better to use pure JS for most cases and jQuery as a supplement rather than the framework? I'm curious about reducing load times, etc.
  3. Should most external sources be loaded async? I assume in this case, I want to ensure that jQuery has fully loaded before my script ever runs or else it'll throw some sort of jQuery is undefined error, but I can load my script async as long as I ensure all of my functions are scoped within a document.ready()document.ready() function due to them interacting with the DOM?

jQuery Tab Scroller [Follow Up]

  • calls for jQuery and Font Awesome have been included in the HTML head
  • corrected naming conventions
  • removed multiple occurrences of 'use strict'
  • merged everything within a self-contained function
  • ; at beginning is due to my reading that this helps prevent conflicts with other programs
  • renamed function tab_switch() to function toggle_class()
  • changed .css() to .toggleClass()

QUESTIONS

  1. Some places had said just using 'use strict'; at the top is enough and there's no need to use the function method. Is there a reason I would prefer one over the other in this case?
  2. Is it better to use pure JS for most cases and jQuery as a supplement rather than the framework? I'm curious about reducing load times, etc.
  3. Should most external sources be loaded async? I assume in this case, I want to ensure that jQuery has fully loaded before my script ever runs or else it'll throw some sort of jQuery is undefined error, but I can load my script async as long as I ensure all of my functions are scoped within a document.ready() function due to them interacting with the DOM?

jQuery Tab Scroller -follow-up

  • Calls for jQuery and Font Awesome have been included in the HTML head
  • Corrected naming conventions
  • Removed multiple occurrences of 'use strict'
  • Merged everything within a self-contained function
  • ; at beginning is due to my reading that this helps prevent conflicts with other programs
  • Renamed function tab_switch() to function toggle_class()
  • Changed .css() to .toggleClass()

Questions

  1. Some places had said just using 'use strict'; at the top is enough and there's no need to use the function method. Is there a reason I would prefer one over the other in this case?
  2. Is it be better to use pure JS for most cases and jQuery as a supplement rather than the framework? I'm curious about reducing load times, etc.
  3. Should most external sources be loaded async? I assume in this case, I want to ensure that jQuery has fully loaded before my script ever runs or else it'll throw some sort of jQuery is undefined error, but I can load my script async as long as I ensure all of my functions are scoped within a document.ready() function due to them interacting with the DOM?
Source Link
Chimera.Zen
Chimera.Zen
  • 257
  • 2
  • 12

jQuery Tab Scroller [Follow Up]

This is a follow-up to the thread jQuery Tab Scroller. Adjusts have been made based on community suggestions, and here is the updated JSFiddle.

  • calls for jQuery and Font Awesome have been included in the HTML head
  • corrected naming conventions
  • removed multiple occurrences of 'use strict'
  • merged everything within a self-contained function
  • ; at beginning is due to my reading that this helps prevent conflicts with other programs
  • renamed function tab_switch() to function toggle_class()
  • changed .css() to .toggleClass()

QUESTIONS

  1. Some places had said just using 'use strict'; at the top is enough and there's no need to use the function method. Is there a reason I would prefer one over the other in this case?
  2. Is it better to use pure JS for most cases and jQuery as a supplement rather than the framework? I'm curious about reducing load times, etc.
  3. Should most external sources be loaded async? I assume in this case, I want to ensure that jQuery has fully loaded before my script ever runs or else it'll throw some sort of jQuery is undefined error, but I can load my script async as long as I ensure all of my functions are scoped within a document.ready() function due to them interacting with the DOM?

/**
 * Name:        jQuery Tab Scroller
 * Description: A tab scroller using jQuery
 * @package     Chimera Apps
 * @version     1.1.0
 * @author      Chimera.Zen
 * @copyright   Copyright (c) 2017, Chimera.Zen
 * @link        https://github.com/ChimeraZen
 * @license     http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
 */
;(function($){
  'use strict';
  var scroll_distance = 275,    // Distance .tab-container should scroll when <i> is clicked
      animate_speed   = 400;    // Speed at which .tab-container should animate the scroll

  /** Load the scroller details **/
  function get_scroll_details(scroller) {
    var tab_true_width  = Math.round(scroller.siblings('.tab-container').children('ul').width()),
        container_width = Math.round(scroller.siblings('.tab-container').width()),
        left_scrolled   = Math.round(scroller.siblings('.tab-container').scrollLeft()),
        scrolls = {
          "distance" : tab_true_width - container_width,
          "left_scrolled" : left_scrolled,
          "remaining" : tab_true_width - container_width - left_scrolled,
          "scroll_next" : scroller.parent().children('.scroller.next'),
          "scroll_prev" : scroller.parent().children('.scroller.prev')
        };
    return scrolls;
  }

  /** Tab Scroller **/
  function toggle_class(scroller) {
    var scrolls      = get_scroll_details(scroller),
        next_visible = scrolls.leftscrolled === 0 || scrolls.remaining !== 0,
        prev_visible = scrolls.remaining === 0 || scrolls.left_scrolled !== 0;
    scrolls.scroll_next.toggleClass('visible', next_visible).toggleClass('hidden', !next_visible);
    scrolls.scroll_prev.toggleClass('visible', prev_visible).toggleClass('hidden', !prev_visible);
  }

  /** Animate and check if <i> visibility needs to switch **/
  function scroll_it(scroller, scroll) {
    scroller.siblings('.tab-container').animate({scrollLeft: scroll}, animate_speed, function () {
      toggle_class(scroller);
    });
  }

  /** Animate & Scroll on Click **/
  $('.scroller.next').click(function () {
    var scroller  = $(this),
        scrolls   = get_scroll_details(scroller);
    if (scrolls.remaining >= scroll_distance) {
      scroll_it(scroller, scrolls.left_scrolled + scroll_distance);
    } else {
      scroll_it(scroller, scrolls.left_scrolled + scrolls.remaining);
    }
  });

  $('.scroller.prev').click(function () {
    var scroller  = $(this),
        scrolls   = get_scroll_details(scroller);
    if (scrolls.leftscrolled !== 0) {
      scroll_it(scroller, scrolls.left_scrolled - scroll_distance);
    } else {
      scroll_it(scroller, 0);
    }
  });
})(jquery);
.tab-scroller{
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  max-height: 50px;
}
.tab-container{
  max-width: 50%;
  overflow: hidden;
}
.tab-scroller i {
  padding: 15px;
  font-size: 20px;
  cursor: pointer;
}
.tab-scroller .tab-container ul{
  display: flex;
  width: max-content;
  padding: 0;
}
.tab-scroller .tab-container li{
  display: flex;
  margin-right: 10px;
}
.tab-scroller .tab-container li:last-child{
  margin-right: 0;
}
.visible{
  visibility: visible;
}
.hidden{
  visibility: hidden;
}
<html>
  <head>
    <link type="text/css" src="tab-scroller.css" />
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="tab-scroller.js"></script>
  </head>
  <body>
    <div class="tab-scroller">
      <!-- <i class="scroller prev">&lt;</i> -->
      <i class="fa fa-chevron-left scroller prev"></i>
      <div class="tab-container">
        <ul>
          <li>Archery</li>
          <li>Baseball</li>
          <li>Basketball</li>
          <li>Boxing</li>
          <li>Football</li>
          <li>Golf</li>
          <li>Soccer</li>
          <li>Surfing</li>
        </ul>
      </div>
      <!-- <i class="scroller prev">&gt;</i> -->
      <i class="fa fa-chevron-right scroller next"></i>
    </div>
  </body>
</html>