Assignment 10 Web I

by Tori Hoelscher

HTML

<html lang="en">

<h1>Course Information for Eileen Smith Fall 2018</h1>
	
		<link type="text/css" rel="stylesheet" href="styles.css">
		<meta name="viewport" content= "width=device-width, initial-scale=1">
    <body>
		document.querySelector('sddm').addEventListener('touchstart', touchStart);
 <ul id="sddm">
		<li><a href="#"
			onmouseover="mopen('m1')"
			onmouseout="mclosetime()">  My Classes  </a>
			<div id="m1"
				onmouseover="mcancelclosetime()"
				onmouseout="mclosetime()">
				<a href="https://class.daytonastate.edu/d2l/home">Falcon Online Main</a>
				<a href="https://class.daytonastate.edu/d2l/home/334162">COP 4813 Web I</a>
				<a href="https://class.daytonastate.edu/d2l/home/334540">CDA 4101 Computer Organization and Design</a>
			</div>
		</li>
		<li><a href="#"
			onmouseover="mopen('m2')"
			onmouseout="mclosetime()">  My Assignments  </a>
			<div id="m2"
				onmouseover="mcancelclosetime()"
				onmouseout="mclosetime()">
				<a href="http://eileensmith9.net/hello.html">Assignment 1</a>
				<a href="http://eileensmith9.net/">     Assignment 2</a>
				<a href="http://eileensmith9.net/WebIA3.html">     Assignment 3</a>
				<a href="http://eileensmith9.net/NEWA4WebI.html">     Assignment 4</a>
				<a href="http://eileensmith9.net/A5Canvas2.html">     Assignment 5</a>
				<a href="http://eileensmith9.net/WebIA6.html">Assignment 6</a>
				<a href="http://eileensmith9.net/webia7.html">Assignment 7</a>
				<a href="">Assignment 8</a>
				<a href="http://eileensmith9.net/a9webI.html">Assignment 9</a>
				<a href="">Assignment 10</a>
				<a href="">Assignment 11</a>
				<a href="">Assignment 12</a>
				<a href="">Assignment 13</a>
				<a href="">Assignment 14</a>
				<a href="">Assignment 15</a>
				<a href="">Assignment 16</a>
			</div>
		</li>
		<li><a href="#"
			onmouseover="mopen('m3')"
			onmouseout="mclosetime()">  Favorite Sites  </a>
			<div id="m3"
				onmouseover="mcancelclosetime()"
				onmouseout="mclosetime()">
				<a href="#">  W3 Schools...

CSS

#sddm
{	margin: 0;
	padding: 5px;
	z-index: 30}
	
#sddm li
{	margin: 0;
	padding: 10px;
	list-style: none;
	float: left;
	font: bold 16px arial}
#ssdm li a
{	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 60 px;
	background: #5970B2;
	color: #FFF
	text-align: center;
	text-decoration: none}
	
#sddm li a:hover
{	background: #49A3FF}

#sddm div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #EAEBD8;
	border: 1px solid #5970B2}
	
#sddm div a
{	position: relative;
	display: block;
	margin: 0;
	padding: 5px 10px;
	width: auto;
	white-space: nowrap;
	text-align: left;
	text-decoration: none;
	background: #EAEBD8;
	color: #2875DE;
	font: 16 px arial}
	
#sddm div 1:hover
{	background: #49A3FF;
	color: #FFF}
#m1{
	float: left;
}
#m2{
	float: left;
}
#m3{
	float: left;
}


h1
{	color:black;

	float: center;
	font: bold 24px arial;}	
body
{	background-color: gainsboro;
	margin: 20px;
	padding: 40px;
	font: 18px arial;
	float: left;}
form
{	background-color: gainsboro;}
.drop 
{ float: left; width: 400px; height: 180px; background-color: red;}

.ball {
    position: absolute;
    top: 100px;
    left:50px;
    width: 100px;
    height:100px;
    background-color: transparent;
    }
.wall {
    position: absolute;
    top:150px;
    left:100px;
    width: 450px;
    height:450px;
    background-color: yellow;
}

@media screen and (max-width:959px){
	#sddm{
		width:100%;
	}
	#m1{
		width:33.3%;
		
	}
	#m2{
		width:33.3%;
		
	}
	#m3{
		width:33.3%;
	}
	#h1{
		width:100%
	}

}

@media screen and (max-width:650px){
	#sddm{
		width:100%;
	}
	#m1{
		width:33.3%;
		
	}
	#m2{
		width:33.3%;
		
	}
	#m3{
		width:33.3%;
	}
	#h1{
		width:100%
	
}
@media screen and (max-width:320px){
	#sddm{
		width:320px;
	}
}

JavaScript

//open hidden layer
	function mopen(id)
	{
		//cancel close
		mcancelclosetime();
		
		//close old layer
		if(ddmenuitem) ddmenuitem.style.visiblility = 'hidden';
		
		
		//get new layer and show it
		ddmenuitem = document.getElementById(id);
		ddmenuitem.style.visibility = 'visible';
	}
		//close showed layer
		function mclose()
		{
			if(ddmenuitem) ddmenuitem.style.visibility = "hidden";
		}
		function touchStart(e){
		e.preventDefault();
		var whichList = e.targey
		var touch = e.touches{[0];
		var moveOffsetX = whichList.offSetLeft - touch.pageX;
		var moveOffsetY = whichList.offSetTop - touch.pageY;
		
		whichList.addEventListner('touchmove', function(){
		var positionX = touch.pageX + moveOffsetX;
		var positionY = touch.pageY + moveOffsetY;
		whichList.style.left = positionX + 'px';
		whichList.style.top = positionY + 'px';
		
		
		};
		document.querySelector('sddm').addEventListener('touchstart', touchStart);
		document.querySelector('sddm').addEventListener('touchend', touchStart);
		document.querySelector('sddm').addEventListener('touchmove', touchStart);
	//go close timer
	function mclosetime()
	{
		closetime = window.setTimeout(mclose, timeout);
	}
		
	//cancel close timer
	function mcancelclosetime()
	{
		if(closetime)
		{
			window.clearTimeout(closetime);
			closetime = null;
		}
	}
	//close layer when click-out
	document.onclick = mclose;