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

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Absolvováno

Označit lekci jako neabsolvovanou

Pokračovat ve výuce

Jak se ti líbí článek?

Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500

Jak se ti kurz líbí?

Tvé hodnocení kurzuZnaků 0 z 50-500

Aktivity

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.

Nejčastěji vyhledáváné

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