JavaScript Archives - Petar Vasilev

JavaScript boilerplate file

Posted by Petar Vasilev on November 13, 2016 in Coding 0 Comment

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 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

Posted by Petar Vasilev on November 13, 2016 in Coding 0 Comment

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);

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

Posted by Petar Vasilev on November 13, 2013 in Coding 0 Comment

<!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>

<!DOCTYPE html>

<html>

<head>

#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>

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>

</div>

<br />

</body>

</html>

Get proper placeholder in all browsers with jQuery

Posted by Petar Vasilev on June 15, 2013 in Coding 0 Comment

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>

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

</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);
}

#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)");
    });
});

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