Fixing Error of Metronic Theme PagedList component


Metronic Theme have PagedList component which provide users prepare paged list quickly. However, it have a issue: When user clicks the number of active page link number page thwors error. Because link of active page misdefined. To fix this I’ve prepared a jquery patch.


$(document).ready(function () {

    //fixing pagedlist bug-patch s.atan

    $(".pagination > .active > a").mouseover(function () {

        var href = $(this).attr("href");

        console.log(href);

        $(this).attr('href', 'javascript:');

        $(this).attr('style', 'color:green; font-weight:bold');

    });

});
Reklamlar

Adding Last Instagram Photos to Your Web Page


After changing his API policy embedding instagram widget to your web page is overhelming task. You should use API and access_token.  There is a lot of plugin to do that. However, I am enjoying doing it by myself. Here plain jquery code to get your last photos over api. 

https://gist.github.com/suatatan/f7ca2f86e1e937a9c266d602a0e4cc99.js

Javascript ile Url Parametrelerine Erişim


http://suatatan.com?git=iletisim&referans=facebook şeklindeki bir adresteki git ve referans parametre değerlerine javascript üzerinen erişim sağlamak için şu fonksiyonu kullanabilirsiniz:

function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf(’?’) + 1).split(’&’);
    for(var i = 0; i     {
        hash = hashes[i].split(’=’);
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

Bu fonksiyonu şöyle kullanırız.

var urlvars=getUrlVars()

var git=urlvars[’git’]

urlvars değişkeni dizi halinde tüm paremetreleri çağırır

Kendiliğinden kayma özelliği de olan basit bir Jquery content slider


Bundan önceki yazımızda kendiliğinden kaymayan yanlızca kullanıcı sayıların üzerine gelince kayan bir “kayar haber” scripti hazırlamıştık. Şimdi ise sitesini hazırladığım bir arkadaşımızın talebi üzerine, çoğu haber sitesinde olduğu gibi kullanıcı karışmasa dahi kendiliğinden kayma efekti veriyoruz.

<!--
This script aims teaching a simple news slider application
By Suat ATAN
suatatan.wordpress.com
All rights reserved

Basit bir jquery haber akış uygulaması-otomatik akış da dahil edildi
Her hakkı saklıdır
-->



Suat ATAN's Simple News Slider

http://www.google.com/jsapi

google.load("jquery", "1.4.2");




$(document).ready(function() {
/*HUMAN INTERACT*/
$(".slide").not(":first").hide();

$(".slide-hook").mouseover(function() {
var index = $(".slide-hook").index(this);

$(".slide").hide();
$(".slide:eq(" + index + ")").show();

$(".slide-hook").css("color", "black");
$(this).css("color", "red");
});
/*AUTOSCROLL*/
var timer = setInterval(rotate, 4000);

});
//dr
function rotate() {
var cur_slide = $(".slide:visible");
var ls_slide = $(".slide:last");
var fr_slide = $(".slide:first");

if(cur_slide.html() != ls_slide.html()) {
cur_slide.hide();
cur_slide.next(".slide").show();

} else {
cur_slide.hide();
fr_slide.show();
}
}



.slide-hook {
float: left;
padding: 5px;
background-color: #990000;
border-right: solid 1px #C2E1EF;
}
.slide-image {
width: 500px;
height: 375px;
}
#slider {
width: 500px;
height: 550px;
}
.slide {
}









Title 1




Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos


slide-image





Title 2




Suat ATAN,Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos


slide-image





Title 3




Havasor,Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos 3


slide-image





Title 4




Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos


slide-image






1


2


3


4




Burada mantık şudur: rotate fonksiyonumuz o anda “visible” yani görünür olan “slide” elemanını saklayıp, bir sonraki “visible” ediyor. En son slide’a gelince onu da saklayıp bu kez ilk elemanı visible ediyor.

Bu fonksiyonu da setInterval ile 4000 milisaniyede bir çağırıyoruz. setIntetval fonksiyonu aslında bir tetik fonksiyon. Bir insanın düzenli olarak aynı hareketi yapması gibi bir durum. Gerisi tamamen zamanlama dışı klasik fonksiyonlar.

Kendiliğinden kayma özelliği de olan basit bir Jquery content slider


Bundan önceki yazımızda kendiliğinden kaymayan yanlızca kullanıcı sayıların üzerine gelince kayan bir “kayar haber” scripti hazırlamıştık. Şimdi ise sitesini hazırladığım bir arkadaşımızın talebi üzerine, çoğu haber sitesinde olduğu gibi kullanıcı karışmasa dahi kendiliğinden kayma efekti veriyoruz.

<!--
This script aims teaching a simple news slider application
By Suat ATAN
suatatan.wordpress.com
All rights reserved

Basit bir jquery haber akış uygulaması-otomatik akış da dahil edildi
Her hakkı saklıdır
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Suat ATAN's Simple News Slider</title>
		<!--JQUERY-->
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript">
			google.load("jquery", "1.4.2");

		</script>
		<!--OUR SCRIPT-->
		<script type="text/javascript">
			$(document).ready(function() {
				/*HUMAN INTERACT*/
				$(".slide").not(":first").hide();

				$(".slide-hook").mouseover(function() {
					var index = $(".slide-hook").index(this);

					$(".slide").hide();
					$(".slide:eq(" + index + ")").show();

					$(".slide-hook").css("color", "black");
					$(this).css("color", "red");
				});
				/*AUTOSCROLL*/
				var timer = setInterval(rotate, 4000);

			});
			//dr
			function rotate() {
				var cur_slide = $(".slide:visible");
				var ls_slide = $(".slide:last");
				var fr_slide = $(".slide:first");

				if(cur_slide.html() != ls_slide.html()) {
					cur_slide.hide();
					cur_slide.next(".slide").show();

				} else {
					cur_slide.hide();
					fr_slide.show();
				}
			}
		</script>
		<!--CSS-->
		<style type="text/css">
			.slide-hook {
				float: left;
				padding: 5px;
				background-color: #990000;
				border-right: solid 1px #C2E1EF;
			}
			.slide-image {
				width: 500px;
				height: 375px;
			}
			#slider {
				width: 500px;
				height: 550px;
			}
			.slide {
			}

		</style>
	</head>
	<body>
		<div id="slider-capsule">
			<div id="slides">
				<!--Slide-->
				<div class="slide">
					<div class="slide-title">
						<h2>Title 1</h2>
					</div>
					<div class="slide-text">
						Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos
					</div>
					<div class="slide-image">
						<img src="http://farm5.static.flickr.com/4004/4612662356_888c2a81ca.jpg" alt="slide-image">
					</div>
				</div>
				<!--Slide-->
				<div class="slide">
					<div class="slide-title">
						<h2>Title 2</h2>
					</div>
					<div class="slide-text">
						Suat ATAN,Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos
					</div>
					<div class="slide-image">
						<img src="http://farm6.static.flickr.com/5008/5307303826_a33a56c1ae.jpg" alt="slide-image">
					</div>
				</div>
				<!--Slide-->
				<div class="slide">
					<div class="slide-title">
						<h2>Title 3</h2>
					</div>
					<div class="slide-text">
						Havasor,Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos 3
					</div>
					<div class="slide-image">
						<img src="http://farm4.static.flickr.com/3574/3341953499_ab044c925a.jpg" alt="slide-image">
					</div>
				</div>
				<!--Slide-->
				<div class="slide">
					<div class="slide-title">
						<h2>Title 4</h2>
					</div>
					<div class="slide-text">
						Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos
					</div>
					<div class="slide-image">
						<img src="http://farm4.static.flickr.com/3564/3342789118_9de9992351.jpg" alt="slide-image">
					</div>
				</div>
			</div>
		</div>
		<div id="slider-navig">
			<div class="slide-hook">
				1
			</div>
			<div class="slide-hook">
				2
			</div>
			<div class="slide-hook">
				3
			</div>
			<div class="slide-hook">
				4
			</div>
		</div>
		</div>
	</body>
