SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Florida
    Posts
    264
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Small popup box for site event

    Hey everyone,

    I'm working on a small script that will give candy (sites currency via Halloween event) to a user. I need to create a simple piece of javascript that can popup a little window telling the user they found candy.

    Here is an example: http://i239.photobucket.com/albums/f...rrow/claim.jpg

    If someone would be so kind to show me some example code, or point me in the right direction, I could work out the rest.

    Thanks!

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You need to attach an event to the candy (if that is what triggers the box appearance) using onclick or onmouseover (whichever you choose). The function that event calls then is responsible for displaying the box with the relevant information. If it's always going to be exactly the same info, then this is very easy. If the information changes based on what triggered the event, then you need to decide where the information is going to come from. Is there only one box on the page and is the information it shows static?

    So let's say the paragraph below is what triggers the appearance of the candy:
    HTML Code:
    <p id="candy">Here is some candy</p>
    Then:
    Code Javascript:
    function init() {
      var candy = document.getElementById('candy');
      if (!candy) return;
      candy.onmouseover = toggleClaim;
      candy.onmouseout = toggleClaim;
    }
    function toggleClaim() {
      var claim = document.getElementById('claim');
      if (!claim) {
        claim = document.createElement('div');
        claim.id = 'claim';
        claim.appendChild(document.createTextNode('Hey look, you just found...'));
        document.body.appendChild(claim);
      }
      if (claim.className === 'hide') claim.className = '';
      else claim.className = 'hide';
    }
    window.onload = init;
    Code CSS:
    #claim {position:absolute; top:10px; left:10px;}
    .hide {display:none}


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •