JavaScript - "jalkakikkoja omassa päädyssä"

1. Tyylikkäämpi painike (JavaSript & CSS)

Esimerkissä käytetään CSS-muotoiltua painiketta ja JavaScriptiä avaamaan sekunnin viiveellä tekstiä sisältävän laatikko.
Esimerkin painike on tehty CSS-button generaattorilla.




Esimerkki 1, JavaScript-koodaus:


 <p id="tekstipoxi"> </p>
 <button class="omaPainike" onclick="omaOhjelma1()"> JS-koodi avaa teksti-boxin </button>

 <script>
  function omaOhjelma1() {
    var omaSek = setInterval(omaAika, 1000);
  }
  function omaAika() {
    var aika = new Date();
    document.getElementById("tekstipoksi").innerHTML = 
     '<div class="teksti">' + 
     'Tähän jotain tekstiä </div>';
  }
 </script>

Esimerkin 1 CSS-ohjeet



2. Painike avaa tekstilaatikon (JavaScript & CSS)

CSS-muotoillun painikeen klikkaus avaa JavaScriptillä CSS-muotoilun tekstiä sisältävän laatikon.
Esimerkin painike on tehty CSS-button generaattorilla.

Tehtävän otsikko

HTML-elementti span ei ole parhain tapa tuottaa laatikkoon tekstiä.
Ongelma, rivinvaihdot joutuu tekemään br-elementillä haluttuihin kohtiin.
Parempi vaihto-ehto voi olla CSS-ohjeilla muotoiltu pre-elementti.


Esimerkki 2. Esimerkissä avautuva tekstilaatikko hiukan paremmalla CSS-muotoiltu sekä JS-koodaus kehittyneempi:


  <div id="teht1" class="tehtava" onclick="omaTeht_1()">
   <button class="painike"> Avaa esimerkki </button>
   <span class="tehtavaTeksti" id="omaTeht_teksti_1"> <h3> Tehtävän otsikko </h3>
    HTML-elementti <i>span</i> ei ole parhain tapa tuottaa laatikkoon tekstiä.<br>
    Ongelma, rivinvaihdot joutuu tekemään <i>br</i>-elementillä haluttuihin kohtiin.<br>  
    Parempi vaihto-ehto voi olla CSS-ohjeilla muotoiltu <i>pre</i>-elementti.<br></span> 
  </div><br>


  <script>
   function omaTeht_1() {
    var popup = document.getElementById("omaTeht_teksti_1");
    popup.classList.toggle("show");
   }
  </script>

Esimerkin 2 CSS-ohjeet



3. Kuvan vaihto, 2 tapaa (JavaScript & CSS)

Esimerkissä vaihdetaan kuva klikkaamalla kuvaa, mukana myös kommenttina miten kuva vaihdettaisiin painikkeella.




Esimerkki 3. JavaSript-koodi:


  CSS-ohjeet:
  
  #kuvaA {
   position:relative;
   width: 40%;
   padding: 0px;
   margin-bottom:150px;
  }  
  
  HTML-koodaus:
  
  <div id="kuvaA">
   <img id="kuva" src="haukka1.gif" onclick="vaihdaKuva()">
  </div>
  
  JavaScript-koodaus:
  
  <script>
   function vaihdaKuva() 
   {
    document.getElementById("kuva").src="haukka2.png";
   }
  </script>
    
	
  Jos kuvan vaihto toteutettaisiin painikkeella (img- ja div- elementtien sijaan):
   
    <button type="button" onclick="vaihdaKuva()"> Vaihda kuva </button>

4. Kuvan vaihto "feidauksella" (CSS)

Esimerkissä kuva vaihtuu kun hiiren osoitin siirretään kuvaan ja kuvasta pois.
( Lyijykynäpiirros-kuvat: https://www.deviantart.com/ )

4. esimerkin toteutus, kuvat sijoitettu esimerkissä Galleria1-kansioon:


  CSS-ohjeet:
  
  #kfeidaus {
    position:relative;
    height:281px;
    width:450px;
    /*margin: auto;*/
    margin-bottom:210px;
    padding:15px;
  }
  #kfeidaus img {
    position:absolute;
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  #kfeidaus img.top:hover {
    opacity:0;
  }
  
  HTML-koodaus:
  
  <div id="kfeidaus">
   <img class="bottom" src="Galleria1/collum.jpg" />
   <img class="top" src="Galleria1/hurt.jpg" />
  </div>

5. Kuvan vaihto tekstistä (JQuery)

Esimerkissä kuva vaihtuu tekstiä klikkaamalla. Esimerkin ongelma, eri korkuisten kuvien käyttäminen. Edellisessä 4. esimerkissä kuvatiedostot oli samankokoisia, leveys ja korkeus.
( Lyijykynäpiirros-kuvat: https://www.deviantart.com/ )

Klikkaa mua

Tarvittava CSS-ohjeet, script:it ja HTML-koodaus:


  CSS-ohjeet:
  
  #feid2 {
    position:relative;
    /*height:281px;*/
    /*width:450px;*/
    /*margin:0 auto;*/
    width:30%;
    margin-bottom:390px;
    padding:15px;
  }
  #feid2 img {
    position:absolute;
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
  }
  #feid2 img.transparent {
    opacity:0;
  }
  #feid_onclick {
    cursor:pointer;
  }
  
  Script:it (head-elementtiin):
  
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <script type="text/javascript">
   $(document).ready(function() {
    $("#feid_onclick").click(function() {
    $("#feid2 img.top").toggleClass("transparent");
    });
   });
  </script>
  
  HTML-koodaus:
  
  <p id="feid_onclick"><b style="color:red"> Klikkaa mua </b></p>
  <div id="feid2" class="shadow">
   <img class="bottom" src="Galleria1/bono2.jpg"/>
   <img class="top" src="Galleria1/brucew2.jpg"" />
  </div>

6. Galleria, kuvan vaihto 4 sekunnin välein (JQuery)

Esimerkissä kuvat vauhtuu 400 millisekunnin eli 4 sekunnin välein. CSS-ohjeissa on huomioitu eri korkuisten kuvien aiheuttama ongelma margin-bottom-asetuksessa sekä käyttämällä kahden korkuisia kuvia.
( Lyijykynäpiirros-kuvat: https://www.deviantart.com/ )



Tarvittava CSS-ohjeet, script:it ja HTML-koodaus:


  CSS-ohjeet:
  
  #kuvat { position: relative;
         margin-bottom:560px;
         padding:15px; }
  #kuvat > img { position: absolute; left: 0; top: 0; display: none; }
  #kuvat > img:first-child { display: block; }
  
  Script:it (head-elementtiin):
  
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
     var
      images = "#kuvat > img" // kuva valitsin
      , interval = 4000           // siirtymä-aika millisekunteina
      , index = 0                 // alku-arvo
      , count = $(images).length  // kuvalaskuri
      // the transition loop
      , handle = setInterval(function() {
       // fade out the current image
       $(images + ":eq(" + index + ")").fadeOut('slow');
       // get the next index, or cycle back to 0
       if (++index === count) index = 0;
         // fade in the next image
         $(images + ":eq(" + index + ")").fadeIn('slow');
        }
        , interval
       )
       , stop = function(){
            clearInterval(handle);
       };
     });
    </script>
  
  HTML-koodaus:
  
  <div id="kuvat">
    <img src="Galleria1/hurt.jpg"/>
    <img src="Galleria1/collum.jpg">
    <img src="Galleria1/bono1.jpg">
    <img src="Galleria1/brucew.jpg"> 
    <img src="Galleria1/rock1.jpg">	  
  </div>

7. Painike avaa laatikon (JQuery)

Esimerkissä leveä painike avaa alle laatikon jossa kuva ja kuvaan liittyvää tekstiä.

Maybach luxery car

"The Vision Mercedes-Maybach 6 Cabriolet takes modern luxury into the realms of the ultimate in luxury, and is the perfect embodiment of our design strategy. Breathtaking proportions combined with a luxurious haute couture interior help to create the ultimate experience,” explains Gorden Wagener, Chief Design Officer of Daimler AG. Measuring almost six metres in length, the Vision Mercedes-Maybach 6 Cabriolet incorporates the classic proportions of art deco design with its extremely long bonnet and puristic, flowing lines, and at the same time completely reinterprets these aesthetic principles.



Tarvittava CSS-ohjeet, script:it ja HTML-koodaus:


  CSS-ohjeet:
  
   #avaa {
    padding: 10px;
    text-align: center;
    background-color: #cceeff;
    border: solid 1px RGB(155,182,225);
	font-family: Arial, Helvetica, sans-serif;
	width: 75%;
   }
   #panel{
    padding: 10px;
    background-color: RGB(147,174,221);
    border: solid 1px #c3c3c3;
	font-family: Arial, Helvetica, sans-serif;
	width: 75%;
   }
   #panel {
    display: none;
   }
   img{
    width: 50%;
	float: left;
	margin: 20px;
   }
   .clearfix {
    overflow: auto;
   }
   .teksti{
    padding: 20px;
   }
  
  Tarvittavat script:it (head-elementtiin):
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script> 
   $(document).ready(function(){
    $("#avaa").click(function(){
     $("#panel").slideToggle("slow");
    });
   });
  </script>
  
  HTML-koodaus:
  
  <div id="avaa"> Maybach luxery car </div>
  <div id="panel" class="clearfix">
   <img src="Galleria1/maybach.jpg"/>
   <p class="teksti2">
   "The Vision Mercedes-Maybach 6 Cabriolet takes modern luxury into the realms of the ultimate in luxury, 
   and is the perfect embodiment of our design strategy. Breathtaking proportions combined with a luxurious 
   haute couture interior help to create the ultimate experience,” explains Gorden Wagener, Chief Design 
   Officer of Daimler AG. Measuring almost six metres in length, the Vision Mercedes-Maybach 6 Cabriolet 
   incorporates the classic proportions of art deco design with its extremely long bonnet and puristic, 
   flowing lines, and at the same time completely reinterprets these aesthetic principles.<p>
  </div>

8. Kuvien sulkeminen viiveellä (JQuery)

"Klikkaa mua"-painike sulkee kuvat JQuery:n fadeOut()-funktioilla.
Vastaavasti fadeIn()-funktioilla voi avata kuvat ja käyttämällä fadeToggle()-funktiota voi avata ja sulkea kuvat samaa tekstiä h4-klikkaamalla.
Tämä ratkaisu-malli on ongelmallinen, koska kuvien alapuolella voi olla html-sisältöä jonka asemointiin www-sivulla kuvat vaikuttavat.

Tarvittava CSS-ohjeet, script:it ja HTML-koodaus:


  CSS-ohjeet:
  
   Tulossa myöhemmin....
  
  Script:it (head-elementtiin):
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
   $(document).ready(function(){
    $("h4").click(function(){
     $("#div1").fadeOut(2000);
     $("#div2").fadeOut(4000);
     $("#div3").fadeOut(6000);
    });
   });
  </script>
  
  HTML-koodaus:
  
  <h4> Klikkaapa mua </h4><br><br>

  <img id="div1" src="Galleria1/maisema1.jpg"/><br>
  <img id="div2" src="Galleria1/maisema2.jpg"/><br>
  <img id="div3" src="Galleria1/maisema3.jpg"/>

Kokeile esimerkkiä, klikkaa punaista tekstiä:

Klikkaapa mua





Design and edit player