Ruben Sargsyan » JavaScript http://rubensargsyan.com Personal Website Thu, 01 Dec 2011 19:15:18 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Change input type from text to password for IE http://rubensargsyan.com/change-input-type-from-text-to-password-for-ie/ http://rubensargsyan.com/change-input-type-from-text-to-password-for-ie/#comments Thu, 28 Apr 2011 18:08:22 +0000 Ruben Sargsyan http://rubensargsyan.com/?p=615 Changing the type of input after page loaded is not supported in IE and here is an example how to do it using the other way:

<html>
 
<head>
  <title>Change input type from text to password for IE</title>
</head>
 
<body>
 
    <div id="password_field">
        <input type="text" id="password" name="password" value="Password" onclick="change_pass_field_type_topass()" />
    </div>
 
    <script type="text/javascript">
    function change_pass_field_type_topass(){
        if(document.getElementById("password").value=="Password"){
            var pass_new_field = document.createElement("input");
 
            pass_new_field.name = "password";
            pass_new_field.id = "password";
 
            pass_new_field.type = "password";
            pass_new_field.value = "";
 
            pass_new_field.onblur = function(){
                change_pass_field_type_totext();
            }
 
            document.getElementById("password_field").removeChild(document.getElementById("password"));
 
            document.getElementById("password_field").appendChild(pass_new_field);
 
            document.getElementById("password").focus();
        }
    }
 
    function change_pass_field_type_totext(){
        if(document.getElementById("password").value==""){
            var pass_new_field = document.createElement("input");
 
            pass_new_field.name = "password";
            pass_new_field.id = "password";
 
            pass_new_field.type = "text";
            pass_new_field.value = "Password";
 
            pass_new_field.onclick = function(){
                change_pass_field_type_topass();
            }
 
            document.getElementById("password_field").removeChild(document.getElementById("password"));
 
            document.getElementById("password_field").appendChild(pass_new_field);
        }
    }
    </script>
 
</body>
 
</html>
]]> http://rubensargsyan.com/change-input-type-from-text-to-password-for-ie/feed/ 2 Scrollable content by JavaScript http://rubensargsyan.com/scrollable-content-by-javascript/ http://rubensargsyan.com/scrollable-content-by-javascript/#comments Tue, 11 Jan 2011 18:54:20 +0000 Ruben Sargsyan http://rubensargsyan.com/?p=567 This is a scrollable content example created by JavaScript:

<html>
 
<head>
  <title>Scrollable Content</title>
</head>
 
<body>
 
<script type="text/javascript">
function up(){
    if(parseInt(document.getElementById("text").style.marginTop)-5>=parseInt("-"+document.getElementById("text").offsetHeight)+300){
        document.getElementById("text").style.marginTop = (parseInt(document.getElementById("text").style.marginTop)-5)+"px";
    }
}
 
function down(){
    if(parseInt(document.getElementById("text").style.marginTop)+5<=0){
        document.getElementById("text").style.marginTop = (parseInt(document.getElementById("text").style.marginTop)+5)+"px";
    }
}
</script>
 
<div id="scrollable_content" style="width: 300px; height: 300px; overflow: hidden; font-size: 15px; line-height: 15px;">
    <div id="text" style="margin-top: 0px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
 
<div><img src="up.png" alt="up" style="cursor: pointer" onclick="up();" /> <img src="down.png" alt="down" style="cursor: pointer" onclick="down();" /></div>
 
</body>
 
</html>

Icons

]]> http://rubensargsyan.com/scrollable-content-by-javascript/feed/ 0 Count of all external links of the web page http://rubensargsyan.com/count-of-all-external-links-of-the-web-page/ http://rubensargsyan.com/count-of-all-external-links-of-the-web-page/#comments Tue, 24 Aug 2010 11:40:40 +0000 Ruben Sargsyan http://rubensargsyan.com/?p=402 This is a JavaScript script for counting all external links of the web page. Just add this script after the tag </body>:

<script type="text/javascript">
var all_a = document.getElementsByTagName("a");
 
