Всплывающая подсказка вылазит за границы браузера
Вложений: 1
Всем приветы.
Есть скрипт, вроде все нормально работает, но когда подсказка всплывает, и если она с левого или правого угла браузера, то прячется за границу браузера. Помогите решить проблему. Заранее благодарен. |
Поможет кто-то?
|
up
|
|
Цитата:
|
Цитата:
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8" /> <script src="http://code.jquery.com/jquery-latest.js"></script> <style type="text/css"> body{ height: 2000px; width: 2000px; padding: 0px; margin: 0px; } #preview{ position:absolute; border:1px solid #ccc; background:#FFF; padding:5px; color:#03F; z-index: 100; display: none; } .block{ min-height: 400px; position: relative; top: 300px; left: 350px; } </style> <script> jQuery.fn.center = function(event) { var w = $(window), top = (w.height()-this.outerHeight(true))+w.scrollTop() -(event.pageY+22), left = (w.width()-this.outerWidth(true))+w.scrollLeft() -(event.pageX+7); this.css("position", "absolute"); top = top > 0? event.pageY+22: (event.pageY-this.outerHeight(true)); top < w.scrollTop() && (top = w.scrollTop()); left = left> 0? event.pageX+7: (event.pageX-this.outerWidth(true)); left < w.scrollLeft() && (left = w.scrollLeft()+4); this.css("top", top + "px"); this.css("left", left +"px"); return this; } $(document).ready(function () { $(".block img").mousemove(function (event) { $("#preview").center(event); } ) $(".block img").mouseenter(function (event) { $("#preview").html($(this).parent().data('src')) .stop(true, true).fadeIn().center(event); } ) $(".block img, #preview").mouseleave(function () { $("#preview").stop(true, true).delay(500).fadeOut(); } ) $("#preview").mouseenter(function (event) {$("#preview").stop(true, true)}) } ) </script> </head> <body> <div id="preview" ></div> <div class='block'> <a href='javascript: void(null)' data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a> <a href='javascript: void(null)' data-src="http://javascript.ru/img/ws_1.png" class="preview"><img src="http://javascript.ru/img/ws_1.png" width='50' height='50' /></a> <a href='javascript: void(null)' data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a> <a href='javascript: void(null)' data-src="http://javascript.ru/img/ws_1.png" class="preview"><img src="http://javascript.ru/img/ws_1.png" width='50' height='50' /></a> <a href='javascript: void(null)' data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a> <a href='javascript: void(null)' data-src="http://javascript.ru/img/ws_1.png" class="preview"><img src="http://javascript.ru/img/ws_1.png" width='50' height='50' /></a> <a href='javascript: void(null)' data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50' /></a> <a href='javascript: void(null)' data-src="http://javascript.ru/img/ws_1.png" class="preview"><img src="http://javascript.ru/img/ws_1.png" width='50' height='50' /></a> </div> </body> </html> |
рони,
именно так, спасибо большое. |
рони,
а еще хотел спросить... Когда курсором навел на элемент, что бы шортик не двигался когда двигается курсор? |
Цитата:
|
рони,
в каком направлении читать ?:( А то я не могу никак понять js :cray: |
Часовой пояс GMT +3, время: 22:03. |