CODEWITHSUNDEEP
javascriptasp.net
harel486
harel486

Reputation: 183

Run Javascript on first page load only

I want this code to work only on the first time the page load.

Is there anyway to use not IsPostBack on javascript?

IsPostBack :Gets a value that indicates whether the page is being rendered for the first time or is being loaded in response to a postback. More here.

<script>  

window.onload = function TimedCss()
{

    setTimeout(myTimeout1, 0500) 
    setTimeout(myTimeout2, 1000) 
    setTimeout(myTimeout3, 1500)
    setTimeout(myTimeout4, 2000) 
    setTimeout(myTimeout5, 2500)
    setTimeout(myTimeout6, 3000)
}



}
function myTimeout1() 
{
    document.getElementById("LBLName").className = " animated fadeInLeft";
    document.getElementById("LBLName").style.visibility = "visible";
}
function myTimeout2() 
{ 
    document.getElementById("LBLDescription").className = " animated rotateIn";
    document.getElementById("LBLDescription").style.visibility = "visible"; 
}
function myTimeout3() 
{
    document.getElementById("P1").className = " animated zoomIn";
    document.getElementById("P1").style.visibility = "visible";
}
function myTimeout4()
{
    document.getElementById("TXTQuantity").className = " animated flipInY";
    document.getElementById("TXTQuantity").style.visibility = "visible";
}
function myTimeout5()
{
    document.getElementById("LBLPrice").className = " animated slideInLeft";
    document.getElementById("LBLPrice").style.visibility = "visible";
}
function myTimeout6()
{
    document.getElementById("BTNAddToCart").className += " animated fadeInUp";
    document.getElementById("BTNAddToCart").style.visibility = "visible";
}

</script>

Edit - Solution:

<script>
window.onload = function TimedCSS()
{
    var isPostBack=<%= IsPostBack ? "true" : "false" %>

    if (!isPostBack)
    {
        setTimeout(myTimeout1, 0500) 
        setTimeout(myTimeout2, 1000) 
        setTimeout(myTimeout3, 1500)
        setTimeout(myTimeout4, 2000) 
        setTimeout(myTimeout5, 2500)
        setTimeout(myTimeout6, 3000)
    }




function myTimeout1() 
{
    document.getElementById("LBLName").className = " animated fadeInLeft";
    document.getElementById("LBLName").style.visibility = "visible";
}
function myTimeout2() 
{ 
    document.getElementById("LBLDescription").className = " animated rotateIn";
    document.getElementById("LBLDescription").style.visibility = "visible"; 
}
function myTimeout3() 
{
    document.getElementById("P1").className = " animated zoomIn";
    document.getElementById("P1").style.visibility = "visible";
}
function myTimeout4()
{
    document.getElementById("TXTQuantity").className = " animated flipInY";
    document.getElementById("TXTQuantity").style.visibility = "visible";
}
function myTimeout5()
{
    document.getElementById("LBLPrice").className = " animated slideInLeft";
    document.getElementById("LBLPrice").style.visibility = "visible";
}
function myTimeout6()
{
    document.getElementById("BTNAddToCart").className += " animated fadeInUp";
    document.getElementById("BTNAddToCart").style.visibility = "visible";
}

</script>

Upvotes: 1

Views: 1787

Answers (2)

ClementNerma
ClementNerma

Reputation: 1109

Note that you can't be 100% sure that your script will be runned only at the first loading.

If you really want to "secure" it, you can try to store data in session, cookies and localStorage.

Upvotes: 0

Anson
Anson

Reputation: 489

Store a variable in Cookie at first page load and check the value of the variable every time.

Refer to this for usage of Cookie.

[UPDATED]

I created a html for demo and the source for you due to origin-same policy of Cookie.

I copied the source to as the following code for backup. You have to execute the following code on your own origin because origin-same policy as mentioned before.

<!DOCTYPE>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="pageLoadStatus"></div>
        <script>
            var _ = {};
            /**
             * Gets or sets cookies
             * @param name
             * @param value (null to delete or undefined to get)
             * @param options (domain, expire (in days))
             * @return value or true
             */
            _.cookie = function(name, value, options)
            {
                if (typeof value === "undefined") {
                    var n, v,
                        cookies = document.cookie.split(";");
                    for (var i = 0; i < cookies.length; i++) {
                        n = $.trim(cookies[i].substr(0,cookies[i].indexOf("=")));
                        v = cookies[i].substr(cookies[i].indexOf("=")+1);
                        if (n === name){
                            return unescape(v);
                        }
                    }
                } else {
                    options = options || {};
                    if (!value) {
                        value = "";
                        options.expires = -365;
                    } else {
                        value = escape(value);
                    }
                    if (options.expires) {
                        var d = new Date();
                        d.setDate(d.getDate() + options.expires);
                        value += "; expires=" + d.toUTCString();
                    }
                    if (options.domain) {
                        value += "; domain=" + options.domain;
                    }
                    if (options.path) {
                        value += "; path=" + options.path;
                    }
                    document.cookie = name + "=" + value;
                }
            };

            var hasLoadedBefore = _.cookie('hasLoadedBefore');
            if(!!hasLoadedBefore) $('#pageLoadStatus').text('This page has been loaded before.');
            else $('#pageLoadStatus').text('This page loaded at first time.');
            _.cookie('hasLoadedBefore', true);
        </script>
    </body>
</html>

Upvotes: 1

Related Questions