Sayfa yüklenmeden script çalışmasın, nasıl yapabilirim?

31-01-2009, 04:12:11

Merhaba arkadaşlar, bir tooltip kullanıyorum kelimenin üzerine gelince açıklama çıkıyor nromalde hiçbir sorun yok lakin sayfa tam yüklenmeden kelimenin üzerine gelince ie6 ve ie7 de operation aborted / diğer adıyla işlem iptal edildi diye bi uyarı veriyor ve tama a tıklayınca sayfa yüklenemiyor şekline dönüşüyor. Çok iyi javascript bilmiyorum bunun java scripte birkaç kod eklenerek yada çıakrtılarak yada browser ayrımı yapmasını sağlayarak yapmak mümkün mü? ilgilenenler için kodları veriyorum ;
Kelimeyi girdiğim bölüm

<span class="hotspot" onmouseover="tooltip.show(\'Açıklama\');" onmouseout="tooltip.hide();">Kelime</span>

Css dosyası

	#text {margin:50px auto; width:500px}
		.hotspot {color:#900; padding-bottom:1px; border-bottom:1px dotted #900; cursor:pointer}
		#tt {position:absolute; display:block; background:url(' . $settings['default_theme_url'] . '/images/tt_left.gif) top left no-repeat}
		#tttop {display:block; height:5px; margin-left:5px; background:url(' . $settings['default_theme_url'] . '/images/tt_top.gif) top right no-repeat; overflow:hidden}
		#ttcont {font-size:11px; display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#666; color:#FFF}
		#ttbot {display:block; height:5px; margin-left:5px; background:url(' . $settings['default_theme_url'] . '/images/tt_bottom.gif) top right no-repeat; overflow:hidden}

Buda scriptin kendisi

var tooltip=function(){
	var id = 'tt';
	var top = 3;
	var left = 3;
	var maxw = 300;
	var speed = 10;
	var timer = 20;
	var endalpha = 95;
	var alpha = 0;
	var tt,t,c,b,h;
	var ie = document.all ? true : false;
	return{
		show:function(v,w){
			if(tt == null){
				tt = document.createElement('div');
				tt.setAttribute('id',id);
				t = document.createElement('div');
				t.setAttribute('id',id + 'top');
				c = document.createElement('div');
				c.setAttribute('id',id + 'cont');
				b = document.createElement('div');
				b.setAttribute('id',id + 'bot');
				tt.appendChild(t);
				tt.appendChild(c);
				tt.appendChild(b);
				document.body.appendChild(tt);
				tt.style.opacity = 0;
				tt.style.filter = 'alpha(opacity=0)';
				document.onmousemove = this.pos;
			}
			tt.style.display = 'block';
			c.innerHTML = v;
			tt.style.width = w ? w + 'px' : 'auto';
			if(!w && ie){
				t.style.display = 'none';
				b.style.display = 'none';
				tt.style.width = tt.offsetWidth;
				t.style.display = 'block';
				b.style.display = 'block';
			}
			if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
			h = parseInt(tt.offsetHeight) + top;
			clearInterval(tt.timer);
			tt.timer = setInterval(function(){tooltip.fade(1)},timer);
		},
		pos:function(e){
			var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
			var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
			tt.style.top = (u - h) + 'px';
			tt.style.left = (l + left) + 'px';
		},
		fade:function(d){
			var a = alpha;
			if((a != endalpha && d == 1) || (a != 0 && d == -1)){
				var i = speed;
				if(endalpha - a < speed && d == 1){
					i = endalpha - a;
				}else if(alpha < speed && d == -1){
					i = a;
				}
				alpha = a + (i * d);
				tt.style.opacity = alpha * .01;
				tt.style.filter = 'alpha(opacity=' + alpha + ')';
			}else{
				clearInterval(tt.timer);
				if(d == -1){tt.style.display = 'none'}
			}
		},
		hide:function(){
			clearInterval(tt.timer);
			tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
		}
	};
}();

Yardımcı olabilecek kimse var mı ?

01-02-2009, 20:52:38

#2

CheSTeRX

alternatif sunsam ?

jquery tooltip denesen
02-02-2009, 15:48:01

#3

sixfeetunder

Jquery yapısı itibariyle çok büyük toplamda en az 190 kb hep tooltip scriptleri bu script sadece 2 kb. Sayfaların yüklenmesi gecikiyor o tür scriptleri kullanınca, bu yüzden daha basit daha küçük şeyler kullanıyorum. dolayısıyla kullanımı da kolay, başka scriptle çakışması da yok ve efekt olarak da yeterli düzeyde olduğu için bu scripti kullanmak istiyorum.
03-02-2009, 17:57:19

#4

nihattr

Kimlik doğrulama veya yönetimden onay bekliyor.

<body onload="scriptFonksiyon()">
diye belirtip scriptFonksiyon() fonksiyonunun içine scriptleri alırsın.

05-02-2009, 21:47:52

tmmz

Kimlik doğrulama veya yönetimden onay bekliyor.

Bu sorun bende de vardı internetten araştırdığımda, sayfa yüklendikden sonra javascript dosyası oluşturularak sorunu çözmüşler.Sayfa yapısını aşağıdaki gibi yaparsan sorun olmaz.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript Tooltip Demo</title>
<style type="text/css">
   #text {margin:50px auto; width:500px}
   .hotspot {color:#900; padding-bottom:1px; border-bottom:1px dotted #900; cursor:pointer}
   #tt {position:absolute; display:block; background:url(' . $settings['default_theme_url'] . '/images/tt_left.gif) top left no-repeat}
   #tttop {display:block; height:5px; margin-left:5px; background:url(' . $settings['default_theme_url'] . '/images/tt_top.gif) top right no-repeat; overflow:hidden}
   #ttcont {font-size:11px; display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#666; color:#FFF}
   #ttbot {display:block; height:5px; margin-left:5px; background:url(' . $settings['default_theme_url'] . '/images/tt_bottom.gif) top right no-repeat; overflow:hidden}
</style>
<script language="javascript" type="text/javascript">
window.onload=function(){
    var e = document.createElement('script');
    e.type = 'text/javascript';
    e.src = 'script.js';// tooltip fonsiyonu ayrı bir js dosyası olarak kaydet
    document.getElementsByTagName('head')[0].appendChild(e);
}
</script>
</head>
<body>
   <span class="hotspot" onmouseover="tooltip.show(\'Açıklama\');" onmouseout="tooltip.hide();">Kelime</span>
</body>
</html>