Topics

JQuery Documentation

Jquery API

Jquery File CDN

Jquery Form CDN

Jquery UI CDN

Jquery UI CSS CDN

Enable submit button after file seleted

<script type="text/javascript">
	$(document).ready(function(){
	$('#file').change(function(){
	$('#submit').removeAttr('disabled');
		});
	});		
</script>


 <!DOCTYPE html>
 <html>
 <head>
 <title>Jquery Bangla Tutorial</title>
 </head>
 <body>
				
 <form action="" method="post" enctype="multipart/form-data">
 <input type="file" name="file" id="file"/>
 <input type="submit" name="btn" value="Upload" id="submit" disabled="disabled"/>
 </form>
				
 <script src="http://developerbd.org/CDN/Jquerycdn/jquery.js"></script>
 <script src="etc.js"></script>
 </body>
 </html>

			

how to use Click function

<script>
	$('#hide_message').click(function(){
	$('#message').hide();
	});
</script>

<!DOCTYPE html>
	<html>
	<head>
	<title>Jquery Bangla Tutorial</title>
	</head>
	<body>
	<input type="submit" value="Hide" Id="hide_message"/>
	<p id="message">This is a message</p>

	<script src="http://developerbd.org/CDN/Jquerycdn/jquery.js"></script>
	<script src="js/etc.js"></script>
	</body>
	</html>
			

how to use dblClick function

<script>
	$('#menu_link').dblclick(function(){
	$('#menu').show();

	});
</script>

<!DOCTYPE html>
	<html>
	<head>
	<title>Jquery Bangla Tutorial</title>
	</head>
	<body>
	<a href="#" id="menu_link">Menu</a><br/><br/>
	<div id="menu" style="display:none;">
	<a href="#">HTML 5</a><br/>
	<a href="#">CSS 3</a><br/>
	<a href="#">PHP</a><br/>
	<a href="#">MySQL</a><br/>
	<a href="#">Ajax</a><br/>
	</div>
	<script src="http://developerbd.org/CDN/Jquerycdn/jquery.js"></script>
	<script src="js/etc.js"></script>
	</body>
	</html>					
			

key up & key down Funciton

<script>
$('#text').keyup(function(){
	var text = $('#text').val();
	$('#feedback_text').html(text);

	});	


	$('#text').keydown(function(){
	var text = $('#text').val();
	$('#feedback_text').html(text);

	});
</script>

 <!DOCTYPE html>
 <html>
 <head>
 <title>Jquery Bangla Tutorial</title>
 <link type="text/css" rel="stylesheet" href="css/style.css"/>
 </head>
 <body>

 <input type="text" id="text"/>
 <span id="feedback_text"></span>

 <script src="http://developerbd.org/CDN/Jquerycdn/jquery.js"></script>
 <script src="js/etc.js"></script>
 </body>
 </html>				
			

How to use Change Funciton

<script>
	$('#list').change(function(){
	var list = $('#list').val();
	$('#feedback').html('your seleted value is :' + list);
	});
</script>	

	<!DOCTYPE html>
	<html>
	<head>
	<title>Jquery Bangla Tutorial</title>
	<link type="text/css" rel="stylesheet" href="css/style.css"/>
	</head>
	<body>
	<select id="list">
	<option value="one">One</option>
	<option value="two">Two</option>
	<option value="three">Three</option>
	</select>
	<span id="feedback"></span>
	<script src="http://developerbd.org/CDN/Jquerycdn/jquery.js"></script>
	<script src="js/etc.js"></script>
	</body>
	</html>

			

How to use addClass Funciton

<script>
	$('#Click_me').click(function(){
	$('#click_event').addClass('me');
	});	
</script>

	<!DOCTYPE html>
	<html>
	<head>
	<title>Jquery Bangla Tutorial</title>
	<link type="text/css" rel="stylesheet" href="css/style.css"/>
	<style>
.me{ color:white; background-color:black; font-family:verdana; padding:10px; } </style> </head> <body> <a href="#" id="Click_me">Click me</a> <div id="click_event">This is message</div> <script src="js/http://developerbd.org/CDN/Jquerycdn/jquery.js"></script> <script src="js/etc.js"></script> </body> </html>

Use removeClass function

<script>
	$('#Click_remove').click(function(){
	$('#click_remove_event').removeClass('remove');

	});	
</script>	

	<!DOCTYPE html>
	<html>
	<head>
	<title>Jquery Bangla Tutorial</title>
	<link type="text/css" rel="stylesheet" href="css/style.css"/>
	<style>
	.remove{
	color:white;
	background-color:black;
	font-family:verdana;
	padding:10px;
	}
	</style>
	</head>
	<body>
	<a href="#" id="Click_remove">Click me</a>
	<div id="click_remove_event" class="remove">This is message</div>
	<script src="http://developerbd.org/CDN/Jquerycdn/jquery.js"></script>
	<script src="js/etc.js"></script>
	</body>
	</html>			
			

How to use toggleClass Funciton



<!DOCTYPE html>
	<html>
	<head>
	<title>Jquery Bangla Tutorial</title>
	<style>
	.toggle{
	color:white;
	background-color:black;
	font-family:verdana;
	padding:10px;
	}
	</style>

	<script>
	$('#toggle').click(function(){
	$('#click_toggle_event').toggleClass('toggle');

	});
	</script>	

	</head>
	<body>
	<a href="#" id="Click_toggle">Click me</a>
	<div id="click_toggle_event" class="toggle">This is message</div>
	<script src="js/http://developerbd.org/CDN/Jquerycdn/jquery.js"></script>
	<script src="js/etc.js"></script>
	</body>
	</html>	

			

How to make scrollTop



<!DOCTYPE html>
	<html>
	<head>
	<title>jquery</title>

	<script>
	$(document).ready(function(){
	$('.top').click(function(){

	$('html,body').animate({ scrollTop: 0}, 1000);
	});
	});

	</script>

	</head>
	<body>
	<a href="#" class="top">Top</a>
	<script src="js/http://developerbd.org/CDN/Jquerycdn/jquery.js"></script>
	<script src="js/effects.js"></script>
	</body>
	</html>				
			

How to Make Accordion



	<html> 
	<head> 
	<title>j query test</title> 
	<link rel="stylesheet" href="style.css"/> 
	<link rel="stylesheet" href="http://developerbd.org/CDN/Jquerycdn/jquery-ui.min.css"/>

	<script>
	$('#content').accordion();
	</script>

	</head> 
	<body> 
	<div id="content"> 
	<h3><a href="">About</a></h3> 
	<div>A little about me</div> 
	<h3><a href="">Gellery</a></h3>
	<div>A little gellery me</div>
	<h3><a href="">Contact Us</a></h3>
	<div>A little Contact me</div>
	</div>
	<script src="http://developerbd.org/CDN/Jquerycdn/jquery.js"></script>
	<script src="http://developerbd.org/CDN/Jquerycdn/jquery-ui.js"></script>
	<script src="js/custom.js"></script>
	</body>
	</html>				
			

How to Make Tab



<html>
<head>
<title>j query test</title>
<link rel="stylesheet" href="http://developerbd.org/CDN/Jquerycdn/jquery-ui.min.css"/>

<script>
$('#tabs').tabs();
</script>	

</head>

<body>
<div id="tabs">
	<ul>
	<li><a href="#home">Home</a></li>
	<li><a href="#about">About</a></li>
	<li><a href="#contact">Contact</a></li>
	</ul>
	
	<div id="home">
	<p>this is short Home</p>
	</div>

	<div id="about">
	<p>this is short about</p>
	</div>

	<div id="contact">
	<p>this is short contact</p>
	</div>

</div>

<script src="http://developerbd.org/CDN/Jquerycdn/jquery.js"></script>
<script src="http://developerbd.org/CDN/Jquerycdn/jquery-ui.js"></script>
<script src="js/custom.js"></script>
</body>
</html>

			

How to Use SlideUp and SlideDown

	

	<!DOCTYPE html>
	<html>
	<head>
	<title>jquery</title>

	<script>
		$(document).ready(function() {
		$('#top_message').slideDown('speed');
		});

		$('#hide_message').click(function(){
		$('#top_message').slideUp('speed'); 
		});	
	</script>


	<style>
	#top_message{
	display:none;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	height:100px;
	width:700px;
	background-color:black;
	font-size:20px;
	padding:20px;
	color:white;
	}
	</style>
	</head>
	<body>
	<div id="top_message"> <p>we see you 're not logged in. Do you want to <a href="#">sing up</a></p> <a href="#" id="hide_message">No thinks</a></div>
	<script src="http://developerbd.org/CDN/Jquerycdn/jquery.js"></script>
	<script src="js/effects.js"></script>
	</body>
	</html>

			

