Home / user-85822

Fernanda's questions

Martin Hope
Fernanda
Asked: 2020-09-04 04:13:16 +0800 CST
  • 1

I have to layout a website that has the table in the photo, I'm using bootstrap and I've already managed to round the edges, but I can't find anything on how to edit the cells when they're selected... I don't handle much js either... and I don't know how I should perform that behavior. Could you guide me a little (to know at least what I should look for to get the blue contours laid out) then the devs are going to do the magic, but I don't even know where the trick begins hahaha. Thank you so much for rescuing me from this dead end.

I leave below the code that I have so far (it is a basic bootstrap table with a rounded edge)

how should the table look

.table {
  border-collapse: separate;
  border: 1px solid transparent;
  border-spacing: 0;
  border-radius: 8px;
}

.table tr td,
.table tr th {
  border: 1px solid green;
}

.table thead tr th:first-child {
  border-radius: 8px 0px 0px 0px;
}

.table thead tr th:last-child {
  border-radius: 0px 8px 0px 0px;
}

.table tbody tr:last-child th:first-child {
  border-radius: 0px 0px 0px 8px;
}

.table tbody tr:last-child td:last-child {
  border-radius: 0px 0px 8px 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered r">
  <thead>
    <tr class="">
      <th scope="col">#</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">2</th>
      <td>@fat</td>
    </tr>
  </tbody>
</table>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

try giving it border-left, but it stays inside the table, not outside border attempt

css3
Martin Hope
Fernanda
Asked: 2020-02-12 11:22:31 +0800 CST
  • 7

Good morning, I am using the css grid for the first time and in mozilla everything is perfect, but in chrome it does not take me the justify-self. Is there any compatibility that I do not know?

I pass the code so you can see what it can be. Thank you

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "futura Lt BT";
  font-size: 16px;
}

.contenedor {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
}


/*principal producto*/

main {
  position: relative;
  top: 50px;
  grid-column-start: 1;
  grid-column-end: -1;
}

main #institucional {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}


/*imagenes principales*/

main #institucional #imagenes {
  width: 100%;
  display: inline-block;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 200px;
}

main #institucional #imagenes #uno {
  background: yellow;
}

main #institucional #imagenes #dos {
  background: red;
}

main #institucional #imagenes #tres {
  background: blue;
}

main #institucional #imagenes #cuatro {
  background: blueviolet;
}


/*logo principal circular*/

main #institucional #logoPrincipal {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: orange;
  grid-column-start: 1;
  grid-row-end: -1;
  position: absolute;
  align-self: center;
  justify-self: center;
}


/*promo vigente del mes*/

main .promo {
  height: 250px;
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8" />
  <title>PROMO Exclusive 2020</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <link rel="stylesheet" href="css/normalizr.css" />
  <script src="js/modernizr-custom.js"></script>
</head>

<body>
  <div class="contenedor">
    <main>
      <div id="institucional">
        <div id="imagenes">
          <img id="uno" src="#" alt="1" />
          <img id="dos" src="#" alt="2" />
          <img id="tres" src="#" alt="3" />
          <img id="cuatro" src="#" alt="4" />
        </div>
        <div id="logoPrincipal">
          <img src="#" alt="logo exclusive" />
        </div>
      </div>
    </main>
  </div>
</body>

css3
Martin Hope
Fernanda
Asked: 2020-01-17 07:29:58 +0800 CST
  • 0

Hello, I'm building a simple page using the css grid for the first time, and when I wanted to place an image with :before, it didn't take me indicating the path where it is located: "images/icon.png"... I was seeing the bibliography on the subject and I can't find what it can be. I pass code to see if you can guide me

.contenedor #contacto {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  font-size: 0.65em;
}

.contenedor #contacto #maipu .sede {
  border-bottom: 1px solid #48887b;
  margin-bottom: 5px;
  font-size: 1.5em;
}


/*elementos de cada sede*/

.contenedor #contacto #maipu .dir {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
  margin-bottom: 5px;
  text-align: left;
  align-items: end;
  justify-content: center;
}


/*datos de cada sede*/

.contenedor #contacto #maipu .dir h3 {
  grid-column-start: 2;
  grid-column-end: -1;
  position: relative;
}

.contenedor #contacto #maipu .dir h3::before {
  content: url(http://ibemo.es/wp-content/uploads/2017/04/ubi-300x268.png);
  position: absolute;
  top:-100px;
  left:-200px;
  height: 10px;
  width: 10px;
}

.contenedor #contacto #maipu{
  padding: 10px 10px;
  grid-column-start: 1;
  grid-column-end: 5;
}
<div class="contenedor">
  <div id="contacto">
    <div id="maipu">
      <h3 class="sede">MAIPÚ</h3>
      <div class="dir">
        <h3>Ozamis 309</h3>
      </div>
    </div>
  </div>
</div>

It's just a fraction of the code so you can see how I'm proposing it. I have two problems 1) it does not take the image from the folder but it does show it when it is an internet image (with path http://... .) 2) when it takes the image it lets me position it but not modify the measurements

Thanks in advance

css3
Martin Hope
Fernanda
Asked: 2020-10-10 03:21:18 +0800 CST
  • 1

I have some divs that have different heights and I don't know how to align them at the bottom instead of at the top using the FLOAT property.

I pass example of what I have

#marcas {
  width: 100%;
  height: 300px;
  display: block;
  position: relative;
}
#marcas #contMarcas {
  width: 100%;
  background: red;
  position: absolute;
  height: 100%;
}
#marcas figure#der {
  width: 30%;
  height: 90%;
  background: yellow;
  text-align: right;
  position: relative;
  float: right;
}
#marcas figure#izq {
  width: 30%;
  height: 50%;
  background: green;
  position: relative;
  float: right;
}
<section id="marcas">
  <div id="contMarcas">
    <figure id="der"> </figure>
    <figure id="izq"> </figure>
  </div>
</section>

The idea is that both rectangles are aligned below maintaining float. Thank you

html5
Martin Hope
Fernanda
Asked: 2020-10-04 05:23:06 +0800 CST
  • 1

I have a div to which I assign an image using :after (which will change with an event) the problem is that it doesn't take the size I want to assign it... It has to enter the black square. It is the first time that I use :after with images, with texts it had not happened to me... I pass code so that they can see if they can guide me

nav {
  display: inline-block;
  position: absolute;
  background: #fff;
  width: 100%;
  height: auto;
  text-align: right;
  z-index: 100;
  top: 50px;
}

nav div#cerrar:after {
  content: url('https://png.pngtree.com/png-vector/20190124/ourlarge/pngtree-x-red-cross-png-picture-red-png-image_550969.jpg');
  position: absolute;
  bottom: 0px;
  right: 100px;
  width: 20px;
  height: 20px;
}

nav a {
  text-decoration: none;
  color: #000;
  padding: 10px 10px 10px 0;
  display: block;
}

nav #cerrar {
  position: absolute;
  background: #000;
  width: 40px;
  height: 50px;
  right: 100px;
  bottom: -40px;
  border-radius: 0 0 5px 5px;
}
<nav>
  <a href="#contacto">CONTACTANOS</a>
  <div id="cerrar" class=""></div>
</nav>

html5
Martin Hope
Fernanda
Asked: 2020-07-10 08:00:07 +0800 CST
  • 1

I have a form with input and textarea (like any other) and I increase the font-size to make it easier to read, the problem is that when you start to fill in the fields, everything is written much smaller and I don't know why?

I pass code so you can see what mistake I'm making...

form textarea,
form textarea::placeholder,
form textarea::-webkit-input-placeholder {
  height: 70px;
  font-size: 1.5em;
  overflow-y: hidden;
}

form input,
form input::placeholder,
form input::-webkit-input-placeholder {
  font-size: 1.5em;
}
<form action="confFormularioBriefSeg.php" id="form2" name="form2" method="post">
  <input type="text" id="octava" class="brief boton" name="octava" placeholder="Nombre o denominación">
  <textarea name="novena" id="novena" class="textarea boton" placeholder="Descripción breve(dicho “en criollo” para entender el servicio a comunicar)"></textarea>
</form>

css3
Martin Hope
Fernanda
Asked: 2020-03-31 02:15:30 +0800 CST
  • 1

I have a menu that rotates the sections so that the user has a brief review of what he will find if he enters that page. So far so good. The problem occurs (in some browsers) when it returns to the original state because both sides (front and back) are displayed when you move the mouse over it and it looks horrible. Is there any way to correct this? I pass the code so you can see what I have. Thank you

.cajaMenu {
  width: 49%;
  height: 230px;
  margin-bottom: 5px;
  text-align: center;
  color: #808080;
  background: #fff;
  position: relative;
  perspective: 1000px;
  display: inline-block;
}

.cajaMenu:hover .botonMenu {
  transform: rotateY(180deg);
  width: 100%;
  height: 100%;
}

.botonMenu {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: all 1.2s linear;
  width: 100%;
}


/*--texto frente--*/

.frente {
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 100%;
  height: 100%;
}

.cajaMenu .botonMenu .frente h2 {
  display: block;
  padding: 15px 0;
  text-align: center;
  font-family: 'EncodeThin';
  font-size: 1.2em;
  cursor: pointer;
}


/*--icono seccion frente--*/

.cajaMenu .botonMenu .frente h2:before {
  font-family: 'icomoon';
  font-size: 4rem;
  position: relative;
  left: 0px;
  top: 0px;
  font-weight: normal;
}

.cajaMenu .botonMenu .frente h2#hacemos:before {
  content: '\e915';
}

.cajaMenu .botonMenu .frente h2#adaptable:before {
  content: '\e900';
}


/*--revez de cada seccion--*/

.cajaMenu .botonMenu .revez {
  transform: rotateY(180deg);
  font-size: .65em;
  cursor: pointer;
  background: #f4f4f4;
}

.cajaMenu .botonMenu .revez a {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 5px;
  right: 0;
  cursor: pointer;
  text-align: justify;
  hyphens: auto;
  color: #000;
  text-decoration: none;
  line-height: 1.4em;
}


/*--titulo revez del div--*/

.cajaMenu .botonMenu .revez h3 {
  padding: 3px 0;
}


/*--texto revez del div--*/

.cajaMenu .botonMenu .revez p {
  padding: 3px 0;
}


/*--boton "ver mas" revez del div--*/

.cajaMenu .botonMenu .revez h4 {
  color: #fb700d;
  position: absolute;
  bottom: 15px;
  right: 5px;
}
<nav id="seccion">
  <div class="cajaMenu">
    <div class="botonMenu">
      <div class="frente">
        <h2 id="hacemos"></h2>
        <h2>Que hacemos?</h2>
      </div>
      <div class="frente revez" id='meta'>
        <a href="nuestra_meta.php">
          <h3>No sabes por donde empezar...</h3>
          <p>Tranquilo! Junto a TIMON DIGITAL vas a lograr adaptarte al mundo de hoy de una manera sencilla. Conectarte con tus clientes, y brindales lo que necesitan desde donde sea que se encuentren.</p>

          <h4>Ver más +</h4>
        </a>
      </div>
    </div>
  </div>
  <div class="cajaMenu">
    <div class="botonMenu">
      <div class="frente">
        <h2 id="adaptable"></h2>
        <h2>Diseños adaptables</h2>
      </div>
      <div class="introMenu frente revez" id='responsive'>
        <a href="diseno_responsive.php">
          <h3>Nuevas formas de conectarse...</h3>
          <p>Los teléfonos son una extensión de nosotros, y tu negocio no puede quedar afuera.</p>
          <p>TIMON DIGITAL crea tu web adaptable a todos los formatos de pantalla. Para que tus clientes puedan sacar el máximo partido de tu negocio.</p>
          <h4>Ver más +</h4>
        </a>
      </div>
    </div>
  </div>
</nav>

html5
Martin Hope
Fernanda
Asked: 2020-03-19 13:49:41 +0800 CST
  • 0

Hello, I have a form that triggers an alert when the validation is done (or to report that it was sent or to request that the data be checked) and when clicking ACCEPT in the pop-up window, a blank screen is left that forces the user to go back to return to the form and from there (correct the error or go to another section) HORRIBLE!! LOL.

How should I do (I'm new to php and js) so that: if it's wrong, go back to the form so the user checks the data and if it's successful, go back to the section from where I entered the contact form, pass the code

HTML

<div id="contact_form">
                <form action="confFormulario3.php" id="form1" name="form1" method="post">
                    <input type="text" id="email" class="boton" name="email" placeholder="Tu email">
                    <input type="text" id="nombre" class="boton" name="nombre" placeholder="Cómo te llamas">
                    <textarea name="mensaje" id="mensaje" class="boton"  placeholder="En qué podemos ayudarte?"></textarea>
                    <input type="submit" name="Submit" id="buttonEnviar" class="boton" value="ENVIAR">
                </form>
            </div>

PHP

<?php
 /*Capturamos las variables del POST con operadores ternarios*/
 $email=   filter_var($_POST["email"], FILTER_VALIDATE_EMAIL);
 $name=    ( empty($_POST["nombre"])    )  ?  NULL : $_POST["nombre"];
 $message= ( empty($_POST["mensaje"]) )  ?  NULL : $_POST["mensaje"];
 /*Verificamos que los tres datos fueron posteados*/
 if ($email && $name && $message){
   $para = '[email protected]';
   $asunto = "mensaje de la web de el punto!!!!!!!!!!!!";
   $mailheader = "From: ".$email."\r\n";
   $mailheader .= "Reaply-To:".$email."\r\n";
   $mailheader .= "Content-type: text/html; charset=utf-8\r\n";

   $MESSAGE_BODY = "Nombre: ".$name."\n";
   $MESSAGE_BODY .= "\n<br>Email: ".$email."\n";
   $MESSAGE_BODY .= "\n<br>Mensaje: ".nl2br($message)."\n";

   mail($para, $asunto, $MESSAGE_BODY, $mailheader) or die("error al enviar mensaje, intente nuevamente");
   echo "<script>
            alert('Gracias por tu contacto! en breves nos estaremos comunicando 1');

        </script>";


 }else{
    //Aquí puedes también redirigir con un mensaje de error
    echo "<script>alert('Controla la informacion ingresada, el mensaje NO se ha enviado');</script>";
 }
 ?>

Thank you very much

php
Martin Hope
Fernanda
Asked: 2020-03-19 05:12:15 +0800 CST
  • 2

Hello, I have a contact form and I have managed to validate that the fields were filled in, but I don't know how to make the email have the correct format and if not throw an error, how can I verify that the content in that field contains @, or how to do that validation? I pass what I have:

HTML

<div id="contact_form">
                <form action="confFormulario3.php" id="form1" name="form1" method="post">
                    <input type="text" id="email" class="boton" name="email" placeholder="Tu email">
                    <input type="text" id="nombre" class="boton" name="nombre" placeholder="Cómo te llamas">
                    <textarea name="mensaje" id="mensaje" class="boton"  placeholder="En qué podemos ayudarte?"></textarea>
                    <input type="submit" name="Submit" id="buttonEnviar" class="boton" value="ENVIAR">
                </form>
            </div>

PHP

<?php
/*Capturamos las variables del POST con operadores ternarios*/
$email=   ( empty($_POST["email"])   )  ?  NULL : $_POST["email"];
$name=    ( empty($_POST["nombre"])    )  ?  NULL : $_POST["nombre"];
$message= ( empty($_POST["mensaje"]) )  ?  NULL : $_POST["mensaje"];
/*Verificamos que los tres datos fueron posteados*/
if ($email && $name && $message){
   $para = '[email protected]';
   $asunto = "mensaje de la web de el punto!!!!!!!!!!!!";
   $mailheader = "From: ".$email."\r\n";
   $mailheader .= "Reaply-To:".$email."\r\n";
   $mailheader .= "Content-type: text/html; charset=utf-8\r\n";

   $MESSAGE_BODY = "Nombre: ".$name."\n";
   $MESSAGE_BODY .= "\n<br>Email: ".$email."\n";
   $MESSAGE_BODY .= "\n<br>Mensaje: ".nl2br($message)."\n";

   mail($para, $asunto, $MESSAGE_BODY, $mailheader) or die("error al enviar mensaje, intente nuevamente");
   echo "<script>
            alert('Gracias por tu contacto! en breves nos estaremos comunicando 1');

        </script>";


}else{
    //Aquí puedes también redirigir con un mensaje de error
    echo "<script>alert('Controla la informacion ingresada, el mensaje NO se ha enviado');</script>";
}
?>
php
Martin Hope
Fernanda
Asked: 2020-03-16 04:00:25 +0800 CST
  • 0

I have an image and a back button that goes on top of the image (between the text and the person's head). The problem I have is making the positions responsive. When I modify the width of the window, the horizontal centering is fine, but it changes the location that I had given vertically...

body {
  margin: 0;
  padding: 0;
}

section#contruccion {
  width: 100%;
}

section#contruccion div#proxi {
  text-align: center;
}

section#contruccion div#proxi a#volver {
  position: absolute;
  top: 120px;
  z-index: 100;
  width: 40%;
  background: #b5de0a;
  font-size: .5rem;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border-radius: 5px;
  left: 30%;
}

section#contruccion div#proxi img {
  width: 100%;
  position: relative;
  left: 0;
}
<html>

<body>
  <section id="contruccion">
    <div id="proxi">
      <a href="tienda_virtual.php" id="volver">VOLVER A TIENDAS</a>
      <img src="https://timondigital.com/web/imagenes/proximamente1.jpg" alt="estamos renovando">
    </div>
  </section>
 </body>

</html>

css
Martin Hope
Fernanda
Asked: 2020-03-12 04:10:22 +0800 CST
  • 1

