Juanas Smith Shared: jquery

Tampilkan postingan dengan label jquery. Tampilkan semua postingan

Selamat Siang kali ini admin akan membahas Chat Bubble dengan CSS dan JQuery, langkah pertama buat dulu kerangka htmlnya seperti berikut

<!DOCTYPE html>
<html>
<head>
<title>Facebook Like Chat</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery.js"></script>
<script src="style.js"></script>
</head>
<body>
<div class="chat_box">
<div class="chat_head">Chatbox</div>
<div class="chat_body">
<div class="user">Juanas Smith</div>
</div>
</div>

<div class="msg_box" style="right: 290px">
<div class="msg_head">Juanas Smith
<div class="close">x</div></div>
<div class="msg_wrap">
<div class="msg_body">
<div class="msg_a">This is from A</div>
<div class="msg_b">This from B</div>
<div class="msg_insert"></div>
</div>
<div class="msg_footer">
<textarea rows="2" class="msg_input" placeholder="Press Enter to send Message"></textarea>
</div>
</div>
</div>
</body>
</html>

kemudian buat style CSS nya seperti berikut

body {

       background-color: #16a085;

       margin: 0px;

       font-family: sans-serif;

       }



       .chat_box, .msg_box {

       cursor: pointer;

       position: fixed;

       bottom: 0px;

       right: 20px;

       background: white;

       width : 250px;

/*height: 400px;*/

       border-radius: 5px 5px 0px 0px;

       }



       .msg_box {

/*height: 350px;*/

       bottom: -5px;

       }



       .chat_head,.msg_head {

       background: #f39c12;

       padding: 15px;

       color: white;

       font-weight: bold;

       border-radius: 5px 5px 0px 0px;

/*position: fixed;*/

       }



       .chat_body {

       height: 400px;

       }



       .user {

       padding: 20px 25px;

       position: relative;

       cursor: pointer;

       }



       .user:hover {

       background: #f8f8f8;

       }



       .user:before {

       content: "";

       position: absolute;

       background-color: #2ecc71;

       width: 10px;

       height: 10px;

       left: 8px;

       top: 24px;

       border-radius: 50%;

       }



       .msg_head {

       background: #3498db;

       }



       .close {

       float: right;

       }



       .msg_body {

       height: 250px;

       font-size: 12px;

       overflow-y: auto;

       overflow-x: hidden;

       background: #bdc3c7;

       }



       .msg_input {

       border-color: transparent;

       border-top: 1px solid silver;

       width: 100%;

       box-sizing: border-box;

       -webkit-box-sizing: border-box;

       -moz-box-sizing: border-box;

       }



       .msg_a {

       margin-top: 10px;

       margin-right: 20px;

       min-height: 20px;

       padding: 15px;

       background: #99ffcc;

       margin-left: 20px;

       position: relative;

       border-radius: 5px;

       color: white;

       }



       .msg_a:before {

       content: "";

       position: absolute;

       width: 0px;

       height: 0px;

       top: 7px;

       left: -30px;

       border: 15px solid;

       border-color: transparent #99ffcc transparent transparent;

       }



       .msg_b {

       margin-top: 10px;

       width: auto;

       margin-right: 20px;

       min-height: 20px;

       padding: 15px;

       background: #ffff99;

       margin-left: 20px;

       position: relative;

       border-radius: 5px;

       color: black;

       }



       .msg_b:before {

       content: "";

       position: absolute;

       width: 0px;

       height: 0px;

       top: 7px;

       right: -30px;

       border: 15px solid;

       border-color: transparent transparent transparent #ffff99;

       }

kemudian buat style javascriptnya, untuk javascriptnya ini memerlukan jquery, silakan anda download dulu jquery dari website resminya. untuk javascriptnya seperti berikut

$(document).ready(function() {

    $('.chat_head').click(function(){

    $('.chat_body').slideToggle('slow');

    // $('.user').slideToggle('slow');

    });



    $('.msg_head').click(function(){

    $('.msg_wrap').slideToggle('slow');

    // $('.msg_box').slideToggle('slow');

    });



    $(".close").click(function(){

    $('.msg_box').hide();

    });



    $(".user").click(function(){

    $('.msg_wrap').show();

    $('.msg_box').show();

    });



    $('textarea').keypress(function(e){

    if(e.keyCode == 13) {

    var msg = $(this).val();

    $(this).val('');

    $("<div class='msg_b'>"+msg+"</div>").insertBefore('.msg_insert');

    $('.msg_body').scrollTop($('.msg_body')[0].scrollHeight);

    }

    });

});

langkah terakhir silakan test hasilnya di browser jika tampilanya seperti gambar di atas maka anda telah berhasil, ok sekian dulu tutorial kali ini, jika ada yang ditanyakan silakan tulis pada kolom komentar di bawah. jika artikel ini bermanfaat silakan bagikan ke teman anda.

Menampilkan Jam di browser dengan PHP yang auto update setiap detik ditampilkan bisa dibuat dengan memanfaatkan AJAX (Assincronus Javascript and XML). Logikanya kita buat dulu kode PHP untuk menampilkan Jam dari komputer kita, kemudian kita buat file baru yang berisi AJAX auto update dengan waktu satu detik. Jadi Perogram AJAX akan me-load fungsi PHP yang bertugas menampilkan Jam dari komputer kita tiap satu detik sekali, Karena di load tiap satu detik sekali maka tiap kali Jam berganti detik akan ditampilkan.
Ok langsung kita praktekan pertama buat dulu folder ajax di htdoc jika kalian menggunakan xampp atau di folder www jika anda menggunakan wamp lalu buat file jam.php isinya seperti berikut :

<?php
header('Access-Control-Allow-Origin: *');
date_default_timezone_set("Asia/Jakarta"); // untuk mengubah zona waktu
$arrDay = array("Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu");
$day = date("w"); //0-6 of day

echo "Sekarang adalah : <b>" . $arrDay[$day]."</b><br>";
echo "" . date("d/m/Y") . "<br>";
echo " " . date("H:i:s"); // untuk menampilkan jam
?>

kemudian buat file autoload.html isinya seperti berikut:

<html>
<head>
<style>
body {
background: url("bg.jpg") 30% center no-repeat;
}
#response {
margin: 250px auto;
width: 400px;
padding: 10px;
border: none;
background: rgba(0,0,0,0.5);
color: #fff;
font-size: 30px;
font-family: verdana;
}
</style>
<script src="jquery.js"></script>
<script>
var refreshId = setInterval(function(){
$('#response').load('jam.php');
}, 1000);
</script>
</head>
<body>
<div id="response">
</div>
</body>
</html>
pada kode html diatas saya menggunakan background gambar, gambarnya bisa kalian ubah sesuai gambar yang kalian miliki

kemudian karena AJAX nya menggunakan jquery silakan anda download file jquery terbaru di jquery.org kemudian file jquery yang telah anda download ganti namanya menjadi jquery.js dan pindahkan ke folder ajax tadi

setelah itu silkan di tes di browser dengan alamat http://localhost/ajax/autoload.html jika berhasil akan tampil seperti gambar diatas. Jika ingin mempercantik font jam nya bisa anda tambahkan google font. terimakasih semoga bermanfaat

Hallo Selamat Pagi, kali ini admin akan berbagi source code password strength checker, fitur-fitur nya bisa mengecek kekuatan password, menampilkan pesan kekuatan password, menyarankan penggunaan huruf kapital atau spesial karakter untuk memperkuat password, bisa melihat password dalam bentuk text, source code ini saya dapat dari vasplus programming blog dan sekarang saya akan membagikanya daripada saya simpan sendiri siapa tau ada yang membutuhkan, ini dia tampilanya:

Untuk link downloadnya dibawah

Download Disini

Semoga bermanfaat

