Java týden
30 % bodů zdarma na online výuku díky naší Slevové akci!
Pouze tento týden sleva až 80 % na e-learning týkající se Javy.
Avatar
Vojta Korduliak:30. júla 11:04

Ahoj,
snažím se udělat udělat timeline, jejíž spojující čáry se budou vykreslovat při scrollování. Nějaký tip jak to udělat přes výšku, aniž bych musel použít SVG?

Skúsil som:

$(window).scroll(function(){
    if (line1.offsetHeight < (distFirts - 62)) {
        var scrollAmount = $(window).scrollTop();
        var documentHeight = $(window).height();

        var scrollPercent = (scrollAmount / documentHeight) * 1000;

        $(".line1").css({
            height: scrollPercent + 'px'
        });

    }
});

Zkoušel jsem toto, ale při rychlejším scrollu se čára zastaví za svým limitem.
btw proměnná distFirst je vzdálenost mezi dvěma itemy nebo maximální výška čáry.

 
Odpovedať
30. júla 11:04
Avatar
Jiří Havelka:30. júla 18:48

Zkusil bych míslo neustálého prodlužocání téhož čarového elementu pokaždé přidat další čarový element.

 
Hore Odpovedať
30. júla 18:48
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:31. júla 10:09
  1. kdyz posilas neco do px, tak ti tam schazi Math.floor.
  2. Nemam absolutne tuseni, ceho se snazis dosahnout. Zkus pridat treba obrazky pro jednotlive situace. Malovani funguje i na win10 :) A ty obrazky popis, co jsi udelal, kde a co se melo stat a co se stalo. Pripadne, jak je to spravne.
  3. Mozna by byl lepsi jednoduchy fungujici priklad, treba na jsfiddle.net. Takhle jsi dal kus kodu, ktery bez niceho dalsiho nedava prilis smysl a ted babo rad :)

4.
Ten kod by mel podle vseho vzit a = window.odrolo­vano_zhora, b = window.vyska_okna a tyto dve hodnoty podelit.
"při rychlejším scrollu se čára zastaví za svým limitem."
To znamena co? Co je limit cary? To je nejaky pojem, co sis definoval ve sve hlave a dokud jej neobjasnis, tak nedava smysl. Jaka cisla nabyva A a B za normalnich okolnosti a jaka pri rychlem scrolovani? Jestli se to tyka tech cisel.

5.
Proc kontrolujes line1.offsetHeight < (distFirts - 62)?

$(".line1").css({
    height: scrollPercent + 'px'
});

Jestli to spravne chapu, tak vysku toho prvku nastavujes jen a pouze ty. Nebylo by tedy programove casove uspornejsi si udelat js promenou a do ni ukladat, nez pokazde zjistovat offset? Ja bych to resil nejak takto:

cara = {};
cara.height = 0;
cara.height_max = distFirts - 62;
if (cara.height < cara.height_max ) {...
cara.height =  Math.floor(scrollPercent);
cara.height =  cara.height<cara.height_max ? cara.height : cara.height_max;
        $(".line1").css({
            height: cara.height + 'px'
        });

No, a ted je otazka, co chces docilit? Podle kodu, kdyz bude odscrolovano prilis dolu, kod prestane fungovat a neni tam kod, aby znovu fungoval. Cili to ifko tam spis nema byt, protoze to resim tim dalsim kodem:

cara = {};
cara.height = 0;
cara.height_max = distFirts - 62;
...
cara.height =  Math.floor(scrollPercent);
cara.height =  cara.height<cara.height_max ? cara.height : cara.height_max; // orizne do 0-maximum
        $(".line1").css({
            height: cara.height + 'px'
        });

Neni mi uplne jasne, co chces docilit.
%odscrolovani = scrollAmount / documentHeight
% vykreslena do cary o delce 100 px = Math.floor(%od­scrolovani * 100)
Ja prave nechapu to s tim zastavenim na nejakem maximu, nebo, co to je.

 
Hore Odpovedať
31. júla 10:09
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 3 správy z 3.