Jump to content

ayuda ajax, html, chrome

Leoxz
 Share

Recommended Posts

Leoxz Newbie

Leoxz

Posted
Posted

Hola buenas, he estado haciendo un slide con ajax, porqué me pareció lindo :z con un loader, lo hago en ajax porqué no sé nada de Jquery, y javascript básico-intermedio, me puedo guiar por que programo en C y Java Orientado a Objetos, el problema es cuando hago el slider guardo en un array las páginas que abro con ajax, y que por cada tiempo se vaya cambiando y refrescando el div, ahora el problema es cuando la función hace la petición es como si se cargara toda la página, osea los botones se pifean

 

Aqui el link para que puedan ver en Chrome ojo, porqué en Firefox no pasa eso es lo que más me extraña :s:

 

http://www.xodaa.com/pxlz/

 

y Aquí les dejo el código de css, js y html

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style type="text/css">
@font-face{
font-family:SixCaps;
src:url(css/SixCaps.ttf);
}
/*Limpiar elementos float*/
.limpiar:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.limpiar{
display:inline-block;
}
.limpiar{
display:block;
}
*html .limpiar{
height:1px;
}
/*Fin Limpiar float*/
body{
background-color:#333;
margin:0;
font-family:SixCaps;
}
a{
text-decoration:none;
}
body{
background-color:#333;
}
#containt{
width:900px;
margin:auto;
}
header{
position:relative;
background:url(img/logo.png) no-repeat left center;
height:110px;
}
#txthead{
position:relative;
top:80px;
font-size:20px;
left:100px;
color:#999999;
letter-spacing:1.5px;
text-shadow:0px 1px 1px rgba(0,0,0,0.25);
}
nav{
padding:0;
margin:52px 15px 0px 0px;
}
ul{
padding:0px;
margin:0px;
list-style-type:none;
float:right;
}
ul li{
display:inline;
position:relative;
}
ul li a{
background: rgba(255,255,255,0.2);
border-bottom:1px solid rgba(0,0,0,0.65);
font-size:20px;
letter-spacing:1.5px;
color:#999;
margin: 0px 9px;
padding:5px;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-box-shadow:0px 0px 2px rgba(255,255,255,0.2);
-moz-box-shadow:0px 0px 5px rgba(0,0,0,0.2);
text-shadow:0px 2px 2px rgba(0,0,0,0.2);
opacity:0.65;
-webkit-transition: opacity 0.3s, -webkit-box-shadow 0.3s;
-moz-transition: opacity 0.3s, -webkit-box-shadow 0.3s;
}
ul li a:hover{
opacity:0.8;
}
ul li a:active{
-webkit-box-shadow:0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow:0px 0px 0px rgba(0,0,0,0);
}
.botonNav{
letter-spacing:2px;
visibility:hidden;
height:30px;
color:#FFFFFF;
background:url(img/flechitadown.png) no-repeat bottom center;
position:absolute;
top:-45px;
left:10px;
opacity:0;
-webkit-transition: visibility 0.5s, opacity 0.5s;
-moz-transition: visibility 0.5s, opacity 0.5s;
}
.botonNav p{
margin:0;
padding:3px;
background:#000;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}
ul li:hover .botonNav{
visibility:visible;
opacity:0.55;
}
#section1{
margin-bottom:220px;
padding:10px 0px;
background:rgba(255,255,255,0.2);
position:relative;
width:100%;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-box-shadow:0px 5px 3px rgba(0,0,0,0.15);
-moz-box-shadow:0px 5px 3px rgba(0,0,0,0.15);
}
#imgSlider{
color:#CCCCCC;
width:880px;
height:300px;
margin:auto;
-webkit-border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
opacity:0.75;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
}
#imgSlider.des{
opacity:0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
}
#imgSlider.apa{
opacity:0.75;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
}
.txtImgSlider{
position:relative;
font-size:22px;
letter-spacing:1px;
padding-left:10px;
background:rgba(0,0,0,0.65);
width:300px;
height:300px;
-webkit-border-radius:8px 0px 0px 8px;
-moz-border-radius:8px 0px 0px 8px;
}
.linkSlider{
position:absolute;
top:85%;
left:70%;
padding:3px;
background:rgba(255,255,255,0.1);
border:1px rgba(255,255,255,0.3) dashed;
}
.txtImgSlider h1{
letter-spacing:2.5px;
font-size:36px;
padding:0;
margin:0;
}
#btnAnt{
background:url(img/btnSlider.png);
z-index:100px;
width:50px;
height:50px;
cursor:pointer;
position:absolute;
top:40%;
left:-20px;
}
#btnSig{
background:url(img/btnSlider.png);
z-index:100px;
cursor:pointer;
position:absolute;
height:50px;
width:50px;
top:40%;
left:870px;
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
}
#imgLoading{
opacity:1;
margin:auto;
position:absolute;
background:#5b5b5b url(img/loader.gif) no-repeat center center;
display:block;
width:880px;
height:300px;
z-index:500px;
-webkit-transition:opacity 0.3s;
}
#imgLoading.desa{
opacity: 0;
}
</style>
<script type="text/javascript">
var array = new Array();
array[0] = "slider/1.html";
array[1] = "slider/2.html";
var num =0;
function cargar(){
 verificar();
 document.getElementById("imgSlider").className='des';
 document.getElementById("imgLoading").style.display='block';
 var con = new XMLHttpRequest();
 con.open("GET",array[num],true);
 con.onreadystatechange = function(){
  if(con.readyState==1){
document.getElementById("imgLoading").style.display='block';
  }
  else if(con.readyState == 4){
if(con.status==200){
 document.getElementById("imgLoading").style.display='none';
 document.getElementById("imgSlider").className='apa';
 document.getElementById("imgSlider").innerHTML = con.responseText;
}
  }

 }
 con.send(null);

 setTimeout(cargar,5000);
 num++;
}

function verificar(){
 if(num>=array.length) num = 0;
 else if(num<0)num = array.length-1;
}
</script>
</head>

<body onLoad="cargar()">
<div id="containt">
<header>
 <span id="txthead">Slogan</span>
	<nav>
 <ul>
	 <li><div class="botonNav"><p>Principal</p></div><a href=""><img src="img/icon.png" alt="icono">Inicio</a></li>
		<li><div class="botonNav"><p>Conóceme</p></div><a href=""><img src="img/icon.png" alt="icono">Quién soy?</a></li>
		<li><div class="botonNav"><p>Qué hago</p></div><a href=""><img src="img/icon.png" alt="icono">Servicios</a></li>
		<li><div class="botonNav"><p>Mis Trabajos</p></div><a href=""><img src="img/icon.png" alt="icono">Portafolio</a></li>
		<li><div class="botonNav"><p>Contáctame</p></div><a href=""><img src="img/icon.png" alt="icono">Contacto</a></li>
	</ul>
	</nav>
</header>
<section id="section1" class="limpiar">
 <div id="imgLoading"></div>
	<div id="imgSlider"></div>
 <div id="btnAnt" onClick="antBoton()"></div>
	<div id="btnSig" onClick="sgteBoton()"></div>
</section>
</div>
</body>
</html>

 

ojo que soy autodidacta, todo lo que sé lo he aprendido solo, así que soy propenso a equivocarme :c

 

 

Saludos y de antemano muchas gracias.

Link to comment
Share on other sites
Leoxz Newbie

Leoxz

Posted
  • Author
Posted

vale, vale, si igual he visto algo pero lo minimo de jquery, selectores y darle valores a las propiedades, pero no me gusta ocupar códigos de otras personas, igualmente gracias, veré como funciona el slide, pero también quiero saber porque pasa eso con la web

 

 

saludos

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...