JavaScript - Ajuda

Boa Tarde

Tenho um Menu que apresenta o cardápio ( Almoço & Jantar , Bebidas ). Cada menu contém seis ementas ou seis bebidas consoante aquilo que o utilizador escolher.

O código que tenho faz o que pretendo, no entanto gostaria de optimizá-lo e não depender de dois plugins ( flickity.pkgd.min.js, isotope.pkgd.min.js, https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js )

É POSSÍVEL ?

Aguardo a vossa ajuda!

HTML:
<section class="mt-5" id="menu">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h2 class="text-center">Menu</h2>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <nav class="section_menu__nav">
                        <ul>
                            <li class="active">
                                <a href="#menu_images" data-filter=".mains">Almoço & Jantar</a>
                            </li>
                            <li>
                                <a href="#menu_images" data-filter=".drinks">Bebidas</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <div class="row section_menu__grid" id="menu_images">
                <div class="col-md-6 section_menu__grid__item mains">
                    <div class="section_menu__item">
                        <div class="row">
                            <div class="col-3">
                                <div class="section_menu__item__img">
                                    <img src="assets/img/5.jpg" alt="...">
                                </div>
                            </div>
                            <div class="col-7">
                                <h4>Picanha Grelhada</h4>
                                <p>Acompanhamento: Arroz, Batatas Fritas</p>
                            </div>
                            <div class="col-2">
                                <div class="section_menu__item__price text-center">15,00€</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 section_menu__grid__item drinks">
                    <div class="section_menu__item">
                        <div class="row">
                            <div class="col-3">
                                <div class="section_menu__item__img">
                                    <img src="assets/img/11.jpg" alt="...">
                                </div>
                            </div>
                            <div class="col-7">
                                <h4>Vinho Verde Gazela</h4>
                            </div>
                            <div class="col-2">
                                <div class="section_menu__item__price text-center">5,00€</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 section_menu__grid__item drinks">
                    <div class="section_menu__item">
                        <div class="row">
                            <div class="col-3">
                                <div class="section_menu__item__img">
                                    <img src="assets/img/12.jpg" alt="...">
                                </div>
                            </div>
                            <div class="col-7">
                                <h4>Vinho Tinto Qtª da Espiga</h4>
                            </div>
                            <div class="col-2">
                                <div class="section_menu__item__price text-center">95,00€</div>
                            </div>
                        </div>
                    </div>
                </div>
</section>

JavaScript
Código:
var Menu = function() {
    var o = $(".section_menu__grid")
      , s = $(".section_menu__nav");
    o.length && o.each(function() {
        var e = $(this)
          , t = e.attr("id")
          , n = s.find('li.active > a[href="#' + t + '"]').data("filter")
          , o = e.isotope({
            itemSelector: ".section_menu__grid__item",
            filter: n
        });
        o.imagesLoaded().progress(function() {
            o.isotope("layout")
        })
    }),
    s.on("click", "li > a", function(e) {
        e.preventDefault();
        var t = $(this);
        !function(e) {
            var t = o.filter(e.attr("href"))
              , n = e.data("filter");
            t.isotope({
                filter: n
            })
        }(t),
        function(e) {
            e.parent("li").siblings("li").removeClass("active"),
            e.parent("li").addClass("active")
        }(t)
    })
}();
 
Boa tarde,

A pergunta que faço é:
O que é que é impeditivo de usar jquery e scripts baseados em jquery? Ou o problema é ser uma biblioteca que está num CDN em vez de no alojamento, não dependendo, assim, de um possível risco de outage no CDN?

é possível fazer o download do jquery.min para ficar alojado localmente.
Refazer tudo para não depender de Jquery é, no mínimo, faraónico. Porque não reutilizar?

EDIT: Estive a ver, e são scripts comerciais. Entendo a questão. Vejo que estás a usar Bootstrap. O bootstrap tem um Carousel nativo, que é responsive, touch optimized. Aqui resolveria.
Para o 2º script, dá uma olhadela no filterizr. Faz a mesma coisa.
 
Última edição:
Tens a documentação completa aqui com exemplos de código, que explica como integrar, que derivações e modos existem, etc.
Tens de estar mínimamente à vontade com HTML e Javascript, senão é muito complicado.

Boa sorte
 
Tens a documentação completa aqui com exemplos de código, que explica como integrar, que derivações e modos existem, etc.
Tens de estar mínimamente à vontade com HTML e Javascript, senão é muito complicado.

Boa sorte


Bom Dia.

O que não estou a conseguir fazer é mostrar inicialmente APENAS o menu (Almoço & Jantar). A interacção entre menus já está feito.
data-filter="1" -> Almoço & Jantar
data-filter="2" -> Bebidas
filtr-container -> Container de todos os itens
filtr-item" data-category="1" data-sort="value" -> Item Almoço & Jantar
filtr-item" data-category="2" data-sort="value" -> Item Bebidas

HTML:
    <section class="mt-5" id="menu">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h2 class="text-center">Menu</h2>
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <nav class="section_menu__nav">
                        <ul>
                            <li class="active">
                                <a href="#menu_images" data-filter="1">Almoço & Jantar</a>
                            </li>
                            <li>
                                <a href="#menu_images" data-filter="2">Bebidas</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>

       
            <div class="row filtr-container" id="menu_images">
                <div class="col-md-6 filtr-item" data-category="1" data-sort="value">
                    <div class="section_menu__item">
                        <div class="row">
                            <div class="col-3">
                                <div class="section_menu__item__img">
                                    <img src="assets/img/5.jpg" alt="...">
                                </div>
                            </div>
                            <div class="col-7">
                                <h4>Picanha Grelhada</h4>
                                <p>Acompanhamento: Arroz, Batatas Fritas</p>
                            </div>
                            <div class="col-2">
                                <div class="section_menu__item__price text-center">15,00€</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 filtr-item" data-category="2" data-sort="value">
                    <div class="section_menu__item">
                        <div class="row">
                            <div class="col-3">
                                <div class="section_menu__item__img">
                                    <img src="assets/img/11.jpg" alt="...">
                                </div>
                            </div>
                            <div class="col-7">
                                <h4>Vinho Verde Gazela</h4>
                            </div>
                            <div class="col-2">
                                <div class="section_menu__item__price text-center">5,00€</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 filtr-item" data-category="2" data-sort="value">
                    <div class="section_menu__item">
                        <div class="row">
                            <div class="col-3">
                                <div class="section_menu__item__img">
                                    <img src="assets/img/12.jpg" alt="...">
                                </div>
                            </div>
                            <div class="col-7">
                                <h4>Vinho Tinto Qtª da Espiga</h4>
                            </div>
                            <div class="col-2">
                                <div class="section_menu__item__price text-center">95,00€</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 filtr-item" data-category="1" data-sort="value">
                    <div class="section_menu__item">
                        <div class="row">
                            <div class="col-3">
                                <div class="section_menu__item__img">
                                    <img src="assets/img/6.jpg" alt="...">
                                </div>
                            </div>
                            <div class="col-7">
                                <h4>Filetes de Pescada </h4>
                                <p>Acompanhamento: Arroz, Salada, Limão, Salsa</p>
                            </div>
                            <div class="col-2">
                                <div class="section_menu__item__price text-center">9,50€</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 filtr-item" data-category="1" data-sort="value">
                    <div class="section_menu__item">
                        <div class="row">
                            <div class="col-3">
                                <div class="section_menu__item__img">
                                    <img src="assets/img/7.jpg" alt="...">
                                </div>
                            </div>
                            <div class="col-7">
                                <h4>Entrecosto Grelhado</h4>
                                <p>Acompanhamento: Batatas Assadas, Arroz, Limão, Cebola</p>
                            </div>
                            <div class="col-2">
                                <div class="section_menu__item__price text-center">12,50€</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 filtr-item" data-category="2" data-sort="value">
                    <div class="section_menu__item">
                        <div class="row">
                            <div class="col-3">
                                <div class="section_menu__item__img">
                                    <img src="assets/img/13.jpg" alt="...">
                                </div>
                            </div>
                            <div class="col-7">
                                <h4>Vinho Tinto Barca Velha</h4>
                            </div>
                            <div class="col-2">
                                <div class="section_menu__item__price text-center">650,00€</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 filtr-item" data-category="1" data-sort="value">
                    <div class="section_menu__item">
                        <div class="row">
                            <div class="col-3">
                                <div class="section_menu__item__img">
                                    <img src="assets/img/8.jpg" alt="...">
                                </div>
                            </div>
                            <div class="col-7">
                                <h4>Sardinhas Grelhadas</h4>
                                <p>Acompanhamento: Batatas Cozidas, Limão, Molho à Escabeche</p>
                            </div>
                            <div class="col-2">
                                <div class="section_menu__item__price text-center">13,50€</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 filtr-item" data-category="2" data-sort="value">
                    <div class="section_menu__item">
                        <div class="row">
                            <div class="col-3">
                                <div class="section_menu__item__img">
                                    <img src="assets/img/14.jpg" alt="...">
                                </div>
                            </div>
                            <div class="col-7">
                                <h4>Vinho Tinto Mouchão</h4>
                            </div>
                            <div class="col-2">
                                <div class="section_menu__item__price text-center">175,00€</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 filtr-item" data-category="1" data-sort="value">
                    <div class="section_menu__item">
                        <div class="row">
                            <div class="col-3">
                                <div class="section_menu__item__img">
                                    <img src="assets/img/9.jpg" alt="...">
                                </div>
                            </div>
                            <div class="col-7">
                                <h4>Salmão Assado</h4>
                                <p>Acompanhamento: Molho de Cogumelos</p>
                            </div>
                            <div class="col-2">
                                <div class="section_menu__item__price text-center">7,50€</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 filtr-item" data-category="2" data-sort="value">
                    <div class="section_menu__item">
                        <div class="row">
                            <div class="col-3">
                                <div class="section_menu__item__img">
                                    <img src="assets/img/16.png" alt="...">
                                </div>
                            </div>
                            <div class="col-7">
                                <h4>Quinta dos Carvalhais Tinto</h4>
                            </div>
                            <div class="col-2">
                                <div class="section_menu__item__price text-center">8.50€</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 filtr-item" data-category="1" data-sort="value">
                    <div class="section_menu__item">
                        <div class="row">
                            <div class="col-3">
                                <div class="section_menu__item__img">
                                    <img src="assets/img/10.jpg" alt="...">
                                </div>
                            </div>
                            <div class="col-7">
                                <h4>Bifinhos de Frango</h4>
                                <p>Acompanhamento: Puré de Batata Doce</p>
                            </div>
                            <div class="col-2">
                                <div class="section_menu__item__price text-center">10,00€</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 filtr-item" data-category="2" data-sort="value">
                    <div class="section_menu__item">
                        <div class="row">
                            <div class="col-3">
                                <div class="section_menu__item__img">
                                    <img src="assets/img/15.jpg" alt="...">
                                </div>
                            </div>
                            <div class="col-7">
                                <h4>Rótulo Touriga Nacional</h4>
                            </div>
                            <div class="col-2">
                                <div class="section_menu__item__price text-center">6.50€</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Código:
<script src="assets/plugins/jquery.filterizr.min.js"></script>
    <script>
        var filterizd = $('.filtr-container').filterizr({
      
        });
    </script>
 
Terás de fazer um trigger por javascript qu simula o click no item.
Adicionas IDs aos links que têm o data-filter de modo a poderes chamar cada um individualmente.

Exemplo:
$( document ).ready(function() {
$('#link1').click();
});​

Se preferires que seja por classe, adicionas uma classe a todos os links do menu de topo (top_menu), e fazes assim:
$( document ).ready(function() {
$('.top_menu')[0].click();
});​

Isto resolverá, em princípio, o problema.

Abraço e boa sorte
 
Terás de fazer um trigger por javascript qu simula o click no item.
Adicionas IDs aos links que têm o data-filter de modo a poderes chamar cada um individualmente.

Exemplo:
$( document ).ready(function() {
$('#link1').click();
});​

Se preferires que seja por classe, adicionas uma classe a todos os links do menu de topo (top_menu), e fazes assim:
$( document ).ready(function() {
$('.top_menu')[0].click();
});​

Isto resolverá, em princípio, o problema.

Abraço e boa sorte


Não sei se me expliquei bem, o que pretendo seria apenas mostrar inicialmente o Almoço & Jantar ( https://prnt.sc/t66kyp ), o que me aparece inicialmente é ( https://prnt.sc/t66nfk ).
A interação entre ( https://prnt.sc/t66kyp e https://prnt.sc/t66mip ) já está feito!

Ignora a barra amarela!

Já tentei algumas opções deste link, mas ainda não consegui nada. acho que a solução passa por aqui https://yiotis.net/filterizr/#/tutorials/quickstart
 
O próprio plugin já tem um atributo para definirem a default action para um pré-filtro:
filter: 'all',

É só mudares para o que pretendes e o script iniciar-se-á com esse filtro já aplicado. No teu caso, será 1, se não estou em erro.

Abraço
 
Um exemplo:
Código:
    <script>
        // Configure your options
const options = { filter: '1' };

// you set up your image gallery
const filterizr = new Filterizr('.filter-container', options);
    </script>
 
Um exemplo:
Código:
    <script>
        // Configure your options
const options = { filter: '1' };

// you set up your image gallery
const filterizr = new Filterizr('.filter-container', options);
    </script>

Obrigado! Só mais uma questão, quando clico no menu tanto no (Almoço & Jantar como nas Bebidas) o site sobe sempre ligeiramente, porquê ?
 
Isso acontece porque estás a usar âncoras (links do menu de topo). O Script não exige que uses âncoras para que funcione, como tal, sugiro substituires os links do teu menu de topo por isto:

Código:
                           <li class="active">
                                <a href="javascript:void(0)" data-filter="1">Almoço & Jantar</a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" data-filter="2">Bebidas</a>
                            </li>

Abraço
 
Isso acontece porque estás a usar âncoras (links do menu de topo). O Script não exige que uses âncoras para que funcione, como tal, sugiro substituires os links do teu menu de topo por isto:

Código:
                           <li class="active">
                                <a href="javascript:void(0)" data-filter="1">Almoço & Jantar</a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" data-filter="2">Bebidas</a>
                            </li>

Abraço

Código:
    <section class="section section_reservation mt-5" id="reservation">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h2 class="text-center">Reserva Online</h2>
                </div>
            </div>
            <div class="row justify-content-lg-center section_reservation__row">
                <div class="col-lg-8">
                    <form class="section_reservation__form" method="post">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="sr-only">Nome Completo</label>
                                    <input type="text" class="form-control" name="name" placeholder="Nome Completo" value="<?= isset($name) ? $name : ""?>">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only">Telemóvel</label>
                                    <input type="tel" class="form-control" name="tel" placeholder="Telemóvel" maxlength="9" value="<?= isset($tel) ? $tel : ""?>">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only">E-mail</label>
                                    <input type="email" class="form-control" name="email" placeholder="E-mail" value="<?= isset($email) ? $email : ""?>">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="sr-only">Pessoas</label>
                                    <select class="form-control" name="people">
                                        <option value="" >Selecione</option>
                                        <option value="1" <?= isset($people) && $people == 1 ? "selected" : ""?>>1 pessoa</option>
                                        <option value="2" <?= isset($people) && $people == 2 ? "selected" : ""?>>2 pessoas</option>
                                        <option value="3" <?= isset($people) && $people == 3 ? "selected" : ""?>>3 pessoas</option>
                                        <option value="4" <?= isset($people) && $people == 4 ? "selected" : ""?>>4 pessoas</option>
                                        <option value="5" <?= isset($people) && $people == 5 ? "selected" : ""?>>5 pessoas</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only">Data</label>
                                    <input type="date" class="form-control" name="date" value="<?= isset($date) ? $date : ""?>">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only">Time</label>
                                    <input type="time" class="form-control" name="time" value="<?= isset($time) ? $time : ""?>">
                                </div>
                            </div>
                            <div class="col">
                                <div class="text-center">
                                    <button type="submit" class="btn btn-primary">Reserve</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

Resolveu-me a parte do menu!

No entanto mais abaixo tenho um formulário de reservas ( com algumas validações ). Quando clico no botão reservar o site desloca-se para cima, não permitindo que se vejam as validações (como é que resolveria isso ??)

https://prnt.sc/t6tad4 ( Formulário )

https://prnt.sc/t6tala ( Validações do Formulário )
 
como é que essas validações, aparecem? após o reload da página? ou estás a usar ajax para fazer o post do form?

Este código está no ficheiro principal ( index.php ).
PHP:
<?php if(!empty($errors)): ?>
    <?php foreach($errors as $error): ?>
        <div class="alert alert-warning" role="alert" id="error"><?php echo $error; ?></div>
    <?php endforeach; ?>
    <?php endif; ?>

E tenho um segundo ficheiro que contém as validações

PHP:
<?php

$name = $tel = $email = $people = $date = $time = '';
$errors = [];

if($_SERVER['REQUEST_METHOD'] == 'POST'){

    if( !isset($_POST['name']) ||
        !isset($_POST['tel']) ||
        !isset($_POST['email']) ||
        !isset($_POST['people']) ||
        !isset($_POST['date']) ||
        !isset($_POST['time']) )
    {
        $errors[] = 'Pelo menos um dos campos não existe';
    }

    if(empty($errors)){

        if(empty($_POST['name']) || !preg_match("/^[a-zA-ZÀ-ú ]*$/", $_POST['name'])){
            $errors[] = 'Nome Inválido';
        } else {
            $name = $_POST['name'];
        }
        if(empty($_POST['tel']) || !preg_match("/^[0-9]*$/", $_POST['tel']) || strlen($_POST['tel']) < 9 || strlen($_POST['tel']) > 9){
            $errors[] = 'Telemóvel Inválido';
        } else {
            $tel = $_POST['tel'];
        }
        if(empty($_POST['email']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
            $errors[] = 'Email Inválido';
        } else {
            $email = $_POST['email'];
        }
        if(empty($_POST['people'])){
            $errors[] = 'É necessário que introduza o número de pessoas';
        } else {
            $people = $_POST['people'];
        }
        if(empty($_POST['date'])){
            $errors[] = 'É necessário que introduza uma data';
        } else {
            $date = $_POST['date'];
        }
        if(empty($_POST['time'])){
            $errors[] = 'É necessário que introduza um horário';
        } else {
            $time = $_POST['time'];
        }
    }
    if(empty($errors)){
        include('email.php');
    }
}
 
Isso acontece porque estás a usar âncoras (links do menu de topo). O Script não exige que uses âncoras para que funcione, como tal, sugiro substituires os links do teu menu de topo por isto:

Código:
                           <li class="active">
                                <a href="javascript:void(0)" data-filter="1">Almoço & Jantar</a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" data-filter="2">Bebidas</a>
                            </li>

Abraço

Aparece no canto inferior direito esta mensagem "javascript:void(0)" é possível fazer que não apareça ?
 
Este código está no ficheiro principal ( index.php ).
PHP:
<?php if(!empty($errors)): ?>
    <?php foreach($errors as $error): ?>
        <div class="alert alert-warning" role="alert" id="error"><?php echo $error; ?></div>
    <?php endforeach; ?>
    <?php endif; ?>

E tenho um segundo ficheiro que contém as validações

PHP:
<?php

$name = $tel = $email = $people = $date = $time = '';
$errors = [];

if($_SERVER['REQUEST_METHOD'] == 'POST'){

    if( !isset($_POST['name']) ||
        !isset($_POST['tel']) ||
        !isset($_POST['email']) ||
        !isset($_POST['people']) ||
        !isset($_POST['date']) ||
        !isset($_POST['time']) )
    {
        $errors[] = 'Pelo menos um dos campos não existe';
    }

    if(empty($errors)){

        if(empty($_POST['name']) || !preg_match("/^[a-zA-ZÀ-ú ]*$/", $_POST['name'])){
            $errors[] = 'Nome Inválido';
        } else {
            $name = $_POST['name'];
        }
        if(empty($_POST['tel']) || !preg_match("/^[0-9]*$/", $_POST['tel']) || strlen($_POST['tel']) < 9 || strlen($_POST['tel']) > 9){
            $errors[] = 'Telemóvel Inválido';
        } else {
            $tel = $_POST['tel'];
        }
        if(empty($_POST['email']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
            $errors[] = 'Email Inválido';
        } else {
            $email = $_POST['email'];
        }
        if(empty($_POST['people'])){
            $errors[] = 'É necessário que introduza o número de pessoas';
        } else {
            $people = $_POST['people'];
        }
        if(empty($_POST['date'])){
            $errors[] = 'É necessário que introduza uma data';
        } else {
            $date = $_POST['date'];
        }
        if(empty($_POST['time'])){
            $errors[] = 'É necessário que introduza um horário';
        } else {
            $time = $_POST['time'];
        }
    }
    if(empty($errors)){
        include('email.php');
    }
}

OK, então é por post com reload.
é normal que a página fique no topo após o reload. é o comportamento normal.

resolves o problema assim:

PHP:
<?php if(!empty($errors)): ?>
<script>
$(document).ready(function() {
               $("html, body").animate({
                      scrollTop: $("#val_errors").offset().top
               }, 2000);
});
</script>
<div id="val_errors">
    <?php foreach($errors as $error): ?>
        <div class="alert alert-warning" role="alert" id="error"><?php echo $error; ?></div>
    <?php endforeach; ?>
</div>
    <?php endif; ?>

Isto faz com que quando o reload da página estiver feito, ele faz auto-scroll-down com animação até onde estão os erros.

Aparece no canto inferior direito esta mensagem "javascript:void(0)" é possível fazer que não apareça ?

Não te esqueceste de fechar alguma aspa? é muito comum. Tenta fazer um code inspect para resolveres o problema.
Não pareces estar muito à vontade com PHP e javascript, ou estou enganado?

Vou respondendo à medida que vá tendo tempo, mas pode demorar.
Abraço e boa sorte
 
Esquece, nabice minha, desculpa. Obviamente que javascript plano assim dentro de PHP vai dar erro de sintaxe :facepalm::facepalm::facepalm:
Bom, deixa me voltar a ter um tempinho, já te re-escrevo o código correctamente. Vai funcionar, mas tem é de ser bem escrito :P

Abraço

EDIT:
Não está incorrecto, não. Tem de dar assim porque estás a fazer aberturas e fechos de php inline. Se é uma boa ideia? talvez não, mas o código precisa de ser re-escrito na mesma, porque assim, não tem sentido, mas assim teria de dar.

PHP:
<?php if(!empty($errors)): ?>
<script>
    $(document).ready(function() {
        $("html, body").animate({
              scrollTop: $("#val_errors").offset().top
        }, 2000);
    });
</script>
<div id="val_errors">
<?php foreach($errors as $error): ?>
        <div class="alert alert-warning" role="alert"><?php echo $error; ?></div>
<?php endforeach; ?>
</div>
<?php endif; ?>
 
Última edição:
Back
Topo