ryanSmith's art 388 class @ UMBC

- art on the internet -

W1| W2 | W3 | W4 | W5 | W6 | W7

ryansmithart.com/courses/2014/388

adding sound:

<embed src="cantina_song.mp3" width="320" height="32" autoPlay="false"></embed>

Option #2 (html 5):


<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

http://www.w3schools.com/HTML/html5_audio.asp


* Take Attendance *

Over the weekend, you should have started on "Project B" ( research project / informative website )
(I'll check homework : Wed, March 12)

*** Collect "Project A" files ***

What we did previously :
More CSS Positioning & other fun stuff


Some review :

CSS Stuff

w3schools.com/css/css_boxmodel
Margin -
Clears an area around the border. The margin does not have a background color, it is completely transparent
Border - A border that goes around the padding and content. The border is affected by the background color of the box
Padding - Clears an area around the content. The padding is affected by the background color of the box
Content - The content of the box, where text and images appear

(page layout)
htmldog.com/guides/cssadvanced/layout/


LAYERS WITH CSS

position:relative; top:-50; left:5; color:red; font-size:80px; z-index:2;
http://www.echoecho.com/csslayers.htm
what is Netscape Navigator ?

Z-INDEX EXAMPLE

Always remember :
Just Because You Can Doesn't Mean You Should


Today:

more basic JavaScript & some jQuery

LINK TO OPEN WEBSITE IN CUSTOM SIZE WINDOW

<a href= "javascript:void(0)"onclick="window.open('http://ryansmithart.com/','linkname',
'height=500, width=700,scrollbars=no')" > TEXT</a>



// Here's the code:

<button onclick="myFunction()">Try it</button>
<script>
function myFunction(){
alert("I am an alert box!");
}
</script>

Fun Stuff:
BG Color: Green Yellow Red Brown White
<a href=""onmouseover="document.bgColor='green'">Green</a>


Let's download some jQuery

Add a link:

<script src=" jquery-1.11.0.js">
/* jquery version 1.11.0 */
</script>

here's the code ( for jquery-1.7.1 )

More with jQuery, ".slideToggle"

Click to show jQuery code:


click here to show JS in the <head> of your html:

<div id="toggle">
<a href="#toggle">Click</a>
</div>
<div id="slideDiv">
</div>
<div id="toggle2">
</div>
<div id="slideDiv2">
</div>

Example: fractalcatmusic.com


Let's look at this


jFlow Slider
another image slideshow

Review Lightbox :
fancybox
" clear box "


HOME WORK

Next week, no Classes :
Spring Break

The following week :
Project B is Due