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>
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>
- can we see some code, please... that way we know what methods you're trying to use and we can help from there – taylorjes Commented Nov 29, 2012 at 23:19
3 Answers
Reset to default 2CSS:
.DIV_CLASS{
display:none;
}
JQuery:
$(document).ready(function(){
if(some statment){
$('.DIV_CLASS').show();
}
});
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().
You either shows the div in the if statement or use setInterval() or setTimeout() to periodically check for whatever if statement sets.