Web Development: 8/18/19

Friday, August 23, 2019

When form is validated, how to SCROLL to the first error instead of jumping?

Here's what you can do:

By default the validate plugin focuses the first erroneous element (in case there's any). Turn off the option focusInvalid by setting it to false.
The callback invalidHandler handler is executed when the form is invalid. You get access through the second parameter validator to the validator object and thus to the errorList array. You can then animate the scroll relatively to the first erroneous element.

Here's the code:

$("#commentForm").validate({
    focusInvalid: false,
    invalidHandler: function(form, validator) {

        if (!validator.numberOfInvalids())
            return;

        $('html, body').animate({
            scrollTop: $(validator.errorList[0].element).offset().top
        }, 2000);

    }
});

DEMO

Source: https://stackoverflow.com/questions/9392133/when-form-is-validated-how-to-scroll-to-the-first-error-instead-of-jumping

Thursday, August 22, 2019

How to save imges to user's local computer using HTML2canvas

To be able to download the image to the user computer, you may use something like this:

Html

<html>
    <head></head>
    <body>
        <div id="boundary">
            <div class="content">
                <p>My content here</p>
            </div>
        </div>

        <button id="download">Download</button>

    </body>
</html>

Javascript

Based on Krzysztof answer

document.getElementById("download").addEventListener("click", function() {

    html2canvas(document.querySelector('#boundary')).then(function(canvas) {

        console.log(canvas);
        saveAs(canvas.toDataURL(), 'file-name.png');
    });
});


function saveAs(uri, filename) {

    var link = document.createElement('a');

    if (typeof link.download === 'string') {

        link.href = uri;
        link.download = filename;

        //Firefox requires the link to be in the body
        document.body.appendChild(link);

        //simulate click
        link.click();

        //remove the link when done
        document.body.removeChild(link);

    } else {

        window.open(uri);

    }
}

Source: https://stackoverflow.com/questions/31656689/how-to-save-img-to-users-local-computer-using-html2canvas
Answered by: https://stackoverflow.com/users/4325011/chebaby

Monday, August 19, 2019

How to Print Page Area using JavaScript

Print web page content is a commonly used feature in the web project. You can find many jQuery Plugin to print specific area or full page. This article provides a simple way to print specific div content or full page content using JavaScript. Here we’ll create a JavaScript function to print div content, page area, and full web page content.

printPageArea() function contains some JavaScript code which helps you to implement print feature easily in the web page. It will provide the simplest way to print specific area of web page.

JavaScript Code:

printPageArea() function opens a new window with web page content and printing option based on the provided element ID. You can use this function for print a specific area of web page or full web page content.

function printPageArea(areaID){
    var printContent = document.getElementById(areaID);
    var WinPrint = window.open('', '', 'width=900,height=650');
    WinPrint.document.write(printContent.innerHTML);
    WinPrint.document.close();
    WinPrint.focus();
    WinPrint.print();
    WinPrint.close();
}

Use printPageArea() function on onclick event of print button element and provide the content area div ID which you want to print.

printPageArea('elementID')

HTML Code:

The print button which will trigger printPageArea() function on clicking on it.

<a href="javascript:void(0);" onclick="printPageArea('printableArea')">Print</a>

HTML content which needs to be printed.

<div id="printableArea">
    All the printable content goes here......
</div>

Source: https://www.codexworld.com/print-page-area-javascript/

Web Development