CODEWITHSUNDEEP
javascripthtmlhideshow
AisRuss
AisRuss

Reputation: 269

javascript hide div on page load until if statement condition selects div

Ive got two div's on a webpage, which need to be hidden from page load until the if statement in the script block dictates when the div is to be displayed..is this possible and how can it be done? i have a jQuery linked but what i've tried doesnt work 

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        body {
            background-color: #3da9cd;
            background:url('background.jpg');
            height: 50%;
            width: 50%;
            margin:0;
            padding: 0;
            overflow:auto;
        }
        h1 {
            font-size: 34px;
            margin: 0;
            padding: 0;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-weight: bold;
            color: #000000;
        .hidden { display: none; }
        .shown {display:block;}
}
</style>
<script type="text/javascript">


function WinLose()
{
    $("#win").hide();
$("#lose").hide();
    var x=document.getElementById("demo");
    x=x.innerHTML=Math.floor((Math.random()*5)+1);

    if (x==5)
    {
        $('#win').show()

    }
    else 
    {
        $('#lose').show()
    }

}

</script>

</head>
<body>


<p id="demo"></p>

<button onclick="WinLose()">Try it</button>

<!-- Win element -->
        <div id="win" class="hidden">Congratulations! You have won a prize. *UNIQUE CODE* Collect your prize from the Customer Services desk</div>

        <!-- The losing image div -->
        <div id="lose" class="hidden">Sorry, you have not won. Better luck next time</div>

</body>
</html>

Upvotes: 0

Views: 10896

Answers (3)

carlcalderon
carlcalderon

Reputation: 106

You should set the visibility of the divs using css display property like so:

.hidden { display: none; }

and your divs like so:

<div class="hidden">first div</div>
<div class="hidden">second div</div>

and then with your, js either remove the hidden class or $.show().

Upvotes: 1

Zefiryn
Zefiryn

Reputation: 2265

You either shows the div in the if statement or use setInterval() or setTimeout() to periodically check for whatever if statement sets.

Upvotes: 0

Vucko
Vucko

Reputation: 20834

CSS:

.DIV_CLASS{
    display:none;
}

JQuery:

$(document).ready(function(){
    if(some statment){
        $('.DIV_CLASS').show();
    }
});

Upvotes: 2

Related Questions