Getting the bubble clicks to work

[amrita]

Hi Steve, Troy,

I have the code for the bubble clicks, but it does not work all the
time, and I am not sure what is wrong with it.

I have an alert is bubbleWasTapped() to see if it enters the function,
and it does not all the time. If you have any suggestions if would be
extremely helpful.

Here is my call to addBubble()

// This is the timer for adding new bubbles
timerBubble = setInterval("addBubble()", 3000);

function addBubble()
{
// Figure out the duck's id number
var idNumber = bubbles.length;
var letter = generateRandomLetter();

// Add the bubble HTML
$("#bubble-area").append('<div id="bubble-' + idNumber + '"
class="bubble">' + letter + '</div>');

// Now, we need to grab a reference to the duck we just added to the
HTML
var bubble = $("#bubble-" + idNumber);

// Add the bubble to the bubbles array
bubbles.push(bubble);

//Set the click function for the bubble to be popped
// check to see if the bubble was tapped
$(bubble).click(bubbleWasTapped);

// Set the bubble's position using a "helper" function
initializePositionForBubble(bubble);
}

[Steve Marmon]

Hi Amrita,

Your code looks correct. Do you see a faint square appear around your
bubbles when you tap them? The square is Mobile Safari's way of
indicating that it detected a tap on the div. Sometimes Mobile Safari
won't detect the tap, and no square will appear. If you see a square,
and it still does not respond, that is indicative of a problem with
your code.

- Steve

[Amrita Thakur (अम्रिता ठाकुर)]

Hi Steve,

So I see the faint square sometimes but it is intermittant, i.e. doesn't always show up. Especially when I am playing the regular mode and have to wait for a while for the P to show up. Should I try setting a max size for the array to make sure all the bubbles are in there ?

Thanks,
Amrita

[Steve Marmon]

If you're only seeing the boxes show up intermittently, you may need
to increase the "hit area" of the bubbles. The hit area is the region
that is tappable. You can do this by increasing the padding of the
bubbles, or by embedding them inside a larger (transparent) div, and
attaching the .click() function to that.

- Steve

On Feb 15, 9:30 pm, Amrita Thakur (अम्रिता ठाकुर)