Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
.hint {
    color: #C0C0C0;
}
</style>
​
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
  <script type="text/javascript">(function($) {
    $.fn.inputdynvalue = function (options) {
        var opts = $.extend({}, $.fn.inputdynvalue.defaults, options);
        return this.each(function(){
            var hvalue = opts.htext;
            switch (opts.htext) {
                case 'title' : hvalue = $(this).attr('title'); break;
                case 'value' : hvalue = $(this).attr('value'); break;
            }
            $(this).attr('value', hvalue).addClass(opts.hclass)
            .unbind('focus.dynvalue blur.dynvalue')
            .bind('focus.dynvalue', function() {
                if (this.value === hvalue) {
                    this.value = '';
                    $(this).removeClass(opts.hclass);
                }
            })
            .bind('blur.dynvalue', function() {
                if (this.value === '') {
                    this.value = hvalue;
                    $(this).addClass(opts.hclass);
                }
            });
        });
    };
    $.fn.pdynvalue.defaults = {
        htext: 'title',
        hclass: 'hint'
    };
})(jQuery);
$(document).ready(function(){
    $('p').pdynvalue();
});</script>
</head>
​
<body>
​
​
<div><img id="iymok" src="http://download.kde.org/khotnewstuff/icons/previews/m732-1.png" alt="Alt by default" />
  <p type="text" id="iymok" title="Blablabla Text 1" /><a href="#">aaaaaa</a></p>
  <p type="radio" checked="checked" name="iymok" title="m133-1.png|Logo 1|Blablabla Text 1" /><a href="#">bbbbbb</a></p>
  <p type="radio" name="iymok" title='m203-1.png|Logo 2|Text of input 2' /><a href="#">ccccccc</a></p>
<p type="radio" name="iymok" title='m602-1.png|Logo 3|Text of input 3' /><a href="#">dddddd</a></p>
</div>
​
  <script type="text/javascript">
  imgFldr = 'http://download.kde.org/khotnewstuff/icons/previews/';
$("a").click(function() {
   var strarr = this.title.split('|');
   if(strarr.length < 2) return;
   $('#'+this.name).attr('src', imgFldr+strarr[0]).attr('alt', strarr[1]).attr('title', starr[2]);
});
</script>
</body>
</html>
​
 
document.getElementById("hello").innerHTML = "Hello World - this was inserted using JavaScript";
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers