Apa bisa ya javascrip hanya diaktifkan pada broser hp (@media screen 500an) dan saat di buka di komputer javascripnya mati? Caranya bagaimana ya? Penggunaanya pada menu yang bergeser sedikit lalu melayang.

Tag: javascript


foto Fadlun Anaturdasa

baca aja lebar window-nya. kalau di jquery;

if ($(window).width() <= 500) {
   ... disini isi coding-nya ...
}

oleh @QaiserLab 2 bulan yang lalu


foto

if ($(window).width() <= 550) {

    window.onscroll = changePos;

    function changePos() {
        var header = document.getElementById("menu");
        if (window.pageYOffset > 70) {
            menu.style.position = "absolute";
            menu.style.top = pageYOffset + "px";
        } else {
            menu.style.position = "";
            menu.style.top = "";
        }
      var content = document.getElementById("naskah");
        if (window.pageYOffset > 70) {
            naskah.style.marginTop = "50px";
        } else {
            naskah.style.marginTop = "0";
        }
    }
}
begini ya? tpi kenapa nda berpengaruh ya?

oleh @kasman 2 bulan yang lalu


foto Fadlun Anaturdasa

coba bgini

if ($(window).width() <= 550) {

    $(window).on('scroll', function () {
        ...
    });
}

oleh @QaiserLab 2 bulan yang lalu


foto RIyan PraTama

// tambahin document ready
$(function(){

if ($(window).width() <= 500) {
   ... disini isi coding-nya ...
}

})

oleh @riyanxp 2 bulan yang lalu


foto

Kalau belum berhasil juga? Kenapa ya

oleh @kasman 2 bulan yang lalu


foto Fadlun Anaturdasa

coba lihat codingnya. 1 halaman lengkap

oleh @QaiserLab 2 bulan yang lalu


foto RIyan PraTama

// btw diatas itu kodenya bakal work kalau agan pakai jquery
// ane lihat aganya, ngambil element nya masih pakai javascript native
// jadi coba pakai ini 

if (document.documentElement.clientWidth <= 500) {
   ... disini isi coding-nya ...
}

// kalo masih ngak work, bisa coba paste semua code nya ke sini.
Kalau mau pakai jquery tambahin ini, diatas tag </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

oleh @riyanxp 2 bulan yang lalu


foto

Masalah utamanya sih kalau dibuka di broser PC, menu melayangnya yang pake java tadi bergesar ke kiri nda ditengan lagi. makanya karn nda tau digamana cara perbaiki agar menunya tetap sesuai sebelum melayang dan ketika melayang, makanya saya mau hilangkan saja fungsi javanya di untuk broser PC. Karena kayaknya lebih mudah batasi fungsi javanya dari pada cari tahu penyebab menuya kekiri saat broser PC. Tapi nyatanya lebih sulit juga. tp kalau ditanya maunya gimana, maunya sih javascripnya berfungsi dikeduanya tp posisi menunya nda bergeser ke kiri saat discroll dan tetap melayang. oiyah: menu melayangnya nda peka posisi pixed karena menunya harus terscrool dulu beberapa px melewati logo, lalu dia melayang. Ini kode lengkapnya. sederhana sih soalnya masi awam. blog pribadi hasil dari sekolakoding HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Dimensi Indonesia</title>
  <link rel="stylesheet" href="style-berita.css">
  <link href='https://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>

  <meta name="viewport" content="width=device-width, initial-scale=1">


<!--PENGATURAN MENU SCROOL-->
<script src="edit-sroll.menu.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


    <script>

      function toggleMenu(){
        var menu = document.getElementById('menu-3');
        //IE > 10
        menu.classList.toggle('menu-open');
      }
    </script>
</head>
<body>
<!--menu atas-->
  <div id="pertama">

    <div id="header">
    <img src="conten/dimensiindonesialogo2.gif" alt="" id="logo">
      <div id="menu">
          <img src="conten/menu.gif" id="menu-icon" alt="" onclick="toggleMenu();">
        <img src="conten/logowebresveosi.gif" id="nav-icon" alt="">
              <div class="konten" id="menu-3">
          <a href="index.html" class="kolom_3">Home</a>
          <a href="index-gallery.html"   class="kolom_3 kolom_3_tengah" onclick="return smoothScroll('kedua')">Gallery</a>
        </div>
      </div>
    </div>

    <div class="clear"></div>

  <script src="folio.js"></script>


<!--BAGIAN ISI-->
	<div id="body1">
				<img src="images/logo-kotaksamping.gif" alt="" id="foto1">
				<div id="pembatasatas"></div>
		    <h2>Makan Nasi Enak</h2>

        <!--TEMPAT NASKAH-->
		    <div id="naskah">


          <p>Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat,</p>
		      <p>&nbsp;</p>

          <p> karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifovBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBu
		        mi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi umi ini bulat, karena makan kita jagu satu makanya kita takak ashifo </p>
		      <p>&nbsp;</p>
		      <p>Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, </p>
		      <p>&nbsp;</p>
		      <p>karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifovBumi ini bulat, karena makan kit</p>
		      <p>&nbsp;</p>
		      <p>a jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBu
		        mi ini bulat, karena makan kita jagu satu makanya kita takak ashumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena mak</p>
		      <p>&nbsp;</p>
		      <p>an kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo Bumi ini bulat, karena makan kita jagu satu makanya kita takak ashifovBumi ini bu</p>
		      <p>&nbsp;</p>
		      <p>lat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBu
		        mi ini bulat, karena makan kita jagu satu makanya kita takak ashini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifoBumi ini bulat, karena makan kita jagu satu makanya kita takak ashifo</p>



        </div>

		<div id="kotak1"><span class="imgcolomn"><img src="images/logo-kotaksamping.gif" width="100%"></span><span class="ketgam"><a href="hubungi_template.html">Membingkai Indonesia</a></span></div>
		<div id="kotak2"><span class="imgcolomn"><img src="images/logo-kotaksamping.gif" width="100%"></span><span class="ketgam"><a href="hubungi_template.html">Membingkai Indonesia</a></span></div>
		<div id="kotak3"><span class="imgcolomn"><img src="images/logo-kotaksamping.gif" width="100%"></span><span class="ketgam"><a href="hubungi_template.html">Membingkai Indonesia</a></span></div>
		<div id="kotak4"><span class="imgcolomn"><img src="images/logo-kotaksamping.gif" width="100%"></span><span class="ketgam"><a href="hubungi_template.html">Membingkai Indonesia</a></span></div>

<!--tes berjalan-->
    <div id="pembatasbawah">
    <tr>
        <td height="20"><marquee direction="left"<span class="style1">Ceritakan Indonesia pada dunia tentang keindahan alamnya, keunikan dan keberagaman budayanya bersama dimensiindonesia.com. Klik Hubungi Kami</span></marquee></td>
    </tr> </div>
    </div>

<!--footer-->
    <div class="content content-header"> <!--clearfix untuk float, content-header=begroun biru-->
      <div class="wrapper"> <!--pembatas naskah-->
      <img src="conten/dimensi-gallery.gif" width="300px" alt="logo" />

        <form>
          <div id="group-menu">
             <input class="search" type="text" placeholder="Cari..." required>
             <input class="button" type="button" value="Cari">
          </div>

          <div class="group-menu">
            <a href="tentang-kami.html" class="menu2">Tentang Kami</a>
            <a href="hubungi_kami.html" class="menu2">Hubungi Kami</a>
            <a href="hubungi_kami.html" class="menu2">Redaksi</a>
          </div>
        </form>
      </div>
    </div>

<!--hakcipta-->
    <div id="copy">
    		<div class="copy">
    			<p>Copyright © 2017</p>
    		</div>
    	</div>

</body>
</html>
CSS
*{
  margin: 0px; padding: 0px;
  font-family: 'Noto Sans', sans-serif; font-weight: normal;
  max-width: 100% !important;
}

a{
  text-decoration: none;
}

li{
  list-style: none;
}

img{
  max-width: 100%; max-height: 100%;
}

/*-- CSS MENU ATAS --*/
.clear{
  clear: both;
}

.konten{
  width: 960px;
  margin: 0 auto;
}

.kolom_3{
  width: 50%;
  float:left;
}

#logo{
  display:block; width: 120px; margin:0 auto; margin-top: 10px
}
#menu{
  background-color: #29b999;
  height: 50px; line-height: 50px;
  font-size: 20px; margin-top: 10px;
}

#menu-text{
  display: none;
  color:white;
  padding-left: 10px;
}

#menu a{
  display: block; text-align: center; color:#FFF;
}

#menu a:hover{
  background-color: #3cd3af;
}
#nav-icon, #menu-icon{
 display: none;
}

/*-- bagian isi --*/
#body1{
  width:990px;
  height:auto;
  margin:0 auto;
}
#pembatasatas{
  width:98%;
  height:3%;
  padding:5px;
  border-radius:1px;
  background-color:#1bb99a;
  }
/*-- CSS TEMPAT NASKAH --*/
#naskah{
  width:67%;
  height:auto;
  float:left;
  margin-left:1%;
  margin-right:1%;
  }
#foto1{
  margin-top: 10px
}
h6{
color: #8e8e8f;
margin-bottom: 5px;
margin-right: 3px;
}
/*-- CSS JENDELAH --*/
#kotak1{
  width:26%;
  height:20%;
  margin:5px;
  padding:5px;
  float:right;
  border-radius:5px;
  background-color:#43bfab;
  }
#kotak2{
  width:26%;
  height:20%;
  margin:5px;
  padding:5px;
  float:right;
  border-radius:5px;
  background-color:#4fb3e6;
  }
#kotak3{
  width:26%;
  height:20%;
  margin:5px;
  padding:5px;
  float:right;
  border-radius:5px;
  background-color:#FFCC33;
  }
#kotak4{
  width:26%;
  height:20%;
  margin:5px;
  padding:5px;
  float:right;
  border-radius:5px;
  background-color:#b6d033;
  }

  .imgcolomn{
    margin: 0 auto ;
    margin-top:5px;
    margin-left:5px;
    margin-right:5px;
    }
  .ketgam {
    font-family: sans-serif;
    font-weight: bold;
    font-size:14px; margin-left:10px; margin-right:10px;
    }
  h2{
    font-family: sans-serif;
    font-size: 26px;
    font-weight:bold;
    color:#0074b9;
  margin-bottom: 5px; margin-top: 5px}
  p{
    font-family:Helvetica Neue, Arial;
    font-size:15px;
    }
  a{text-decoration:none;
  color:#fff;}
/*-- CSS JENDELAH -PERATAAN --*/
  #body1 #kotak1{text-align:center}
  #body1 #kotak2{text-align:center}
  #body1 #kotak3{text-align:center}
  #body1 #kotak4{text-align:center}

/*--CSS TES BERJALAN --*/
#pembatasbawah{
width:98%;
height:25px;
margin:5px;
padding:5px;
border-radius:1px;
background-color:#b6d033;
display: block;
float: left;
}

.style1{
font: Calibri;
color: #fff;
font-size: 14px;
padding-top:5px;
}

/*--FOOTER--*/
.group-menu a{
font-size: 14px;
margin: 10px;
font-family: sans-serif;
}
/*---pembatas ukuran---*/
.wrapper{
margin: 0 auto;
}

.content-header{
background: #b6d033;
padding: 10px 0;
clear: both;
border-top: 6px solid #e8e96f;
}

.content-header form{
float: right;
margin-right: 20px
}

.content-header img{
margin-left: 20px
}
#group-menu{
margin-left: 80px;
margin-top: 20px
}
.group-menu{
margin-top: 30px; border-top: 1px solid #e8e96f;
}

/*---end---*/
/*---css pencari---*/
.search {
padding:8px 15px;
background:rgba(224, 224, 224, 0.5);
border:0px solid #dbdbdb;
}
.button {
position:relative;
padding:8px 15px;
left:-8px;
border:0px solid #53bd84;
background-color:#53bd84;
color:#fafafa;
}
.button:hover  {
background-color:#fafafa;
color:#207cca;
}

::-webkit-input-placeholder { /* For WebKit browsers */
color:    #edeaea;
      font-family:Helvetica Neue;
      font-weight:bold;
}
:-moz-placeholder { /* For Mozilla Firefox 4 to 18 */
color:    #edeaea;
      font-family:Helvetica Neue;
      font-weight:bold;
}
::-moz-placeholder { /* For Mozilla Firefox 19+ */
color:    #edeaea;
      font-family:Helvetica Neue;
      font-weight:bold;
}
:-ms-input-placeholder { /* For Internet Explorer 10+ */
color:    #edeaea;
      font-family:Helvetica Neue;
      font-weight:bold;
}
a{text-decoration:none;
color: #fff}

/*--HAK CIPTA--*/
.copy p{
width: 300px;
margin:0 auto; margin-top: 1px;
font-size: 12px;
}
/*-- batas CSS kotak pencari--*/
#copy {
background: #0074b9;
color: #ffffff
}

/*-- pengaman --*/
.error{
  color:red;
  margin-top: -12px;
}


/*-------------------------
/*--------RESPONSIVE    ----
/*-------------------------*/


@media only screen and (max-width:550px){

  .kolom_3, .kolom_2{
    width: 90%;
    margin: 0 auto;
    float:none
  }
  #logo{
    width: 85px;
  }

  /* -- untuk nav menu --*/
  #menu .konten{
    max-height: 0;
    overflow: hidden;
  }

  #menu-text{
    display: block;
  }

  .menu-open{
    max-height: 100% !important;
  }

  #menu{
    height: auto;
    font-size: 15px;
    position: relative;
    float: right;
  }

  #menu a{
    border-bottom: 1px solid white;
  }

  #nav-icon{
     display: block;
     margin: 0 auto;
     top: 1px;
     height: 43px;
     margin-bottom: 3px
  }
  #menu-icon{
     display: block;
     position: absolute;
     top: 12px;
     bottom: 2px;
     height: 23px;
     right: 15px;
  }


/*--ISI, NASKAH DAN JENDELAH--*/
h2{
margin-left: 3%;
}

#naskah{
width: 90%;
height: auto;
float: none;
font-size: 16px;
margin: 0 auto;
margin-bottom: 2%;
border-bottom: 10px solid #53bd84
}

#kotak1, #kotak2, #kotak3, #kotak4 {
width: 90%;
float: none;
margin: 0 auto;
margin-bottom: 2%;}

/*--TES BERJALAN--*/
#pembatasatas{
  width: 100%;
}
#pembatasbawah{
display: none;
}

.content-header img{
display: none;}

#group-menu{
display: none;}

.group-menu{
width: 300px;
margin: 0 auto;
margin-top: 15px;
border-top: 0px;
float: none;
}
.content-header{
background: #b6d033;
height: 50px;
border-top: 6px solid #e8e96f;}
.copy p{
width: 200px; margin:0 auto; margin-top: 1px;
font-size: 10px;
}

}
JAVASCREN
if (document.documentElement.clientWidth <= 500) {

window.onscroll = changePos;

function changePos() {
    var header = document.getElementById("menu");
    if (window.pageYOffset > 70) {
        menu.style.position = "absolute";
        menu.style.top = pageYOffset + "px";
    } else {
        menu.style.position = "";
        menu.style.top = "";
    }
  var content = document.getElementById("naskah");
    if (window.pageYOffset > 70) {
        naskah.style.marginTop = "50px";
    } else {
        naskah.style.marginTop = "0";
    }
}
}

oleh @kasman 2 bulan yang lalu



Kembali ke forum