Araç çubuğunun CSS dinamik konumu vQuery ile gezinme

Question

HTML etiketlerini tutabilecek basit bir araç ipucu yazıyorum. Demo için lütfen http://jsfiddle.net/Qkwm8/'u kontrol edin.

Araç ipucu kutusunun, öğenin konumuna bakılmaksızın düzgün şekilde gösterilmesini istiyorum, bu durumda, mouseover olayında araç ipuçlarını gösteren <a>.

araç ipuçları

sağ yüzen (veya satırın sonunda) ya da düzgün görünmüyor ekranın alt kısmında <a> dışında ince gösterilmektedir, bu ekran

ise kapalı görünür <a>, sağa ya da satırın sonunda yüzüyor ya da ekranın alt kısmında, araç ipucunun konumunu değiştirmesini istiyorum, böylece görünür durumda kalır

Teşekkür ederiz. http://jsfiddle.net/Qkwm8/3/

Answer 1

Sen html belge ne kadar geniş olduğunu kontrol edin ve uygun sol konumunu ayarlamak için belge genişliği kullanabilirsiniz:

Güncelleme demo bağlantı

burada tam bir sonuç. Deyin:

//set the left position 
    var left = $(this).offset().left + 10; 
    if(left + 200 > $(document).width()){ 
     left = $(document).width() - 200; 
    } 

Burada 200 kullanıyorum çünkü araç ipucunuzu 200 piksele ayarlıyorsunuz. Benzer bir şey yükseklik ile yapılabilir.

Ayrıca bir pencere genişliği de var ama her zaman fark hakkında kafam karışıyor, böylece hangisinin size daha iyi sonuçlar verdiğini kontrol etmelisiniz.

sayfanın alt bir örnek: Yine

//set the height, top position 
    var height = $(this).height(); 
    var top = $(this).offset().top; 
    if(top + 200 > $(window).height()){ 
     top = $(window).height() - 200 - height; 
    } 

, sen 200px yüksekliğinde için araç ipucu ayarlarken beri 200'ü kullanarak.

Answer 2

$ ('a.show-araç ipuçları'). Mouseover (function() {

if (($ (this) .parent()). Css (float)) == "doğru") başka

sola doğru sınıf eklemek -> uygun sınıf hakkını .... }