A function that you give it the param, (url params or url args, whatever you want to call it) to find from the current url (key), and she returns the value of that parameter.

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

  var area = getUrlParameter(‘area'); // get area value.
  if (typeof area == 'undefined') {
    // do something it exists!
  } else {
    // cry me a river
  }

# Setting a URL Parameter (or changing it)

Sometimes it is handy to change (or add ) a url parameter, from JavaScript

This function that you give it a : key (kuku) and a value (..value) and she updates the appropriate key, if dosen’t exists, she creates it.
the function doesn’t touch other parameters (leave them like they were).

I used it in a situation where it was needed to check a parameter called “killme”
if killme value was given to the function, she will delete the appropriate value.
note: if killme sent when their is no such parameter, she creates it with this value.

// added 'killme' value - to remove the query var alltogether. 
function setGetParameter(paramName, paramValue)
{
    var url = window.location.href;
    if (url.indexOf(paramName + "=") >= 0)
    {
        var prefix = url.substring(0, url.indexOf(paramName));
        var suffix = url.substring(url.indexOf(paramName));
        suffix = suffix.substring(suffix.indexOf("=") + 1);
        suffix = (suffix.indexOf("&") >= 0) ? suffix.substring(suffix.indexOf("&")) : "";
        if (paramValue == 'killme') {
        url = prefix + suffix;
        }
        else {
        url = prefix + paramName + "=" + paramValue + suffix;
        }
    }
    else
    {
    if (url.indexOf("?") < 0)
        url += "?" + paramName + "=" + paramValue;
    else
        url += "&" + paramName + "=" + paramValue;
    }
    window.location.href = url;
}

usage :

  // Handles click
  jQuery( ‘.page-templat-page-something.area-widget li a' ).click(function( event ) {
    event.preventDefault(); 
   var href = jQuery(this).attr(‘href'); //get the a href
    if (typeof location != 'undefined' || href !='killme') { // check if location exists and if the value is not kill
	// .. killme request (because if kill and doesn’t exists ->when try to kill error, this fix that)
      setGetParameter('area',href);
    }
});

The post JavaScript – Getting URL Parameter and setting a URL parameter (Snippet) appeared first on SideCode.

# Add/Remove a class jQuery

Add a class to a element

jQuery(‘selector’).addClass(‘active’);

Remove class from an element

$( "p" ).removeClass( "myClass yourClass" )

# Find the html <a> Element with href that contain a certain string

Sometimes you need to find in your web page a anchor element with a specific string in it’s href
this is example of find the a tag with href that contains “vc” var and adds a class to it’s
parent element.

jQuery('#menu-vendor-team-categories a[href*=“'+vc+'"]').parent().addClass('active');

Some of the selector stuff you can use, based on your needs:
Selector documentation can be found at:

For Example:
= – find a string that is exactly equal.
!= – find a string that is not equal.
^= – find a string that starts with.
$= – find a string that ends with.
*= – find a string that contains.
~= – find a strings that contain this word.
|= – find a string that starts with a prefix (|= “prefix” matches “prefix-…”).

# Prevent Default

General Javascript snippet.
Stop the normal behavior of this element click event and do what i want.
Can be applied with .on click – so that on click it will prevent default behavior and do as you please

 jQuery( ‘.#myElement' ).click(function( event ) {
    event.preventDefault();
    // do as you please here !
    }
});

# Get Href of element (Guess it’s good for getting more things)

href now contains the href string of this element. (if you got stupid or something):

    
var href = jQuery(this).attr('href');

The post jQuery and General JavaScript Snippets appeared first on SideCode.

If you are not using Bootstrap you can still adapt this method for Bootstrap debugging in your project, all you need to do is just write these classes to fit your grid system and breakpoints and you are good to go.

Just add these lines wherever you need to see what is the current media query, are you in XS,SM,LG,..

<div style="text-align:left; font-size: 16px; text-align:center; color:black;">
 <span class="visible-xs">SIZE XS</span><span class="visible-sm">SIZE SM</span><span class="visible-md">SIZE MD</span><span class="visible-lg">SIZE LG</span> 
</div>

These lines will spit up visibly on the web page the current size, so you will know when you are switching media query breakpoints.

The post Bootstrap Responsive Debugging – CSS Media Queries Debugging appeared first on SideCode.

Common use is let’s say you want to change color to an element to red, but when you run it you get a console error telling you that the element doesn’t exist, depending on your code structure, it is possible that this code is running before that element has even rendered and added to the document.
So to prevent this you tell the browser to execute your code only after the document has been fully rendered and loaded.

Any JS code that is inside of this function will run only after the browser rendered and loaded the whole document.

jQuery(document).ready(function(){
  // do stuff after document is ready.
});

The post JavaScript – On Document Ready (Snippet) appeared first on SideCode.