Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Duda Ayuda con este codigo
#1
Hola!
No se si este tema va aqui pero necesito ayuda sobre un javascript
Quiero que este codigo tenga 3 o 2 en horizontal y no solo sea vertical.

Ejemplo el codigo original es asi

[Imagen: a8y3CLK.jpg]

y yo lo quiero poner asi

[Imagen: b2eZaOJ.jpg]

Este es el codigo si me pueden ayudar gracias.

Código:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Modern essentials -->
<title>delta</title>
<link rel="icon" href="https://png.icons8.com/metro/1600/settings.png">
<meta charset="UTF-8">
<meta name="description" content="How to count up to a specified number using JavaScript.">
<meta name="keywords" content="HTML, CSS, JavaScript, counter">
<meta name="author" content="Nishita Wojnar">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/styles.css">

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P|Roboto+Condensed" rel="stylesheet">
</head>
<body>
<div id="container">
<h1>date</h1>
<div class="profile">
<img class="profile-photo" src="https://i.imgur.com/Va6m7Zj.jpg" alt="Profile photo">
<div class="counting-container">
<div class="counting-box" id="encounter">
<img src="https://thumbs.dreamstime.com/b/skull-guitars-rock-hand-symbol-logo-rock-band-log-lovers-music-60726209.jpg" alt="Image 1">
<h4 class="count-this">1582</h4>
<p>Score</p>
</div>
<div class="counting-box" id="battles">
<img src="https://s3.envato.com/files/227845070/preview.jpg" alt="Image 2">
<h4 class="count-this">57</h4>
<p>win</p>
</div>
<div class="counting-box" id="locations">
<img src="https://art.ngfiles.com/images/561000/561156_darquebasylisk_green-skull.jpg?f1510090613" alt="Image 13">
<h4 class="count-this">312</h4>
<p>Loser</p>
</div>
</div>
</div>

<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/counter.js"></script>
</body>
</html>
#2
puedes poner tb el codigo de :

<script type="text/javascript" src="js/counter.js"></script> ? 

Lo que necesitas es poner mas columnas con la info , verdad ?

Tendria que ver tb el archivo counter.js

Un saludo,
#3
Es un counter con movimiento en los numeros,y ademas de esas 1,2,3 tambien quiero copiarlas abajo o sea
1,2,3,
4,5,6,
7,8,9, y asi.

Este es el .css y mas abajo el .js

Código:
body{
    background-color: #000;
    margin: 0;
    padding: 0;
}
#container{
    background-color: #000;
    margin: 0 auto;
    width: 100%;
}
h1, h4{
    font-family: 'Press Start 2P', right;
    color: #fff;
    text-align: right;
}
h1{
    text-transform: uppercase;
    letter-spacing: 8px;
    font-size: 15px;
}
.profile{
    padding: 100px;
}
.profile img{
    display: block;
    margin: 0 auto;
    padding: 10px;
}
.profile-photo{
    background-color: #D1C2BA;
    width: 70%;
    border-radius: 50%;
    border: 5px solid white;
}
.counting-container{
    display: flex;
}
.counting-box{
    border: 1px solid #D1C2BA;
    text-align: right;
    width: 25%;
    margin: 10px;
    padding: 12px;
    flex: auto;
}
.counting-box img{
    width: 40%;
}
.counting-box p{
    font-family: 'Roboto Condensed', sans-serif;
    color: #525252;
}
#encounter{
    border-bottom: 2px solid #3185E8;
}
#battles{
    border-bottom: 2px solid #D9884D;
}
#locations{
    border-bottom: 2px solid #D95E4D;
}
@media (min-width: 600px) {
    body{
        padding-top: 5px;
        background-color: #fff;
        background-image: url(https://cdn.dribbble.com/users/25514/screenshots/1032931/skull-3d-ramotion.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    #container{
        background-color: rgba(13, 24, 33, 0.84);
        padding: 10px;
        border-radius: 50px;
        width: 360px;
    }
}

El .js

Código:
// Always test to check for a connection!
// console.log("Testing - JavaScript file has been linked correctly!");

// Find the 'count this' class on the page and animate it
$('.count-this').each(function () {

    // Start the counting from a specified number - in this case, 0!
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        // Speed of counter in ms, default animation style
        duration: 2000,
        easing: 'swing',
        step: function (now) {
            // Round up the number
            $(this).text(Math.ceil(now));
        }
    });
});
#4
Exactamente que quieres realizar? en chrome veo el contenido un poco ladeado.
WWW
#5
Quieres armar un counter o que salga en cajas seguidas como en la 2da imagen, detalla tu ayuda.
WWW
#6
Ya me habian ayudado pero no queda bien se ve de lado,les dejo los codigos para ver si pueden hacerlo de modo que
sean 3 lineas y abajo mas y se puedan agregar mas,son ranks de un game.

Ejemplo final asi como en esta foto.

[Imagen: aSAFDqv.jpg]


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
Guiño ¿Cómo escanear un código QR? WMasterT 3 41 Ayer, 12:21 AM
Último mensaje: alieninc
Música Código para crear el archivo en PHP que crea la imagen de verificación WMasterT 2 26 04-12-2018, 10:44 AM
Último mensaje: easy english
Sonrisa Código completo con formulario para crear códigos QR WMasterT 2 21 04-12-2018, 08:53 AM
Último mensaje: easy english
  [Aporte] El Editor de codigo Atom! joselp 0 174 14-01-2018, 12:36 PM
Último mensaje: joselp
Bug [Duda] Mira este excelente IDE de desarrollo yuma2009 0 267 20-08-2017, 07:37 AM
Último mensaje: yuma2009
  [Aporte] Como compartir codigo en la nube con Codepen amner 1 415 14-03-2017, 03:05 PM
Último mensaje: Carlos Mendoza
  Ayuda con Código php CarlosAlberto 1 359 03-12-2016, 07:22 PM
Último mensaje: Minenage
  [Duda] Código en ASP NET C# romeho 2 543 26-07-2016, 10:40 PM
Último mensaje: romeho
  [Aporte] Codigo para renombrar tabla MySQL gassip 3 599 23-12-2015, 08:10 AM
Último mensaje: AbaddonOrmuz
  Homero Simpson dibujado con sólo código CSS Kevin9908 8 663 06-11-2015, 02:12 AM
Último mensaje: juanjj



Usuarios navegando en este tema: 1 invitado(s)