Jump to content

Rewrite jQuery in vanilla js


Rezvitskyq
 Share

Recommended Posts

Hello! There was a need to rewrite the code written with jquery into vanilla js. I have little js code on my site and I see no reason to include a library such as jquery 🙂

$('.progress-wrap .dot').on('click', function () {
	let $this = $(this)
	let stepValue = $this.attr('data-step')

	$this.closest('.progress-wrap').find('.bar').css('width', stepValue + '%')
	$this.siblings('.dot').removeClass('is-current')
	$this.addClass('is-active is-current')
	$this.prevAll('.dot').addClass('is-active')
	$this.nextAll('.dot').removeClass('is-active')

	$('.process-panel-wrap').removeClass('is-active')
	$('.step-title').removeClass('is-active')

	if (stepValue === '0') {
		$('#signup-panel-1, #step-title-1').addClass('is-active')
	} else if (stepValue === '25') {
		$('#signup-panel-2, #step-title-2').addClass('is-active')
	} else if (stepValue === '50') {
		$('#signup-panel-3, #step-title-3').addClass('is-active')
	} else if (stepValue === '75') {
		$('#signup-panel-4, #step-title-4').addClass('is-active')
	} else if (stepValue === '100') {
		$('#signup-panel-5, #step-title-5').addClass('is-active')
	}
})

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By Majesrse
      Hey i have a problem with the code:
      $('a').click(function(link) { link.preventDefault(); location = this.href; $('body').fadeOut('slow', open); }); function more() { window.location = location; } It's writen in Jquery but i will convert it to vanilla js. Can somone help me with it?
    • By MarkE
      This post is related to 
      but is a different way of tackling the problem.
      The idea is to use the JqueryUI.module in the front end to present a restricted access admin page in a modal (class pw-modal). However the JqueryUI module doesn't seem to work properly in the front end (I have it working in the back end OK). I'm guessing that this is because the front end page has not loaded all the .js that is needed (that would normally be loaded in the back end). My _main.php loads the following from the core at the moment:
      'wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/js/uikit.min.js' 'wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/js/uikit-icons.min.js' 'wire/modules/Jquery/JqueryCore/JqueryCore.js' 'wire/modules/Jquery/JqueryUI/JqueryUI.js' Any ideas what else I need, or have I got hold of the wrong end of the stick?
    • By eschoonen
      I'm working on the threaded comments on my website and for this I need to include the comments.js
      When I do this it keeps on giving me the "Uncaught ReferenceRrror: jQuery is not defined". Whatever I do it keeps giving me this error message.
      It's the last javascript file that I load in. So how do I fix it?
    • By awebcreature
      Hello there
      I need a field with realtime percent calculation (without page save)  with values from other fields in admin template. I think about jQuery with onChange methods on corresponding fields but this is not clear for me how to do this in module. Any help with some advice or example will be highly appreciated! 
      Thanks in advance! 
       
    • By Matze
      Hi there,
      I'm trying to get to work some AJAX call with vanilla Javascript, not jQuery.
      Anything seems to work so far, but the !$config->ajax seems to be ignored.
      To find out whats the problem by comparing both, jquery and plain javascipt, i built this template. commenting out //loadJquery(''); or loadVanilla(''); switches the two variants. (empty url variable means that the same pages will be loaded.)
      The problem: the pure Javascript function ("loadVanilla") is loading the full page content into the dc-container, which is wrong. The jQuery function  ("loadJquery") only loads the part outside of the if(!$config->ajax): - which is as it should be. 
      So - any help with this, what am i doing wrong?

      Thanks a lot - Matze
      <?php namespace ProcessWire; if(!$config->ajax): ?> (some static content)<br> <a id="loadlink" href="#">load</a><br> <?php endif; // end if not ajax ?> <span id="dc-container">(dynamic content)</span> <?php if(!$config->ajax): ?> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> <script> var loadlink = document.getElementById('loadlink'); loadlink.addEventListener('click', function(event) {   //loadJquery('');   loadVanilla('');   event.preventDefault() }); function loadVanilla(url) {   var xhttp = new XMLHttpRequest();   xhttp.onreadystatechange = function() {     if (this.readyState == 4 && this.status == 200) {       document.getElementById("dc-container").innerHTML = 'loaded: ' + this.responseText + (' (by vanilla javascript)');     }   };   xhttp.open("POST", "", true);   xhttp.send(); }   function loadJquery(url){ // Load content   $.ajax({       type: "POST",       url: url,       data: { ajax: true },       success: function(data,status){         pageData = data;       }   }).done(function(){ // when finished and successful     document.getElementById("dc-container").innerHTML = 'loaded: ' + pageData + ' (by jquery ajax)';   }); } </script> <?php endif; // end if not ajax ?>  
×
×
  • Create New...