jquery teller centreren

Status
Niet open voor verdere reacties.
T

therisque

Gebruiker
Lid geworden
2 dec 2009
Berichten
24
Hoi,

Ik probeer al een tijdje de tellers op deze website https://www.socialized.be/ voor zowel desktop als mobiel te centreren maar wat ik ook probeer; ik krijg het maar niet voor mekaar.

De originele code is hier te vinden https://codepen.io/syedrafeeq/pen/rcfsJ, mijn versie ziet er zo uit (zie hieronder). Ik weet dat het waarschijnlijk iets basaals is dat ik mis, maar mijn programmeerkennis is (nog) niet wat het zou moeten zijn. Hoe zou ik dit kunnen oplossen? Heel erg bedankt voor de hulp alvast.

p.s. oorspronkelijk werden er 4 tellers weergegeven zoals je kunt zien in de originele code, maar aangezien ik er maar 3 nodig heb, heb ik de vierde teller (meest rechts) uitgezet via <!-- -->.
Code: 
<div class="wrapper_counter">
  <div class="counter col_fourth">
    <i class="fa fa-instagram fa-2x"></i>
    <h2 class="timer count-title count-number" data-to="25000" data-speed="10000"></h2>
    <p class="count-text ">SOCIAL MEDIA VOLGERS</p>
  </div>
  <div class="counter col_fourth">
    <i class="fa fa-users fa-2x"></i>
    <h2 class="timer count-title count-number" data-to="1100" data-speed="10000"></h2>
    <p class="count-text ">ENTHOUSIASTE CURSISTEN</p>
  </div>
  <div class="counter col_fourth">
    <i class="fa fa-laptop fa-2x"></i>
    <h2 class="timer count-title count-number" data-to="8" data-speed="1000"></h2>
    <p class="count-text ">CURSUSSEN</p>
  </div>
  <!--<div class="counter col_fourth end">
    <i class="fa fa-bug fa-2x"></i>
    <h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2>
    <p class="count-text ">SomeText GoesHere</p>
  </div>-->
</div>

<style>
.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%; }
.col_twothird { width: 66%; }
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth {
  position: relative;
  display:inline;
  display: inline-block;
  float: left;
  margin-right: 2%;
  margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/* Column Grids End */

.wrapper { width: 980px; margin: 30px auto; position: relative;}
.counter { background-color: #ffffff; padding: 20px 0; border-radius: 5px;}
.count-title { font-size: 40px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text { font-size: 13px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; }
.fa-2x {
  margin: 0 auto;
  float: none;
  display: table;
  color: #f7c940;
}
@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col_"] {
    width: 100%;
  }
  [class*="wrapper_counter"] {
    width: 50%;
  }
}
</style>

mod.
Code: 
[/noparse] tags toegevoegd.[/COLOR]
 
Laatst bewerkt door een moderator:
Het eerste wat opvalt. Bij 4 kolommen wordt col_fourth gebruikt.
Je wil er 3 gebruiken, dan zal het col_third moeten worden ;)

In je code heb ik helemaal onderaan (regel boven </style> een } toegevoegd.
 
Gebruik liever geen inline of float voor de structuur. Een flexbox is handiger, het woord zegt het al :)
Code: 
* {
    box-sizing: border-box;
}
body {
    margin: 0; /* haal witruimte weg */
    font-family: "Segoe UI", Arial, sans-serif;
    padding: 25px;
    text-align: center;
    background-color: #f5f5f5;
    color: #808080;
}
/* rekening houden met links 1% en recths 1% */
.col_half         { width: 48%;   }
.col_third        { width: 31.3%; }
.col_fourth       { width: 23%;   }
.col_fifth        { width: 18%;   }
.col_sixth        { width: 14.6%; }
.col_three_fourth { width: 73%;   }
.col_twothird     { width: 64.6%; }

.col_half, .col_third, .col_twothird,
.col_fourth, .col_three_fourth, .col_fifth {
    position: relative;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
}
.end {
    margin-right: 0 !important;
}
.wrapper {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
    width: 90%; /* mobile */
    max-width: 980px; /* desktop */
    margin: 30px auto;
}
.counter {
    background-color: #ffffff;
    padding: 20px 0;
    border-radius: 5px;
}
.count-title {
    font-size: 40px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
}
.count-text {
    font-size: 13px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
}
.fa-2x {
    margin: 0 auto;
    float: none;
    display: table;
    color: #4ad1e5;
}
/* browser view < 768px */
@media only screen and (max-width: 767.9px) {
    [class*="col_"] {
        width: 100%;
    }
    [class*="wrapper_counter"] {
        width: 50%;
    }
}

Update. Een handig linkje (klik) met visuele uitleg over de flexbox en bijbehorende css.
 
Laatst bewerkt:
Superbedankt voor je hulp!!

Ik heb de complete code onder <style> vervangen met jouw code op een aparte testpagina: https://www.socialized.be/tellertest

Nu vallen alleen 2 dingen mij wel op:
1. de tellers doen het niet meer (dus bij het aanroepen van de pagina is er geen animatie meer en zie je geen cijfers), zou dat komen doordat de CSS nu anders is geworden en JS daardoor niet meer functioneert zoals het zou moeten?
2. de tellers staan nu onder elkaar, maar dat is denk ik mijn fout; ik had er duidelijker bij moeten zetten dat het de bedoeling is om op desktop schermen de tellers horizontaal gecentreerd weer te geven (dus naast elkaar) en op mobile devices verticaal gecentreerd dus onder elkaar, heb je enig idee hoe ik dat voor elkaar kan krijgen?

Bedankt voor de CSS url, lijkt me nuttig, ga me er in verdiepen
 
op desktop schermen de tellers horizontaal gecentreerd weer te geven (dus naast elkaar) en op mobile devices verticaal gecentreerd dus onder elkaar
Klik om te vergroten...
De css werkt op deze manier. Het foutje zit in een naam mismatch van een class.

Het valt op dat 4 keer de jquery libraty wordt aangeroepen. Eentje is voldoende. Zie regel:
80: libs/jquery/1/jquery.min.js (versie 1.11.1)
104: libs/jquery/1/jquery.min.js (versie 1.11.1)
522: libs/jquery/3.5.0/jquery.min.js (versie 3.5.0)
745: libs/jquery/1/jquery.min.js (versie 1.11.1)

1. Controleeer in de Console of er fouten in de Javascript zitten.
Klik met rechter muisknop op een teller en kies Inspecteer, dan tabblad Console..

2. Er is een mismatch tussen wrapper en wrapper_counter. Zie nieuwe css hieronder. Er staat class="wrapper_counter" in de html, dit komt niet overeen met class="wrapper" in de css. Hieronder is dit aangepast in class="wrapper_counter" zodat het overeen komt. Het gedeelte @media heb ik ingekort.
Code: 
/* als body al ergens anders in css is gedefinieerd kan het hier weg */
body {
    /*
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    padding: 25px;
    */
    background-color: #f5f5f5;
    color: #808080;
    text-align: center;
}

/* rekening houden met links 1% en recths 1% */
.col_half         { width: 48%;   }
.col_third        { width: 31.3%; }
.col_fourth       { width: 23%;   }
.col_fifth        { width: 18%;   }
.col_sixth        { width: 14.6%; }
.col_three_fourth { width: 73%;   }
.col_twothird     { width: 64.6%; }

.col_half, .col_third, .col_twothird,
.col_fourth, .col_three_fourth, .col_fifth{
    position: relative;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
}

/* class "end" wordt niet gebruikt in de counter */
/* .end { margin-right: 0 !important; } */

.wrapper_counter, .wrapper_counter * {
    box-sizing: border-box;
}
.wrapper_counter {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
    width: 95%; /* mobile */
    max-width: 980px; /* desktop */
    margin: 30px auto;
    text-align: center;
}
.counter {
    background-color: #ffffff;
    padding: 20px 0;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
}
.count-title, .count-text {
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
}
.count-title {
    font-size: 40px;
}
.count-text {
    font-size: 13px;
}
.wrapper_counter .fa-2x {
    margin: 0 auto;
    float: none;
    display: table;
    color: #4ad1e5;
}
/* browser view < 768px */
@media (max-width: 767.9px) {
    .wrapper_counter .counter {
        width: 100%;
    }
}
 
Laatst bewerkt:
Bron, SUPERBEDANKT!!!! het is gelukt, had idd met de wrapper mismatch te maken volgens mij, alles staat nu gecentreerd en op mobile ook + de tellers werken ook. Weer wat geleerd vandaag. Dank je wel dank je wel dank je wel:thumb::thumb::thumb:
 
Graag gedaan. Suc6 met de website :thumb:
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan