Webpack causes: jQuery not defined

Recently, I started using Webpack and I was requiring jQuery using ‘require(“jquery”)’ and then I started getting errors in my app like so:

jQuery not defined or $ not defined

Then I found this piece here which explained that Webpack doesn’t set any global variables, so you have to set them yourself. So I did this:

window.jQuery = require('jquery');
window.$ = window.jQuery;

Happily this solved my issues.

JavaScript boilerplate file

var App = function() {

    var debug = true;
    var self = this;

    /**
     * Initializing app on document ready
     * or device ready in case of PhoneGap
     *
     * @returns {App}
     */
    this.init = function() {
        self.settings();
        self.events();

        return this;
    };

    /**
     * Setting various variables and making
     * some DOM changes
     */
    this.settings = function() {

    };

    /**
     * Binding events
     */
    this.events = function() {

    };

    return this;
};

 

JavaScript Preload Images

var images = [];
var images_to_preload = [
  'path/to/image/one',
  'path/to/image/two'
];

function preload(images_list) {
     for (var i = 0; i < images_list.length; i++) {
         images[i] = new Image();
         images[i].src = images_list[i];
     }
}

preload(images_to_preload);

 

Simple HTML slidebar – works on mobile

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

#bar{
    width:200px;
    height:25px;
    border:1px solid black;
    position:relative;
}

#slider{
    width:0%;
    height:100%;
    background-color:red;
    top:0px;
    left:0px;
    position:absolute;
    cursor:pointer;
}

#info{
    width:200px;
    height:25px;
    border:1px solid black; 
}

</style>

<script type="text/javascript">
var bar, slider;

function init(){

    bar = document.getElementById('bar');
    slider = document.getElementById('slider');
    info = document.getElementById('info');
    bar.addEventListener('mousedown', startSlide, false);   
    bar.addEventListener('mouseup', stopSlide, false);
}

function startSlide(event){
    var set_perc = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2));
    info.innerHTML = 'start' + set_perc + '%';  
    bar.addEventListener('mousemove', moveSlide, false);    
    slider.style.width = (set_perc * 100) + '%';    
}

function moveSlide(event){
    var set_perc = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2));
    info.innerHTML = 'moving : ' + set_perc + '%';
    slider.style.width = (set_perc * 100) + '%';
}

function stopSlide(event){
    var set_perc = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2));
    info.innerHTML = 'done : ' + set_perc + '%';
    bar.removeEventListener('mousemove', moveSlide, false);
    slider.style.width = (set_perc * 100) + '%';
}

</script>

</head>
<body onload='init()'>

<div id='bar'>
<div id='slider'>

</div>
</div>
<br />

<div id='info'>info</div>

</body>
</html>

 

Get proper placeholder in all browsers with jQuery

So as you know the “placeholder” attribute is supported only in the newest browsers. If you want a placeholder in all browsers you’ll need to write some JavaScript and here is how to do it.

Using my approach you’ll need to set up both the value and the title tag of the input element to the placeholder you want to use. Here is an HTML example:

<form action="" method="post" id="contact-form">
            <input type="text" name="name" id="name" value="Your name" title="Your name"/>

            <input type="text" name="subject" id="subject" value="Subject" title="Subject" />

            <input type="text" name="email" id="email" value="Your email address" title="Your email address" />

            <textarea name="msg" id="msg" title="Your message">Your message</textarea>

            <input type="submit" id="contact-form-submit" value="Send" />
</form>

Here is some css just to make it more pleasing

#contact-form textarea, #contact-form input[type=text] {
    border: none;
    padding: 10px;
    margin: 0 0 15px 0;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    font-size: 15px;
    resize: vertical;
    background-color: rgb(197, 236, 255);
    width: 320px;
    color: rgb(0, 70, 158);
}

and here comes jQuery, watch the comments

jQuery(document).ready(function(){
    // on focusing
    jQuery('#contact-form input[type=text], #contact-form textarea').focus(function() {
        // check if the current value equals the one in the title attribute
        if ( jQuery(this).val() == jQuery(this).attr("title")) {
            // if so replace the current value with empty string or no value
            jQuery(this).val("");
        }
    });

    // on blur or the input element going out of fucus
    jQuery('#contact-form input[type=text], #contact-form textarea').blur(function() {
        // check if the current value is empty
        if ( jQuery(this).val() == "") {
            // if it is empty set the value to the text in the title attribute( restoring the placeholder )
            jQuery(this).val($(this).attr("title"));

            // this is just a beauty touch
            // when the placeholder is active set the color to something more neutral
            // so that the user can notice the difference between a placeholder and actual value
            jQuery(this).css("color", "rgb(24, 179, 255)");
        }
    });

    // this also part of the beauty touch
    // if you don't mind the color of the placeholder you can skip this
    // check if the user has just pressed a key
    jQuery('#contact-form input[type=text], #contact-form textarea').keyup(function() {
        // if so set the color to slightly darker tone
        // this is again only in order for the user to be able to make the difference
        // between a placeholder and a value easily
        jQuery(this).css("color", "rgb(0, 70, 158)");
    });
});

That’s all you need