SLIDER CON BOTONES LATERALES Y DE LOCALIZACION.

 CODIGO HTML

JS - Lateral Sidebar

Barra lateral para celular

HTML

<!------------- LATERAL SIDEBAR ------------->

  <div id="minimal_wall">

    <input type="checkbox" id="check">

    <label for="check">

      <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com

        /f/ce612125-96d6-4376-a8b3-6b72e463ad1e/

        d6s5d9m-8cbe2096-f452-42e1-a694-ffef7291a4b1.

        png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.

        eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQ

        xNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY

        0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL

        2ZcL2NlNjEyMTI1LTk2ZDYtNDM3Ni1hOGIzLTZiNzJlNDYzYWQxZVwv

        ZDZzNWQ5bS04Y2JlMjA5Ni1mNDUyLTQyZTEtYTY5NC1mZmVmNzI5MWE0YjEucG

        5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.6aaql

        V2GiO50pnn90Oy8UOSg3pZWPf-hsCm7O0Mkevs"

        alt="" style="height: 60px" id="btn">

      <img src="img/cruzx.png" alt="" style="height: 26px" id="cancel">

    </label>

    <div class="sidebar">

        <header>Links</header>

        <ul>

            <li><a href="https://api.whatsapp.com/send/

                ?phone=+528117281794&text=Buen%20día,%20" target="_blank">

                <img src="img/whatsapplogo.jpg" alt="" style="height: 30px;

                vertical-align: middle; margin-right: 15px;"> Whatsapp</a></li>

            <li><a href="https://www.google.com/search?q=nfl+games&source=

                lmns&bih=611&biw=1366&rlz=1C1ONGR_enMX1040MX1040&hl=es&sa=X&ve

                d=2ahUKEwj10I-gm7WBAxU0JN4AHd79BacQ0pQJKAB6BAgBEAI" target="_blank">

                <img src="https://neiuindependent.org/wp-content/uploads/

                2019/11/nfl-national-football-league-royalty-free-thumbnail.jpg"

                 alt="" style="border-radius: 50px; height: 30px;

                vertical-align: middle; margin-right: 15px;">NFL</a></li>

            <li><a href="https://www.google.com/search?q=real+madrid&rlz=

                1C1ONGR_enMX1040MX1040&sxsrf=AJOqlzWXkyzXe3IZxTcO_cp9xrA4CBtr

                cw%3A1676834253739&ei=zXXyY9bjLLDbkPIPnYmWoAs&ved=0ahUKEwiW_qm

                wpqL9AhWwLUQIHZ2EBbQQ4dUDCA8&uact=5&oq=real+madrid&gs_lcp=Cgxnd

                3Mtd2l6LXNlcnAQAzIECCMQJzIECC4QJzILCAAQgAQQsQMQgwEyCwgAEIAEELED

                EIMBMggIABCxAxCDATIICAAQsQMQgwEyCwgAEIAEELEDEIMBMgsIABCABBCxAxC

                DATIFCAAQgAQyCAgAELEDEIMBOgoIABBHENYEELADOgUIIRCgAToQCAAQgAQQ

                FBCHAhCxAxCDAToKCAAQgAQQFBCHAjoFCC4QgAQ6CwguEIAEELEDEIMBSgQI

                QRgAUMAEWOQRYPoTaAFwAXgBgAGPAYgBvQiSAQM1LjWYAQCgAQHIAQjAA

                QE&sclient=gws-wiz-serp" target="_blank">

                <img src="img/rmadrid.png" alt="" style="border-radius: 50px;

                height: 35px; vertical-align: middle; margin-right: 15px;">

                Real Madrid</a></li>

        </ul>

    </div>

  </div>

CSS

/************ LATERAL SIDEBAR ************/

#minimal_wall{

    width: 100%;

    height: 0px;

    background: #042231;

}

.sidebar {

  position: fixed;

  left: -250px;

  width: 250px;

  height: 100%;

  background: #063146;

  transition: all .5s ease;

}

.sidebar header {

  font-size: 22px;

  color: white;

  line-height: 70px;

  text-align: center;

  background: #063146;

  user-select: none;

}

.sidebar ul a{

  display: block;

  height: 100%;

  width: 100%;

  line-height: 65px;

  font-size: 16px;

  color: white;

  padding-left: 40px;

  box-sizing: border-box;

  border-bottom: 1px solid black;

  border-top: 1px solid rgba(255,255,255,.1);

  transition: .4s;

}

.sidebar ul li:hover a{

  padding-left: 50px;

}

.sidebar ul a i{

  margin-right: 16px;

}

#check{

  display: none;

}

label #btn,label #cancel{

  position: absolute;

  background: #ffffff;

  border-radius: 50px;

  cursor: pointer;

  padding: 3px;

}

label #btn{

  left: 15px;

  top: 20px;

  font-size: 35px;

  color: white;

  transition: all .5s;

}

label #cancel{

  z-index: 1111;

  left: -195px;

  top: 20px;

  font-size: 30px;

  color: #0a5275;

  padding: 6px;

  transition: all .5s ease;

 

}

#check:checked ~ .sidebar{

  left: 0;

}

#check:checked ~ label #btn{

  left: 250px;

  opacity: 0;

  pointer-events: none;

}

#check:checked ~ label #cancel{

  left: 210px;

}

JAVASCRIPT

// nuevo diseño

posicionarMenu();

 

$(window).scroll(function() {    

    posicionarMenu();

});

 

function posicionarMenu() {

    var altura_del_header = $('.header').outerHeight(true);

    var altura_del_menu = $('.menu').outerHeight(true);

 

    if ($(window).scrollTop() >= altura_del_header){

        $('.menu').addClass('fixed');

        $('.wrapper').css('margin-top', (altura_del_menu) + 'px');

    } else {

        $('.menu').removeClass('fixed');

        $('.wrapper').css('margin-top', '0');

    }

}

Javascript - Banner de varias imagenes

Crea un banner de varias imagenes manejable con botones

HTML

<div id="h_img">

   

        <img src="https://www.biology.ox.ac.uk/sites/default/files/

styles/mt_image_6_4/public/biology2/images/article/wildcru_tkpp.3_

c._justin_seymour_smith.jpg?itok=YoTotr4r" alt="" id="myDIV">

    <div id="buttones">

        <div id="button_0" onclick="btnRed()" ></div>

        <div id="button_0" onclick="btnGreen()"></div>

        <div id="button_0" onclick="btnBlue()"></div>

        <div id="button_0" onclick="btnReturn()"></div>

    </div>

</div>

CSS

#h_img{

    width: 100%;

    height: auto;

    display: flex;

    flex-flow: column;

    align-items: center;

    justify-content: center;

}

#h_img img{

    padding: 20px 0px 0px 0px ;

}

#buttones{

    width: 100%;

    height: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px 0px;

}

#button_0{

    width: 15px;

    height: 15px;

    background: white;

    border-radius: 10px;

    margin: 0px 20px;

    transition: all linear .25s;

}

#button_0:hover{

    background: red;

}

#button_0:nth-child(2){

    background: white;

}

#button_0:nth-child(2):hover{

    background: green;

}

#button_0:nth-child(3){

    background: white;

}

#button_0:nth-child(3):hover{

    background: blue;

}

#button_0:nth-child(4){

    background: white;

}

#button_0:nth-child(4):hover{

    background: yellow;

}

JAVASCRIPT

/******* las imagenes de preferencia que tengan

el mismo alto y ancho *******/

/******* HAMSTER *******/

function btnRed(){

    document.getElementById("myDIV").src="

https://i.pinimg.com/736x/23/a4/35/23a43593f24169de6829dd188752e1cb.jpg";

  }

  function btnRed2(){

      location.href="https://www.lawebdelprogramador.com/

foros/JavaScript/17119-Como-hago-un-link-con-Javascript.html";

  }

/******* GATO *******/

  function btnGreen(){

    document.getElementById("myDIV").src="

https://s1.1zoom.me/prev/592/Cats_Glance_Snout_591825_600x400.jpg";

  }

/******* PERRO *******/

  function btnBlue(){

    document.getElementById("myDIV").src="

https://st.depositphotos.com/30222024/51143/i/

450/depositphotos_511431526-stock-photo-three-dogs-playing-on-a.jpg";

  }

/******* LEON2 *******/

  function btnReturn(){

    document.getElementById("myDIV").src="

https://s1.1zoom.me/prev/504/503377.jpg";

  }

JS - Mostrar y ocultar div con un botón

 Muestra el contenido del "Div" con un solo botón en Javascript..

Así de sencillo fue el código.

HTML

<button onclick="myFunction()">Ver</button>

<div id="myDIV">

  <img src="https://humanidades.com/wp-content/uploads/

2016/07/buho-1-e1560041723608-800x400.jpg" alt="">

</div> CSS DEPENDE COMO QUIERAS AJUSTAR EL BOTON

JS

function myFunction() {

    var x = document.getElementById("myDIV");

    if (x.style.display === "none") {

        x.style.display = "block";

    } else {

        x.style.display = "none";

    }

}

OPCION NUMERO 2

HTML5

<button class="btn_ab" onclick="openReal('primero')">TV-Online</button>

<div id='primero' class='real'>

    (contenido)

</div>

CSS

.real {

    width: 100%;

    height: auto;

    display: none;

}

.hidden {

    display: block !important;

}

.btn_ab{

    margin: 30px;

}

JAVASCRIPT

// Abrir y cerrar divs

function openReal(realName) {

    document.getElementById(realName).classList.toggle('hidden')

  }

Javascript - Interacción con sitio web

 Javascript - Saludarte por la mañana con JS, ejercicio "onclick" en "alert"

HTML

<p onclick="saludar()" id="hola">Saludate, escribe tu nombre</p>

JAVASCRIPT

function saludar(){

    let saludar = prompt("Hola, Como te llamas?");

    let nombre = saludar;

    document.getElementById("hola").innerHTML = 'Hola ' + nombre + ',

que tengas un excelente día';

}

Javascript - Cambiar texto sin interactuar

Cambia texto sin interactuar con Javascript

HTML

<p onclick="cambioTxt()"  id="cha_stat">Cambiar el texto al dar clic aquí</p>

JAVASCRIPT

function cambioTxt(){

document.getElementById("cha_stat").innerHTML = "Aquí se cambio";

}

Javascript - Onclick

Ejercicio "onclick" de Javascript

HTML

<p onclick="alert('Here I am')">Aquí irá onclick</p>

Tan simple como eso.

Javascript - Multiplicar desde tu sitio web

Código Javascript para incluir un multiplicador en tu website

HTML 5

<form id="multiplicar">

<input type="text" id="multiplicando" value="0" onchange="multiplicar();">

 x <input type="text" id="multiplicador" value="0" onchange="multiplicar();">

 = <input type="text" id="resultado">

</form>

JS

function multiplicar(){

    m1 = document.getElementById("multiplicando").value;

    m2 = document.getElementById("multiplicador").value;

    r = m1*m2;

    document.getElementById("resultado").value = r;

}