Graeme, senin scripterlative.com görüş çalıştı, ancak birkaç gün bu adamın komut dosyasından sonra sona erdiğini ve ekrana :) sonra
üzerinde deneme bilgisi ileti görüntüler, kolayca çözmek için küçük bir jquery eklentisi geliştirdi bu konu.
Bu eklentiyi kullandığınızda, seçici elemanların kenarlarını otomatik olarak algılar, Diğer taraftan jquery'yi bu divlerin içine sıralayabilir.
Bu eklentinin Jquery.Scrollto eklentisine bağlı olduğunu unutmayın.
Sorunumu çözdüm, umarım size yardımcı olacaktır.
Eklenti kaynağı;
/*
* jQuery Html element edges auto scrollable plugin.
*
* Copyright (c) 2009 Fatih YASAR
*/
(function($) {
$.fn.setEdgesAutoScrollable = function(options) {
var defaults = {
scrollspeed: 200,
incrementSeed: 20
};
var options = $.extend(defaults, options)
var top = $(this).offset().top;
var left = $(this).offset().left;
var height = $(this).height();
var width = $(this).width();
var selectedItemSelector = this.selector;
var xmin = left;
var xmax = (width + left) + 20;
var ymin = (height + top) + 10;
var ymax = (height + top) + 30;
$().mousemove(function(e) {
if (e.pageX > xmin && e.pageX < xmax) {
if (e.pageY > (top - 10) && e.pageY < (top + 10)) {
//top edges
$(selectedItemSelector).scrollTo('-=' + defaults.incrementSeed + 'px', defaults.scrollspeed);
} else if (e.pageY > ymin && e.pageY < ymax) {
//bottom edges
$(selectedItemSelector).scrollTo('+=' + defaults.incrementSeed + 'px', defaults.scrollspeed);
} else {
$(selectedItemSelector).stop();
}
}
return true;
});
}
})(jQuery);
Nasıl kullanılacağını göstermek için HTML sayfası örneği. Html sayfa kaynağı;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script src="js/[plugin src]" type="text/javascript"></script>
<style>
body
{
font-family: "Trebuchet MS" , "Helvetica" , "Arial" , "Verdana" , "sans-serif";
font-size:13px;
}
.scrollable-wrapper
{
width:650px;
height:350px;
}
.scrollable-area
{
float:left;
width:220px;
height:350px;
border:solid 2px #ccc;
margin-left:20px;
overflow:auto;
}
</style>
<script>
$(function() {
$("#scrollable-area1").setEdgesAutoScrollable();
$("#scrollable-area2").setEdgesAutoScrollable();
});
</script>
</head>
<body>
<div class="scrollable-wrapper">
<div id="scrollable-area1" class="scrollable-area">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>
</div>
<div id="scrollable-area2" class="scrollable-area">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>
</div>
</div>
</body>
</html>
Harika teşekkürler !!, Bir atış vereceğim - evet, div hakkında ui.draggable sürüklerken otomatik kaydırma hakkında konuşuyorum. Ben kenarına yaklaşırken, ben aşağı yukarı hareket ettirmek istiyorum/ – Graeme
iyi şanslar - bana nasıl gideceğini bana bildirin, ya da eğer çalışıyorsanız çözümünüzü gönderin :) – karim79
Peki, scrollTo eklentisine bir göz attı gerçekten havalı görünüyor ama fareyi bu kadar bağlayacağından emin değildim. Bu siteyi ziyaret edin: http://scripterlative.com/files/cursordivscroll.htm Adam, yeterli miktarda kullanmak için bir bağış istemektedir ve bu yüzden fareyi aldığında div'i kaydırmayı başardım. her iki kenardan da 50 piksel. Bu, fareyi aşağı sürüklememden bağımsız bir sorun değil. Tek sorun şu ki Sortable, tabana ulaştığımda nerede olduğunu gerçekten anlamıyor ve 10 saniye boyunca yer tutucu gösterilmiyor. – Graeme