From da0aeced9de1184d799d467b8c096724969e4623 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Scott=20Gonz=C3=A1lez?= <scott.gonzalez@gmail.com>
Date: Sat, 29 Aug 2009 02:12:56 +0000
Subject: [PATCH] Dialog demo: Use the ui-state-highlight class instead of a
 hard-coded color.  Fixes #4808 - Modal dialog form validation demo - error
 message uses hard-coded color.

---
 demos/dialog/modal-form.html | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/demos/dialog/modal-form.html b/demos/dialog/modal-form.html
index 548e454ec..5ef208952 100644
--- a/demos/dialog/modal-form.html
+++ b/demos/dialog/modal-form.html
@@ -11,7 +11,6 @@
 	<script type="text/javascript" src="../../ui/ui.stackfix.js"></script>
 	<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
 	<script type="text/javascript" src="../../ui/effects.core.js"></script>
-	<script type="text/javascript" src="../../ui/effects.highlight.js"></script>
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 		body { font-size: 62.5%; }
@@ -23,8 +22,8 @@
 		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
 		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
 		.ui-button { outline: 0; margin: 0; padding: .4em 1em .5em; text-decoration: none; cursor: pointer; position: relative; text-align: center; }
-		.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em; }
-		
+		.ui-dialog .ui-state-error { padding: .3em; }
+		.validateTips { border: 1px solid transparent; padding: 0.3em; }
 		
 	</style>
 	<script type="text/javascript">
@@ -36,10 +35,15 @@
 			email = $("#email"),
 			password = $("#password"),
 			allFields = $([]).add(name).add(email).add(password),
-			tips = $("#validateTips");
+			tips = $(".validateTips");
 
 		function updateTips(t) {
-			tips.text(t).effect("highlight",{},1500);
+			tips
+				.text(t)
+				.addClass('ui-state-highlight');
+			setTimeout(function() {
+				tips.removeClass('ui-state-highlight', 1500);
+			}, 500);
 		}
 
 		function checkLength(o,n,min,max) {
@@ -70,6 +74,7 @@
 			stackfix: true,
 			autoOpen: false,
 			height: 300,
+			width: 350,
 			modal: true,
 			buttons: {
 				'Create an account': function() {
@@ -137,7 +142,7 @@
 <div class="demo">
 
 <div id="dialog-form" title="Create new user">
-	<p id="validateTips">All form fields are required.</p>
+	<p class="validateTips">All form fields are required.</p>
 
 	<form>
 	<fieldset>
-- 
2.39.5