sequence of events in web browser

[eddiegil]

Hi, I'm relatively new to vb.net. I just created an simple Electronic Raffle web application via Visual Studio 2005. It's working just fine since it just basically returns a random winning entry queried from an SQL Server database.

However, to make the raffle draw more "dramatic", I would like display random entries before actually displaying the winner. I tried creating a for-loop which displays random numbers before displaying the winning entry but only the end result (winning entry) is displayed.

I even tried to display an animated gif file then hide it again before displaying the winning entry but only the winning entry is displayed when I click on the "Draw Winning Entry" button.

Is there a way to set the sequence of events in a web browser such that the program should display the image first then hide it after 5 seconds then display the winning entry afterwards? I'll appreciate any suggestion. Thanks!

 

[Satal Keto]

Would it be possible for you to supply your code so that we can see how you're trying to achieve this at the moment, I think I have an idea about how you're trying to achieve this but I'm not certain at the moment.

I get the feeling that you're trying to achieve the changing of the image after 5 seconds through the ASP.Net code, which you can't do and would explain why you would only be seeing winning entry.

You would have to use some form of client side code, for example JavaScript.

So the way that I would go about doing this is have a selection of image URLs loaded into an array, and then using JavaScript loop through each of the images wait 5 seconds and then move onto the next one, just make sure that the last image in the array is the winning entry.

So your code might look something like this (unfortunately I am unable to test at the moment so it may need a little bit of a tweak)

<script type="text/javascript">
var index=0;
var timerId = 0;
var pictureArray= new Array(4);
pictureArray[0]='/images/loser1.jpg';
pictureArray[1]='/images/loser2.jpg';
pictureArray[2]='/images/loser3.jpg';
pictureArray[3]='/images/Winner.jpg';

timerId = setTimeOut('moveNext()',5000);

function moveNext() {
  if (index <= 3)
  {
    document.getElementById('TheImageID').src = pictureArra[index];
    index = index+1;
    
  }
  else
  {
    clearTimeout(timerId);
  }
}
</script>

If you really wanted to try and make the whole thing more dramatic then maybe you could look into creating this with Flash, but unfortunately as I am not familiar with Flash I can't help you with that.

Anyway I hope that this helps you

Satal

 

[eddiegil]

Thanks for the reply, Satal. Yes, you're right. I was trying to do it via the ASP.Net code. I was also thinking of using JavaScript but I'm not that familiar with it yet.

The problem with this is that the winning entry can not be converted to image since it is randomly queried from an SQL Server database via the aspx.vb code.

If I use JavaScript, can I display the image first for 5 seconds, hide the image afterwards, then display the label containing the winning entry which I queried via the aspx.vb code?

 

[Satal Keto]

Yeah that shouldn't be a problem, have a quick look at the following website, it will show you how to make an item disappear using JavaScript.
Seven ways to toggle an element with JavaScript

So what I would suggest you do is create two divs, in one put the label with the winning result, in the other put the losing images. Then using the information from the above website make the first div (with the winning result) show and the second div (with the losing result) hide when you've finished showing the incorrect results.

Or...

You could define a label and then use JavaScript to change the text, so instead of using images you show the losing results in the same place as you will the winning result.

Again I hope that has helped you

 

[eddiegil]

Ok, will try out your suggestion. Thanks, Satal!