function getHashParameters() {
    var prmstr = window.location.hash.substr(1);
    return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
}

function transformToAssocArray( prmstr ) {
    var hash = {};
    var prmarr = prmstr.split("&");
    for ( var i = 0; i < prmarr.length; i++) {
        var tmparr = prmarr[i].split("=");
        hash[tmparr[0]] = tmparr[1];
    }
    return hash;
}

var hash = getHashParameters();

Fix for when a slick slider has broken positioning from being previously hidden.

jQuery(function($) {

    $(document).on( 'click', '.tab', function() {
        $('.slick')
            .find('.news-item')
            .css({ height: '' }) // Remove the height calculated when hidden
            .find('.news-item__title')
            .css({ height: '' }); // Remove the height calculated when hidden
        $('.slick').slick('getSlick').checkResponsive(); // Trigger same internal functions as `orientationchange` event.
        $('.slick').slick('getSlick').setPosition(); // Trigger same internal functions as `orientationchange` event.
    });

});

<img src="logo.svg" alt="logo" onerror="this.onerror=null; this.src='logo.png'">

When trying to queue jQuery scripts to run before loading the library itself, this usually results in that code not working. If you want to load jQuery at the end of your page (or asynchronously) but you may need to include jQuery within a template part way through the page the following code allows you attach and queue up scripts to run when jQuery initialises.

if ( ! window.deferAfterjQueryLoaded ) {
    window.deferAfterjQueryLoaded = [];
    Object.defineProperty(window, "$", {
        set: function(value) {
            window.setTimeout(function() {
                $.each(window.deferAfterjQueryLoaded, function(index, fn) {
                    fn();
                });
            }, 0);
            Object.defineProperty(window, "$", { value: value });
        },

        configurable: true
    });
}

window.deferAfterjQueryLoaded.push(function() {
    //... some code that needs to be run
});

What this does is:

1. Defines deferAfterjQueryLoaded  lazily, so you don't need to inject that into head .
2. Defines a setter for window.$ . When jQuery loads, one of the last things it does is assign to the global $ variable. This allows you to trigger a function when that happens.
3. Schedules the deferred functions to run as soon as possible after the jQuery script finishes (setTimeout(..., 0);) .
4. Has the setter remove itself.

For complete cleanliness you could have the scheduled function remove deferAfterjQueryLoaded  as well.

--

This answer is provided from StackOverflow.

function getSearchParameters() {
      var prmstr = window.location.search.substr(1);
      return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
}

function transformToAssocArray( prmstr ) {
    var params = {};
    var prmarr = prmstr.split("&");
    for ( var i = 0; i < prmarr.length; i++) {
        var tmparr = prmarr[i].split("=");
        params[tmparr[0]] = tmparr[1];
    }
    return params;
}

var params = getSearchParameters();

Source: StackOverflow

Select boxes don't currently support the 'placeholder' attribute, so here's a workaround that works just as well.

<select>
    <option value="" disabled selected hidden>Please Choose...</option>
    <option value="0">Open when powered (most valves do this)</option>
    <option value="1">Closed when powered, auto-opens when power is cut</option>
</select>

The Disabled option stops the <option> being selected with both mouse and keyboard, whereas just using display: none allows the user to still select via the keyboard arrows. The display: none style just makes the list box look 'nice'.

Note: Using an empty value attribute on the "placeholder" option allows validation (required attribute) to work around having the "placeholder", so if the option isn't changed but is required; the browser should prompt the user to choose an option from the list.

This method is confirmed working in the following browsers:

• Google Chrome - v.43.0.2357.132
• Mozilla Firefox - v.39.0
• Safari - v.8.0.7 (Placeholder is visible in dropdown but is not selectable)
• Microsoft Internet Explorer - v.11 (Placeholder is visible in dropdown but is not selectable)
• Project Spartan - v.15.10130 (Placeholder is visible in dropdown but is not selectable)

Update:

When the select element is required it allows use of the :invalid CSS pseudo-class which allows you to style the select element when in it's "placeholder" state. :invalid works here because of the empty value in the placeholder option.

Once a value has been set the :invalid pseudo-class will be dropped. You can optionally also use :valid if you so wish.

Most browsers support this pseudo-class. IE10+. This works best with custom styled selectelements; In some cases i.e. ( Mac in Chrome / Safari) you'll need to change the default appearance of the select box so that certain styles display i.e. background-color, color. You can find some examples and more about compatibility at developer.mozilla.org.

Native element appearance Mac in Chrome:

Using altered border element Mac in Chrome:

If you have a css hover menu you may notice that it doesn't play well with Microsoft Surface IE with either a touch pen or finger. A long press shows the menu but on releasing the menu hides again.

This is because the touch device is unaware that the hover menu is supposed to remain visible after the hover intent has ended. iOS and other touch operating systems handles this logically but the powers to be seem to require websites to be "touch optimised".

Here's what you need to do:

<nav>
	<ul>
		<li>
			<a>Hover menu</a>
			<ul>
				<li><a href="http://example.org">Item 1</li>
				<li><a href="http://example.org">Item 2</li>
				<li><a href="http://example.org">Item 3</li>
			</ul>
		</li>
	</ul>
</nav>

You'll need to make sure that your hover anchor has an href on it to make it "touchable" on certain devices, you can do this with either href="#" or href="javascript:void" , then you need to add aria-haspopup="true" to tell the device that after the user releases the tap, whatever was visible should remain visible until another interaction.

<nav>
	<ul>
		<li>
			<a aria-haspopup="true" href="#">Hover menu</a>
			<ul>
				<li><a href="http://example.org">Item 1</li>
				<li><a href="http://example.org">Item 2</li>
				<li><a href="http://example.org">Item 3</li>
			</ul>
		</li>
	</ul>
</nav>

Here's the tested and proven method of using Helvetica Neue fonts on your website. No Helvetica? No problem, degrades to Arial and Sans Serif for safety.

body {
	font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 
	font-weight: 300;
}

On webkit browsers the font (along with others) may appear to have spare pixels around the lettering, making it look "fuzzy". To fix this we can tell webkit browsers to smooth the text with antialiasing:

body {
	-webkit-font-smoothing: antialiased;
}

This font stack originally appeared on CSS Tricks and has been modified slightly for compatibility with devices.

$("a[href^='http://'], a[href^='https://'], a[href^='//']").attr("target","_blank");

<!--[if !IE]><!--><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script><script>window.jQuery || document.write('<script src="/js/jquery-3.0.0.min.js"><\/script>')</script><!--<![endif]-->
<!--[if IE]><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><script>window.jQuery || document.write('<script src="/js/jquery-2.2.4.min.js"><\/script>')</script><![endif]-->