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 definedThen 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.
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;
};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);
<!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>
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