Avatar
Jan Demel
Redaktor
Avatar
Jan Demel:

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:

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:

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:

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:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
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.