So far I have managed to open the window of each plan with its button and to close it if I select another button or by clicking the window that was opened. What I can't implement is that it closes when I click outside the window...

and another error that cannot be solved is that the window opens in the upper part of the body and not in the place where the button that is selected is located...

I pass the code so you can see what I have armed. Thank you

/*--mostrar y ocultar ventana planes--*/
function ventana(elemento) {
  $(elemento).next('div').toggle();
  $(".ventanas").not($(elemento).next('div')).hide();
  $(document.body).one('click', close);
}

function close() {
  $('.ventanas').next('.openClose').hide();
  $('.ventanas').removeClass('open');

}
/*--espacio para planes--*/

section#plan {
  width: 100%;
  display: block;
  position: relative;
  margin-top: 0;
  margin-bottom: 130px;
  /*--130px de 80px cuando esconde footer--*/
}


/*--titulos de cada plan--*/

section#plan #plan1>h3 {
  color: #EC2894;
}

section#plan #plan1>a {
  background: #EC2894;
}

section#plan #plan2>h3 {
  color: #0199f5;
}

section#plan #plan2>a {
  background: #0199f5;
}

section#plan #plan3>h3 {
  color: #b5de0a;
}

section#plan #plan3>a {
  background: #b5de0a;
}


/*--boton "DESDE $.."--*/

section#plan .ampliar a.desde {
  color: #fff;
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 5px;
  margin-bottom: 35px;
  width: 80%;
  margin: auto;
  text-align: center;
  padding: 5px 0;
  font-size: .8em;
}

section#plan .ampliar a.desde:hover {
  color: #000;
}

section#plan .ampliar a.desde p:first-child {
  font-size: 1.2rem;
  font-weight: 600;
}


/*--tarjeta con detalles--*/

section#plan .ampliar .ventanas>* {
  margin-bottom: 5px;
}

section#plan .ampliar .ventanas {
  display: none;
  z-index: 2100;
  width: 100%;
  position: fixed;
  top: 60px;
  background: #fff;
  border-radius: 5px;
  width: 78%;
  max-height: 65vh;
  left: 11%;
  overflow: auto;
  box-shadow: 5px 5px 5px grey;
  padding: 10px;
  font-size: .7rem;
  color: #333;
  text-align: justify;
}

section#plan .ampliar .ventanas.mostrar {
  display: block;
}


/*--titulos planes--*/

section#plan .ampliar .ventanas h3 {
  color: #0199f5;
  font-size: .9em;
  padding-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <section id="plan">
    <div id="plan1" class="ampliar">
      <h3>PLAN PRIMER VENTANA</h3>
      <a href="#" id="detalles1" class="desde" onClick="ventana(this)">
        <p>DESDE $??? POR MES*</p>
        <p>Clickea para mas detalles</p>
      </a>
      <div id="ventana1" class="ventanas" onClick="ventana(this)">
        <div id="info">
          <h4>VENTANA 1 Te brindamos dos para que elijas la que mejor se adapta a tus necesidades:</h4>
          <h3>PAGOS MENSUALIZADOS</h3>

          <p>El pago de tu web lo podrás realizar mensualizado o trimestral, según tu conveniencia! y dependiendo la complejidad del armado de tu página, o si necesitás que realicemos cambios en las promociones o contenidos con regularidad</p>

        </div>
      </div>
    </div>

    <div id="plan2" class="ampliar">
      <h3>PLAN CREZCAMOS</h3>
      <a href="#" id="detalles2" class="desde" onClick="ventana(this)">
        <p>DESDE $??? POR MES*</p>
        <p>Clickea para mas detalles</p>
      </a>
      <div id="ventana2" class="ventanas" onClick="ventana(this)">
        <h4>VENTANA 2 Te brindamos dos para que elijas la que mejor se adapta a tus necesidades:</h4>
        <h3>PAGOS MENSUALIZADOS</h3>

        <p>El pago de tu web lo podrás realizar mensualizado o trimestral, según tu conveniencia! y dependiendo la complejidad del armado de tu página, o si necesitás que realicemos cambios en las promociones o contenidos con regularidad</p>
      </div>
    </div>

    <div id="plan3" class="ampliar">
      <h3>PLAN CREZCAMOS</h3>
      <a href="#" id="detalles3" class="desde" onClick="ventana(this)">
        <p>DESDE $??? POR MES*</p>
        <p>Clickea para mas detalles</p>
      </a>
      <div id="ventana3" class="ventanas" onClick="ventana(this)">
        <h4>VENTANA 3  Te brindamos dos para que elijas la que mejor se adapta a tus necesidades:</h4>
        <h3>PAGOS MENSUALIZADOS</h3>

        <p>El pago de tu web lo podrás realizar mensualizado o trimestral, según tu conveniencia! y dependiendo la complejidad del armado de tu página, o si necesitás que realicemos cambios en las promociones o contenidos con regularidad</p>
      </div>
    </div>
  </section>
</body>

javascript
Martin Hope
Fernanda
Asked: 2020-03-10 11:29:15 +0800 CST
  • 0

I have a menu that displays information when it is clicked and hides when another one is opened (that works fine). What I can't achieve is that when I click it again it closes and everything remains as it was at the beginning. This is what I tried but it does nothing...

function desplegar(elemento) {
if($("div.introMenu.mostrar").length > 0) {
  $("div.introMenu.mostrar").removeClass("mostrar"); /** Con esto se elimina la clase mostrar del elemento que la tenga */
}
  if($("div.introMenu.mostrar")[0] != $(elemento).next('div')[0]){ /**ESTO ES LO QUE INTENTE AGREGAR Y NO FUNCIONA*/
  $(elemento).next('div').toggleClass("mostrar");  
}      
}


function desplegar(elemento) {
  if ($("div.introMenu.mostrar").length > 0) {
    $("div.introMenu.mostrar").removeClass("mostrar"); /** Con esto se elimina la clase mostrar del elemento que la tenga */
  }
  $(elemento).next('div').toggleClass("mostrar");
}
main #seccion {
  margin-bottom: 190px;
  margin-top: 10px;
  position: relative;
  top: 0px;
}

main #seccion.sinFooter {
  margin-bottom: 40px;
  top: 250px;
}


/*--boton principal de cada seccion--*/

main nav ol li {
  list-style: none;
}

main nav ol li h2 {
  background: #e6e6e6;
  display: block;
  width: 100%;
  padding: 15px 0;
  text-align: center;
  color: #0199f5;
  font-family: 'EncodeThin';
  font-size: 1.2em;
  cursor: pointer;
  border-bottom: 1px solid #d2d3d5;
  overflow: hidden;
}

main nav ol li h2:before {
  font-family: 'icomoon';
  content: '\ea0a';
  font-size: .5em;
  position: relative;
  left: -5px;
  top: -3px;
}

main nav ol li h2:hover {
  color: #fbd30c;
  background: #666;
}


/*--desplegable de cada seccion--*/

main nav ol li div.introMenu {
  font-size: .8em;
  display: none;
}

main nav ol li div a {
  width: 100%;
  height: auto;
  padding: 15px 30px;
  cursor: pointer;
  text-align: left;
  color: #000;
}


/*--titulo desplegable--*/

main nav ol li div h3 {
  padding: 3px 0;
}


/*--texto desplegable--*/

main nav ol li div p {
  padding: 5px 0;
}


/*--boton ver mas desplegable--*/

main nav ol li div h4 {
  padding: 5px;
  color: #b5de0a;
  position: relative;
  float: right;
  margin-bottom: 10px;
}


/*--estilo de display para onclick--*/

main nav ol li div#meta.mostrar {
  display: block;
}

main nav ol li div#responsive.mostrar {
  display: block;
}

main nav ol li div#catalogo.mostrar {
  display: block;
}

main nav ol li div#tienda.mostrar {
  display: block;
}

main nav ol li div#blog.mostrar {
  display: block;
}

main nav ol li div#diseno.mostrar {
  display: block;
}

main nav ol li div#precios.mostrar {
  display: block;
}
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <main>
    <nav id="seccion">
      <ol>
        <li>
          <h2 onClick="desplegar(this)">Que hacemos?</h2>
          <div class="introMenu" id='meta'>
            <a href="nuestra_meta.php">
              <h3>No sabes por donde empezar...</h3>
              <p>Tranquilo! Junto a TIMON DIGITAL vas a lograr adaptarte al mundo de hoy y poder conectar con tus clientes, brindandoles lo que necesitan</p>

              <h4>Ver más +</h4>
            </a>
          </div>
        </li>
        <li>
          <h2 onClick="desplegar(this)">Diseños adaptables</h2>
          <div class="introMenu" id='responsive'>
            <a href="diseno_responsive.php">
              <h3>Nuevas formas de conectarse...</h3>
              <p>En la vida de hoy, los teléfonos son una extensión de nosotros, y tu negocio no puede quedar afuera de esta tendencia cada vez mas grande. </p>
              <h4>Ver más +</h4>
            </a>
          </div>
        </li>
      </ol>
    </nav>
  </main>
</body>

</html>

javascript
Martin Hope
Fernanda
Asked: 2020-02-29 04:09:11 +0800 CST
  • 0

I have several buttons in a menu that should display information with a tab down (each individually its own). Since they all do the same thing, create a function (with .toggle) to add and remove a class and change the display from none to block. so far we're doing fine. I can't make it so that when one is opened, the one that was previously open is closed,

I don't know if I should make an array with a conditional, so that the element of the button that was clicked is identified and "block" is executed in it and a display none to the rest... But I'm new to js and I don't know how to achieve it

I pass code to guide them. If anyone knows a better way to achieve what he needs, it will be well received. Thank you very much

function desplegar(elemento) {
  $(elemento).next('div').toggleClass("mostrar")  
}
main #seccion {
  margin-bottom: 190px;
  margin-top: 10px;
  position: relative;
  top: 0px;
}

main #seccion.sinFooter {
  margin-bottom: 40px;
  top: 250px;
}


/*--boton principal de cada seccion--*/

main nav ol li {
  list-style: none;
}

main nav ol li h2 {
  background: #e6e6e6;
  display: block;
  width: 100%;
  padding: 15px 0;
  text-align: center;
  color: #0199f5;
  font-family: 'EncodeThin';
  font-size: 1.2em;
  cursor: pointer;
  border-bottom: 1px solid #d2d3d5;
  overflow: hidden;
}

main nav ol li h2:before {
  font-family: 'icomoon';
  content: '\ea0a';
  font-size: .5em;
  position: relative;
  left: -5px;
  top: -3px;
}

main nav ol li h2:hover {
  color: #fbd30c;
  background: #666;
}


/*--desplegable de cada seccion--*/

main nav ol li div.introMenu {
  font-size: .8em;
  display: none;
}

main nav ol li div a {
  width: 100%;
  height: auto;
  padding: 15px 30px;
  cursor: pointer;
  text-align: left;
  color: #000;
}


/*--titulo desplegable--*/

main nav ol li div h3 {
  padding: 3px 0;
}


/*--texto desplegable--*/

main nav ol li div p {
  padding: 5px 0;
}


/*--boton ver mas desplegable--*/

main nav ol li div h4 {
  padding: 5px;
  color: #b5de0a;
  position: relative;
  float: right;
  margin-bottom: 10px;
}


/*--estilo de display para onclick--*/

main nav ol li div#meta.mostrar {
  display: block;
}

main nav ol li div#responsive.mostrar {
  display: block;
}

main nav ol li div#catalogo.mostrar {
  display: block;
}

main nav ol li div#tienda.mostrar {
  display: block;
}

main nav ol li div#blog.mostrar {
  display: block;
}

main nav ol li div#diseno.mostrar {
  display: block;
}

main nav ol li div#precios.mostrar {
  display: block;
}
   <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
 <main>
  <nav id="seccion">
    <ol>
      <li>
        <h2 onClick="desplegar(this)">Que hacemos?</h2>
        <div class="introMenu" id='meta'>
          <a href="nuestra_meta.php">
            <h3>No sabes por donde empezar...</h3>
            <p>Tranquilo! Junto a TIMON DIGITAL vas a lograr adaptarte al mundo de hoy y poder conectar con tus clientes, brindandoles lo que necesitan</p>

            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
      <li>
        <h2 onClick="desplegar(this)">Diseños adaptables</h2>
        <div class="introMenu" id='responsive'>
          <a href="diseno_responsive.php">
            <h3>Nuevas formas de conectarse...</h3>
            <p>En la vida de hoy, los teléfonos son una extensión de nosotros, y tu negocio no puede quedar afuera de esta tendencia cada vez mas grande. </p>
            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
    </ol>
  </nav>
</main>
</body>
  </html>

<!-- begin snippet: js hide: false console: true babel: false -->

javascript
Martin Hope
Fernanda
Asked: 2020-02-26 12:28:17 +0800 CST
  • 5

I have several buttons in a menu that should display information with a tab down (each individually its own). Since they all do the same thing, create a function (with .toggle) to add and remove a class and

function desplegar() {
  document.getElementById("meta").classList.toggle("mostrar"),
    document.getElementById("responsive").classList.toggle("mostrar");
}
/*
var opciones =["meta","responsive","catalogo","tienda","blog","diseno","planes"];

function desplegar(){
  
  (no se como seria la identificacion del # donde se cliqueo????').classList.toggle("mostrar");
}*/
main #seccion {
  margin-bottom: 190px;
  margin-top: 10px;
  position: relative;
  top: 0px;
}

main #seccion.sinFooter {
  margin-bottom: 40px;
  top: 250px;
}


/*--boton principal de cada seccion--*/

main nav ol li {
  list-style: none;
}

main nav ol li h2 {
  background: #e6e6e6;
  display: block;
  width: 100%;
  padding: 15px 0;
  text-align: center;
  color: #0199f5;
  font-family: 'EncodeThin';
  font-size: 1.2em;
  cursor: pointer;
  border-bottom: 1px solid #d2d3d5;
  overflow: hidden;
}

main nav ol li h2:before {
  font-family: 'icomoon';
  content: '\ea0a';
  font-size: .5em;
  position: relative;
  left: -5px;
  top: -3px;
}

main nav ol li h2:hover {
  color: #fbd30c;
  background: #666;
}


/*--desplegable de cada seccion--*/

main nav ol li div.introMenu {
  font-size: .8em;
  display: none;
}

main nav ol li div a {
  width: 100%;
  height: auto;
  padding: 15px 30px;
  cursor: pointer;
  text-align: left;
  color: #000;
}


/*--titulo desplegable--*/

main nav ol li div h3 {
  padding: 3px 0;
}


/*--texto desplegable--*/

main nav ol li div p {
  padding: 5px 0;
}


/*--boton ver mas desplegable--*/

main nav ol li div h4 {
  padding: 5px;
  color: #b5de0a;
  position: relative;
  float: right;
  margin-bottom: 10px;
}


/*--estilo de display para onclick--*/

main nav ol li div#meta.mostrar {
  display: block;
}

main nav ol li div#responsive.mostrar {
  display: block;
}

main nav ol li div#catalogo.mostrar {
  display: block;
}

main nav ol li div#tienda.mostrar {
  display: block;
}

main nav ol li div#blog.mostrar {
  display: block;
}

main nav ol li div#diseno.mostrar {
  display: block;
}

main nav ol li div#precios.mostrar {
  display: block;
}
<main>
  <nav id="seccion">
    <ol>
      <li>
        <h2 onClick="desplegar()">Que hacemos?</h2>
        <div class="introMenu" id='meta'>
          <a href="nuestra_meta.php">
            <h3>No sabes por donde empezar...</h3>
            <p>Tranquilo! Junto a TIMON DIGITAL vas a lograr adaptarte al mundo de hoy y poder conectar con tus clientes, brindandoles lo que necesitan</p>

            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
      <li>
        <h2 onClick="desplegar()">Diseños adaptables</h2>
        <div class="introMenu" id='responsive'>
          <a href="diseno_responsive.php">
            <h3>Nuevas formas de conectarse...</h3>
            <p>En la vida de hoy, los teléfonos son una extensión de nosotros, y tu negocio no puede quedar afuera de esta tendencia cada vez mas grande. </p>
            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
    </ol>
  </nav>
</main>

change the display from none to block. so far we're doing fine. The problem is that they all respond to the same function, so all the tabs are displayed simultaneously (it doesn't matter which button you click)...

I want to make an array so that the ID of the button that was clicked is identified and only executes the function on that specific id. Could you help me with the part of identifying the id where it is pressed. I pass code to guide them. If anyone knows a better way to achieve what I need, it will be well received. Thank you very much.

javascript
Martin Hope
Fernanda
Asked: 2020-02-22 13:36:49 +0800 CST
  • 0

I have some stacked buttons and I want a tab between them to be changed to block when clicked. remaining: the button clicked above, the tab that appeared and below the rest of the buttons. I don't know how to do it (since I don't handle much js) and the displays of each button tab should be individualized. I pass the code so that they are oriented`

/*--boton principal de cada seccion--*/

main nav ol li {
  list-style: none;
}

main nav ol li h2 {
  background: #e6e6e6;
  display: block;
  width: 100%;
  padding: 15px 0;
  text-align: center;
  color: #0199f5;
  font-family: 'EncodeThin';
  font-size: 1.2em;
  cursor: pointer;
  border-bottom: 1px solid #d2d3d5;
  overflow: hidden;
}

main nav ol li h2:before {
  font-family: 'icomoon';
  content: '\ea0a';
  font-size: .5em;
  position: relative;
  left: -5px;
  top: -3px;
}

main nav ol li h2:hover {
  color: #fbd30c;
  background: #666;
}


/*--desplegable de cada seccion--*/

main nav ol li div.introMenu {
  font-size: .8em;
  display: none;
}

main nav ol li div a {
  width: 100%;
  height: auto;
  padding: 15px 30px;
  cursor: pointer;
  display: block;
  text-align: left;
  color: #000;
}


/*--titulo desplegable--*/

main nav ol li div h3 {
  padding: 3px 0;
}


/*--texto desplegable--*/

main nav ol li div p {
  padding: 5px 0;
}


/*--boton ver mas desplegable--*/

main nav ol li div h4 {
  padding: 5px;
  color: #b5de0a;
  position: relative;
  float: right;
  margin-bottom: 10px;
}
<main>
  <nav id="seccion">
    <ol>
      <li>
        <h2>Que hacemos?</h2>
        <div class="introMenu" id='meta'>
          <a href="nuestra_meta.php">
            <h3>No sabes por donde empezar...</h3>
            <p>Tranquilo! Junto a TIMON DIGITAL vas a lograr adaptarte al mundo de hoy y poder conectar con tus clientes, brindandoles lo que necesitan</p>

            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
      <li>
        <h2>Diseños adaptables</h2>
        <div class="introMenu" id='responsive'>
          <a href="diseno_responsive.php">
            <h3>Nuevas formas de conectarse...</h3>
            <p>En la vida de hoy, los teléfonos son una extensión de nosotros, y tu negocio no puede quedar afuera de esta tendencia cada vez mas grande. </p>
            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
      <li>
        <h2>Catálogo online</h2>
        <div class="introMenu" id='catalogo'>
          <a href="catalogo_online.php">
            <h3>Llega más lejos aún...</h3>
            <p>Tenes muchos que ofrecerle a tus clientes pero no queres perder la atención personalizada que siempre te diferencio de tus competidores? Entonces un catalogo online es lo que estas necesitando!</p>
            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
      <li>
        <h2>Tienda virtual</h2>
        <div class="introMenu" id='tienda'>
          <a href="tienda_virtual.php">
            <h3>Vende a toda hora!</h3>
            <p>(Falta redactar) Tenes muchos que ofrecerle a tus clientes pero no queres perder la atención personalizada que siempre te diferencio de tus competidores? Entonces un catalogo online es lo que estas necesitando!</p>
            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
      <li>
        <h2>Blog</h2>
        <div class="introMenu" id='blog'>
          <a href="blogs.php">
            <h3>Tenes mucho para contar</h3>
            <p>(Falta redactar) Tenes muchos que ofrecerle a tus clientes pero no queres perder la atención personalizada que siempre te diferencio de tus competidores</p>
            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
      <li>
        <h2>Diseño gráfico</h2>
        <div class="introMenu" id='diseno'>
          <a href="diseno_grafico.php">
            <h3>Tu imagen dice mucho de tu negocio</h3>
            <p>bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla</p>
            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
      <li>
        <h2>Nuestros precios</h2>
        <div class="introMenu" id='planes'>
          <a href="planes.php">
            <h3>La unión hace la fuerza...</h3>
            <p>(Falta redactar) Tenes muchos que ofrecerle a tus clientes pero no queres perder la atención personalizada que siempre te diferencio de tus competidores</p>
            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
    </ol>
  </nav>
</main>

javascript
Martin Hope
Fernanda
Asked: 2020-12-14 03:18:59 +0800 CST
  • 2

I have a website in html, css and javascript (without libraries or framework) and I need to embed an external footer and header to make it easier to maintain. I found the following code that would solve it, but they clarify that, if it doesn't work, the .htaccess must be configured and I have no idea what it refers to...

<!DOCTYPE>
<html>

<head>
  <title>Titulo de pagina</title>
</head>

<body>
  <?php
include "header.html";
?>
    // Todo el contenido de la pagina... etc...
    <?php
include "footer.html";
?>
</body>

</html>
php
Martin Hope
Fernanda
Asked: 2020-09-26 13:01:32 +0800 CST
  • 1

I have a problem with a menu because when it is reduced to small screen sizes, I put a function in js so that when selecting the desired section it closes automatically to improve the UX.

html

<div id="cardMenu">
            <figure id="hideMenu" class="ioMenuMovil exit" onClick="displayMenu()"></figure>
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li id="diseño"><a href="diseño_Grafico.html">DISEÑO GRAFICO</a></li>
                <li id="bolsas"><a href="bolsas_de_papel.html">BOLSAS IMPRESAS</a></li>
                <li id="carteleria"><a href="carteleria.html">CARTELERIA</a></li>
                <li id="cYE" onClick="displayCyE()"><a href="#">CUMPLES Y EVENTOS</a>
                    <ul id="subMenuCyE">
                        <li>Diseños personalizados de</li>
                        <li><a href="cumples_y_eventos.html#souvenirs">SOUVENIRS</a></li>
                        <li><a href="cumples_y_eventos.html#tarjetas">TARJETAS </a></li>
                        <li><a href="cumples_y_eventos.html#pins">PINS</a></li>
                        <li><a href="cumples_y_eventos.html#banderines">BANDERINES</a></li>
                        <li><a href="cumples_y_eventos.html#mesas">MESAS DULCES</a></li>
                        <li><a href="cumples_y_eventos.html#bolcita">BOLCITAS PARA CARAMELOS</a></li>
                        <li><a class="ultimo" href="cumples_y_eventos.html#bolcita">CAJITAS</a></li>
                    </ul>
                </li>
                <li id="otrosServicios" onClick="displayOs()"><a href="#">OTROS SERVICIOS</a>
                    <ul id="subMenuOS">
                        <li><a href="otros_servicios.html#papeleria">PAPELERIA COMERCIAL</a></li>
                        <li><a href="otros_servicios.html#redes">MANEJO DE REDES</a></li>                           
                        <li><a href="otros_servicios.html#web">DISEÑO WEB</a></li>
                        <li><a href="otros_servicios.html#estampado">ESTAMPADOS Y BORDADOS</a></li>
                        <li><a href="otros_servicios.html#sublimacion">SUBLIMACION</a></li>
                        <li><a href="otros_servicios.html#pins">PINS PUBLICITARIOS</a></li>
                        <li><a href="otros_servicios.html#impresion">IMPRESION FOTOGRAFICA</a></li>
                        <li><a class="ultimo" href="otros_servicios.html#tarjetas">TARJETAS Y SOUVENIRS</a></li>
                    </ul>
                </li>
                <li id="contacto"><a onClick="displayFormContact('block')">CONTACTO</a></li>
            </ul>
        </div>

javascript function

function displayFormContact(status){
var form = document.getElementById("contact_form")
form.style.display = status;


document.getElementById("cardMenu").style.display = "none";  //////////*CIERRA MENU AL SELECCIONAR LA SECCION*/
}

I have the problem with the largest sizes where the menu is displayed at the top (as it always is). When I select a section everything is fine, but when selecting the contact form (which appears in the same section I am in, without directing to another section) the menu disappears due to the function it has (necessary in small screen sizes)

How can I activate or deactivate this function depending on the user's screen size.

To see the menu working and the problem live, please enter

www.graficaelpunto.com/web

Thank you

javascript
Martin Hope
Fernanda
Asked: 2020-09-11 04:15:28 +0800 CST
  • 1

I have a button that redirects to another page on my website. But I want it to send me not to the top, but to a specific part of the file. I'm putting the id in the href , but it doesn't take it (when I pull out the id it redirects perfect, so the path is correct, but at the top). What can be?

this is the link

<li><a href="cumples_y_eventos.html/#mesas">MESAS DULCES</a></li>

And this is the element where I want it to appear

<article class="articulo">
    <div class="diseños" >
        <figure id="mesas" class="ejemploDiseños"><img src="imagenes/el punto logo.jpg" alt=""></figure>
        <div class="subeInfo">
           <h4>Mesas dulces</h4><h3>divertidas</h3>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.adipisicing Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        </div>
    </div>
</article>
html
Martin Hope
Fernanda
Asked: 2020-05-12 11:29:01 +0800 CST
  • 1

Good morning, I don't know if my question is obvious or not, but I don't know why when opening the drop-down menu, and selecting the desired section, the button works and changes the screen to the page that is indicated, but it does not close automatically, the user you must click "X" to close the menu (which is really annoying when browsing) thanks for the contribution!

Sofia Salinas 

    <nav id="ioMenu">
        <figure id="showMenu" class="ioMenuMovil" onClick="displayMenu()"><img src="imagenes/menu.png" alt="menu"></figure>
        <div id="cardMenu">
            <figure id="hideMenu" class="ioMenuMovil exit" onClick="displayMenu()"><img src="imagenes/exit.png" alt="exit"></figure>
            <figure id="logoMenu"><img src="imagenes/Logo.png" alt="logo diseñadora"></figure>
            <ul>
                <li><a onClick="navSection('home')" href="#">Home</a></li>
                <li><a onClick="navSection('sobreMi')" href="#">Sobre mi</a></li>
                <li><a onClick="navSection('servicios')" href="#">Servicios</a></li>
                <li><a onClick="navSection('portafolio')" href="#">Portafolio</a></li>
                <li><a onClick="navSection('blog')" href="#">Blog</a></li>
                <li><a onClick="displayFormContact('block')" href="#">Contacto</a></li>
            </ul>
        </div>
    </nav>
    <div class="flecha prev" id="prev_section" onClick=displaySection('prev')></div>
    <div class="flecha next" id="next_section"  onClick=displaySection('next')></div>

</header>
</html>


<style>

/*----------------------------MENU--------------*/
 nav .ioMenuMovil{
width: 150px;
height:30px;
margin: 0 0 0 8px;
overflow: hidden;
padding: 0;
position: absolute;
top: 2px;
display: inline-block;
cursor: pointer;
}

nav .ioMenuMovil img{
height: 75%;
padding-top: 4px;
 }

/*-----------------TARJETA EXIT------------------*/
nav #cardMenu{
background: #FFF;
width: 78%;
max-width: 250px;
height: 82vh;
position: absolute;
top: 0;
border-right: 3px solid #A7A7A7;
border-bottom: 3px solid #A7A7A7;
display: none;
z-index: 999;
 }

nav #cardMenu #hideMenu img{
height: 24px;
 }

nav #cardMenu #logoMenu img{
width: 80%;
position: absolute;
top: 70px;
left: 10%;
}

nav #cardMenu ul{
position: absolute;
margin-left: 20%;
top: 270px;
}

nav #cardMenu ul li{
list-style: none;
margin: 10px 0;
}

nav #cardMenu ul li a{
text-decoration: none;
color: #605F5F;
font-size: 1.5em;
padding: 5px 20px 5px 5px;
}
</style>


<script>
 var sections = new Array(5);   
  sections [0] = "home";
  sections [1] = "sobreMi";
  sections [2] = "servicios";
  sections [3] = "portafolio";
  sections [4] = "blog";

function displayMenu() {
var display;
var cardMenu = document.getElementById("cardMenu");
display = cardMenu.style.display;
if(display == "none"){
    cardMenu.style.display = "block";
  }
  else{
    cardMenu.style.display = "none";
  }
}

function displaySection(nav){
var search;
var show;

for (var i=0; i<5; i++){
    search = document.getElementById(sections[i]);
    show = search.style.display;

    if (show == "block"){
        search.style.display = "none";
        if (nav == "next"){
            i++;
            if(i>4) i=0;
        }
        if (nav == "prev"){
            i--;
            if(i<0) i=4;
        }
        search = document.getElementById(sections[i]);
        search.style.display = "block";

        setColor(i);
        break;
    }
}

}

function navSection(nav){
var search;

for (var i = 0; i < 5; i++) {
    search = document.getElementById(sections[i]);
    search.style.display = "none";

    if(sections[i] == nav){
        search.style.display = "block";

        setColor(i);
    }
}

!( https://1drv.ms/u/s!AhtaU0NLGYNthDPuhG03b8FgxA05 ) !( https://1drv.ms/u/s!AhtaU0NLGYNthDSkkuacfEosZ6Oy )

I don't know if you can see the photo, I'm new to the forum

javascript