SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Dynamic text without submit button

    Hello! I did try to find ready example without luck... I try to do dynamic colorpalette whit javascript, what works like this;

    When color-Hex code/or any text is typed in textbox -> table bgcolor changes automatically to that typed value (without pressing any buttons).

    I think it's very simple, but i don't know how to do it.

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can do this:

    The form:
    HTML Code:
    <input type="text" onchange="checkHex(this)" size="10" />
    The Javascript:
    Code:
    function checkHex(el) {
           if (/#?([A-Fa-f0-9]){3}(([A-Fa-f0-9]){3})?/.test(el.value)) {
                el.style.color = el.value;
           }
    }
    but because of #fff problem, you probably actually want to do this:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Onblur Hex colors</title>
    <script type="text/javascript">
    function checkHex(el) {
    	var re = /#?([A-Fa-f0-9]){3}(([A-Fa-f0-9]){3})?/;
    	if (re.test(el.value)) {	
    		document.getElementById("seecolor").style.backgroundColor = el.value;
    	}
    }
    </script>
    <style type="text/css">
    #seecolor {
    	display: block;
    	width: 30px;
    	height: 30px;
    	border: 1px solid black;
    }
    
    </style>
    </head>
    
    <body>
    <form>
    	<input type="text" onkeyup="checkHex(this)" size="10" /><div id="seecolor"></div>
    </form>
    </body>
    </html>
    Notice that in the first example the input box text color is updated, and in the second color the div with an id of seecolor has its background color updated.

    Dave

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, than you, Dave!

    It's working properly, but I forgot to say, that hex code can save to mysql and when page is loaded it should show that saved color automaticly.
    How I do this? I desperate try to put; onLoad="checkHex(this)", but, as you know, it didn't work... =P

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In order to save to MYSQL you'd have to use Ajax to send the color information back to a PHP (or other server side language) on the server, and have that script update the database. Then on a page load, you'd have to print the right color into that box using another php script.

    Alternatively, you could use a Javascript cookie, and read the value of the cookie.

    Either of these solutions is a bit of work...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •