training rosa
Grupo SEO TELEGRAM [Click Aquí]
Resultados 1 al 4 de 4
Tema:

Su ayuda por favor: Integrar css, javascript en un sólo archivo html

  1. #1
    asde está desconectado Registrado
    Rango: Quizás estoy
    haciendo Spam ...

    User Info Menu

    Votacion Su ayuda por favor: Integrar css, javascript en un sólo archivo html

    Hola a todos, soy nuevo en este tema así que agradecería mucho su ayuda.

    En este link https://codepen.io/anon/pen/JyeEdj se puede ver un slide de imágenes (la idea es poner logos ahí) pero en ese ejemplo está separado css. javascript. y html. intenté unirlo de esta manera


    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">

    *, *:before, *:after {
    box-sizing: border-box;
    }

    $bg-color: #d9d8c6;
    $primary-color: #5b5a5c;
    $secondary-color: darken($primary-color, 15%);

    body {
    background: $bg-color;
    }

    li {
    list-style: none;
    }

    .suga-container {
    background: $primary-color;
    padding: .2em;
    max-width: 570px;
    margin: 5em auto;
    box-shadow: 3px 3px 0px $secondary-color;
    border: 2px solid $secondary-color;
    border-radius: 5px;
    }

    .suga-slider-wrap {
    overflow: hidden;
    margin: 1em;
    }


    .suga-slider-group {
    &:before,
    &:after {
    content: " ";
    display: table;
    }

    &:after {
    clear: both;
    }
    }

    .suga-slide {
    float: left;
    position: relative;
    margin-left: 0;
    padding-right: 8px;
    }

    </style>

    <script>
    $.fn.suga = function(options) {
    var settings = $.extend({
    'transitionSpeed': 3000,
    'snap': false
    }, options);

    var $this = $(this);

    // add plugin specific classes
    $this.addClass('suga-slider-wrap');
    $this.children('ul').addClass('suga-slider-group');
    $this.find('li').addClass('suga-slide');

    // caching $$$
    var $slide = $('.suga-slide'),
    $firstEl = $('.suga-slide:first'),
    $group = $('.suga-slider-group'),
    $wrap = $('.suga-slider-wrap');

    var slideWidth = $slide.outerWidth(),
    slideHeight = $('.suga-slide').height(),
    slideCount = $slide.length,
    totalWidth = slideWidth * slideCount;

    // set width on group element
    $group.width(totalWidth);
    $wrap.height(slideHeight);
    $wrap.wrap('<div class="suga-container"></div>');

    // add first class at start
    if (!$group.find($firstEl).hasClass("suga-first")) {
    $group.find($firstEl).addClass("suga-first");
    }

    // lets move baby
    var transitionSnap = function() {
    var $firstEl = $group.find('.suga-first').html();

    $group.find('.suga-first').animate({
    'margin-left': '-' + slideWidth + 'px'
    }, function(){
    $group.append('<li class="suga-slide">' + $firstEl + '</li>');
    $(this).remove();
    $group.find('li:first').addClass("suga-first");

    });
    };

    var transitionScroll = function() {
    var $firstEl = $group.find('.suga-first').html();

    $group.find('.suga-first').animate({
    'margin-left': '-' + slideWidth + 'px'
    }, settings.transitionSpeed, 'linear', function(){
    $group.append('<li class="suga-slide">' + $firstEl + '</li>');
    $(this).remove();
    $group.find('li:first').addClass("suga-first");
    transitionScroll();
    });
    };

    if (settings.snap) {
    window.setInterval(transitionSnap, settings.transitionSpeed);
    } else {
    transitionScroll();
    }
    }


    $(window).load(function(){
    $('#logos').suga({
    'transitionSpeed': 2000,
    'snap': true
    });
    });

    </script>
    </head>

    <body>
    <div id="logos">
    <ul>
    <li><img src="http://placehold.it/100x100" /></li>
    <li><img src="http://placehold.it/100x100" /></li>
    <li><img src="http://placehold.it/100x100" /></li>
    <li><img src="http://placehold.it/100x100" /></li>
    <li><img src="http://placehold.it/100x100" /></li>
    <li><img src="http://placehold.it/100x100" /></li>
    </ul>
    </div>
    </body>
    </html>

    pero me sale una sola lista estática hacia abajo así:



    como podría solucionar esto y que me funcione el slide poniendo en un sólo html todo el código? gracias!!

  2. #2
    moisesphp está desconectado Registrado

    User Info Menu

    Predeterminado

    Hola, te remiendo probar primero como te viene en la demo con los 3 ficheros independientes e ir probando si funciona. Luego vas incluyendo su código CSS y JavaScript en el html directamente y pruebas.

  3. #3
    jose233167 está desconectado Registrado

    User Info Menu

    Predeterminado

    Es raro creo que te debería funcionar, prueba lo que dice el compañero y nos cuentas

  4. #4
    marc.revenga está desconectado Registrado
    Rango: Googleque¿?

    User Info Menu

    Predeterminado

    No te recomiendo unir los ficheros. Es peor. Es un tema de velocidad en tu página. Con 3 ficheros, se los descarga en paralelo mientras que si lo unes en uno, tiene que cargarlo todo de una conexión al servidor y va a ser más lento. Por no hablar que el fichero css y Javascript se puede cachear y si esos ficheros se usan en varias páginas, ya no las va a buscar a tu servidor aunque cambie el html.

    Es un mejor diseño separar html, de estilo, de la programación. El html evolucionó para evitar lo que se llama espagueti code.

Temas Similares

  1. codigo html o javascript
    Por delavitta en el foro General SoyWebmaster
    Respuestas: 0
    Último Mensaje: 27/07/2015, 10:15
  2. Programador PHP, javascript, html, css - me ofrezco
    Por fonko en el foro Otros Negocios por Internet
    Respuestas: 0
    Último Mensaje: 25/03/2013, 01:08
  3. Sur Bs. As. PROGRAMADOR PHP, AJAX, JavaScript, HTML, XML....
    Por romina08 en el foro Otros Negocios por Internet
    Respuestas: 0
    Último Mensaje: 17/11/2011, 19:51
  4. Respuestas: 0
    Último Mensaje: 28/02/2011, 15:56
  5. ayuda con javascript
    Por Achorro en el foro Webmasters Porno
    Respuestas: 2
    Último Mensaje: 27/10/2006, 22:46

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •  
Has visto el post " Su ayuda por favor: Integrar css, javascript en un sólo archivo html" que está en esta URL y ha sido creado por el usuario asde. Esperamos que te haya sido de utilidad el artículo " Su ayuda por favor: Integrar css, javascript en un sólo archivo html" que inició el usuario asde de Soywebmaster.com.

Otros Foros de Interés

Curso SEO - Foro SEO - Foro Programacion - Foro Diseño Web - Intercambio de Enlaces - Negocios por Internet - Como Ganar Dinero - Foro Hosting - Foro Apuestas Deportivas

ÚLTIMOS ARTÍCULOS DEL BLOG SEO DE DAVID AYALA

SEO para Webs de Adultos
MÉTODOS EFICACES para Indexar Enlaces en Google
Webinar: Keyword Research (Con Emilio García)
Safecont: Una herramienta SEO diferente
Usamos cookies que analizan hábitos de comportamiento y navegación que aceptas al navegar aquí. Política de privacidad | Cookies | Aviso legal