Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

https://programmerpremidnight.blogspot.com/


Langsung saja scriptnya

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .kotak{
            height: 500px;
            width: auto;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="kotak" class="kotak" onmouseover="over()">
      
    </div>
<script
              src="https://code.jquery.com/jquery-3.4.1.min.js"
              integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
              crossorigin="anonymous"></script>

<script>
    $('.kotak').mousemove(function(event){
        const x = Math.round((window.innerHeight / event.clientX) * 255);
        const y = Math.round((window.innerWidth / event.clientY) * 255);

        $('.kotak').css('background-color','rgb('+x+',0,'+y+')');
    });
</script>
<script>
    $('.kotak').mouseleave(function(){
        $('.kotak').css('background-color','blue');
    });
</script>


</body>
</html> 

Saya menggunakan jQuery untuk event handlingnya , kalian bisa saja menggunakan Vanilla Javascript (Native Javascript). 

CSS saya menggunakan rgb (Contoh: rgb(200,0,200))
jadi saya menggunakan hasil dari gabungan event window innerheight/width dan event client height/width.

logikanya ketika kursor bergerak (mousemove) akan otomatis mengganti hasil dari perhitungan dalam variabel x dan y lalu variabel x dan y akan digunakan untuk rgb pada background color yang mana akan terus berganti jika kursor bergerak valuenya.


1. MEMBUAT TEKS BERADA DI TENGAH PADA HTML DAN CSS

https://programmerpremidnight.blogspot.com/

Buatlah file bernama textcenter.html lalu copy paste skrip dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        p{
            text-align: center;
        }

        ul li{
            text-align: center;
        }

        div{
            background-color: blue;
            float: left;
            text-align: center;
        }
    </style>
</head>
<body>

    <center><h1>Hello World</h1></center>   
   
    <p>Hello World.</p>
   
    <ul>
        <li>Hello World.</li>
        <li>Hello World</li>
    </ul>

    <div>
        Hello WORLD
    </div>


</body>
</html>

 Setelah itu coba buka filenya, nanti akan diarahkan ke browser default kalian, dan bisa lihat hasilnya, teks sudah berhasil berada di tengah.. loh kenapa yang div nggak? karena yang dipentingkan adalah posisi float dari elementnya terlebih dahulu disamping teks yang berada didalamnya..


coba hapus
            background-color: blue;
            float: left;

otomatis teks akan berada ditengah karena tidak ada yang mencegah (prevent).


2. MEMBUAT ELEMEN BERADA DI TENGAH PADA HTML DAN CSS

Buatlah file bernama element.html lalu copy paste skrip dibawah ini :

<!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>test</title>

        <style>

           .block{
               height:50px;
               max-width: 50px;
               background-color:blue;
               margin: 10px auto;
           }

        </style>

    </head>

    <body>

        <div class="block">
      
        </div>

    </body>

    </html>

Elemen divnya berhasil dibuat ditengah dengan menggunakan perantara atribut 'class' lalu 
menggunakan margin: 0px auto; untuk membuat elemen tersebut berada ditengah. 

jika kalian ganti margin nya dengan text-align:center; tidak akan berjalan dengan baik dan malah membuat teks berada di kiri.

Jadi sekian saja tutorialnya ... lain kali saya share juga apa itu class pada html , width height, dan margin.

Wasalammualaikum warahmatullahi wabarakatuh.. See you on next post!

 


Follow:

Blogger Templates20 Created by ThemeXpose