Selamat Siang kali ini kita akan membagikan script popup image menggunakan CSS dan JQuery, popup image yaitu menampilkan gambar dengan ukuran yang lebih besar ketika di klik. script ini bisa anda pakai untuk membuat gallery gambar.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Popup Image</title>
    <script src="js/jquery-2.2.0.min.js" charset="utf-8"></script>
    <style media="screen">
      body { width: 100%; height: 100%; background: grey; margin: 0; }
      main { width: 100%; height: 100%; position: absolute; }
      #my_image {width: 200px; margin: 20px; cursor: zoom-in;}
      #my_image:hover {opacity: 0.7;}
      #appear_image_div {width: 100%; height: 100%; position: absolute; z-index: 10; opacity: 0.7; background: #002447;}
      #appear_image {display: block; margin: auto; position: relative; z-index: 11; top: 20px;}
      #close_image {position: fixed; z-index: 12; top: 20px; right: 20px; cursor: pointer;
      font-family: sans-serif; color: #fff; font-size: 15pt;}
      #close_image:hover{opacity: 0.7;}
    </style>
    <script type="text/javascript">
      jQuery(function($){
        $('#my_image').click(function(){
          var img = $(this).attr("src");
          var appear_image = "<div id='appear_image_div' onclick='closeImage()'></div>";
          appear_image = appear_image.concat("<img id='appear_image' src='"+img+"' />");
          appear_image = appear_image.concat("<div id='close_image' onclick='closeImage()'>x</div>");
          $('body').append(appear_image);
        });
      });
      function closeImage() {
        $('#appear_image_div').remove();
        $('#appear_image').remove();
        $('#close_image').remove();
      }
    </script>
  </head>
  <body>
    <main>
      <img src="perahu.jpg" id="my_image">
    </main>
  </body>
</html>

Itu dia scriptnya selamat mencoba, jika artikel ini bermanfaat silakan share. jika ada yang kurang jelas silakan ditanyakan pada kolom komentar dibawah

Iya Selamat malam kali ini admin akan berbagi tips membuat navbar collapse ketika kita scroll ke bawah navbarnya ilang, ketika di scroll ke atas navbarnya muncul kaya navbar twitter. langsung aja, pertama buat dulu kerangka htmlnya

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Navbar Scroll Effect</title>
    <link rel="stylesheet" href="css/nav.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Service</a></li>
        </ul>
    </nav>

    <div class="content">

    </div>
    <script src="js/jquery-2.2.0.min.js" charset="utf-8"></script>
    <script type="text/javascript">
        (function() {
        var documentElem = $(document),
        nav = $('nav'),
        lastScrollTop = 0;

        documentElem.on('scroll', function() {
        var currentScrollTop = $(this).scrollTop();

        // scroll down
        if(currentScrollTop > lastScrollTop) nav.addClass('hidden');
        // scrollTop
        else nav.removeClass('hidden');

        lastScrollTop = currentScrollTop;
        });

        })();
    </script>
</body>
</html>

kemudian kita buat style nya di css

* {

 margin: 0;

 padding: 0;

 }



 nav {

 position: fixed;

 width: 100%;

 top: 0;

 background-color: #555;

 text-align: center;

 padding: 20px 0;

 transition: all 0.5s ease;

 -webkit-transition: all 0.5s ease;

 -o-transition: all 0.5s ease;

 -ms-transition: all 0.5s ease;

 -moz-transition: all 0.5s ease;

 }



 .hidden {

 transform: translate3d(0,-100%,0);

 -webkit-transform: translate3d(0,-100%,0);

 -o-transform: translate3d(0,-100%,0);

 -ms-transform: translate3d(0,-100%,0);

 -moz-transform: translate3d(0,-100%,0);

 }



 nav ul li {

 display: inline-block;

 margin-right: 60px;

 }



 nav ul li:last-child {

 margin-right: 0;

 }



 nav ul li a {

 text-decoration: none;

 text-transform: uppercase;

 color: #fff;

 font-family: Arial, sans-serif;

 }



 .content {

 height: 2000px;

 background-color: rgb(200,200,200);

 }

Silakan lihat hasilnya di browser, jika ada yang error bisa ditanyakan pada kolom komentar di bawah. Ok sekianlah tutorial kali ini semoga bermanfaat, jika berkenan mohon di share ke teman anda

Selamat malam kali ini admin akan memposting cara mengakses webcam sendiri di browser dengan javascript. disini saya menggunakan node.js, socket.io dan jquery

Pertama-tama buat file package.json dengan isi seperti berikut:

{
        "name" : "Wcam-Live",
        "version" : "0.0.1",
        "dependencies" : {
        "socket.io" : "*",
        "express" : "*",
        "log" : "*"
        }
}

kemudian ketikan perintah npm install di command promt

selanjutnya buat file app.js dengan isi seperti dibawah:

var express = require("express");

var app = new express();

var http = require("http").Server(app);