</html>

Burada mantık şudur: rotate fonksiyonumuz o anda “visible” yani görünür olan “slide” elemanını saklayıp, bir sonraki “visible” ediyor. En son slide’a gelince onu da saklayıp bu kez ilk elemanı visible ediyor.

Bu fonksiyonu da setInterval ile 4000 milisaniyede bir çağırıyoruz. setIntetval fonksiyonu aslında bir tetik fonksiyon. Bir insanın düzenli olarak aynı hareketi yapması gibi bir durum. Gerisi tamamen zamanlama dışı klasik fonksiyonlar.

Basit bir Jquery news slider uygulaması


İnternette bulunan yüzlerce karmaşık news slider ya da content slider scriptinden sıkıldıysanız, aşağıda “kendi ellerimle” hazırladığım Jquery news slideri tam size göre.

Aşağıdaki kodları indirip bir html dosyasına kayderek direkt olarak çalıştırabilirsiniz.

Sorularınız olursa çekinmeden sorunuz.

<!--
This script aims teaching a simple news slider application
By Suat ATAN
suatatan.wordpress.com
All rights reserved

Basit bir jquery haber akış uygulaması
Her hakkı saklıdır
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Suat ATAN's Simple News Slider</title>
		<!--JQUERY-->
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript">
			google.load("jquery", "1.4.2");

		</script>
		<!--OUR SCRIPT-->
		<script type="text/javascript">
			$(document).ready(function() {
				$(".slide").not(":first").hide();

				$(".slide-hook").mouseover(function() {
					var index = $(".slide-hook").index(this);

					$(".slide").hide();
					$(".slide:eq(" + index + ")").show();

					$(".slide-hook").css("color", "black");
					$(this).css("color", "red");
				});
			});
			//dr
		</script>
		<!--CSS-->
		<style type="text/css">
			.slide-hook {
				float: left;
				padding: 5px;
				background-color: #990000;
				border-right: solid 1px #C2E1EF;
			}
			.slide-image {
				width: 500px;
				height: 375px;
			}
			.slide{
				
			}
			
		</style>
	</head>
	<body>
		<div id="slider-capsule">
			<div id="slides">
				<!--Slide-->
				<div class="slide">
					<div class="slide-title">
						<h2>Title 1</h2>
					</div>
					<div class="slide-text">
						Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos
					</div>
					<div class="slide-image">
						<img src="http://farm5.static.flickr.com/4004/4612662356_888c2a81ca.jpg" alt="slide-image">
					</div>
				</div>
				<!--Slide-->
				<div class="slide">
					<div class="slide-title">
						<h2>Title 2</h2>
					</div>
					<div class="slide-text">
						Suat ATAN,Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos
					</div>
					<div class="slide-image">
						<img src="http://farm6.static.flickr.com/5008/5307303826_a33a56c1ae.jpg" alt="slide-image">
					</div>
				</div>
				<!--Slide-->
				<div class="slide">
					<div class="slide-title">
						<h2>Title 1</h2>
					</div>
					<div class="slide-text">
						Havasor,Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos 3
					</div>
					<div class="slide-image">
						<img src="http://farm4.static.flickr.com/3574/3341953499_ab044c925a.jpg" alt="slide-image">
					</div>
				</div>
				<!--Slide-->
				<div class="slide">
					<div class="slide-title">
						<h2>Title 4</h2>
					</div>
					<div class="slide-text">
						Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos
					</div>
					<div class="slide-image">
						<img src="http://farm4.static.flickr.com/3564/3342789118_9de9992351.jpg" alt="slide-image">
					</div>
				</div>
			</div>
		</div>
		<div id="slider-navig">
			<div class="slide-hook">
				1
			</div>
			<div class="slide-hook">
				2
			</div>
			<div class="slide-hook">
				3
			</div>
			<div class="slide-hook">
				4
			</div>
		</div>
		</div>
	</body>