var this_link = window.location.toString();
this_link = this_link.substr(7,parseInt(this_link.indexOf("/",7)-7));
 
var external_links_count = 0;
 
for(var i=0; i<all_a.length; i++){
    if(all_a[i].href.indexOf(this_link)==-1){
        external_links_count++;
    }
}
 
alert("External links count is: "+external_links_count);
</script>
]]> http://rubensargsyan.com/count-of-all-external-links-of-the-web-page/feed/ 6 Countdown Clock http://rubensargsyan.com/countdown-clock/ http://rubensargsyan.com/countdown-clock/#comments Wed, 21 Jul 2010 12:09:20 +0000 Ruben Sargsyan http://rubensargsyan.com/?p=390 This script is an example of countdown clock. You can set seconds and start countdown.

<html>
 
<head>
  <title>Countdown Clock</title>
 
  <script type="text/javascript">
  function convert(){
    var seconds = document.getElementById("inputted_seconds").value;
 
    if(isNaN(seconds)){
        alert("Please enter a valid number.");
    }else{
        document.getElementById("inputted_seconds").setAttribute("disabled","disabled");
        document.getElementById("start").setAttribute("disabled","disabled");
 
        var days = seconds/60/60/24;
        days = parseInt(days.toString());
 
        seconds = seconds - days*24*60*60;
 
        var hours = seconds/60/60;
        hours = parseInt(hours.toString());
 
        seconds = seconds - hours*60*60;
 
        var minutes = seconds/60;
        minutes = parseInt(minutes.toString());
 
        seconds = seconds - minutes*60;
 
        document.getElementById("countdown_clock").innerHTML = days+"d "+hours+"h "+minutes+"m "+seconds+"s";
 
 
        t = setTimeout("start_countdown("+days+","+hours+","+minutes+","+seconds+")",0);
    }
  }
 
  function start_countdown(days,hours,minutes,seconds){
        if(seconds==-1){
            minutes--;
            seconds = 59;
        }
        if(minutes==-1){
            hours--;
            minutes = 59;
 
        }
        if(hours==-1){
            if(days>0){
                days--;
                hours = 23;
            }
        }
 
        document.getElementById("countdown_clock").innerHTML = days+"d "+hours+"h "+minutes+"m "+seconds+"s";
 
        if(days==0 && hours==0 && minutes==0 && seconds==0){
            alert("Countdown is finished.");
            document.getElementById("inputted_seconds").removeAttribute("disabled");
            document.getElementById("start").removeAttribute("disabled");
            document.getElementById("countdown_clock").innerHTML = "Countdown is finished.";
        }else{
            seconds--;
            t = setTimeout("start_countdown("+days+","+hours+","+minutes+","+seconds+")",1000);
        }
  }
  </script>
</head>
 
<body>
 
<label for="inputted_seconds">Input Seconds</label> <input type="text" id="inputted_seconds" /> <input type="button" id="start" value="Start Countdown" onclick="convert();" />
 
<div id="countdown_clock"></div>
 
</body>
 
</html>
]]> http://rubensargsyan.com/countdown-clock/feed/ 0 Grayscale http://rubensargsyan.com/grayscale/ http://rubensargsyan.com/grayscale/#comments Sat, 20 Mar 2010 13:50:50 +0000 Ruben Sargsyan http://rubensargsyan.com/?p=318 This is an image manipulation script that makes the selected photos grayscale and in the case of mouseover the colors are restored. It is easy to use, just put “grayscale” as the classes of the images. It used PHP and JavaScript for developing the script.

How To Use:

1. Include grayscale.js:

<script src=”grayscale/grayscale.js” type=”text/javascript”></script>

2. Put “grayscale” as the classes of the images.

Demo:

Demo

Version:

1.0

License:

Creative Commons License
Grayscale by Ruben Sargsyan is licensed under a Creative Commons Attribution 3.0 United States License.
Based on a work at rubensargsyan.com.

Download:

From rubensargsyan.com

Donate:

If you find this plugin useful to you, please consider making a small donation to help contribute to further development. Thanks for your kind support!
Donate

]]> http://rubensargsyan.com/grayscale/feed/ 0 Text counter by JavaScript http://rubensargsyan.com/text-counter-by-javascript/ http://rubensargsyan.com/text-counter-by-javascript/#comments Thu, 11 Feb 2010 10:36:47 +0000 Ruben Sargsyan http://rubensargsyan.com/?p=270 This is an example for adding a counter to the inputing texts of tags <textarea> and <input>:

<html>
 
<head>
  <title>Text Counter</title>
 
  <script type="text/javascript">
  function text_counter(textfield_id,counter_id,count){
    count = parseInt(count);
 
    document.getElementById(counter_id).innerHTML = count;
 
    document.getElementById(textfield_id).onpropertychange = function(){
        text_count_changed(textfield_id,counter_id,count);
    }
  }
 
  function text_count_changed(textfield_id,counter_id,count){
    if(count-parseInt(document.getElementById(textfield_id).value.length)<0){
        document.getElementById(textfield_id).value = document.getElementById(textfield_id).value.substr(0,count);
    }
 
    document.getElementById(counter_id).innerHTML = count-parseInt(document.getElementById(textfield_id).value.length);
  }
  </script>
</head>
 
<body>
<p>
<script type="text/javascript">inputtext_approving_chars_count = 10;</script>
<input type="text" id="inputtext" oninput='text_count_changed("inputtext","inputtext_counter",inputtext_approving_chars_count);'> <span id="inputtext_counter"></span>
<script type="text/javascript">text_counter("inputtext","inputtext_counter",inputtext_approving_chars_count);</script>
</p>
 
<p>
<script type="text/javascript">textfield_approving_chars_count = 255;</script>
<textarea id="textfield" cols="50" rows="10" oninput='text_count_changed("textfield","textfield_counter",textfield_approving_chars_count);'></textarea> <span id="textfield_counter"></span>
<script type="text/javascript">text_counter("textfield","textfield_counter",textfield_approving_chars_count);</script>
</p>
 
</body>
 
</html>
]]> http://rubensargsyan.com/text-counter-by-javascript/feed/ 3 The Last Visited Pages http://rubensargsyan.com/the-last-visited-pages/ http://rubensargsyan.com/the-last-visited-pages/#comments Sun, 17 Jan 2010 08:28:57 +0000 Ruben Sargsyan http://rubensargsyan.com/?p=239 Setting this script on your website will give your visitors the great opportunity to see their last visited pages of your website. The visited pages links are created by using DOM and JavaScript. Script is working by the Cookies (the visited pages are kept for example about a month – the period is decided by you). The quantity of the shown links are set by you. So, this is a very effective and comfortable script, that will be very pleasant for the visitors of your website.

How To Use:

1. Copy the the_last_visited_pages.js and the_last_visited_pages.css into your website directory.

2. Write in the <head></head>
<link rel=”stylesheet” href=”the_last_visited_pages.css” type=”text/css” />
<script src=”the_last_visited_pages.js” type=”text/javascript”></script>

3. Set <div id=”the_last_visited_pages”></div> where you want to show the last visited pages of the visitor.

4. Add <script type=”text/javascript”>start_the_last_visited_pages();</script> just after </body>

How To Customize:

You can use CSS to style it. Edit the code in the_last_visited_pages.css

Version:

1.0

License:

Creative Commons License
The Last Visited Pages by Ruben Sargsyan is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at rubensargsyan.com.

Donate:

If you find this plugin useful to you, please consider making a small donation to help contribute to further development. Thanks for your kind support!
Donate

]]> http://rubensargsyan.com/the-last-visited-pages/feed/ 2 Disable all links by javascript http://rubensargsyan.com/disable-all-links-by-javascript/ http://rubensargsyan.com/disable-all-links-by-javascript/#comments Mon, 11 Jan 2010 16:45:25 +0000 Ruben Sargsyan http://rubensargsyan.com/?p=232 To disable all links of a web page add the script bellow just after </body>

<script type="text/javascript">
    var all_links = document.getElementsByTagName("a");
 
    for(var i=0; i<all_links.length; i++){
        all_links[i].removeAttribute("href");
    }
</script>
]]> http://rubensargsyan.com/disable-all-links-by-javascript/feed/ 0 Passing time by JavaScript http://rubensargsyan.com/passing-time-by-javascript/ http://rubensargsyan.com/passing-time-by-javascript/#comments Fri, 18 Dec 2009 08:00:11 +0000 Ruben Sargsyan http://rubensargsyan.com/?p=182 This script shows the passing time from the date you wish.

<html>
    <head>
        <title>Passing time</title>
 
        <script type="text/javascript">
            var from_date = "Dec 18, 2009 12:00:00"; // Set the date from which the passing time will be shown
 
            var d = new Date();
            var current_time = d.getTime();
 
            var from_time = Date.parse(from_date);
 
            var diference_in_milliseconds = current_time - from_time;
 
            var passed_days = diference_in_milliseconds/1000/60/60/24;
            passed_days = parseInt(passed_days.toString());
 
            rest_milliseconds = diference_in_milliseconds - passed_days*24*60*60*1000;
 
            var passed_hours = rest_milliseconds/1000/60/60;
            passed_hours = parseInt(passed_hours.toString());
 
            rest_milliseconds = rest_milliseconds - passed_hours*60*60*1000;
 
            var passed_minutes = rest_milliseconds/1000/60;
            passed_minutes = parseInt(passed_minutes.toString());
 
            rest_milliseconds = rest_milliseconds - passed_minutes*60*1000;
 
            var passed_seconds = rest_milliseconds/1000;
            passed_seconds = parseInt(passed_seconds.toString());
 
            var t; 
 
            function passing_time(){
                if(passed_seconds==60){
                    passed_minutes = passed_minutes + 1;
                    passed_seconds = 0;
                }
                if(passed_minutes==60){
                    passed_hours = passed_hours + 1;
                    passed_minutes = 0;
                }
                if(passed_hours==24){
                    passed_days = passed_days + 1;
                    passed_hours = 0;
                }
 
                document.getElementById("passing_time").innerHTML = passed_days+" days, "+passed_hours+" hours, "+passed_minutes+" minutes, "+passed_seconds+" seconds.";
                passed_seconds = passed_seconds + 1;
                t = setTimeout("passing_time()",1000);
            }
        </script>
</head>
 
<body>
    <div id="passing_time"></div>
</body>
 
<script>passing_time();</script>
 
</html>
]]> http://rubensargsyan.com/passing-time-by-javascript/feed/ 0 Check/uncheck checkboxes by JavaScript http://rubensargsyan.com/checkuncheck-checkboxes-by-javascript/ http://rubensargsyan.com/checkuncheck-checkboxes-by-javascript/#comments Tue, 01 Dec 2009 13:34:40 +0000 Ruben Sargsyan http://rubensargsyan.com/?p=149 The easy way to check/uncheck checkboxes. Insert into <head></head> this script

<script type="text/javascript">
function check_all(){
   var all_inputs = document.getElementsByTagName("input");
 
   for(i=0; i<all_inputs.length; i++){
      if(all_inputs[i].type=="checkbox" && all_inputs[i].className=="check_uncheck"){
         all_inputs[i].checked = "checked";
      }
   }
}
 
function uncheck_all(){
   var all_inputs = document.getElementsByTagName("input");
 
   for(i=0; i<all_inputs.length; i++){
      if(all_inputs[i].type=="checkbox" && all_inputs[i].className=="check_uncheck"){
         all_inputs[i].checked = "";
      }
   }
}
</script>

then set “check_uncheck” the classes of checkboxes which must check/uncheck (Example: <input type=”checkbox” name=”checkbox”>) and set onclick=”check_all()” to element on click which the checkboxes will be checked and onclick=”uncheck_all()” to element on click which the checkboxes will be unchecked (Example: <input type=”button” value=”Check” onclick=”check_all()”> <input type=”button” value=”Uncheck” onclick=”uncheck_all()”>).

]]> http://rubensargsyan.com/checkuncheck-checkboxes-by-javascript/feed/ 0