How to make Progress Bar



	<html>
	<head>
	<title>jquery test</title>
	<link rel="stylesheet" href="http://developerbd.org/CDN/Jquerycdn/jquery-ui.min.css"/>

	<script>
	$('#file').change(function(){
	var val =0;
	var interval = setInterval(function(){
	 val =val+1;
	$('#pb').progressbar({ value:val});
	$('#parcent').text(val +'%');
	if( val == 100)
	{
		clearInterval(interval);	
	}

	},50);

	});
	</script>



	</head>
	<body>
	<input type="file" id="file" />
	<div id="pb"></div>
	<div id="parcent"></div>
	<script src="http://developerbd.org/CDN/Jquerycdn/jquery.js"></script>
	<script src="http://developerbd.org/CDN/Jquerycdn/jquery-ui.js"></script>
	<script src="js/custom.js"></script>
	</body>
	</html>				
			

How to Make Dialog Box

	
	<html>
	<head>
	<title>jquery Bangla Tutorial</title>
	<link rel="stylesheet" href="http://developerbd.org/CDN/Jquerycdn/jquery-ui.min.css"/>

	<script>
	$('#save').click(function(){
	$('#dialog').attr('title', 'Saved').text('Settings were change').dialog({ buttons: { 'Ok': function(){
	$('#dialog').dialog('close');
	}},closeOnEscape: true, draggable: false, resizable:false ,modal:true});
	});	
	</script>


	</head>
	<body>
	<input type="button" id="save" value="Save"/>
	<div id="dialog"></div>
	<script src="http://developerbd.org/CDN/Jquerycdn/jquery.js"></script>
	<script src="http://developerbd.org/CDN/Jquerycdn/jquery-ui.js"></script>
	<script src="js/custom.js"></script>
	</body>
	</html>		
			

How to print Webpage

	
	<html>
	<head>
	<script type="text/javascript">
	function makeprint()
	{
	window.print()
	}
	</script>
	</head>
	<body>
	<form>
	<input type="button" value="Print" onclick="makeprint()" />
	</form>
	</body>
	<html>				
			

Page Redirection

<html>
   <head>
      
      <script type="text/javascript">
         <!--
            function Redirect() {
               window.location="http://www.developerbd.org";
            }
         //-->
      </script>
 
   </head>

   <body>
      <p>Click the following button, you will be redirected to home page.</p>
<form> <input type="button" value="Redirect Me" onclick="Redirect();" />
</form> </body> </html>

How to make Sticky Menu

<html>
   <head>
    <title>HTMl Page </title>

    <script type="text/javascript">
    $(document).ready(function(){
		var s = $("nav");
		var pos = s.position();
		$(window).scroll(function(){
			var windowpos = $(window).scrollTop();
			if(windowpos > pos.top)
			{
				$("nav").addClass('scrollnav');
			}
			else
			{
				$("nav").removeClass('scrollnav');
			}
		});
		});		
		</script">


	<style>
	body{
	min-height:100px;
	}
	
	div{
	width:100%;
	min-height:50px;
	background-color:black;
	}
	div p{
	padding:10px;
	color:white;
	}
	.scrollnav{
	position:fixed;
	top:0;
	}
	
	</style>
    </head> 
	
   <body>
	<h1>This is Page Heading</h1>
	<h1>This is Page Heading</h1>
	<div>
		<p>Sticky Menu</p>
	</div>
	
	<script src="http://developerbd.org/CDN/Jquerycdn/jquery.js"></script>
	<script src="js/custom.js"></script>
   </body>
</html>			
			

How to Check File Exit

<script>

	$.ajax({
	url: 'appsData/appsData.sql', //or your url
		success: function(data){
		alert('exists');
		 },
		error: function(data){
		alert('does not exist');
		},
	})

</script>			
			

How to Make Preloader

<style>
#preloader{
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: white;
	background-image: url(../design/circle.gif);
	background-repeat: no-repeat;
	z-index: 1000;
	background-position: 48% 47%;
	background-size:50px 50px;

}

</style>	

<script>

	$(window).load(function() {
		ploader = document.getElementById("preloader");
		ploader.style.display = "none";
	});

</script>	


<div id="preloader">	</div>	


			

How to romove Attribute

<script>

	$("button").click(function(){
	    $("p").removeAttr("style");
	});

</script>	

			

How to add Attribute

<script>

	$("button").click(function(){
    $("img").attr("width","500");
	});

</script>