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

Jan Demel

Tvůrce

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é.

Jan Demel

Tvůrce

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é.

Jan Demel

Tvůrce

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é.

KleoCZ

Člen

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...

Honza Bittner

Tvůrce

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

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

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.