ryansmithart.com/courses/2014/365
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 *
This week, you should have started on "Project B" ( research project / informative website )
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 CSSposition: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"
Put this code in the <head>of your html:
<script src=" jquery-1.11.0.js" type="text/javascript" charset="utf-8">
/* jquery version 1.11.0 */
</script>
Save this code as " jquery-1.11.0.js", and put it in the same directory as your html page:
jQuery
$(document).ready(function(){
$("#slideDiv").hide();
$("#slideDiv2").hide();
$(window).load(function(){
$("#toggle").click(function(){
$("#slideDiv").slideToggle(500);
});
$("#toggle2").click(function(){
$("#slideDiv2").slideToggle(500);
});
});
});
</script>
<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 :
 |
 |
 |
" clear box "
HOME WORK (due at the beginning of class, Friday)
Next week, no Classes :
Spring Break
The following week :
Project B is Due
by Han Hoogerbrugge on youTube