jQuery - freeCodeCamp.org

JavaScript document.ready() – Document Ready JS and jQuery Example

Ihechikara Abba — Wed, 27 Jul 2022 21:03:19 +0000

When working with JavaScript and the Document Object Model (DOM), you might want your script to run only when the DOM has loaded.

You can do this using the $(document).ready() method in jQuery, or the DOMContentLoaded event in vanilla JavaScript.

In this article, you'll learn how to make your JavaScript code run only when the DOM has loaded using jQuery and vanilla JavaScript.

How to Use the `$(document).ready()` Method in jQuery

Before JavaScript runs in the browser, it waits for the contents of the document to load. This includes stylesheets, images, and so on.

As a convention, placing the script element just before the closing body tag makes the script wait for the rest of the document to load before running.

We also can make this process faster in jQuery by using the $(document).ready() method. The $(document).ready() method only waits for the DOM to load, it doesn't wait for stylesheets, images, and iframes.

Here's an example:

$(document).ready(function () {
  console.log("Hello World!");
});

In the code above, the $(document).ready() method will only run after the DOM has loaded. So you'll only see "Hello World!" in the console after the $(document).ready() method has started running.

In summary, you can write all your jQuery code inside the $(document).ready() method. This way, your code will wait for the DOM to be loaded before running.

How to Use the `DOMContentLoaded` Event in JavaScript

Just like jQuery's $(document).ready() method, the DOMContentLoaded event fires once the DOM has loaded – it doesn't wait for stylesheets and images.

Here's how to use the DOMContentLoaded event:

document.addEventListener("DOMContentLoaded", () => {
  console.log("Hello World!");
});

Once the DOM has loaded, the DOMContentLoaded event will detect it and run.

You should use the DOMContentLoaded event when:

You have certain functionalities in your webpage that should fire immediately without waiting for the rest of the page content.
You have a script tag placed within the head element.

Summary

In this article, we talked about the$(document).ready() method in jQuery, and the DOMContentLoaded event in vanilla JavaScript.

We use them to execute JavaScript code when the DOM has loaded.

The interesting part of these functionalities is that they let JavaScript code run without waiting for images and stylesheets to load completely in a web page.

Happy coding!

How to Switch from jQuery to Vanilla JavaScript with Bootstrap 5

freeCodeCamp — Fri, 31 Jul 2020 18:09:09 +0000

By Zoltán Szőgyényi

Bootstrap 5 is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.

In case you didn't know, Bootstrap 5 alpha has been officially launched. It has removed jQuery as a dependency, has dropped support for Internet Explorer 9 and 10, and brings some awesome updates for the Sass files, markup, and a new Utility API.

This tutorial will show you how to start using VanillaJS instead of jQuery when building websites using the newest version of Bootstrap 5.

Getting started

You will need to include Bootstrap 5 in your project. There are several ways to do this, but to keep it simple we will include the framework via CDN.

First of all, let's create a blank index.html page inside a project folder:

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Vanilla JS tutorial by Themesbergtitle>
head>
<body>

body>
html>

Include the bootstrap.min.css stylesheet before the end of your tag:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

Afterwards include the Popper.js library and the main Bootstrap JavaScript file before the end of your tag:

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous">script>

Curious what the integrity and crossorigin attributes mean? Here's the explanation:

Integrity attribute: allows the browser to check the file source to ensure that the code is never loaded if the source has been manipulated.

Crossorigin attribute: is present when a request is loaded using 'CORS' which is now a requirement of SRI checking when not loaded from the 'same-origin'.

Great! Now we have successfully included the newest version of Bootstrap in our project. One of the obvious differences is that we no longer had to require jQuery as a dependency, saving about 82.54 KB in bandwidth if in a minified state.

Switching from jQuery to Vanilla JS

Before we get started with this section, you should know that using Bootstrap 5 with jQuery is still possible according to the official documentation.

We recommend using Vanilla JavaScript if the only reason you've been using jQuery was for the query selector, because you can do the same thing with the document.querySelector('#element') as if it was $('#element').

The first step is to create a JavaScript file and include it before the end of the body tag but after the other two includes:

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous">script>
<script src="js/app.js">script>

So when do you need to actually use Javascript with Bootstrap 5? There are certain components in the framework that work only if they are initialized via Javascript, such as tooltips, popovers and toasts.

Furthermore, with components such as modals, dropdowns, and carousels you may want to be able to programmatically change them based on a user action or application logic.

Initializing tooltips via Vanilla JavaScript

We all love tooltips, but they don't work unless they are initialized via JavaScript. Let's first start by creating a tooltip element inside our index.html file:

<button id="tooltip" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
    Tooltip on top
button>

Hovering over the button will not show the tooltip, because by default it is an opt-in feature of Bootstrap and it needs to be initialized manually using JavaScript. If you want to do it with jQuery, here's how it would look:

$('#tooltip').tooltip();

Using Vanilla JS you would need to use the following code to enable the tooltip:

var tooltipElement = document.getElementById('tooltip');
var tooltip = new bootstrap.Tooltip(tooltipElement);

What the code above does it that it selects the element with the unique id of "tooltip" and then creates a Bootstrap tooltip object. You can then use that to manipulate the state of the tooltip, such as showing or hiding the tooltip programmatically.

Here's an example on how you could show/hide it via methods:

var showTooltip = true;
if (showTooltip) {
    tooltip.show();
} else {
    tooltip.hide();
}

If you would like to enable all of the tooltips you could also use the following code:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
});

What happens here is that we select all of the elements that have the data-toggle="tooltip" attribute and value and initialize a tooltip object for each one. It also saves them to a tooltipList variable.

Toggle the visibility of your elements using the Collapse JavaScript methods

The collapse feature on Bootstrap is another very handy way to show and hide elements via data attributes or JavaScript.

Here's an example of how we can show or hide a card when a certain button is being clicked. Let's first create the HTML markup:

<button id="toggleCardButton" type="button" class="btn btn-primary mb-2">Toggle Cardbutton>
    <div id="card" class="card collapse show" style="width: 18rem;">
        <img src="https://dev-to-uploads.s3.amazonaws.com/i/rphqzfoh2cbz3zj8m8t1.png" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Freecodecamp.orgh5>
            <p class="card-text">Awesome resource to learn programming from.p>
            <a href="#" class="btn btn-primary">Learn coding for freea>
        div>
    div>

So we created a button with the id toggleCardButton and a card with the id card. Let's start by selecting the two elements:

var toggleButton = document.getElementById('toggleCardButton');
var card = document.getElementById('card');

Then we need to create a collapsable object using the newly selected card element:

var collapsableCard = new bootstrap.Collapse(card, {toggle: false});

What the toggle:false flag does is that it keeps the element visible after creating the object. If not present, it would hide the card by default.

Now we need to add an event listener for the button for the click action:

toggleButton.addEventListener('click', function () {
    // do something when the button is being clicked
});

And lastly we need to toggle the card using the collapsable object that we initialized like this:

toggleButton.addEventListener('click', function () {
    collapsableCard.toggle();
});

That's it! Now the card will be shown/hidden whenever the button is clicked. Of course all of this could've been done using the data attributes feature from Bootstrap, but you may want to toggle certain elements based on an API call or a logic in your application.

Conclusion

If you have followed along this tutorial you should now be able to use the most popular CSS framework without the need of requiring jQuery in your project. This lets you save up to 85 KB of data and makes your website faster! Congratulations ?

If you appreciate this tutorial and like using Bootstrap as a CSS framework for your projects, I invite you to check out some of the free and premium Bootstrap themes, templates, and UI Kits that we build at Themesberg ❤️

A Simple Introduction to the jQuery Mobile Framework

freeCodeCamp — Thu, 02 Jul 2020 16:49:43 +0000

By Alfrick Opidi

When the world discovered the web, things were unexciting and lifeless. For example, building a simple image mouseover application required several lines of code, and couldn't work on some platforms.

But things got better when jQuery was introduced, since it allowed developers to create stunning JavaScript applications that could run comfortably in various places.

