asked on

chat window

i want to trigger the chat window after 10 seconds with focus going to x.
what else is needed in the code? please help.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Chat</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css">
<script type='text/javascript'>
$(window).load(function(){
$("#dialog-message").dialog({
    modal: true,
    position: ['center', 'top'],
    width: 250,
   	buttons: {
        "Chat": function() {
            $(this).dialog("close");
        }
    }
});
});
</script>
</head>
<body>
<p>Shopping</p>
<div id="dialog-message" title="Chat"> 
  <div>
    Need help, please chat with our customer service.
  </div>
</div>
</body>
</html>

Open in new window

lenamtl

Hi,
here is an example that close after a delay
http://jsfiddle.net/j08691/246LG/

Not sure if you really need the focus on close because ten second is very quick...

example for focus on close:

$("#dialog").dialog({
open: function() {
$(this).parents('.ui-dialog').attr('tabindex', -1)[0].focus();
}
});

Open in new window

codelevel

ASKER

i tried the code in my example, but the focus was not going. please check.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Chat</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css">
<script type='text/javascript'>
$(window).load(function(){
$("#dialog-message").dialog({
    modal: true,
    position: ['center', 'top'],
    width: 250,
    open: function() {
		$(this).parents('#dialog-message').attr('tabindex', -1)[0].focus();
	},
   	buttons: {
        "Chat": function() {
            $(this).dialog("close");
        }
    }
});
});
</script>
</head>
<body>
<p>Shopping</p>
<div id="dialog-message" title="Chat"> 
  <div>
    Need help, please chat with our customer service.
  </div>
</div>
</body>
</html>

Open in new window

lenamtl

Hi just found that you are using a really really old jQuery version...

Are you starting this project? If so you may consider updating jquery to something more recent.

Let me know if you can update the version or not...

codelevel

ASKER

Can change.

ASKER CERTIFIED SOLUTION

lenamtl

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial