Courses/Design & Technique-Essential Web Design/Q2/03 - Revision history

Andre: Replaced content with " {{:Courses/Design & Technique-Essential Web Design/Q2/02}} {{:jQuery}}"

2018-05-05T09:45:58Z

Replaced content with " {{:Courses/Design & Technique-Essential Web Design/Q2/02}} {{:jQuery}}"

Andre: /* What elements are manipulated? - jQuery selectors */

2018-04-24T08:44:03Z

What elements are manipulated? - jQuery selectors

← Older revision		Revision as of 08:44, 24 April 2018
Line 76:		Line 76:
	* '''class selector''': <code>$('.small')</code> will select '''all the elements with class small'''.		* '''class selector''': <code>$('.small')</code> will select '''all the elements with class small'''.

	'''See code in Codepen: https://codepen.io/PublicationStation/pen/BmPEzM		'''See code in Codepen:
			* 1C https://codepen.io/PublicationStation/pen/BmPEzM
			* 1B https://codepen.io/PublicationStation/pen/YLqqzq
			* 1A https://codepen.io/PublicationStation/pen/OZNNPg -

	'''		'''

Andre at 07:13, 28 November 2017

2017-11-28T07:13:19Z

← Older revision		Revision as of 07:13, 28 November 2017
Line 1:		Line 1:
	~~=TO DO=~~

	* introduce script tag / JS
	* place examples in codepen

Andre: /* Example */

2017-11-27T07:16:35Z

Example

← Older revision		Revision as of 07:16, 27 November 2017
Line 277:		Line 277:
	=Example=		=Example=
	==Interacting with special keys (r, Enter) of the Keyboard==		==Interacting with special keys (r, Enter) of the Keyboard==

			'''Example in Codepen:''' https://codepen.io/PublicationStation/pen/WXKWLQ

	<source lang="html4strict">		<source lang="html4strict">

Andre: /* Example */

2017-11-27T07:16:07Z

Example

@@ Line 281: / Line 281: @@
 <!DOCTYPE html>
 <html>
    <script>
-$('body').keydown(
+      $(document).ready(function() {
-   function(pressedkey){
+        $("body").keydown(function(pressedkey) {
-       console.log(pressedkey.key);
+          console.log(pressedkey.key);
-       if(pressedkey.key == "r" || pressedkey.key == "A"){
+          if (pressedkey.key == "r" || pressedkey.key == "A") {
-         //  alert("r was pressed");
+            //  alert("r was pressed");
-           $('img').attr('src','http://www.pumpkin.uk.com/wp-content/uploads/R3.jpg')
+            $("img").attr("src", "http://food.fnr.sndimg.com/content/dam/images/food/fullset/2010/8/30/5/FNM_Robert-Irvine-001_s3x4.jpg.rend.hgtvcom.966.1288.suffix/1371593293254.jpeg");
+          }
 </html>
 </source>

Andre: /* When are elements manipulated? - jQuery manipulation */

2017-11-27T07:09:34Z

When are elements manipulated? - jQuery manipulation

← Older revision		Revision as of 07:09, 27 November 2017
Line 224:		Line 224:


	Example: clicking evil cats: resize, add link;		'''Example in codepen:''' https://codepen.io/PublicationStation/pen/EbpJLw

			clicking evil cats: resize, add link;

	<source lang="html4strict">		<source lang="html4strict">

	<!DOCTYPE html>		<!DOCTYPE html>
	<html>		<html>
Line 245:		Line 248:
	<img src="https://s-media-cache-ak0.pinimg.com/236x/35/98/76/359876a0f522051e747e878b9a6f551f.jpg" />		<img src="https://s-media-cache-ak0.pinimg.com/236x/35/98/76/359876a0f522051e747e878b9a6f551f.jpg" />

	<script>		<script>
	$(document).ready(function() {		$(document).ready(function() {
	$("img").click(function() {		$("img").click(function() {
	var src = $(this).attr("src");		var src = $(this).attr("src");
	$(this)		$(this)
	.css("height", "100px")		.css("height", "100px")
	.after("<a href='" + src + "'>link</a>");		.after("<a href='" + src + "'>link</a>");
	});		});
	});		});

	</script>		</script>
	</body>		</body>
	</html>		</html>

	</source>		</source>

Andre: /* When are elements manipulated? - jQuery manipulation */

2017-11-27T07:06:33Z

When are elements manipulated? - jQuery manipulation

← Older revision		Revision as of 07:06, 27 November 2017
Line 240:		Line 240:
	<p class="rotate">I am p.rotate and will tilt</p>		<p class="rotate">I am p.rotate and will tilt</p>
	<h2 class="rotate">I am a h2.rotate and even I will shift position</h2>		<h2 class="rotate">I am a h2.rotate and even I will shift position</h2>
	<img class="rotate" src="~~http://adorablekittens.com/wp-content/uploads/2015/09/evil-cat.jpg~~" />		<img class="rotate" src="" />
	<br/>		<br/>
	<img ~~class~~="~~rotate~~" src="https://s-media-cache-ak0.pinimg.com/236x/35/98/76/359876a0f522051e747e878b9a6f551f.jpg" />		<img src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1619/1619140-bigthumbnail.jpg" />
			<img src="https://s-media-cache-ak0.pinimg.com/236x/35/98/76/359876a0f522051e747e878b9a6f551f.jpg" />

	<script>		<script>
	$(document).ready(		$(document).ready(function() {
	function(){		$("img").click(function() {
			var src = $(this).attr("src");
	$('img').click(		$(this)
	function(){		.css("height", "100px")
	var src = $(this).attr('src');		.after("<a href='" + src + "'>link</a>");
			});
	$(this).css(~~'width'~~, '100px')		});
	.after("<a href='"+ src +"'>link</a>")
	}
	)


	}
	)
	</script>		</script>
	</body>		</body>

Andre: /* Attribute selectors example */

2017-11-27T07:02:08Z

Attribute selectors example

← Older revision		Revision as of 07:02, 27 November 2017
Line 113:		Line 113:

	==== Attribute selectors example ====		==== Attribute selectors example ====
	'''See code in Codepen: '''		'''See code in Codepen: https://codepen.io/PublicationStation/pen/OOwGWd '''

	<source lang="html4strict">		<source lang="html4strict">

Andre: /* What elements are manipulated? - jQuery selectors */

2017-11-27T07:00:57Z

What elements are manipulated? - jQuery selectors

← Older revision		Revision as of 07:00, 27 November 2017
Line 79:		Line 79:
	* '''id selector''': <code>$('#large')</code> will select '''the element with id large'''.		* '''id selector''': <code>$('#large')</code> will select '''the element with id large'''.
	* '''class selector''': <code>$('.small')</code> will select '''all the elements with class small'''.		* '''class selector''': <code>$('.small')</code> will select '''all the elements with class small'''.

			'''See code in Codepen: https://codepen.io/PublicationStation/pen/BmPEzM
			'''

	<source lang="html4strict">		<source lang="html4strict">
Line 95:		Line 98:
	$(document).ready(		$(document).ready(
	function(){		function(){
	~~alert("be alert for the changes in the elements' text and CSS");~~
	$('h1').text('Yes, your a h1');		$('h1').text('Yes, your a h1');
	$('#large').css('font-size', '50pt');		$('#large').css('font-size', '50pt');
Line 111:		Line 113:

	==== Attribute selectors example ====		==== Attribute selectors example ====
			'''See code in Codepen: '''

	<source lang="html4strict">		<source lang="html4strict">
	<!DOCTYPE html>		<!DOCTYPE html>
Line 117:		Line 121:
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>		<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<style>		<style>
	img { display: block;}		img { display: block;
			transition-duration:4s;}
	</style>		</style>
	</head>		</head>
Line 136:		Line 141:
	$(document).ready(		$(document).ready(
	function(){		function(){
	~~alert("be alert for what will happen to LPB");~~		$('img[name="lpb"]').css('transform', 'skewX(70deg)');
	~~$('img').css('width', '100'); // all imgs will be 100px width~~		//img[name="lpb"] will be skewed with
	$('img[name="lpb"]').css('~~display~~','~~block'~~)~~.css('width', '100%~~'); //~~but~~ img[name="lpb"] will be ~~1000px~~ with
			})

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


	==''How'' are elements manipulated? - jQuery manipulation==		==''How'' are elements manipulated? - jQuery manipulation==

Andre at 06:38, 27 November 2017

2017-11-27T06:38:50Z

← Older revision		Revision as of 06:38, 27 November 2017
Line 5:		Line 5:


			{{:Courses/Design & Technique-Essential Web Design/Q2/02}}
	=jQuery=		=jQuery=