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

HTML a CSS HTML a CSS Centrování section výpočtem v JS American English version English version

Aktivity (1)
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é.
Avatar
kleofas.hatlapatka: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  +1 23.9.2014 14:57
Student FIT ČVUT. Followuj mě na https://twitter.com/tenhobi a ptej se na https://github.com/HoBi/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.