jQuery – Extreme Web Designs https://theextremewebdesigns.com/blog Web Design and Web Development Mon, 30 Jul 2012 14:44:32 +0000 en-US hourly 1 https://wordpress.org/?v=6.7.5 156673191 jQuery Scroll To Top Of Page Examples https://theextremewebdesigns.com/blog/jquery-scroll-to-top-scroll-to-top-of-page-using-jquery/ https://theextremewebdesigns.com/blog/jquery-scroll-to-top-scroll-to-top-of-page-using-jquery/#respond Mon, 30 Jul 2012 14:44:32 +0000 https://theextremewebdesigns.com/blog/?p=1084 If you ever wondered how to scroll to top of page using jQuery, then here is the perfect snippet for you. In this article, I am going to share two snippets that will let you scroll to top of page and even control the speed at which the scrolling takes place, thus allowing you greater control over the whole scrolling process. Read on to find out more about these copy & use snippets!

Examples to Scroll to Top of Page using jQuery

I am going to show you how you can use jQuery to scroll to top of page very easily, by means of an example. In this example, I am assuming that I have some content as my text, that spans more than one page and a hyperlink at the bottom of the content. I want to be able to click on this hyperlink so that the page automatically scrolls to the top of the page. In order to do this, I am applying a class of “scroll” to this hyperlink and adding code to this using jQuery. So here’s how it’s done:

Example: Use jQuery to scroll to top of page and also control its speed (optional)

<html>
<head>
<title>jQuery Scroll to Top of Page Example</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>

<body>

<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>

<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>
<p>Some content. </p>

<p><a href="#" class="scroll">Go To Top</a></p>
<script type="text/javascript" language="javascript" >

$(document).ready(function(){

	//Scroll slow
	$(".scroll").click(function() {
		$("html, body").animate({ scrollTop: 0 }, "slow");
		return false;
	});

	//Scroll fast
	$(".scroll").click(function() {
		$("html, body").animate({ scrollTop: 0 }, "fast");
		return false;
	});	

	//Scroll in 1 second - 1000 milliseconds
	$(".scroll").click(function() {
		$("html, body").animate({ scrollTop: 0 }, 1000);
		return false;
	});

	//Scroll in 5 seconds - 5000 milliseconds
	$(".scroll").click(function() {
		$("html, body").animate({ scrollTop: 0 }, 5000);
		return false;
	});

});	
</script>
</body>
</html>

Each of the code blocks is commented at it’s beginning, for your easy understanding. When you try the code above, make sure that you comment all code blocks except the one that you want to test as only the first block of code will be executed because they are all linked to the click event of the same html element.

Simple, isn’t it?

Do you know of any other ways to use jQuery to scroll to top of page? Feel free to suggest by commenting below.

]]> https://theextremewebdesigns.com/blog/jquery-scroll-to-top-scroll-to-top-of-page-using-jquery/feed/ 0 1084 jQuery Center Div Example https://theextremewebdesigns.com/blog/jquery-center-div/ https://theextremewebdesigns.com/blog/jquery-center-div/#respond Sat, 14 Apr 2012 21:23:01 +0000 https://theextremewebdesigns.com/blog/?p=547 Love jQuery? Need a quick way to center div in window? In this article I am going to show you how to center div using jQuery.

Example to Center Div using jQuery

In order to use this, simply apply the .center() method to your element selector and that will center the div.

<style type="text/css">
#my_div {
	background-color: #DFF2FF;
	border: 1px solid #06F;
	height: 200px;
	width: 500px;
}
.my_div_2 {
	background-color: #FFCC66;
	border: 1px solid #F90;
	height: 100px;
	width: 300px;
}
</style>

<div id="my_div">This is my_div</div>
<div class="my_div_2">This is my_div_2</div>

<script type="text/javascript">
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}

//Call the "center" function on your desired div in the following way.
//Simply replace #my_div with the ID or the class of the div that you want to center.
$('#my_div').center();
$('.my_div_2').center();
</script>

When you run the above code, you will notice that the divs are centered in the window when the page loads.

That’s it!

Do you know of any other ways to use jQuery to center div? Please share your thoughts below.

]]> https://theextremewebdesigns.com/blog/jquery-center-div/feed/ 0 547 jQuery Hide Show Textbox Examples https://theextremewebdesigns.com/blog/jquery-hide-show-textbox/ https://theextremewebdesigns.com/blog/jquery-hide-show-textbox/#comments Sat, 24 Mar 2012 00:51:41 +0000 https://theextremewebdesigns.com/blog/?p=389 Many times it may have happened that you wanted to use jQuery to Hide/Show text boxes when a checkbox is checked or a button is clicked. This article will show you how to use jQuery to Show / Hide Textbox when checkbox is checked.

How to Hide  Or Show Textbox using jQuery – Examples

In order to see how to show textbox or hide textbox using jQuery when checkbox is checked, lets assume that we have a textbox and few checkboxes. So here it goes:

Example: Show / Hide Textbox when checkbox is checked using jQuery

<input type="checkbox" class="hide" /><input type="text" value="Name" /><br>
<input type="checkbox" class="hide" /><input type="text" value="Email" /><br>
<input type="checkbox" class="hide" checked="checked" /><input type="text" value="Address" /><br>

<script type="text/javascript">
$(document).ready(function() {

$('.hide').click(function() {
$(this).next().toggle();
});
$('.hide:checked').next().hide();

});
</script>

This third input box is for the Address and it is hidden by default when the page loads. This is achieved by simply marking its “checked” attribute as “checked”. Just refer to the third input element’s HTML code to understand this. The corresponding jQuery code to achieve this is:

$('.hide:checked').next().hide();

Don’t forget to include your own version(preferably latest) of jQuery. Unless you have included a call to the jQuery framework, this demo will not work. Hope this helps.

Your turn!

Do you know of any other ways to use jQuery to Show / Hide textbox? Please feel free to share by commenting below.

]]> https://theextremewebdesigns.com/blog/jquery-hide-show-textbox/feed/ 1 389