Javascript ile get methodu ile dinamik veri okumak isterseniz aşağıdaki kodu kullanabilirsiniz.

Ayrıca javascript ile post methodunu kullanmak için buradaki yazımı okuyabilirsiniz.

var xmlHttp;
                function randevu_oku(id) {
                    if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }
                    else if
                        (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); }

                    var querystring = "randevu_veri_okuma.aspx";
                    xmlHttp.onreadystatechange = sonuc;
                    xmlHttp.open("GET", querystring, true);
                    xmlHttp.send(null);
                }
                function sonuc() {
                    if (xmlHttp.readyState == 4) {
                        if (xmlHttp.status == 200)  
                        {
                            alert(xmlHttp.responseText);


                            var modal = $("#randevu_detaylari");
                            modal.modal();

                        }
                    }
                }

Bir sonraki yazıda görüşünceye kadar bol sorgulu günler.

Javascript ile url deki parametre okumak isterseniz aşağıdaki kod parçacagını kullanabilirsiniz.

<script type="text/javascript">
                                  document.addEventListener("DOMContentLoaded", function(event) {
                                      let searchParams = new URLSearchParams(window.location.search);
                                      let param = searchParams.getAll('tab');
                                      console.log(param);
                                  });
                            </script>

burdaki  ”  searchParams.getAll(‘tab‘);   ” tab kısmını kendinize göre revize etmeniz gereklidir.

Datatables’da tarih sıralama her zaman sorun yaratmaktadır. Bunun en iyi çözümü aşağıdaki gibidir.

<tbody>  
<tr>
<td data-sort="<%#Convert.ToDateTime(Eval("createdate")).ToFileTimeUtc()%>"><%#Eval("createdate") %> </td>
</tr>                                           
</tbody>

Burda <td> tagına data-sort ifadesi ekleyerek tarih değerini utc çeviri yaparak sorunu çözebilirsiniz.

Javascript ile o anki sayfa url sini almak için aşağıdaki kodları kullanabilirsiniz.

window.location.host    -> www.sanaldata.com veya port belirtir

window.location.hostname    -> www.sanaldata.com

window.location.protocol    -> http:

window.location.port    -> var ise 8080 ya da 80, yoksa boş değer dönecektir.

window.location.origin    -> https://www.www.sanaldata.com

window.location.href  ->  https://www.sanaldata.com/javascript-ile-sayfa-urlsini-alma

document.URL  ->  https://www.sanaldata.com/javascript-ile-sayfa-urlsini-alma

window.location.pathname   ->  /javascript-ile-sayfa-urlsini-alma

<SCRIPT LANGUAGE=”JavaScript” type=”text/javascript”>

<!– Değişen resim
if(document.images) {
pics = new Array();
pics[1] = new Image();
pics[1].src = “resim1.jpg”;
pics[2] = new Image();
pics[2].src = “resim2.jpg”;
}

function changer(from,to) {
if(document.images) {
document.images[from].src = pics[to].src;
}
}
//–>
</SCRIPT>

Daha sonra bu değişen resim çalışmasını kullanacağınız yere aşağıdaki kodu ekleyin:

<a onMouseOver=”changer(‘img1′,2)” onMouseOut=”changer(‘img1′,1)” href=”https://www.sanaldata.com”>
<img name=”img1″
border=”0″ vspace=”0″ hspace=”0″ src=”resim1.jpg” alt=”alttag”></a>

Artık kullandığınız resim1.jpg üzerine mouse imlecini getirdiğinizde resim2.jpg görünecek, mouse imlecini resmin üzerinden çektiğinizde ise tekrar resim1.jpg görünecek. Çalışan örneği görmek için Teknoloji Herşeyim logosunu deneyin (:

Olurda javascript ile başka sayfa bir değeri post etmek isterseniz aşağıdaki kodları kullanabilirsiniz

data = new FormData()
         data.set('k', '111') 
         var xhr = new XMLHttpRequest();
         xhr.open("POST", "test.aspx?i=kaydet", true);
         xhr.send(data);

Diğer sayfadan bu veriyi okumak içinse request.form ile ” k  ” değişkeninde gelen değeri okuyabilirsiniz. Bu alanı arttırıp çoğaltabilir veya kendinize göre düzenleyebilirsiniz.

++

Eğer post ettikten sonra diğer sayfadan değer sonuç okumak istiyorsanız aşağıdaki şekilde kullanabilirsiniz.

data = new FormData()
data.set('k', '111')
var xhr = new XMLHttpRequest();
xhr.open("GET", "hizli_islemler.aspx?i=sepete_ekle");              
xhr.onload = function ()
{ console.log(xhr.responseText) };
xhr.send(data);

bugün pek çok yazılımcı için kesinlikle çok faydalı olan “Datatables” dosyalarını sizlerle paylaşıyorum. Dosyaya buradan indirebilirsiniz.

Jquery tabanlı datatables üzerinden özel buton eklemek isterseniz  aşağıdaki kodu kullanabilirsiniz.

buttons: [
              {
                   text: 'Yeni S.S.S',
                   action: function (e, dt, node, config) {
                   location.href = 'panel.aspx?i=yenisss';
              }
         },
    'csv', 'excel', 'pdf', 'print', 'pageLength'
 ],

Datatables javascript kullanarak sizlerde kayıtları gösterme yapıyorsanız ve belli bir sütunun toplamının göstermek isterseniz aşağıdaki kodları kullanabilirsiniz. Aşağıdaki kodda Türkçe dil paketide vardır Ayrıca normalde dip toplamda rakamı çok karışık gösteriyordu ben bunu süslemek için binlik diye ayrı bir fonk. yazdım oda aşağıdaki kodun içinde bilginiz olsun

<script>
              function binlik(n) {
                 
                  return n.toFixed(2).replace('.', ',').replace(/\d{3}(?=(\d{3})*,)/g, function(s) {
                      var t='.' + s;
                      return t;
                  })
              }
          </script> 
<script>
                 $(function () {
                     $("#giderler_hepsi").DataTable({   
                         "responsive": true,
                         "autoWidth": false,
                         "pageLength": 10,
                         "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Bütün Kayıtlar"]],
                         "order": [[0, "desc"]],                      
                         dom: 'Bfrtip',
                         buttons: [
                                       {
                                           text: 'Yeni Gider Kaydı',
                                           action: function (e, dt, node, config) {
                                               location.href = 'panel.aspx?i=yeni_gider';
                                           }
                                       },
                                        {
                                                text: 'Yeni Kategori',
                                                action: function (e, dt, node, config) {
                                                    location.href = 'panel.aspx?i=yeni_gider_kategori';
                                                }
                                         },
                             'csv', 'excel', 'pdf', 'print', 'pageLength'
                         ],
                         "language": {

                             "lengthMenu": "_MENU_ adet kayıt göster",
                             "emptyTable": "Gösterilecek ver yok.",
                             "processing": "Veriler yükleniyor",
                             "sDecimal": ".",
                             "sInfo": "_TOTAL_ kayıttan _START_ - _END_ arasındaki kayıtlar gösteriliyor",
                             "sInfoFiltered": "(_MAX_ kayıt içerisinden bulunan)",
                             "sInfoPostFix": "",
                             "sInfoThousands": ".",
                             "sLengthMenu": "Sayfada _MENU_ kayıt göster",
                             "sLoadingRecords": "Yükleniyor...",
                             "sSearch": "Ara:",
                             "sZeroRecords": "Eşleşen kayıt bulunamadı",
                             "oPaginate": {
                                 "sFirst": "İlk",
                                 "sLast": "Son",
                                 "sNext": "Sonraki",
                                 "sPrevious": "Önceki"
                             },
                             "oAria": {
                                 "sSortAscending": ": artan sütun sıralamasını aktifleştir",
                                 "sSortDescending": ": azalan sütun sıralamasını aktifleştir"
                             },


                             "select": {
                                 "rows": {
                                     "_": "%d kayıt seçildi",
                                     "0": "",
                                     "1": "1 kayıt seçildi"
                                 }
                             },
                             buttons: {
                                 pageLength: {
                                     _: "%d adet kayıt gösterilsin",
                                     '-1': "Bütün Kayıtlar"
                                 }
                             }
                         },      
                         //  sütun toplama fonksiyonu baslangıc

                         "footerCallback": function (row, data, start, end, display) {
                             var api = this.api(), data;

                             //  Hücrenin değerini Numbera çeviriyoruz.

                             var intVal = function (i) {
                                 return typeof i === 'string' ?
                                     i.replace(".","").replace(',', '.') * 1 :
                                     typeof i === 'number' ?
                                     i : 0;
                             };

                             // 2. Sütunun değerlerini toplayıp toplamAraTutar değişkenine atıyoruz.

                             toplamAraTutar = api.column(2, { "filter": "applied" }).data()
                                 .reduce(function (a, b) {
                                     return intVal(a) + intVal(b);
                                 }, 0); 
                             
                             // Bu şekilde tablonun footer ına da yazılabilir.
                             $(api.column(2).footer()).html(
                                 binlik(toplamAraTutar)  + '  TL'
                             );

                         }
                         
                         //  sütun toplama fonksiyonu bitiş
                     
                     }); 
                    
       
                 });



            </script>

Jquery ile resim zoom yapmak isterseniz aşağıdaki kodları kullanabilirsiniz. Javascript dosyasının buradan indirebilirsiniz.

<!DOCTYPE HTML>
<html lang="tr-TR">
<head>

	<meta charset="UTF-8">
	<title>cArleone</title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="https://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js"></script>
	<script type="text/javascript">

		$(function(){

			$("#zoom").elevateZoom({

				tint:true, 

				tintColour:'#d12c69', 

				tintOpacity:0.2,

				cursor: "crosshair",

				scrollZoom : true

			});

		})

	</script>
	<style type="text/css">	

	</style>
</head>
<body>
<img src="kucuk/kucuk_resim.jpg" id="zoom" data-zoom-image="buyuk/buyuk_resim.jpg" />
</body>
</html>

Eğer çoklu resim için yani galeri stili yapmak isterseniz buradaki kodları indirip kullanabilirsiniz. Yukardaki kodlar tek bir resim içindir.

Jquery image zoom

Javascript kullanarak tablodaki bir sütundaki değerleri toplamak için aşağıdaki örnekteki gibi yapabiliriz.

<table id="urunler_Tbl">
        <tr>
            <td>Burak</td>
            <td>1</td>
        </tr>
        <tr>
            <td>Hasan</td>
            <td>1</td>
        </tr>
        <tr>
            <td>Ali</td>
            <td>1</td>
        </tr>
    </table>
    <span id="toplam"></span>

    <script>

        var sumVal = 0;
        var table = document.getElementById("urunler_Tbl");

        for (var i = 0; i < table.rows.length; i++)
        {

            sumVal = sumVal + parseFloat(table.rows[i].cells[1].innerHTML);
        
        }
        document.getElementById("toplam").innerHTML = sumVal+" ₺";


    </script>

Pop up fonksiyonu

<script type="text/javascript" >
   function MM_openBrWindow(theURL, winName, features)
   {
       var w = 500;
       var h = 200;
       var left = Number((screen.width / 2) - (w / 2));
       var tops = Number((screen.height / 2) - (h / 2));
       window.open(theURL, winName, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + tops + ', left=' + left);
    }   
</script>

Kullanımı

Herhangi bir butonun click eventına aşağıdaki şekilde yazıyorsunuz

MM_openBrWindow('sayfa adresi','Upload','width=500,height=200 ')

Örnek kullanım

<asp:Button ID="d_urun_resmi"  OnClientClick="MM_openBrWindow('sayfa.aspx','Upload','width=500,height=200 ')" runat="server" Text="Resim seç" ></asp:Button>

Aşağı doğru kayan veya çok fazla ürün listelemesi olan websitelerinde yukarı çık butonu gerekebiliyor bunun için aşağıdaki kodları kullanmanız yeterlidir.

Style dosyası

#top {
    
    bottom: 5px;
    display: none;
    height: 100px;
    position: fixed;
    right: 20px;
    font-size:40px;
    color:#ea786a;
    cursor:pointer;
    opacity:0.5;
    transition:500ms;
}
            #top:hover{
                opacity:1;
                transition:500ms;
              
            }

Jquery tarafı

$(function () {
                $("#top").click(function () {
                    $("html,body").stop().animate({ scrollTop: "0" }, 1000);
                });
            });
            $(window).scroll(function () {
                var uzunluk = $(document).scrollTop();
                if (uzunluk > 300) $("#top").fadeIn(500);
                else { $("#top").fadeOut(500); }
            });

Html tarafı

<div id="top">
    Yukarı Çık
</div>

Bir sonraki konuda görüşünceye kadar bol debuglu günler

Asp.net button click olayı sonrasında evet hayır işlemi yaptırmak isteyebilirsiniz. Bunun için butonun ” onClientClick ” eventına aşağıdaki kodu yetmeniz yeterlidir.

return confirm('Seçilen kayıt silinecektir ?');

Kimi zaman web sitelerinden header menüsünü yapışkan yani aşağı scroll ile kayan yapmak isteriz.İşte böyle durumlarda aşağıdaki kodları kullanarak kolaylıkla yapabilirsiniz.

Css

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
      z-index: 99;
}
.header_menu{}

Javascript

<script>
        window.onscroll = function () { myFunction() };

        var navbar = document.getElementById("header");
        var sticky = navbar.offsetTop;

        function myFunction() {
            if (window.pageYOffset > sticky)
            {
                navbar.classList.add("sticky");
            }
            else
            {
                navbar.classList.remove("sticky");              
            }
        }
</script>

Örnek html kodlaması aşağıdaki gibidir;

<html>
  <head>
   <style>
    .sticky { position: fixed; top: 0; width: 100%; z-index: 99; } .header_menu{}
   </style>
   </head>
<body>
   <div id='header' class='header_menu'>
    header menu
   </div>
   <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <script> 
    window.onscroll = function () { myFunction() };
     var navbar = document.getElementById("header"); 
     var sticky = navbar.offsetTop;
        function myFunction() { 
            if (window.pageYOffset > sticky)
               { navbar.classList.add("sticky"); }
                  else 
               { navbar.classList.remove("sticky"); } 
             }
   </script>
</body>
</html>

Hepsi bu kadar Takıldığınız yerleri yorum olarak yazabilirsiniz. Bir sonraki yazılım konusunda görüşünceye kadar bol sorgulu ve hatasız kodlamalar dilerim.

Son dönemlerde moda olan sekme değiştiğinde title değiştirme olayını aşağıdaki küçük kod parçacıgı ile sizlerde rahatlıkla yapabilirsiniz.

<script type="text/javascript">
var title = document.title;
var alttitle = "Bizi Unutma! :)";
window.onblur = function () { document.title = alttitle; };
window.onfocus = function () { document.title = title; };
</script>

Bir sonraki yazıda görüşünceye kadar hepiniz bol kodlu günler…

Javascript ile div sıralamak için aşağıdaki örnek kodları kullanabilirsiniz.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title> 
</head>
<body>
<div id="list">
<div id="4">test 4 dd</div>
<div id="3">tesdf 3 dd</div>
<div id="5">test 5 f</div>
<div id="1">test 1 s</div>
<div id="2">test 2 f</div>
</div>

<script type="text/javascript">


var toSort = document.getElementById('list').children;
toSort = Array.prototype.slice.call(toSort, 0);

toSort.sort(function(a, b) {
var aord = +a.id;
var bord = +b.id; 
return (aord > bord) ? 1 : -1;
});

var parent = document.getElementById('list');
parent.innerHTML = "";

for(var i = 0, l = toSort.length; i < l; i++) {
parent.appendChild(toSort[i]);
}


</script>
 
</body>
</html>