var io = require("socket.io")(http);



    var Log = require('log'),

    log = new Log('debug')



    var port = process.env.PORT || 3000;



    app.use(express.static(__dirname + "/public"));



    app.get('/',function(req,res){

    res.redirect('index.html');

    });



    io.on('connection',function(socket){

    socket.on('stream',function(image){

    socket.broadcast.emit('stream',image);

    });

    });



    http.listen(port,function(){

    log.info('server di jalankan pada port %s',port);

    });

kemudian test di browser dengan dengan perintah node app.js

selanjunya buat folder dengan nama public, didalam folder public buat tiga file index.html, emitir.html dan visualizar.html

untuk isi index.html masukan kode dibawah:

<!DOCTYPE html>

<html>

<head>

<title>Webcam-Live</title>

</head>

<body>

<p><a href="emitir.html">Emitir Video</a></p>



<p><a href="visualizar.html">Visualizar web</a></p>

</body>

</html>

kemudian untuk isi emitir.html masukan kode berikut :

<!DOCTYPE html>

<html>

<head>

<title>Emitir Video</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

<script type="text/javascript" src="/socket.io/socket.io.js"></script>

</head>

<body>

<video src="" id="video" style="width: 680px;height:320px;" autoplay="true"></video>

<iframe src="visualizar.html" height="400px" width="40%" style="overflow-x: hidden;overflow-y: hidden;"></iframe>



<canvas style="display: none" id="preview"></canvas>

<div id="logger"></div>



<script type="text/javascript">

        var canvas = document.getElementById('preview');

        var context = canvas.getContext("2d");



        canvas.width = 800;

        canvas.height = 600;



        context.width = canvas.width;

        context.height = canvas.height;



        var video = document.getElementById("video");



        var socket = io();



        function logger(msg)

        {

        $("#logger").text(msg);

        }



        function loadCam(stream)

        {

        video.src = window.URL.createObjectURL(stream);

        logger('Camera connected [OK]');

        }



        function loadFail()

        {

        logger('Error! Camera not connected');

        }



        function viewVideo()

        {

        context.drawImage(video,0,0,context.width,context.height);

        socket.emit('stream',canvas.toDataURL('image/webp'));

        }



        $(function(){

        navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msgGetUserMedia);

        if(navigator.getUserMedia){

        navigator.getUserMedia({video: true},loadCam,loadFail);

        }else if(navigator.webkitGetUserMedia){

        navigator.webkitGetUserMedia({video: true},loadCam,loadFail);

        }else if(navigator.mozGetUserMedia){

        navigator.mozGetUserMedia({video: true},loadCam,loadFail);

        }else if(navigator.msgGetUserMedia){

        navigator.msgGetUserMedia({video: true},loadCam,loadFail);

        }



        setInterval(function(){

        viewVideo(video,context);

        }, 70);

        });

</script>

</body>

</html>

dan untuk isi visualizar.html masukan kode berikut:

<!DOCTYPE html>

<html>

<head>

<title>Visualizar Video</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

<script type="text/javascript" src="/socket.io/socket.io.js"></script>

</head>

<body>

<img id="play" width="100%">

<div id="logger"></div>



<script type="text/javascript">

        var socket = io();

        socket.on('stream', function(image){

        var img = document.getElementById("play");

        img.src = image;

        $("#logger").text(image);

        });

</script>

</body>

</html>

selanjutnya jalankan aplikasi anda dengan perintah node app.js, akan ada tulisan server dijalankan pada port 3000. selanjunya buka localhost:3000 jika webcam nya tampil di browser seperti pada gambar di bawah berarti anda telah berhasil,

selanjunya kode ini bisa anda kembangkan untuk membuat aplikasi video call / confrence call. sekian tutorial kali ini semoga bermanfaat, jika artikel ini berguna silakan share ke teman anda, jika ada yang error bisa di tanyakan pada komentar dibawah

Kali ini kita akan membuat div slider kalu membuat image slider sudah banyak di internet nah kalo membuat div slider kaya gimana, untuk membuat div slider tidak jauh berbeda dengan membuat image slider kalau image slider yang dibuat slide nya adalah gambar, pada div slider yang dibuat slidernya div berisi paragraph dll.

Untuk membuatnya silakan anda exstrak slicknya kemudian buat file baru dan masukan kode dibawah:


<!DOCTYPE html>