After that, the jQuery team took things a notch higher by developing jQuery UI, which made it possible for developers to create nice-looking web applications on the existing jQuery core.

Better still, in 2010 jQuery Mobile was introduced which has made development much better and more efficient.

Built with a bias to mobile phones, jQuery Mobile is an effective, unified framework that offers UI components, data transitions, and other exciting features.

jQuery Mobile leverages the functionalities of HTML5, CSS3, jQuery, as well as jQuery UI into a single framework that allows developers to achieve consistency across different platforms and devices.

Basic Features of jQuery Mobile

1. Great simplicity and usability

The jQuery Mobile framework is uncomplicated and flexible. Since the framework's configuration interface is mark-up driven, developers can easily build their complete basic application interfaces in HTML, with minimal or no JavaScript code.

Complex tasks requiring several lines of JavaScript code, such as Ajax calls and DOM manipulation, can easily be realized with few lines of code in mobile jQuery.

For example, if we want a user to click and hide some text after a page has been created in the DOM, but before enhancement is complete, we can simply use the pagecreate event handler. This is something that would require several lines code to accomplish without jQuery Mobile.

$(document).on("pagecreate","#mypagetest",function(){
  $("span").on("click",function(){
    $(this).hide();
  });                       
});

In the above code, the #mypagetest parameter refers to the id of the page that specifies the page event. Also, the on() method is used to attach the event handlers.

Furthermore, its simplicity allows developers to break their applications into multiple pages. With the framework, developers can "write less, and do more."

2. Progressive enhancement and graceful degradation

Progressive enhancement and graceful degradation are key features that propel the agility of jQuery Mobile. They enable it to support both high-end and less capable devices (for example, those lacking JavaScript support).

The framework allows developers to build applications that can be accessed by the widest number of browsers and devices, whether it is Internet Explorer 6 or the newest Android or iPhone.

Mobile jQuery also gives developers the ability to render basic content (as built) on basic devices. And the more sophisticated platforms and browsers will be increasingly enriched using additional, externally linked JavaScript and CSS.

3. Support for user-friendly inputs

During jQuery mobile development, developers can include an uncomplicated API to support touch, mouse, and cursor focus-based user input functionalities. Several types of easily styled and touch-friendly form elements are also included in the framework.

Examples include checkbox and radio sets, slider, search filtering, and menu selection elements. Also, every one of the form elements includes an alternate 'mini' version, which can be easily incorporated into mobile web pages.

For example, here's how to create a checkbox button using jQuery Mobile. Notice that the data-mini="true" attribute is added to create a mini version of the button.

<form>
    <input type="checkbox" name="checkbox-mini-0" id="my-checkbox" data-mini="true">
    <label for="checkbox-mini-0">Click here to agreelabel>
form>

Beyond all this, to ensure the user experience is optimized on mobile devices, the framework has a rich Ajax-driven navigation system that allows animated page transitions to take place seamlessly.

With jQuery Mobile transition events, you can animate the transition from the current active page to the new page.

For example, you can use the pagebeforeshow event (triggered on the "to" page) and the pagebeforehide event (triggered on the "from" page) when transitioning from one page to the next. Both events are triggered before the transition animation begins.

Let's see how they can be applied:

$(document).on("pagebeforeshow","#myfirstpage",function(){ 

    // When entering myfirstpage

  alert("myfirstpage is about to appear");

});

$(document).on("pagebeforehide","#myfirstpage",function(){ 

    // When leaving myfirstpage

  alert("myfirstpage is about to disappear");
});

4. Accessibility

Besides its cross-platform capabilities, jQuery for mobile was created with a strong consideration for accessibility.

The framework comes with support for Accessible Rich Internet Applications (WAI-ARIA) to assist disabled persons using screen readers and other assistive technologies easily access web pages.

5. Lightweight size

Mobile jQuery's lightweight size (about 40KB when minified) adds to its swiftness. Additionally, the fact that it employs minimal image dependencies also vastly accelerates its capabilities.

6. Theming and UI widgets

jQuery Mobile has an in-built theme system that enables developers to determine their own application styling. With the jQuery Mobile Themeroller, developers can effectively customize their applications to fit their color, tastes, and preferences.

The framework also comes with various innovative, cross-platform widgets that enable developers to create applications that are better customized.

Some of the available widgets are persistent toolbars, buttons, dialogs, and the commonly used popup widget.

7. Responsiveness

The framework's full responsiveness enables the same underlying codebases to fit comfortably in different types of screens, from mobile devices to desktop-sized screens.

Basic Page Structure of jQuery Mobile

jQuery Mobile's structure has all the UI components and attributes required for creating user-friendly and feature-rich mobile web applications and websites of all kinds—whether basic or advanced.

You can use jQuery mobile to build web pages, various types of list views, toolbars, a wide range of form elements and buttons, dialogs, as well as other functionalities.

Importantly, since jQuery Mobile is created on top of jQuery core, it lets developers leverage jQuery UI code and access key facilities. These include robust animation and image effects for web pages, DOM manipulation, event handling, and Ajax for server communication.

Let's get a feel for how jQuery mobile development code looks.

For example, in this time of the COVID-19 pandemic when most people are working from home or from co-working spaces, let's create a simple web page that demonstrates some team management mistakes that people make.

Here is the code:

html>
<html>

<head>
  <title>jQuery Mobile Exampletitle>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="http://code.jquery.com/jquery-1.11.1.min.js">script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">script>
head>

<body>
  <div data-role="page" date-theme="c">
    <div data-role="header">
      <h1>fCC jQuery Mobile Sampleh1>
    div>
    <div data-role="content">
      <p>COVID-19 Work-From-Home Team Management Mistakes To Avoidp>
    div>
    <p>
    <ul data-role="listview" data-inset="true" data-filter="true">ul>
    p>
    <p>
    <ul>
      <li><a href="#">Using Unnecessary Toolsa>li>
      <li><a href="#">Foregoing Team Evaluationsa>li>
      <li><a href="#">Micromanaginga>li>
      <li><a href="#">Hiring Too Quicklya>li>
      <li><a href="#">Not Having Contingenciesa>li>
    ul>
    p>
    <div data-role="footer">
      <h4>alfrickopidi.com, 2020 - Copyrighth4>
    div>
  div>
body>

html>

Here is the output when the above mobile jQuery lines of code are opened on a browser:

Notably, when the browser is decreased or increased, the size of the items in the list also adjusts appropriately. Therefore, the web page can be easily accessed in various devices with different screen resolutions without worrying about lack of consistency. The size of the items will change accordingly to suit the type of device.

As you can see in the above code sample, the document is a simple HTML5 that includes the following three things:

Files from the jQuery Mobile CSS (jquery.mobile-1.4.5.min.css)
Files from the jQuery repository (jquery-1.11.1.min.js)
Files from the jQuery Mobile repository (jquery.mobile-1.4.5.min.js)

These files are directly linked to the jQuery CDN. Another alternative is to head over to the download page to get these files and host them on a private server.

Importantly, including the "viewport" metatag during jQuery mobile development instructs devices that the page width and the device screen width are equivalent (width=device-width).

The tag also instructs the browser to zoom in to 100 per cent (scale=1). If the scale is changed to 2, for instance, the browser will zoom the web page by 50 per cent.

A closer examination of the code reveals some strange "_data-"_attributes scattered throughout it. This is an improved feature of HTML5 that enables developers to pass organized data across an application – for example, the data-role="header" attribute defines the head section of the web page.

The above example just scratches the surface of the things developers can achieve using jQuery Mobile. The framework's documentation is easy to follow and describes its many features, including linking pages, incorporating animated page transitions, and designing buttons.

Conclusion

jQuery for mobile is a resource-rich framework built with jQuery, HTML5, and CSS capabilities to handle certain cross-platform, cross-device and cross-browser compatibility issues effectively.

The framework offers great opportunities for creating mobile and web applications that are powerful, fully responsive, and future-ready.

Will you give it a try?

Targeting Click of “Clear” Button (X) on Input Field

freeCodeCamp — Tue, 02 Jun 2020 02:19:00 +0000

