dodání ihned! nové
Hledáme programátora do rostoucího týmu ITnetwork.cz, 100% home office, 100 flexibilní pracovní doba. Více informací
Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
BF

Diskuze: Centrování section výpočtem v JS

Aktivity
Avatar
Jan Demel
Redaktor
Avatar
Jan Demel:14.9.2014 15:41

Ahoj lidi. Mám takový problém. Vzhledem k tomu, že centrování bloku v HTML/CSS je strašně špatně vyřešené (podle mě) tak jsem se rozhodl, že bych si to mohl počítat v JS a potom dát jenom margin-top: vypočítaná hodnota. Funguje to suprově, ale jenom na prvním bloku stránky. Celá má stránka je řešena tak, že jsou pod sebou bloky (id="home", "about", "projects" etc...) a na ty se postupně scrooluje odkazem z menu. Snad víc pochopíte ze screenshotů. Můj dotaz zní: Jak je možné, že se margin-top neprovede u druhého bloku ?

<section id="menu">
                        <nav><ul>
                                        <a href="#" id="homeButton" class="active"><li>DOMŮ</li></a>
                                        <a href="#" id="aboutButton"><li>O MNĚ</li></a>
                                        <a href="#" id="projectsButton"><li>PROJEKTY</li></a>
                                        <a href="#" id="contactButton"><li>KONTAKT</li></a>
                        </ul></nav>
                </section>
                <section id="home">
                        <section id="content">
                        </section>
                </section>
                <section id="projects">
                        <section id="content">
                        </section>
                </section>
$( document ).ready(function() {
    var windowHeight = $(window).height();

    $('#home').height(windowHeight);
    $('#about').height(windowHeight);
    $('#projects').height(windowHeight);
    $('#contact').height(windowHeight);

    var marginTop = (windowHeight - 600) / 2;

    $('#content').css('margin-top', marginTop);

    $("#homeButton").click(function() {
        $('html, body').animate({
        scrollTop: $("#home").offset().top
    }, 2000);
        });

    $("#aboutButton").click(function() {
        $('html, body').animate({
        scrollTop: $("#about").offset().top
    }, 2000);
        });

        $("#projectsButton").click(function() {
        $('html, body').animate({
        scrollTop: $("#projects").offset().top
    }, 2000);
        });

        $("#contactButton").click(function() {
        $('html, body').animate({
        scrollTop: $("#contact").offset().top
    }, 2000);
        });

        $("a").click(function(){
                if(!$(this).hasClass("active")) {
        $("a.active").removeClass("active");
        $(this).addClass("active");
        }
        });
});
Editováno 14.9.2014 15:42
Odpovědět
14.9.2014 15:41
To co se zdá být nemožné, je vždy možné.
Avatar
Jan Demel
Redaktor
Avatar
Jan Demel:14.9.2014 15:43

Pardon. Druhý obrázek tady nepatří.

Editováno 14.9.2014 15:44
Nahoru Odpovědět
14.9.2014 15:43
To co se zdá být nemožné, je vždy možné.
Avatar
Jan Demel
Redaktor
Avatar
Jan Demel:14.9.2014 15:44

Tak ještě jednou.

Nahoru Odpovědět
14.9.2014 15:44
To co se zdá být nemožné, je vždy možné.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
KleoCZ
Člen
Avatar
KleoCZ:14.9.2014 21:11

Chybí CSS, ale hlavně, kdy se konečně naučíte vkládat složitější věci do jsffidle, codepen nebo cokoliv jiného rovnou editovatelného. :/

Nahoru Odpovědět
14.9.2014 21:11
Apeluji na všechny co odpovídají na dotazy, tak pokud je to jen trochu možné dávejte rovnou reálná řešení třeba v htt...
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Jan Demel
Honza Bittner:23.9.2014 14:57

Když používáš ID pro více elementů tak se divíš? Myslím si, že je velká pravděpodobnost, že právě to vytváří tvou chybu...

Nahoru Odpovědět
23.9.2014 14:57
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.