| Vocademy |
This script will toggle the password between visible and invisible when the password field is clicked.
<script>
function showPassword(id) {
var x =
document.getElementById(id);
if (x.type === 'password') {
x.type = 'text';
} else {
x.type = 'password';
}
}
</script>
<input type='password' name='Password' id='PasswordBox' onClick="showPassword('PasswordBox')">
Try it below. Click the box to show and hide the password
The input tag needs a unique ID telling the showPassword function on which tag to operate. The showPassword function call must be encased in double quotes because it contains single quotes. It must pass the unique ID specified in the id parameter.
The showPassword function loads the specified input tag into the variable named x. It then checks the variable for the tag type. If the tag is a password box, the script changes the tag to a text box. If the tag is not a password box, it must be a text box, so the script changes the tag to a password box.
This script will swap Picture1.png and Picture2.png when the image is clicked. The onClick function call must use double quotes outside and single quotes inside.
<script>
function swapImage(image1,image2,id) {
var image =
document.getElementById(id);
if (image.getAttribute('src') == image2)
{
image.src = image1;
} else {
image.src = image2;
}
}
</script>
<img id='Image1' src='Picture1.png' onClick="swapImage('Picture1.png','Picture2.png','Image1');">
The id parameter (highlighted in yellow) must be the same within the img tag. The names are arbitrary; they don't need to use the word "image." However, if you want to do this with a second picture, you need to use a different id parameter, such as in the following, where the onMouseover and onMouseout triggers swap the pictures. The following image tag is a single tag. It appears on two lines to fit this page. The extra spaces at the beginning of the second line aren't necessare, but make to code more readable.
<img id=Image2' src='Picture3.png' onMouseover="swapImage('Picture3.jpg','Picture4.jpg','Image2');"
onMouseout= "swapImage('Picture3.jpg','Picture4.jpg','Image2');">
Try this by clicking the left image and moving your mouse over the right image.
This image tag and input field will call the swapImage and showPassword scripts when the image is clicked. Be sure to put the above functions (everything between and including the <script></script> tags above) in the document head. As above, the onClick function call must be encased in double quotes with single quotes inside.
<img id='PasswordImage' src='noeye.png' onClick="showPassword(); swapImage('noeye.png','eye.png','PasswordImage');">
<input type='password' name='Password' id='MyPasswordBox'>
Try it below by clicking on the eye icon.
Here are the eye images for you to download (right click then click save image as, etc.).
|
 |
| eye.png | noeye.png |
You have a script that reloads the current page for whatever reason. However, when the page reloads, the browser jumps to the top of the page. The following script saves the current position and jumps back to that position when the page reloads.
Put the following on the page, preferably in the head.
<script language="JavaScript">
function get_cookie(cookie_name){
var results = document.cookie.match ('(^|;) ?' + cookie_name + '=([^;]*)(;|$)');
if(results)
return(results[2]);
else
return null;
}
</script>
Use this body tag.
<body onScroll="document.cookie='ypos=' + window.pageYOffset" onLoad="window.scrollTo(0,get_cookie('ypos'))">
The script in the body tag saves the vertical position in a cookie named ypos every time the user scrolls the page. If the page is reloaded for any reason, the second script gets the ypos cookie and scrolls the page to that position. I found this useful when I had a page that would refresh its contents from a database every minute. Without the above scripts, the page would jump to the top upon each refresh.
The onScroll function saves a cookie named ypos with the contents of the variable window.pageYOffset. This variable is maintained by the browser and holds the current vertical position. The window.scrollTo function jumps to the specified location using the syntax "window.scrollTo(<x position>,<y position>).
The get_cookie script can be used to retrieve the contents of any cookie by name. The syntax is get_cookie('<cookie name>'). You do not need to customize this script; copy and paste it as-is.
The document.cookie.match function uses spooky regular expressions to find the cookie and extract its contents into the variable named results, the second line of which is passed back to the calling script.
| Vocademy |