Dynamic Drive Forums - Blogs - keyboard1333 http://www.dynamicdrive.com/forums/blog.php?56681-keyboard1333 Dynamic Drive help forum en Fri, 24 May 2013 01:11:18 GMT vBulletin 10 http://www.dynamicdrive.com/forums/images/misc/rss.jpg Dynamic Drive Forums - Blogs - keyboard1333 http://www.dynamicdrive.com/forums/blog.php?56681-keyboard1333 Scroll to Top Script http://www.dynamicdrive.com/forums/entry.php?265-Scroll-to-Top-Script Thu, 11 Oct 2012 01:00:34 GMT Here's my alternative to the ddscript Jquery Scroll to Top Control V1.1

scroll_to_top.js

Code:
$.fn.scroll_to_top = function(userOptions) {
	var check_scroll = 0;
    var defaultOptions = {
		image : 'jump_to_top.png',
		image_height : '6%',
		image_width : '3%',
		scroll_distance : 200,
		scroll_location : 0,
		scroll_speed : 600,
		button_animate_speed : 200,
		button_animate_type : 'fade',
		position : 'bottom_left'
    };
    var args = defaultOptions;
    if(typeof userOptions === 'object') { 
		args = $.extend(defaultOptions,userOptions);
	}
	switch(args.position) {
		case 'top_left':
			var css = 'top:0;left:0;';
		break;
		case 'top_right':
			var css = 'top:0;right:0;';
		break;
		case 'bottom_right':
			var css = 'bottom:0;right:0;';
		break;
		case 'center':
			var css = 'top:50%;bottom:50%;left:50%;right:50%;';
		break;
		default:
			var css = 'bottom:0;left:0;';
	}
	css += 'margin-bottom:5px;margin-top:5px;margin-left:5px;margin-right:5px;display:none;position:fixed;height:' + args.image_height + ';width:' + args.image_width + ';cursor:pointer;';
	$('body').append('<img src="' + args.image + '" alt="Scroll to top" title="Scroll to top" id="scroll_to_top" style="' + css + '"/>');
	$(window).scroll(function() {
		if($(this).scrollTop() > args.scroll_distance) {
			switch(args.button_animate_type) {
				case 'slide' : 
					$('#scroll_to_top').slideDown(args.button_animate_speed);
				break;
				default:
					$('#scroll_to_top').fadeIn(args.button_animate_speed);
			}
        } else {
			switch(args.button_animate_type) {
				case 'slide' : 
					$('#scroll_to_top').slideUp(args.button_animate_speed);
				break;
				default:
					$('#scroll_to_top').fadeOut(args.button_animate_speed);
			}
        }
		if(check_scroll === 1) {
			if($(this).scrollTop() === 0) {
				if(typeof args.success != "undefined") {
					args.success();
					check_scroll = 0;
				}
			}
		}
	});
	$('#scroll_to_top').click(function() {
		$('body,html').animate({
			scrollTop : args.scroll_location
		}, args.scroll_speed);
		check_scroll = 1;
	});
};
To call the script, put this code in the <head></head> of your body -

Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="scroll_to_top.js"></script>
<script type="text/javascript">
$(window).load(function(){ 
	$('body').scroll_to_top({
		image : "jump_to_top.png",
		image_height : "6%",
		image_width : "3%",
		scroll_distance : 200,
		scroll_speed : 600,
		//scroll_location : 50,
		button_animate_speed : 200,
		button_animate_type : 'fade',
		position : 'bottom_left',
		success : function() {
			//alert("Complete");
		}
	});
});
</script>
Just edit the settings as needed.
If you do not pass one of the settings to the script, the default settings will kick in.

Here's the image used, but you can substitute your own - Attachment 4790

Here's a working example. ]]> keyboard1333 http://www.dynamicdrive.com/forums/entry.php?265-Scroll-to-Top-Script Show plain text in a password field http://www.dynamicdrive.com/forums/entry.php?257-Show-plain-text-in-a-password-field Wed, 06 Jun 2012 12:51:05 GMT I was browsing the internet and came across this tecnique and thought it was rather cool.

To make plain text show in a password field, you need the following form -

HTML Code:
 <form>
 <input type="text" name="passwordPlain" id="passwordPlain" value="Password" onfocus="swapPasswordBoxes('click')" style="display:none;"/>
 <input type="password" name="password" id="password" value="" onblur="swapPasswordBoxes('blur')" />
 </form>
Run this function once the page has loaded (<body onload="onPageLoaded()">)

HTML Code:
function onPageLoaded() {
	document.getElementById('password').style.display = "none";
	document.getElementById('passwordPlain').style.display = "inline";
}
And add this function to your javascript as well

HTML Code:
function swapPasswordBoxes(funcType) {
	if(funcType == "click") {	
		document.getElementById('passwordPlain').style.display = "none";
		document.getElementById('password').style.display = "inline";
		document.getElementById('password').focus();
	} else {
		if(document.getElementById('password').value.length == 0) {
			document.getElementById('passwordPlain').style.display = "inline";
			document.getElementById('password').style.display = "none";
		}
	}
}
This means that the plain text box is visible to the user when they load the page (if they have javascript {else it just shows the standard password box}).

Then when they click on the plain text box, that box is made invisible and the password box is made visible (and it sets the focus to this box as well). If they click off the password box, and the box is empty, it is reset to the plain text box.

Full working code -

HTML Code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function onPageLoaded() {
	document.getElementById('password').style.display = "none";
	document.getElementById('passwordPlain').style.display = "inline";
}
function swapPasswordBoxes(funcType) {
	if(funcType == "click") {	
		document.getElementById('passwordPlain').style.display = "none";
		document.getElementById('password').style.display = "inline";
		document.getElementById('password').focus();
	} else {
		if(document.getElementById('password').value.length == 0) {
			document.getElementById('passwordPlain').style.display = "inline";
			document.getElementById('password').style.display = "none";
		}
	}
}
</script>
</head>
<body onload="onPageLoaded()">
<form>
<input type="text" name="passwordPlain" id="passwordPlain" value="Password" onfocus="swapPasswordBoxes('click')" style="display:none;"/>
<input type="password" name="password" id="password" value="" onblur="swapPasswordBoxes('blur')" />
</form>
</body>
</html>
]]> keyboard1333 http://www.dynamicdrive.com/forums/entry.php?257-Show-plain-text-in-a-password-field document.getElementById shortcut http://www.dynamicdrive.com/forums/entry.php?254-document-getElementById-shortcut Thu, 22 Mar 2012 08:38:08 GMT I'm amazed at how many people don't use a very simple shortcut for document.getElementById. This is for all the people who don't use a javascript library like jQuery.

All you have to do is include this code somewhere on your page

Code:
function $(element) {
return document.getElementById(element);
}
Then when you want to use document.getElementById('id'); just type $('id'); instead.

Example

Code:
<html>
<head>
<script type="text/javascript">
function $(element) {
return document.getElementById(element);
}
</script>
</head>
<body>
<input type="text" value="Hello" id="field1">
<input type="button" onclick="alert($('field1').value)">
</body>
</html>
I think it's a real time saver and more people should use it. ]]> keyboard1333 http://www.dynamicdrive.com/forums/entry.php?254-document-getElementById-shortcut