<html>

<head>

  <title>Slick Playground</title>

  <meta charset="UTF-8">

  <link rel="stylesheet" type="text/css" href="./slick/slick.css">

  <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">

  <style type="text/css">

    html, body {

      margin: 0;

      padding: 0;

    }



    * {

      box-sizing: border-box;

    }

    section {

      background: transparent;

    }



    .slider {

        width: 50%;

        margin: auto;

    }



    .slick-slide {

      margin: 0px 20px;

    }



    .slick-slide img {

      width: 100%;

    }



    .slick-prev:before,

    .slick-next:before {

        color: black;

    }

    .sm-box {

   width: 184px;

   height: 200px;

   background-color: rgba(0,255,0,0.5);

   padding: 20px;

   float: left;

   display: inline-block;

   margin: auto 5px;

   font-size: 20px;

    }

  </style>

</head>

<body>



  <section class="autoplay slider">

    <div>

      <div class="sm-box">Coba Slide 1</div>

    </div>

    <div>

      <div class="sm-box">Coba Slide 2</div>

    </div>

    <div>

      <div class="sm-box">Coba Slide 3</div>

    </div>

    <div>

      <div class="sm-box">Coba Slide 4</div>

    </div>

    <div>

      <div class="sm-box">Coba Slide 5</div>

    </div>

    <div>

      <div class="sm-box">Coba Slide 6</div>

    </div>

  </section>





  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>

  <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>

  <script type="text/javascript">

    $(document).on('ready', function() {

      $('.autoplay').slick({

      slidesToShow: 3,

      slidesToScroll: 1,

      dots: true,

      autoplay: true,

      autoplaySpeed: 2000,

    });

    });

  </script>





</body>

</html>

sekianlah cara membuat div slider dengan menggunakan plugin slick. semoga bermanfaat

Terlepas dari kesibukan saya di dunia kerja kali ini saya akan membagikan beberapa ebook untuk belajar pemrograman web. Menjadi devloper website sangat mengasikan dan untuk memulainya anda bisa mempelajari dari ebook-ebook dibawah ini

1. ebook HTML
HTML kepanjangan dari Hyper Text Markup Language HTML merupakan bahasa pemrograman web yang paling dasar yang harus dikuasai jika anda ingin menjadi pemrogramer web
Download ebook Mastering kode HTML disini

2. ebook CSS
CSS adalah kepanjangan dari Cascading Style Sheet. dengan CSS anda bisa membuat style gaya apapun di website
Download ebook CSS Tutorial disini

3. ebook Javascript
Javascript merupakan bahasa pemrograman yang paling banyak diminati. website tanpa javascript rasanya hambar
Unduh Ebook Latihan Javascript disini

4. ebook PHP
PHP (Hyper Text Preprocessor) Adalah bahasa pemrograman web yang bekerja disisi server (back end) yang paling banyak digunakan di seluruh dunia
Download ebook PHP dasar Tutorial disini

5. ebook jquery
jquery adlah library javascript yang siap pakai. dengan jquery menulis kode javascript menjadi lebih pendek sesuai dengan semboyan nya write less do more
download ebook jquery id disini

6. ebook Code Ingniter
CodeIgniter merupakan framework PHP. dengan code igniter penulisan kode PHP akan lebih seragam karena berkonsep MVC (model view controller)
Download Modul Pelatihan CI disini

7. ebook AJAX
berikut ini ada beberapa ebook tentang AJAX
Download ebook tutorial ajax disini

Langganan: Postingan ( Atom )

Membuat Chat Bubble Seperti di Facebook dengan CSS dan jQuery

Cara Menampilkan Jam dengan PHP dan AJAX

Source Code Password Strength Checker

Membuat Popup Image

Membuat Navbar Collapse ketika di scroll ke bawah ilang, ketika di scroll ke atas muncul

Cara mengakses kamera webcam dari web dengan javascript / jquery

cara membuat div slider dengan plugin slick

Ebook untuk belajar web programming lengkap

SUBSCRIBE

Total Tayangan Halaman

Popular Posts

Facebook

Label

Blog Archive

Pages

Share story

Share story

Share story

Share story

Share story

Share story

Share story

Share story

SUBSCRIBE

Total Tayangan Halaman

Popular Posts

Facebook

Label

Blog Archive