JQuery - make a popup that disappears (like datepicker) when clicking outside popup

The below code works in a jsfiddle in Chrome but not in IE7/8/9.



What is meant to happen is:
 1.
click on "onetxt" then the red block appears.

2.
the red block must only hide if you click on anything except "Input1" , "redDiv" or "onetxt"

 
What happens is if you click on the redDiv then it hides -- it looks like its because the red div is not getting focused in time.

The effect required is that of the jquery datpicker - if you click outside of the div, the div hides. If you click on the div - the div stays visible.

Can you please help..

thanks


<div id="myarea"></div>



    <br /><br />
    <br /><br />
    <br /><br />
    <br /><br />
    <br /><br />
    <br /><br />
    <br /><br />
    <br /><br />
    <br /><br />
    <br /><br />


    <input type="text" id="test"  />

Open in new window


       $(document).ready(function () {
            var hider = null;
            var onetxt = $('<input type="text" />');
            var Input1 = $('<input type="text" />');
            var redDiv = $('<div>', {
                tabindex: "5",
                style: "width:200px;height:200px;background:red; ",
                text: 'test',
                html: "<br /><br />"
            }).append(Input1);


            redDiv.hide();

            onetxt.focus(function () { redDiv.show();});
            Input1.focus(function () { redDiv.show();});
            redDiv.focus(function () { redDiv.show()});

            onetxt.blur(function () { redDiv.hide();});
            Input1.blur(function () { redDiv.hide();});
            redDiv.blur(function () { redDiv.hide() });

            $('#myarea').after(onetxt, redDiv);
        });

Open in new window

jxhardingAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
comment lines 19 and 21 : http://jsfiddle.net/Fu5qm/5/

            //onetxt.blur(function () { redDiv.hide();});
            Input1.blur(function () { redDiv.hide();});
            //redDiv.blur(function () { redDiv.hide() });

Open in new window

0
jxhardingAuthor Commented:
Hi leakim971, I still have the same effect. If you click in the top textbox or on the red div, and then outside of it, the popup still shows (I'm trying to make it disappear - like the datepicker control).  Currently, only if you click on the textbox inside the red div, and then outside does it disappear.
0
leakim971PluritechnicianCommented:
What about : http://jsfiddle.net/Fu5qm/6/
       $(document).ready(function () {
            var hider = null;
            var onetxt = $('<input type="text" />');
            var Input1 = $('<input type="text" />');
            var redDiv = $('<div>', {
                tabindex: "5",
                style: "width:200px;height:200px;background:red;display:none;",
                text: 'test',
                html: "<br /><br />"
            }).append(Input1);

            onetxt.focus(function () { redDiv.show(); }).blur(function () { if(redDiv.is(":visible")) redDiv.hide(); });
            redDiv.focus(function () { redDiv.show(); }).blur(function () { if(redDiv.is(":visible")) redDiv.hide(); });
            Input1.focus(function () { redDiv.show(); }).blur(function () { redDiv.hide(); });

            $('#myarea').after(onetxt, redDiv);
        });

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jxhardingAuthor Commented:
Thanks, I'm giving up on this one unfortunately. Chrome works well, but not FireFox or IE unfortunately. Thanks for your time and expertise.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.