Category Archives: Gist

Website Alert Toast with JavaScript/jQuery

There’s a really simple method to show toasts in Android and other mobile apps but you can do the same for your website beautifully.

From the below codes, you can either go with JavaScript or jQuery, as convenient.

JavaScript

function toast(msg,status){
    var body = document.body,
    snack = document.createElement('div');
    snack.innerHTML = '<div id="snackbar" class="snackbar bobx toast bg-'+status+'">'+msg+'</div>';
    body.insertBefore(snack,body.firstChild);
    setTimeout(function(){document.getElementById('snackbar').remove()},3000);
}

Or, jQuery

function toast(msg,status){
	$('body').prepend('<div class="snackbar bobx toast bg-'+status+'">'+msg+'</div>');
	setTimeout(function(){ $('.snackbar').remove(); }, 3000);
}

CSS

/* toast bar */
.snackbar {
    z-index: 1000001;
    display: block;
    position: fixed;
    background-color: #ffe0b2f7;
  	color: #fff;
    margin-left: 39%;
    width: 18%;
    text-align: center;
    padding: .5em 2%;
    color: #b48126;
    font-weight: 500;
    text-transform: lowercase;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
	top:1.5em;
    border-radius: 5px;
	overflow: hidden;
}

/* for background color; bg-0 = false/error;bg-1 = true/success */
.bg-0{
  background-color:#ef5350;
}
.bg-1{
  background-color:#4caf50;
}

Webpage Auto Scroll from Browser Console

Automate scroll through huge web pages with a small JavaScript snippet from your browser console.

I hope it’s helpful for someone.
Right click > Inspect > Console Tab > Paste the code

(function() {
    var intervalObj = null;
    var retry = 0;
    var clickHandler = function() { 
        console.log("Clicked; stopping autoscroll");
        clearInterval(intervalObj);
        document.body.removeEventListener("click", clickHandler);
    }
    function scrollDown() { 
        var scrollHeight = document.body.scrollHeight,
            scrollTop = document.body.scrollTop,
            innerHeight = window.innerHeight,
            difference = (scrollHeight - scrollTop) - innerHeight

        if (difference > 0) { 
            window.scrollBy(0, difference);
            if (retry > 0) { 
                retry = 0;
            }
            console.log("scrolling down more");
        } else {
            if (retry >= 3) {
                console.log("reached bottom of page; stopping");
                clearInterval(intervalObj);
                document.body.removeEventListener("click", clickHandler);
            } else {
                console.log("[apparenty] hit bottom of page; retrying: " + (retry + 1));
                retry++;
            }
        }
    }

    document.body.addEventListener("click", clickHandler);
    intervalObj = setInterval(scrollDown, 1000);
})()