0

I have a website that has a "shop" where you can use "coins" to buy stuff. Right now, I am creating the shop and testing it out so please take a look at it here http://coinawards.net63.net/structure/shop.php

So when you click the box that says "Buy for 40 coins" it will pop up a light blue box that says "added to your cart".

Right now, my code says that once the 'buy' button is BLURRED, the popup should disappear... but it doesn't. I'll post my code below in the hopes that someone knows how to fix it!

Code:

function init()
{

    var buyinfobutton = $(".buyinfo");

    buyinfobutton.on("click",AddToCart);

    buyinfobutton.on("blur",popUpVanish);

    $('#confirmbox').hide();

}

onload = init;

var shoppingcart = {};

function AddToCart()
{
    // This is called properly.
    $('#confirmbox').show('normal');

}

function popUpVanish()
{
    // This is never called!
    $('#confirmbox').hide();

}

Also, if you see my site and think it need some improvement on an area (some parts are bad, I know) please note it down as well! Thanks!

Default
  • 16,020
  • 3
  • 24
  • 38
austinstout
  • 1,180
  • 1
  • 11
  • 14
  • [please create a reduced test case on jsfiddle](http://jsfiddle.net). [It's not considered appropriate to post links to your own site for bugfixing help](http://meta.stackexchange.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link-to-it). – zzzzBov Mar 29 '13 at 18:09
  • http://jsfiddle.net/SDaAS/ – austinstout Mar 29 '13 at 18:14
  • why is it not appropriate though? – austinstout Mar 29 '13 at 18:14
  • Because you'll probably fix the problem once you know what it is, right? Then the link becomes meaningless to the question. – JJJ Mar 30 '13 at 07:13

2 Answers2

1

here's what i came up, i think its what it's looking for. i refactored your code a little.

http://jsfiddle.net/kYT5U/

$(document).ready(function() {
    $(".buyinfo")
    .click(AddToCart)
    .mouseout(popUpVanish);
    $('#confirmbox').hide();
});

var shoppingcart = {};

function AddToCart() {
    $('#confirmbox').show('normal');
}

function popUpVanish() {
    $('#confirmbox').hide();
}

updated jsfiddle with a delay and a fadeOut http://jsfiddle.net/kYT5U/1/

Smern
  • 18,746
  • 21
  • 72
  • 90
  • Hi, thanks for this new code. It works, but is the "mouseout" necessary...? It doesn't create the same effect as a blur would, and may make it hard for a user to see the message. – austinstout Mar 29 '13 at 18:19
  • When I switched out the word mouseout with the word blur it didn't work... what is jQuery's problem with BLUR!!!?? – austinstout Mar 29 '13 at 18:20
  • what do you mean effect? perhaps you mean the .hide()? you can use fadeOut instead of hide() – Smern Mar 29 '13 at 18:20
  • Well, when you go on the site I want people to see the message for a few seconds. If they move their mouse at all (the item confirmbox is fairly small) most likely the message will disappear. Probably, for somepeople, this will happen too fast, so a mouse CLICK might make the difference then a mouse movement. – austinstout Mar 29 '13 at 18:22
  • @user1721665 `div` elements by default do not work with focus related events (in some browsers anyhow, not all). You have to give them a `tabindex` attribute. You can refer to my answer below for additional detail. – Default Mar 29 '13 at 18:23
  • Refer to my previous comment on using fadeOut. you can also put a delay on it if you wish. $("#confirmbox").delay(1000).fadeOut()... i linked a new jsfiddle on the bottom of my answer so you can see – Smern Mar 29 '13 at 18:24
  • Don't worry, I got it. Is there any way to accept 2 answers? Because both of you (smerny and default) were helpful – austinstout Mar 29 '13 at 18:28
  • Nooooo I can't accept 2 answers :( – austinstout Mar 29 '13 at 18:28
  • Haha don't worry about it @user1721665. Just accept whichever answer you feel applies to your question more (or whichever you decide to use). I know I won't feel slighted if you leave this answer accepted, and I'm sure smerny won't care if you change your mind. We're here to help after all :) – Default Mar 29 '13 at 18:30
  • I rated both of yours up but I think i will accept Smerny's answer. I suppose because he provided a whole code section. – austinstout Mar 29 '13 at 18:33
1

The problem is that you are trying to use focus related events on a DOM element (div) that does not support focus by default (in some browsers). Your code will work as expected if you set the tabindex attribute of your div's with the .buyinfo class. You can refer to the answer here for more detail, but if you set this property for your div's like

$(".buyinfo").attr("tabindex", -1)

then it will work as expected.

Community
  • 1
  • 1
Default
  • 16,020
  • 3
  • 24
  • 38
  • So I add this extra code snippet in? Or do I replace it with something? Because I am not too good with understanding new stuff... sorry – austinstout Mar 29 '13 at 18:23
  • 1
    Not a problem, just add it to your `init` function and it should work properly. All that line does is make it so all your `div` elements with the _buyinfo_ class have a `tabindex=-1` attribute. – Default Mar 29 '13 at 18:24
  • You're welcome, glad to be able to help. – Default Mar 29 '13 at 18:27