</html>

Basit bir Jquery news slider uygulaması


İnternette bulunan yüzlerce karmaşık news slider ya da content slider scriptinden sıkıldıysanız, aşağıda “kendi ellerimle” hazırladığım Jquery news slideri tam size göre.

Aşağıdaki kodları indirip bir html dosyasına kayderek direkt olarak çalıştırabilirsiniz.

Sorularınız olursa çekinmeden sorunuz.

<!--
This script aims teaching a simple news slider application
By Suat ATAN
suatatan.wordpress.com
All rights reserved

Basit bir jquery haber akış uygulaması
Her hakkı saklıdır
-->



Suat ATAN's Simple News Slider

http://www.google.com/jsapi

google.load("jquery", "1.4.2");




$(document).ready(function() {
$(".slide").not(":first").hide();

$(".slide-hook").mouseover(function() {
var index = $(".slide-hook").index(this);

$(".slide").hide();
$(".slide:eq(" + index + ")").show();

$(".slide-hook").css("color", "black");
$(this).css("color", "red");
});
});
//dr



.slide-hook {
float: left;
padding: 5px;
background-color: #990000;
border-right: solid 1px #C2E1EF;
}
.slide-image {
width: 500px;
height: 375px;
}
.slide{

}









Title 1




Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos


slide-image





Title 2




Suat ATAN,Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos


slide-image





Title 1




Havasor,Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos 3


slide-image





Title 4




Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos


slide-image






1


2


3


4




WordPress.com'da ücretsiz bir web sitesi ya da blog oluşturun.

Yukarı ↑