jQuery makes it easy to get your project up and running. Though it's fallen out of favor in recent years, it's still worth learning the basics, especially if you want quick access to its powerful methods.

But while jQuery is a powerful library, it can't do everything. That's where having solid understanding of vanilla JavaScript comes in handy.

Say you have a Wikipedia Viewer project like this:

<div class="search">
  <p id="text">Search on Wikipediap>
  <input id="searchbox" type="search">input>
  <button id="searchbutton">Searchbutton>
  <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank"><button id="searchbutton">Random Articlebutton>a>
  <div class="resultingarticles">div>
div>

$("#searchbox").keyup(function(event) {
  if(event.keyCode === 13) {
    $("#searchbutton").click();
  };
});

$("#searchbutton").click(function() {

  var searchInput = document.getElementById("searchbox").value;
  searchInput = searchInput.toLowerCase();

  if(searchInput !== "") {

    var myRequest = new XMLHttpRequest();
    myRequest.open('GET','https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch='+ searchInput + '&utf8=&format=json&origin=*');

      myRequest.onload = function() {
      var searchResults = JSON.parse(myRequest.responseText);

      $(".resultingarticles").empty();  

      for(i=0; i<10; i++) {
        var articleTitle = searchResults.query.search[i].title;
        var articleSnippet = searchResults.query.search[i].snippet;
        var articleId = searchResults.query.search[i].pageid;
        var articleLink = "https://en.wikipedia.org/?curid=" + articleId;
        $(".resultingarticles").append("" + "" + ""+articleTitle+"
" + "" + articleSnippet + "
" + "
" + "");
      };

      };

    myRequest.send();

  };
});

Everything is working as you expect – you can enter text into the search box, hit enter or the "Search" button, and see a list of Wikipedia articles.

Because you're using type="search" on your input element, the Chrome browser will automatically add an "X" to the end of the input if there's text and you hover over the input. Note that other browsers might handle type="search" differently.

When you click on the "X", the text disappears.

But say you already have a list of articles, and when you clear the text, you also want to clear the populated articles:

It turns out that clicking the "X" in the search box fires a "search" event. jQuery doesn't support the "search" event, so you'll have to write an event listener in vanilla JavaScript:

document.getElementById("searchbox").addEventListener("search", function(event) {
  $(".resultingarticles").empty();  
});

Now when a search event is fired, you can use jQuery to clear the div element with the articles:

How to Translate jQuery Code Into Vanilla JS

freeCodeCamp — Tue, 02 Jun 2020 02:15:00 +0000

jQuery was once one of the most popular JS libraries available. It solved a lot of problems, like making DOM manipulation and Ajax calls standard across all the different browsers, which all handled JavaScript slightly differently.

A lot of jQuery's once cutting edge features have made it into vanilla JavaScript, so there's no need to load an entire library for just a few functionalities. Given this, it's not uncommon that one of your tasks on the job will be to rewrite jQuery into vanilla JavaScript.

How to rewrite jQuery into vanilla JS

Imagine you have the following code:

<div class="m1 menu">
    <div id="menu-center">
        <ul>
            <li><a class="active" href="#home">Homea>

            li>
            <li><a href="#portfolio">Portfolioa>

            li>
            <li><a href="#about">Abouta>

            li>
            <li><a href="#contact">Contacta>

            li>
        ul>
    div>
div>
<div id="home">div>
<div id="portfolio">div>
<div id="about">div>
<div id="contact">div>

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.menu {
    width: 100%;
    height: 75px;
    background-color: rgba(0, 0, 0, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.light-menu {
    width: 100%;
    height: 75px;
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#menu-center {
    width: 980px;
    height: 75px;
    margin: 0 auto;
}
#menu-center ul {
    margin: 15px 0 0 0;
}
#menu-center ul li {
    list-style: none;
    margin: 0 30px 0 0;
    display: inline;
}
.active {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
}
a {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: black;
    text-decoration: none;
    line-height: 50px;
}
#home {
    background-color: grey;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: url(images/home-bg2.png);
}
#portfolio {
    background-image: url(images/portfolio-bg.png);
    height: 100%;
    width: 100%;
}
#about {
    background-color: blue;
    height: 100%;
    width: 100%;
}
#contact {
    background-color: red;
    height: 100%;
    width: 100%;
}

$(document).ready(function () {
    $(document).on("scroll", onScroll);

    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");

        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');

        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

When you scroll down the page, the navbar should change colors as you get to different sections:

The function that handles this is onScroll:

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    /* console.log(scrollPos); */
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

To translate onScroll into vanilla JS, you have a few options.

Option #1: Use an online compiler

You can use an online tool like Google's Closure Compiler to compress the code and strip out any unnecessary jQuery.

The problem is that you're still essentially left with jQuery code, so the browser would still need to load the library.

Option #2: Manually translate the code

The best option is to check out resources like You Don't Need jQuery and You Might Not Need jQuery before rewriting your jQuery code. You'll be able to find the native JS versions of the most popular jQuery methods, some of which you can use in your own code.

Here's the onScroll function in vanilla JS:

function onScroll(event) {
  var sections = [...document.querySelectorAll('#menu-center a')];
  var scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  sections.forEach(function(currLink) {
    var val = currLink.getAttribute('href');
    var refElement = document.querySelector(val);
    if (refElement.offsetTop <= scrollPos && (refElement.offsetTop + refElement.offsetHeight > scrollPos)) {
      //document.querySelector('#menu-center ul li a').classList.remove('active');
      currLink.classList.add('active');
    } else {
      currLink.classList.remove('active');
    }
  });
}

document.addEventListener('scroll', onScroll);

How to Build an Image Slider with jQuery

freeCodeCamp — Sat, 08 Feb 2020 01:57:00 +0000

This tutorial will walk you through building an image slider using the jQuery library.

This tutorial will have four parts:

HTML

We will be using Bootstrap for this tutorial to keep things looking good, without spending a lot of time.

Our structure will be as follows:

Inside our ul with the class of slides we will have the following:

Inside our .buttons class you should have the following:

Here is an example of what your html should look like:

Note: You should replace the image src attribute with your own content.

SCSS

We are using Sass and the SCSS syntax so we can nest and use variables

We can use the following SCSS to define our styling:

// Variables
$width: 720px;

.slider {
  width: $width;
  height: 400px;
  overflow: hidden;
  margin: 0 auto;
  text-align: center;

  .slides {
    display: block;
    width: 6000px;
    height: 400px;
    margin: 0;
    padding: 0;
  }

  .slide {
    float: left;
    list-style-type: none;
    width: $width;
    height: 400px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.buttons {
  margin: 0;
  width: $width;
  position: relative;
  top: -40px;
  margin: 0 auto;

  .play {
    display: none;
  }

  .btn {
    display: flex;
    margin: 0 auto;
    text-align: center;
  }
}

JS

Variables

In the following code snippet, we define variables used later in our code.

var animationSpeed = 1000; // How quickly the next slide animates.
var pause = 3000; // The pause between each slide.

We will use a blank variable where we will call the setInterval method:

var interval;

Animation We will wrap our slider animations inside a function:

function startSlider() {}

We are using the setInterval() native JavaScript method to automate the contents of the function on a time based trigger.

interval = setInterval(function() {}, pause);

We use the pause variable to see how many milliseconds to wait before calling the function again. Read more on the native setInterval method here: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval. Inside our function we will use jQuery to fade between slides at the speed of the animationSpeed variable:

$('.slides > li:first')
  .fadeOut(animationSpeed)
  .next()
  .fadeIn(animationSpeed)
  .end()
  .appendTo('.slides');

We are targeting the first slide using $('.slides > li:first'). - .fadeOut(animationSpeed) will fade the first slide out and then using .next(), we move to the next slide. - Once we have moved to the next slide, we will fade it in: .fadeIn(animationSpeed). - This sequence will continue until the last slide (.end()), then we stop the animation. We will now call the startSlider function to start the animation:

startSlider();

**Play and Pause This feature is optional, but quite easy to implement. We will hide the play button, so we don’t see both the play and pause buttons:**

$('.play').hide(); // Hiding the play button.

We will now create our pause button (automatically shown on page load):

$('.pause').click(function() {
    clearInterval(interval);
    $(this).hide();
    $('.play').show();
});

We will call our function every time the pause button is clicked using jQuery. - We will remove the interval using the clearInterval method and using our interval variable as the parameter, indicating which interval to stop. - Because our slider is paused, we will hide the pause button using $(this).hide();. Note: we are using this, which will refer to what our parent is calling i.e. .pause. - We will then show our play button so the user can resume the animation: $('.play').show();. The following code sets up our play button (automatically hidden on page load):

$(‘.play’).click(function() { startSlider(); $(this).hide(); $(‘.pause’).show(); });

We will call our function every time the play button is clicked using jQuery.

We will start or restart the interval using the startSlider function.
Because our slider is currently playing, we will hide the play button using $(this).hide();. Note: we are using this, which will refer to what our parent is calling i.e. .play.
We will then show our pause button so the user can stop the animation at will: $('.pause').show();.

References

Checkout the source code and example on CodePen for this tutorial.

jQuery Selectors Explained: Class Selectors, ID Selectors, and More

freeCodeCamp — Tue, 28 Jan 2020 01:35:00 +0000

jQuery Selectors

jQuery uses CSS-style selectors to select parts, or elements, of an HTML page. It then lets you do something with the elements using jQuery methods, or functions.

To use one of these selectors, type a dollar sign and parentheses after it: $(). This is shorthand for the jQuery() function. Inside the parentheses, add the element you want to select. You can use either single- or double-quotes. After this, add a dot after the parentheses and the method you want to use.

In jQuery, the class and ID selectors are like those in CSS. Let's have a quick review of that before we go on.

ID Selector in CSS

The CSS ID selector applies styles to a specific html element. The CSS ID selector must match the ID attribute of an HTML element. Unlike classes, which can be applied to multiple elements throughout a site, a specific ID may only be applied to one single element on a site. CSS ID will override CSS Class properties. To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Syntax

#specified_id { /* styles */ }

You can combine the ID selector with other types of selectors to style a very specific element.

section#about:hover { color: blue; }

div.classname#specified_id { color: green; }

Note about IDs

ID should be avoided when styling if possible. As it has high specificity and it can be overriden only if you inline styles, or add styles into

jQuery - freeCodeCamp.org

JavaScript document.ready() – Document Ready JS and jQuery Example

How to Use the $(document).ready() Method in jQuery

How to Use the DOMContentLoaded Event in JavaScript

Summary

How to Switch from jQuery to Vanilla JavaScript with Bootstrap 5

Getting started

Switching from jQuery to Vanilla JS

Initializing tooltips via Vanilla JavaScript

Toggle the visibility of your elements using the Collapse JavaScript methods

Conclusion

A Simple Introduction to the jQuery Mobile Framework

Basic Features of jQuery Mobile

1. Great simplicity and usability

2. Progressive enhancement and graceful degradation

3. Support for user-friendly inputs

4. Accessibility

5. Lightweight size

6. Theming and UI widgets

7. Responsiveness

Basic Page Structure of jQuery Mobile

Conclusion

Targeting Click of “Clear” Button (X) on Input Field

How to Translate jQuery Code Into Vanilla JS

How to rewrite jQuery into vanilla JS

Option #1: Use an online compiler

Option #2: Manually translate the code

How to Build an Image Slider with jQuery

HTML

SCSS

JS

Variables

Animation We will wrap our slider animations inside a function:

Play and Pause This feature is optional, but quite easy to implement. We will hide the play button, so we don’t see both the play and pause buttons:

References

jQuery Selectors Explained: Class Selectors, ID Selectors, and More

jQuery Selectors

ID Selector in CSS

Syntax

Note about IDs

How to Use the `$(document).ready()` Method in jQuery

How to Use the `DOMContentLoaded` Event in JavaScript

**Play and Pause This feature is optional, but quite easy to implement. We will hide the play button, so we don’t see both the play and pause buttons:**