What is the purpose/usage of the "no-js" class in Shopify supported themes?

Solved
Highlighted
Tourist
5 0 0

Hi, 

I've seen the "no-js" class used a lot in Shopify supported themes but i can't work out what it's purpose is.

I assumed it stood for 'no-javascript' and was a style to be applied when Javascript was disabled, but I can't match that theory with the way it's used in the code and the results obtained on the webpage. 

 

I've pasted an example header section from the Supply theme below where i don't understand the usage of "no-js"

I've highlighted "no-js" in blue below. EDIT: just realised that gets overwritten it's in this line > - <div class="lazyload__image-wrapper no-js header-logo__image" style="max-width:{{ section.settings.logo_max_width }}px;"> 

 

Could anyone explain to me the usage of "no-js" here and what it's purpose is?

I think if i understand this example then i will probably understand its usage elsewhere as well.

 

Thanks

Olly

 

<header class="site-header" role="banner" data-section-id="{{ section.id }}" data-section-type="header-section">
  <div class="wrapper">

    <div class="grid--full">
      <div class="grid-item large--one-half">
        {% if request.page_type == 'index' %}
          <h1 class="header-logo" itemscope itemtype="http://schema.org/Organization">
        {% else %}
          <div class="h1 header-logo" itemscope itemtype="http://schema.org/Organization">
        {% endif %}
          {% if section.settings.logo %}
          {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
          {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
          {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
          <a href="{{ routes.root_url }}" itemprop="url">
            <div class="lazyload__image-wrapper no-js header-logo__image" style="max-width:{{ section.settings.logo_max_width }}px;">
              <div style="padding-top:{{ 1 | divided_by: section.settings.logo.aspect_ratio | times: 100}}%;">
                <img class="lazyload js"
                  data-src="{{ img_url }}"
                  data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                  data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                  data-sizes="auto"
                  alt="{{ logo_alt | escape }}"
                  style="width:{{ section.settings.logo_max_width }}px;">
              </div>
            </div>
            <noscript>
              {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
              <img src="{{ section.settings.logo | img_url: image_size }}"
                srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
                alt="{{ logo_alt | escape }}"
                itemprop="logo"
                style="max-width:{{ section.settings.logo_max_width }}px;">
            </noscript>
          </a>
          {% else %}
            <a href="{{ routes.root_url }}" itemprop="url">{{ shop.name }}</a>
          {% endif %}
        {% if request.page_type == 'index' %}
          </h1>
        {% else %}
          </div>
        {% endif %}
      </div>

      <div class="grid-item large--one-half text-center large--text-right">
        {% if section.settings.show_announcement or shop.customer_accounts_enabled %}
          <div class="site-header--text-links{% if section.settings.announcement_text == blank %} medium-down--hide{% endif %}">
            {% if section.settings.show_announcement %}
              {% if section.settings.announcement_link != blank %}
                <a href="{{ section.settings.announcement_link }}">
              {% endif %}

                <p>{{ section.settings.announcement_text | escape }}</p>

              {% if section.settings.announcement_link != blank %}
                </a>
              {% endif %}
            {% endif %}

            {% if shop.customer_accounts_enabled %}
              <span class="site-header--meta-links medium-down--hide">
                {% if customer %}
                  {% capture first_name %}<a href="{{ routes.account_url }}">{{ customer.first_name }}</a>{% endcapture %}
                  {{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }} &middot; {{ 'layout.customer.log_out' | t | customer_logout_link }}
                {% else %}
                  {{ 'layout.customer.sign_in' | t | customer_login_link }}
                  <span class="site-header--spacer">{{ 'layout.customer.or' | t }}</span>
                  {{ 'layout.customer.create_account' | t | customer_register_link }}
                {% endif %}
              </span>
            {% endif %}
          </div>

          <br class="medium-down--hide">
        {% endif %}

        {% include 'search-bar' %}

        <a href="{{ routes.cart_url }}" class="header-cart-btn cart-toggle">
          <span class="icon icon-cart"></span>
          {{ 'layout.cart.cart' | t }} <span class="cart-count cart-badge--desktop {% if cart.item_count == 0 %}hidden-count{% endif %}">{{ cart.item_count }}</span>
        </a>
      </div>
    </div>

  </div>
</header>

 

0 Likes
Highlighted
Shopify Partner
1777 211 370

This is an accepted solution.

This class belongs to the Modernizr.js library, which when loaded would remove the no-js and replace it with js. You were correct in assuming it is used to employ different CSS rules depending on whether JavaScript is enabled or not (and Modernizr.js is loaded), but not only and not necessarily.

 

Using this technique one can change the styling using pure CSS, instead of JavaScript. Here is an example from the internets. Instead of:

$('#someSelector').hide();
$('.otherStuff').css({'color' : 'blue'});

you'd only have to do:

.js #someSelector {display: none;}
.otherStuff { color: blue; }
.no-js .otherStuff { color: green }
Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
1 Like
Highlighted
Tourist
5 0 0

Thanks for your reply.

 

I just wanted to clarify one bit though. I've pasted some screenshots of an example supply theme site i just made below.

 

I was expecting that when in inspected the html that the no-js class would not exist and a js class would be in it's place. But this doesn't seem to have happened. Have i misunderstood how this works? Or could there be something wrong with my Javascript?

 

Thanks

Olly

Capture3.PNGCapture4.PNG

0 Likes
Highlighted
Shopify Partner
1777 211 370

Unless you have errors in the console that prevent the Modernizr.js from loading properly, it might be that you don't even have/need that library in place, and the no-js are some leftovers.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes