Frank Wisniewski

Posted on Jun 30, 2022

Do you need a selector engine like jQuery, Sizzle or something else?

#javascript #programming #html

the following example:

create a ScrollToTop button in vanilla - old school style

"use strict";

  document.addEventListener( 'DOMContentLoaded', function () {

    const scrollButton = document
      .createElementNS( 'http://www.w3.org/2000/svg', 'svg' );

      scrollButton.setAttributeNS( 'http://www.w3.org/2000/xmlns/', 
        'xmlns:xlink', 'http://www.w3.org/1999/xlink' );
      scrollButton.setAttribute( 'viewBox', "0 0 100 100" );

      scrollButton.style.width ='50px'
      scrollButton.style.position = 'fixed'
      scrollButton.style.right = '10px'
      scrollButton.style.bottom = '10px'
      scrollButton.style.zIndex = '1000'
      scrollButton.style.opacity = '0.5'
      scrollButton.style.cursor = 'pointer'
      scrollButton.style.transition = 'all ease 400ms'
      scrollButton.style.display = 'none'

    const myCircle = document
      .createElementNS( 'http://www.w3.org/2000/svg', 'circle' );
      myCircle.setAttribute( 'cx', '50' );
      myCircle.setAttribute( 'cy', '50' );
      myCircle.setAttribute( 'r', '50' );
      myCircle.setAttribute( 'fill', 'red' );

    scrollButton.appendChild( myCircle );

    const myArrow = document
      .createElementNS( 'http://www.w3.org/2000/svg', 'path' );

      myArrow.setAttribute( 'd', 'M50 80 L50 20 M50 20 L80 50 M50 20 L20 50' );
      myArrow.setAttribute( 'stroke', 'white' );
      myArrow.setAttribute( 'stroke-width', '15' );
      myArrow.setAttribute( 'stroke-linecap', 'round' );

    scrollButton.appendChild( myArrow );

    scrollButton.addEventListener( 'mouseover', 
      () => scrollButton.style.opacity = '1'
    );

    scrollButton.addEventListener( 'mouseout', 
      () => scrollButton.style.opacity = '.3'
    );

    scrollButton.addEventListener( 'click',  () => document
      .querySelector( 'body' )
      .scrollIntoView( { behavior: 'smooth' } )
    );

    document.body.appendChild( scrollButton );

    window.onscroll = () =>
      scrollButton.style.display =
          ( document.querySelector( 'html' ).scrollTop / 
           ( document.querySelector( 'html' ).scrollHeight - 
            document.querySelector( 'html' ).clientHeight ) ) > 0.25
        ? '' : 'none';

  })

now the same solution using a selector engine.
In this example I used my own engine, it doesn't matter for the comparison.

<script type="text/javascript" src="https://w-web.de/myquery/myquery-min.js"></script>

<script type="text/javascript" src="https://w-web.de/myquery/myquery.js"></script>

"use strict";
$().ready( () => {

    let scrollButton = 
      $().sCreate( '0 0 100 100' )

      .styles()
        .width(  '50px' ).position( 'fixed' )
        .right( '10px' ).bottom( '10px' )
        .zIndex( '1000' ).opacity( '0.3' )
        .cursor( 'pointer' ).transition( 'all ease 400ms' )
        .display( 'none' ).parent()

      .sAppend( 
        $().sCircle( 50, 50, 50 ).fill( 'red' ) )

      .sAppend(
        $().sPath( 'M50 80 L50 20 M50 20 L80 50 M50 20 L20 50' )
          .shortStroke( 'white' , '15', 'round' ) )

      .on( 'mouseover', function (){ this.style.opacity = '1' } )

      .on( 'mouseout', function (){ this.style.opacity = '.3' } )

      .click( () => $( 'body' ).n.scrollIntoView( { behavior: 'smooth' } ) )

      .appendEnd( $( 'body' ) )

    $(window).on('scroll', () => 
        scrollButton.n.style.display =
          ( $('html').n.scrollTop / 
           ( $('html').n.scrollHeight - 
             $('html').n.clientHeight ) ) > 0.25
        ? '' : 'none'
    ) 
  })

Advantages of a SelectorEngine

shorter code
Chaining

Disadvantages

greater learning effort

I think that if you have to deal with a lot of changing employees in a team, the vanilla JS solution certainly makes more sense.

If you are a lone fighter, you should use a Selector Engine.

what is your opinion?

Top comments (1)

Frank Wisniewski • Jul 1 '22 • Edited

There are many ways to Rome, of course I know that this can also be solved in other ways.

As you may have overlooked, the code was designed as a plugin. That's why the ready, scope!!

It's not about a CodeGolf competition.

In my opinion, your code is unnecessarily complicated, why use template?

Why the strange way via the hidden attribute, which is ultimately misused as a class?

Why assign the circle attribute in the CSS?

All of this means that the code shown does not work on IOS devices, for example!!

sample code, if you don't design it as a plugin:

css

.hidden {
  display: none;
}

.scroll-button {
  bottom: 10px;
  cursor: pointer;
  opacity: 0.5;
  position: fixed;
  right: 10px;
  transition: all ease 400ms;
  width: 50px;
  z-index: 1000;
}

.scroll-button:hover {
  opacity: 1;
}

.scroll-button circle {
    fill: red;
  }

.scroll-button path {
  stroke: #fff;
  stroke-width: 15;
  stroke-linecap: round;
}

Javascript:

  document.body.insertAdjacentHTML( 'beforeend', 
      `<svg xmlns:xlink="http://www.w3.org/1999/xlink" 
        id = scrollButton class="scroll-button hidden" 
         viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="50"></circle>
        <path d="M50 80 L50 20 M50 20 L80 50 M50 20 L20 50" />
      </svg>` )

  scrollButton.onclick=() =>
    document.body.scrollIntoView( { behavior: "smooth" } )

  window.addEventListener( 'scroll', () => 
    scrollButton.classList.toggle('hidden', 
    document.documentElement.scrollTop < 100 ))

DEV Community

Do you need a selector engine like jQuery, Sizzle or something else?

Top comments (1)

css

Javascript:

Read next

I created a video tutorial on how to make a responsive sidebar using CSS and vanilla Javascript

React Performance Optimization Techniques: Memoization, Lazy Loading, and More

2024's Git Survey is Live!

Future-Proofing Your Auth0 Integration: Moving from Rules and Hooks to Actions