[SOLUCIONADO] Solucion cross browser

hackjose · #1 (**permalink**) 27/01/2014, 19:35

Que tal amigos
Estoy pasando mi CV a HTML5
Todo funciona perfectamente en firefox pero no anda en chrome y sarafi

Cuando hago click en algun item para navegar hasta la seccion, no llega de forma adecuada se pasa de la seccion

Prueben el codigo para que vean de lo que hablo, todas las rutas son de recursos originales osea que se va a ver bien sin tanto lio

Código HTML:

Ver original<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="http://necolas.github.io/normalize.css/2.1.3/normalize.css" />
    <style>
@font-face {
  font-family: 'Audiowide';
  font-style: normal;
  font-weight: 400;
  src: local('Audiowide'), local('Audiowide-Regular'), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
*
{
    margin: 0;
    padding: 0;
}
body
{
    font-family: Audiowide;
    font-size: 16px;
    padding-top:1px; 
}
span
{
    font-size: .75em;
}
nav
{
    background-color: #09f;
    position: fixed;
    width: 100%;
}
nav ul
{
    list-style: none;
    white-space: nowrap;
}
nav ul li
{
    border-bottom:2px dotted #fff;
    font-size: 1em;
    padding: 5px 0; 
    text-align: center;
}
nav ul li:hover
{
    background-color: rgba(0,0,0,0.2);
    color: #000;
}
nav ul li a:link
{
    text-decoration: none;
    //color: #fff;
}
nav ul li a:visited
{
    text-decoration: none;
    color: #fff;
}
nav ul li a:hover
{
    text-decoration: none;
    //color: #000;
}
nav ul li a:active
{
    text-decoration: none;
    color: #fff;
}
 
 
 
#datos, #estudios, #cursos, #experiencia, #manejo, #mi
{
    padding: 0 0 10px 0;
    text-align: center;
}
h2
{
    background: rgba(0,0,0,0.3);
    font-size: 1.25em;
    padding: 10px 0 5px 0;
}
h3
{
    font-size: 1em;
}
.subsct
{
    background-color: rgba(0,0,0,0.4);
    margin: 10px auto;
    width: 90%;
}
 
 
 
#datos
{
    background-color: #8AE158;
    color: #fff;
    margin-top:200px; 
}
#datos p
{
    margin: 0 auto;
    width: 90%;
}
#datos .titulo
{
    color: #000;
    padding: 5px 0;
    text-align: left;
}
 
 
 
#estudios
{
    background-color: #D971D5;
    color: #fff;
}
#estudios img
{
    height: 100px;
    width: 250px;
}
#estudios p
{
    margin: 0 auto;
    padding: 5px 0 10px 0;
    width: 90%;
}
 
 
 
#cursos
{
    background-color: #ED3535;
    color: #fff;
}
#cursos img
{
    height: 160px;
    width: 240px;
}
#cursos p
{
    margin: 0 auto;
    padding: 5px 0 10px 0;
    width: 90%;
}
#cursos a:link
{
    text-decoration: none;
    color: #000;
}
#cursos a:visited
{
    text-decoration: none;
    color: #000;
}
#cursos a:hover
{
    text-decoration: none;
    color: #000;
}
#cursos a:active
{
    text-decoration: none;
    color: #000;
}
 
 
 
#experiencia
{
    background-color: #999;
    color: #fff;
}
#experiencia img
{
    height: 75px;
    width: 250px;
}
#experiencia p
{
    margin: 0 auto;
    padding: 5px 0 10px 0;
    width: 90%;
}
 
 
#manejo
{
    background-color: #FFBC00;
    color: #fff;
}
#manejo .html5
{
    height: 256px;
    width: 256px;
}
#manejo .css3
{
    height: 256px;
    width: 180px;
}
#manejo .jq
{
    height: 120px;
    width: 250px;
}
#manejo .php
{
    height: 188px;
    width: 288px;
}
#manejo .less
{
    height: 100px;
    width: 250px;
}
#manejo .mysql
{
    height: 140px;
    width: 212px;
}
#manejo .xml
{
    height: 256px;
    width: 256px;
}
#manejo .emmet
{
    height: 100px;
    width: 270px;
}
#manejo p
{
    margin: 0 auto;
    padding: 5px 0 10px 0;
    width: 90%;
}
 
 
 
#mi
{
    background-color: #AB5F5F;
    color: #fff;
}
#mi p
{
    margin: 0 auto;
    padding: 5px 0 10px 0;
    width: 90%;
}
    </style>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    function scroliar(posicion)
    {
        var scroll = $(window).scrollTop();
        var veces = parseInt((posicion-scroll)/40);
        var residuo = (posicion-scroll) % 40;
        var intervalo = null;
        var contador = 0;
 
        if(veces < 0){veces = -veces;}
 
        intervalo = setInterval(function(){
            if(veces > contador)
            {
                if(posicion-$(window).scrollTop() > 0)
                {
                    window.scrollBy(0,40);
                }
                if(posicion-$(window).scrollTop() < 0)
                {
                    window.scrollBy(0,-40);
                }
                contador++;         
            }
            else
            {
                window.scrollBy(0,residuo);
                clearInterval(intervalo);
            }
        },60);
    }
 
    $(function(){
        var datos = $("#datos");
        var estudios = $("#estudios");
        var cursos = $("#cursos");
        var experiencia = $("#experiencia");
        var manejo = $("#manejo");
        var mi = $("#mi");
 
        var datosp = datos.offset().top;
        var estudiosp = estudios.offset().top;
        var cursosp = cursos.offset().top;
        var experienciap = experiencia.offset().top;
        var manejop = manejo.offset().top;
        var mip = mi.offset().top;
 
        var datosr = datosp - 201;
        var estudiosr = estudiosp - 201;
        var cursosr = cursosp - 201;
        var experienciar = experienciap - 201;
        var manejor = manejop - 201;
        var mir = mip - 201;
 
        $("a").click(function(evt){
            evt.preventDefault();
            switch($(this).attr("class"))
            {
                case "datos": scroliar(datosr);
                break;
                case "estudios": scroliar(estudiosr);
                break;
                case "cursos": scroliar(cursosr);
                break;
                case "experiencia": scroliar(experienciar);
                break;
                case "manejo": scroliar(manejor);
                break;
                case "mi": scroliar(mir);
                break;
            }
            
        });
    });
    </script>
</head>
<body>
    <nav>
        <ul>
            <li><a href="" class="datos">Mis Datos</a></li>
            <li><a href="" class="estudios">Donde Estudie</a></li>
            <li><a href="" class="cursos">Cursos que he Tomado</a></li>
            <li><a href="" class="experiencia">Experiencia</a></li>
            <li><a href="" class="manejo">Que Manejo</a></li>
            <li><a href="" class="mi">Sobre Mi</a></li>
        </ul>
    </nav>
    <section id="datos">
        <h2>Mis Datos</h2>
        <p class="titulo">Nombre</p>
        <p>Jose de Jesus Vega Hernandez</p>
        <p class="titulo">Nacimiento</p>
        <p>31 Octubre de 1992</p>
        <p class="titulo">Edad</p>
        <p>21 Años</p>
        <p class="titulo">Domicilio</p>
        <p>Colonia Villas de Tolimpa Calle Bugambilias No. 48</p>
        <p class="titulo">Email</p>
        <p>[email protected]</p>
        <p class="titulo">Telefono</p>
        <p>55 12345678</p>
    </section>
    <section id="estudios">
        <h2>Donde Estudie</h2>
        <p>UAM Iztapalapa</p>
        <a href="http://www.izt.uam.mx/">
        <img src="http://www.periodicoenfoque.com.mx/wp-content/uploads/2012/12/UAM.png" alt="Universidad Autonoma Metropolitana" />
        </a>
        <p>Trunco de la Licenciatura en Computacion</p>
    </section>
    <section id="cursos">
        <h2>Cursos que he Tomado</h2>
        <p>Curso HTML5</p>
        <a href="https://mejorando.la/cursos/">
            <img src="http://ivrodriguez.com/wp-content/uploads/2012/07/logo_html5.jpg" alt="Curso HTML5" />
        </a>
        <p>Curso impartido por <a href="https://mejorando.la/cursos/">mejorando.la</a> <span>[junio 2012 Mexico DF]</span>
</span></p>
    </section>
    <section id="experiencia">
        <h2>Experiencia</h2>
        <p>Programador PHP JR</p>
        <a href="http://www.aquainteractive.com.mx/portal/">
        <img src="http://www.cuatromedios.com/media/images/clientes/aqua.png" alt="Empresa: Aquainteractive.com.mx" />
        </a>
        <p><span>Del 15 Octubre 2012 al 3 Enero 2013</span></span></p>
        <p>En aquainteractive estuve a cargo de pasar elementos FLASH a HTML5, asi mismo estuve usando la libreria CURL de PHP para extraer datos de paginas y tambien estuve modificando el videochat de su plataforma agora LMS</p>
        <p>Una empresa donde creci personal y profesionalmente</p>
    </section>
    <section id="manejo">
        <h2>Que manejo</h2>
        
        <section class="subsct">
        <h3>HTML5</h3>
        <img class="html5" src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="HTML5">
        <p>Nivel Medio</p>
        </section>
        
        <section class="subsct">
        <h3>CSS3</h3>
        <img class="css3" src="http://www.blog.pc-serveis.es/wp-content/uploads/2012/08/css3.png" alt="CSS3">
        <p>Nivel Medio</p>
        </section>
        
        <section class="subsct">
        <h3>JavaScript</h3>
        <img class="js" src="http://velneo.es/files/2012/10/logo-js.png" alt="JAVASCRIPT">
        <p>Nivel Medio</p>
        </section>
        
        <section class="subsct">
        <h3>JQUERY</h3>
        <img class="jq" src="http://i.stack.imgur.com/BjxDS.png" alt="JQUERY">
        <p>Nivel Medio</p>
        </section>
        
        <section class="subsct">
        <h3>PHP</h3>
        <img class="php" src="http://www.arweb.com/chucherias/wp-content/uploads/2012/08/php.png" alt="PHP">
        <p>Nivel Medio</p>
        </section>
 
        <section class="subsct">
        <h3>LESS</h3>
        <img class="less" src="http://moduscreate.com/wp-content/uploads/2012/01/less-css-logo.png" alt="LESS">
        <p>Nivel Basico</p>
        </section>
 
        <section class="subsct">
        <h3>MySQL</h3>
        <img class="mysql" src="http://ijonas.com/wp-content/uploads/2013/10/mysql-databases.gif" alt="MySQL">
        <p>Nivel Basico</p>
        </section>
 
        <section class="subsct">
        <h3>XML</h3>
        <img class="xml" src="http://2.bp.blogspot.com/-FW1in5y4AXI/Urg-Vuq7fjI/AAAAAAAAC_w/Q5bQvYCTNNU/s1600/xml.png" alt="XML">
        <p>Nivel Basico</p>
        </section>
 
        <section class="subsct">
        <h3>EMMET</h3>
        <img class="emmet" src="http://2toria.com/wp-content/uploads/2013/08/emmetlogo.png" alt="EMMET">
        <p>Nivel Basico</p>
        </section>
 
    </section>
    <section id="mi">
        <h2>Sobre mi</h2>
        <p>Mi nombre ya lo escribi mas arriba y me gusta que me digan jose.</p>
        <p>Me fascina la programacion y en especial el area de frontend.</p>
        <p>El primer contacto que tuve con las paginas web fue como a los 13 pero fue hasta que tuve 17 que me meti de lleno en este fantastico mundo.</p>
        <p>Filipenses 4:13 <em>TODO</em> lo puedo en DIOS que me fortalece</p>
    </section>
</body>
</html>

espero me puedas ayudar o decir en que me equivoque

saludos

pzin · #2 (**permalink**) 28/01/2014, 02:37

Supongo que el problema vendrá más por la parte de JavaScript. ¿Por qué tanto lío con el cálculo de hacia donde mover el scroll? ¿No te vale con tomar la posición real y a eso restarle la altura del menú? No me he parado a mirar cómo lo calculas, pero veo mucha operación ahí, y se me hace, a priori, innecesariamente complejo.

hackjose · #3 (**permalink**) 28/01/2014, 10:34

pzin gracias por contestar

En un principio lo hice asi, pero ahora quiero cambiarlo para que se desplace poco a poco hasta llegar al destino

saludos

hackjose · #4 (**permalink**) 28/01/2014, 18:05

Ya lo solucione, al parecer es problema de chrome, saludos