web-profile

Using jQuery

simple way (same as "$(document).ready(function(){"):

<script>
$(function(){
	$('.target').css('background-color', 'yellow');
});
</script>

same as previous but with preventing $-conflicts with other js-frameworks:

<script>
jQuery(function($){
	$('.target').css('background-color', 'yellow');
});
</script>

window-load (use this method when you need to manipulate with images; only in this way you can get the height of the images with js in chrome which are not yet loaded for example):

<script>
$(window).load(function() {
	$('.target').css('background-color', 'yellow');
});
</script>

Finding elements:

<script>
jQuery('.target', this); // finding all target elements inside of the current element 
jQuery(this).find('.target'); // same as previous
jQuery(this).children('.target'); // can be used if the target elements are direct descendants of the current element
</script>

jQuery selectors:

<script>
$('.target, .target2').css('background-color', 'yellow');
</script>

Creating html tags with jQuery:

<script>
$('<blockquote></blockquote>', {
	class: 'quote',
	text: $('.qq').text()
}).prependTo( $('.target') );
</script>

Move elements with jQuery:

<script>
$('h1').appendTo( $('.target') );
$('h2').after( $('.target') ); // or this way
</script>

using jQuery as an object with config options using $.extend():

using jQuery as an object with config options using $.extend() source code:

<!doctype html>
<html>
<head>
	<meta charset=utf-8>
	<title>Slides and Structure</title>
	<style>
 
	body {
		width: 600px;
		margin: auto;
		font-family: sans-serif;
	}
 
	#contact { 
		background: #e3e3e3; 
		padding: 1em 2em; 
		position: relative;
	}
 
	.js #contact {
		position: absolute;
		top: 0;
		width: inherit;
		display: none;
	}	
 
	#contact h2 { margin-top: 0; }
 
	#contact ul { padding: 0; }
 
	#contact li { 
		list-style: none;
		margin-bottom: 1em;
	}
 
	/* Close button on form */
	.close {
		position: absolute;
		right: 10px;
		top: 10px;
		font-weight: bold;
		font-family: sans-serif;
		cursor: pointer;
	}	
 
	/* Form inputs */
	input, textarea { width: 100%; line-height: 2em;}
	input[type=submit] { width: auto;  }
	label { display: block; text-align: left; }
 
	</style>
</head>
<body>
 
 
<article>
	<h1>My Awesome Post</h1>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</p>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</p>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</p>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</p>
</article>
 
<div id="contact">
	<h2>Contact Me</h2>
	<form action="#">
		<ul>
			<li>
				<label for="name">Name: </label>
	 			<input name="name" id="name">
			</li>
 
			<li>
				<label for="email">Email Address: </label>
		 		<input name="email" id="email">
			</li>
 
			<li>
				<label for="comments">What's Up?</label>
				<textarea name="comments" id="comments" cols="30" rows="10"></textarea>
			</li>
			<li>
				<input type="submit" value="Submit">
			</li>
		</ul>
	</form>
</div>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
 
<script>
 
(function() {
 
$('html').addClass('js');
 
var contactForm = {
 
	container: $('#contact'),
 
	config: {
		effect: 'slideToggle',
		speed: 500
	},
 
	init: function(config) {
		$.extend(this.config, config);
 
		$('<button></button>', {
			text: 'Contact Me'
		})
			.insertAfter( 'article:first' )
			.on( 'click', this.show );
	},
 
	show: function() {
		var cf = contactForm,
			container = cf.container,
			config = cf.config;
 
		if ( container.is(':hidden') ) {
			contactForm.close.call(container);
			container[config.effect](config.speed);
		}
	},
 
	close: function() {
		var $this = $(this), // #contact
			config = contactForm.config;
 
		if ( $this.find('span.close').length ) return;
 
		$('<span class=close>X</span>')
			.prependTo(this)
			.on('click', function() {
				// this = span
				$this[config.effect](config.speed);
			})
	}
};
 
contactForm.init({
	// effect: 'fadeToggle',
	speed: 300
});
 
})();
 
</script>
 
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *