saco jquery, misc css

css/especificos.css

@@ -11,6 +11,7 @@
   src: url("../Fonts/OpenSans.woff") format("woff");
 }
 
+#logo { transition: opacity 0.5s ease-in-out; }
 html, body
 {
     margin: 0px auto;
@@ -50,7 +51,7 @@ right: 20px;
 
 
 
-.basic-grey {
+#basic-grey {
     width: 50%;
     position: fixed;
     left: 50%;
@@ -68,11 +69,11 @@ right: 20px;
 }
 
 
-.basic-grey label {
+#basic-grey label {
     display: block;
     margin: 0px 0px 5px;
 }
-.basic-grey label>span {
+#basic-grey label>span {
     float: left;
     width: 80px;
     text-align: right;
@@ -81,7 +82,7 @@ right: 20px;
     color: #BCC9CC ;
     -webkit-text-stroke: 0.50px;
 }
-.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea,.basic-grey select{
+#basic-grey input[type="text"], #basic-grey input[type="email"], #basic-grey textarea,#basic-grey select{
     border: 1px solid #DADADA;
     color: #888;
     height: 24px;
@@ -96,17 +97,17 @@ right: 20px;
 }
 #btnconsulta { position:absolute; right:10px; bottom:10px; display:block; }
 
-.basic-grey textarea{
+#basic-grey textarea{
     height:100px;
     letter-spacing: 2px;
 }
-.basic-grey .button {
+#basic-grey .button {
     background: #BCC9CC;
     border: none;
     padding: 10px 25px 10px 25px;
     color: #465A68;
 }
-.basic-grey .button:hover {
+#basic-grey .button:hover {
     opacity: 0.5;
     transition: opacity 0.2s ease-in-out;
 }
@@ -242,6 +243,7 @@ right: 20px;
 {
     text-transform: uppercase;
     text-align:center;
+    height: 55px;
     width: 70%;
     padding-bottom: 30px;
     display: table-row;
@@ -658,10 +660,10 @@ b { font-weight: bold; }
 	#footer-inner-right{ float:none; width:98%; padding: 1%; display:block; text-align:left;}
 
 
-	.basic-grey{width:90%;left:0px;margin:0px;padding:0px 5%; height:100%;}
-	.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select {
+	#basic-grey{width:90%;left:0px;margin:0px;padding:0px 5%; height:100%;}
+	#basic-grey input[type="text"], #basic-grey input[type="email"], #basic-grey textarea, #basic-grey select {
 		width:95%;
 	}
-	.basic-grey span{text-align:left !important; }
+	#basic-grey span{text-align:left !important; }
 
 }

css/menu.css

@@ -200,6 +200,7 @@ right: 20px;
 #navlist
 {
     text-transform: uppercase;
+    height: 55px;
     text-align:center;
     width: 70%;
     padding-bottom: 30px;

index.php

@@ -17,7 +17,7 @@
 <div id="facebook-link"> <a href="https://www.facebook.com/pages/Especificos-Buenos-Aires/326062297573907"><img alt="Facebook" src="Images/fbmini.png" width="30px" height="30px" /></a> </div>
 <div id="overlay-contact"></div>
 
-    <div class="basic-grey">
+    <div id="basic-grey">
     <h5 id="exit">X</h5>
     <div class="STYLE-NAME">
     <h5>Contacto</h5><br>
@@ -276,7 +276,7 @@ OBJETIVOS DEL CURSO: Obtener los conocimientos teóricos y prácticos en el áre
 					</tr>"); //TODO FIXME: Convertir lo de la tabla, o lo que se agregue en UTF8 va a tener doble encoding y no va a funcionar
 			}
 			echo "</tbody></table></div>";
-		}	
+		}
 ?>
     </div>
 
@@ -305,7 +305,6 @@ OBJETIVOS DEL CURSO: Obtener los conocimientos teóricos y prácticos en el áre
             <a href="https://www.facebook.com/pages/Especificos-Buenos-Aires/326062297573907"><img alt="Facebook" src="Images/fb.png" width=50px height=50px></a>
         </div>
     </div>
-    <script src="js/jquery-2.1.3.min.js"></script>
     <script type="text/javascript" src="js/main.js"> </script>
 	<?php include('piwik.html'); ?>
 </body>

js/main.js

@@ -1,69 +1,155 @@
 window.onload = function() {
+var req = new XMLHttpRequest();
+// first add raf shim
+// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
+window.requestAnimFrame = (function(){
+  return  window.requestAnimationFrame       ||
+          window.webkitRequestAnimationFrame ||
+          window.mozRequestAnimationFrame    ||
+          function( callback ){
+            window.setTimeout(callback, 1000 / 60);
+          };
+})();
+
+// main function
+function scrollToY(scrollTargetY, speed, easing) {
+    // scrollTargetY: the target scrollY property of the window
+    // speed: time in pixels per second
+    // easing: easing equation to use
+
+    var scrollY = window.scrollY,
+        scrollTargetY = scrollTargetY || 0,
+        speed = speed || 2000,
+        easing = easing || 'easeOutSine',
+        currentTime = 0;
+
+    // min time .1, max time .8 seconds
+    var time = Math.max(.1, Math.min(Math.abs(scrollY - scrollTargetY) / speed, .8));
+
+    // easing equations from https://github.com/danro/easing-js/blob/master/easing.js
+    var PI_D2 = Math.PI / 2,
+        easingEquations = {
+            easeOutSine: function (pos) {
+                return Math.sin(pos * (Math.PI / 2));
+            },
+            easeInOutSine: function (pos) {
+                return (-0.5 * (Math.cos(Math.PI * pos) - 1));
+            },
+            easeInOutQuint: function (pos) {
+                if ((pos /= 0.5) < 1) {
+                    return 0.5 * Math.pow(pos, 5);
+                }
+                return 0.5 * (Math.pow((pos - 2), 5) + 2);
+            }
+        };
+
+    // add animation loop
+    function tick() {
+        currentTime += 1 / 60;
+
+        var p = currentTime / time;
+        var t = easingEquations[easing](p);
+
+        if (p < 1) {
+            requestAnimFrame(tick);
+
+            window.scrollTo(0, scrollY + ((scrollTargetY - scrollY) * t));
+        } else {
+            console.log('scroll done');
+            window.scrollTo(0, scrollTargetY);
+        }
+    }
+
+    // call it once to get started
+    tick();
+}
+
+
 	var availableWidth = [ 500, 1024, 1400, 1920];
 	var size=0; 
 	var banner=document.getElementById("banner");
-	while ($(window).width() > availableWidth[size] && size < availableWidth.length-1 ) 
+	while (window.innerWidth > availableWidth[size] && size < availableWidth.length-1 ) 
 		size++;
 	banner.src="Images/slider/slide1-"+availableWidth[size]+".jpg";
 
 	var contact= document.getElementsByClassName("contact");
 	var tit_curso = document.getElementsByClassName("titulo_curso");
 	var desc_curso = document.getElementsByClassName("descripcion_curso");
+	var list = document.getElementsByTagName("li");
+	var overlay=document.getElementById('overlay-contact');
+	var exit=document.getElementById('exit');
+	var basicgrey=document.getElementById('basic-grey');
+	var logo=document.getElementById('logo');
+	var btnconsulta=document.getElementById('btnconsulta');
+	var btnok=document.getElementById('ok');
+
 	function curso_click(){ 
 		for(var j =0; j < desc_curso.length; j++){
 			if (desc_curso[j].getAttribute("tatosa") == this.getAttribute("tatosa"))
 				desc_curso[j].style.display="block";
 		}
 	}
+    overlay.onclick = function(){
+		overlay.style.display="none";
+		basicgrey.style.display="none";
+	}
+    exit.onclick=function(){
+		overlay.style.display="none";
+		basicgrey.style.display="none";
+	}
+	btnok.onclick=function(){
+		var params="mail="+document.getElementById("suscribe").value;
+		req.open("POST", "newsletter.php", true);
+		req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+		req.setRequestHeader("Content-length", params.length);
+		req.setRequestHeader("Connection", "close");
+		req.onreadystatechange=function(){
+		if(req.readyState == 4 && req.status == 200)
+			document.getElementById("respuestanewsletter").innerHTML=req.responseText; 
+		}
+		req.send(params);
+	};
+	btnconsulta.onclick=function(){
+		var params = "nombre="+document.getElementById("name").value;
+		params=params+"&mail="+document.getElementById("email").value;
+		params=params+"&consulta="+document.getElementById("message").value;
+		req.open("POST", "contacto.php", true);
+		req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+		req.setRequestHeader("Content-length", params.length);
+		req.setRequestHeader("Connection", "close");
+
+		req.onreadystatechange=function(){
+		if(req.readyState == 4 && req.status == 200)
+			document.getElementById("respuestacontacto").innerHTML=req.responseText; 
+		}
+		req.send(params);
+	};
 	for(var i =0; i < tit_curso.length; i++)
 		tit_curso[i].onclick=curso_click;
 
 	for(var i =0; i < contact.length; i++)
 		contact[i].onclick=showContact;
 
+	for(var i =0; i < list.length; i++)
+		if(list[i].firstChild.tagName=="A")
+			list[i].firstChild.addEventListener("click", function(e) {
+			var target=document.getElementById(this.hash.replace("#",""))
+			scrollToY(target.offsetTop, 1500, 'easeInOutQuint');
+			if (this.hash=='#footer-outer')
+				showContact(); 
+			e.preventDefault();
+			});
+
     function showContact() {
-        $('.basic-grey, #overlay-contact').toggle();
-        if($('.basic-grey').is(':visible')){ 
-            $('#overlay-contact').click(function(){
-                $('.basic-grey, #overlay-contact').hide();
-            });
-            $('#exit').click(function(){
-                $('.basic-grey, #overlay-contact').hide();
-            });
-        }
+		basicgrey.style.display="block";
+		overlay.style.display="block";
     }
 
-	$('li a').click(function () {
-        $('html, body').animate({ scrollTop: $($(this).attr('href')).position().top }, 'slow');
-        if ($(this).attr('href')=='#footer-outer') { showContact(); }
-	    return false;
-	});
-
-//    $('.menu').hide(); //TATII!!!
-    $('#responsive-menu').click(function(){
-        $('.menu').slideToggle(300);    
-    });
-
-    var startY= $('#top_wrapper').position().top + $('#top_wrapper').outerHeight();
-    $('#logo').css('opacity','0');
-    $('#navlist').css('height','55px');
-    $(window).scroll(function () {
-        if($(this).scrollTop() > startY ){
-            $('#logo').css({'opacity':'1', 'transition': 'opacity 0.5s ease-in-out'});
-        }else{
-            $('#logo').css({'opacity':'0', 'transition': 'opacity 0.5s ease-in-out'});
-        }
-    });
-    $("#btnconsulta").click(function() {
-        $.post('contacto.php',{nombre: $("#name").val(), mail:$("#email").val(),consulta:$("#message").val()}).done(function(data) {
-            $("#respuestacontacto").html(data);
-        });
-    });
-    $("#ok").click(function() {
-        $.post('newsletter.php',{mail:$("#suscribe").val()}).done(function(data) {
-            $("#respuestanewsletter").html(data);
-        });
-    });
+    var startY=banner.scrollHeight;
+	window.onscroll = function () {
+        logo.style.opacity=1*(window.pageYOffset > startY ); //bool->int
+    };
+
     var curImg=1;
     setInterval(slide, 8000);
 
@@ -78,4 +164,3 @@ window.onload = function() {
         banner.removeAttribute('class');
     }
 }
-