Спасибо, ребята. Попробуйте сделать чтобы всплывающий блок появлялся на другой конец странички section-7 - Веб-строительство

42

падаван

16 марта 2012, 15:02

#11

Flash.UA:
Тут достаточно одного из двух, это одинаковый код, но второй просто минифицирован для уменьшения веса. и конечно же, подключать надо jQuery скрипт, выше плагина.

аа, вот как, понял, спасибо!

Flash.UA:
Не работает потому что, скорее всего вы, не инициализирвали скрипт. Я говорю о

то есть как? вот сейчас посмотрел ваш пример на jsfiddle.net, скопировал все, из ячейки HTML в <body>, скрипт в <script></script> в хедере, .tooltip-content соответственно в css. Но почему то все ранво ен работает😕 я не могу понять почему, вроде все ведь так должно быть, но при наведении все равно ничего не появляется....

вот так:

<!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" xml:lang="en" lang="en">



<head>

  <title></title>

  <script>

  $(document).ready(function(){

  $("#example-target-1").ezpz_tooltip({

    contentId: 'simple-content-1',

    showContent: function(content) {

        content.fadeIn('slow');

    },

    hideContent: function(content) {

        // if the showing animation is still running, be sure to stop it

        // and clear the animation queue. otherwise, repeatedly hovering will

        // cause the content to blink.

        content.stop(true, true).fadeOut('slow');

    }

});

});

</script>

<style>

.tooltip-content {

    background-color: #FFC848;

    border: 3px solid #AF8A31;

    color: black;

    display: none;

    padding: 10px;

    position: absolute;

    text-align: center;

    width: 250px;

}



</style>

</head>



<body>

<span id="example-target-1">Hover over me</span>

<div id="simple-content-1" class="simple-tooltip-content tooltip-content" style="top: 611px; left: 517px;">

    <p>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...

    </p>

</div>

</body>



</html>

46

Flash.UA

17 марта 2012, 12:49

#12

Ну так вы же не подключили скрипты jquery и саму библиотеку:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  

<script type="text/javascript" src="http://cloud.github.com/downloads/enriquez/ezpz-tooltip/jquery.ezpz_tooltip.js"></script>

Попробуйте так:


<!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" xml:lang="en" lang="en">



<head>

  <title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  

<script type="text/javascript" src="http://cloud.github.com/downloads/enriquez/ezpz-tooltip/jquery.ezpz_tooltip.js"></script>

  <script>

  $(document).ready(function(){

  $("#example-target-1").ezpz_tooltip({

    contentId: 'simple-content-1',

    showContent: function(content) {

        content.fadeIn('slow');

    },

    hideContent: function(content) {

        // if the showing animation is still running, be sure to stop it

        // and clear the animation queue. otherwise, repeatedly hovering will

        // cause the content to blink.

        content.stop(true, true).fadeOut('slow');

    }

});

});

</script>

<style>

.tooltip-content {

    background-color: #FFC848;

    border: 3px solid #AF8A31;

    color: black;

    display: none;

    padding: 10px;

    position: absolute;

    text-align: center;

    width: 250px;

}



</style>

</head>



<body>

<span id="example-target-1">Hover over me</span>

<div id="simple-content-1" class="simple-tooltip-content tooltip-content" style="top: 611px; left: 517px;">

    <p>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...

    </p>

</div>

</body>



</html>

5

elemashine

17 марта 2012, 15:04

#13

Верстай с картинкой с position:absolute и display:none. Затем вызывай ее по .hover() на ссылку с jQuery - делов на полчаса курения jQuery

Пробую себя

42

падаван

18 марта 2012, 07:31

#14

Flash.UA:
Ну так вы же не подключили скрипты jquery и саму библиотеку:

ааа, ну вот же...пц, о я идиот, аж плакать хочется, ох.....да, теперь работает, Flash.UA, спасибо вам огромное!!!

elemashine:
Верстай с картинкой с position:absolute и display:none

спасибо, опробую!

да, надо курить конкретно, а то у меня знания кусками, одно знаю, другое, элементарное, как сейчас, забываю, либо тоже вообще не знаю....

еще раз спасибо, ребята!

---------- Добавлено 18.03.2012 в 13:01 ----------

PS

блиин, пока пытаюсь разобраться все таки спрошу, по Tooltip'у, возможно сделать чтобы всплывающий блок появлялся слева от курсора, а не справа?...

и вообще если подключить только его файл скрипта, который там дается скачать, тоже не работает. Получается только с вашим примером

42

падаван

19 марта 2012, 07:25

#15

падаван:
сделать чтобы всплывающий блок появлялся слева от курсора, а не справа?...

блин, это где то в коде файла со скриптом, буду методом исключения, сейчас заменил все значения "left" на "right", да, получилось переместить в право! только совсем в право, на другой конец странички))) буду пробовать дальше:)...

46

Flash.UA

19 марта 2012, 15:43

#16

http://theezpzway.com/2009/3/17/jquery-plugin-ezpz-tooltip#section-7

42

падаван

19 марта 2012, 19:28

#17

Flash.UA:
http://theezpzway.com/2009/3/17/jque...ltip#section-7

имеете ввиду это?


$.fn.ezpz_tooltip.positions.topLeft = function(contentInfo, mouseX, mouseY, offset, targetInfo) {

contentInfo['top'] = 0;

contentInfo['left'] = 0;

ну я не понимаюю что там указать, как, в коде не так, там


$.fn.ezpz_tooltip.positions.aboveFollow = function(contentInfo, mouseX, mouseY, offset, targetInfo) {

contentInfo['top'] = mouseY - (contentInfo['height'] / 2);

contentInfo['left'] = mouseX + offset;

что там прописать?? цифры никакие ничего не меняют🤪mouseX + offset как это понимать? пишу и одно значение и 100+100 и все на свете и ничего не меняется. максимум вообще перестает всплывать. я все это видел, но я в русских то инструкциях не могу разобраться а тут вообще...я уже рехнулся с этими кодами, неделю бьюсь нихрена не могу сделать, сжальтесь, пожалуйста, напишите что там надо измениить😮😮

46

Flash.UA

20 марта 2012, 16:07

#18

http://jsfiddle.net/jnafx/2/

42

падаван

20 марта 2012, 17:13

#19

Flash.UA, низкий вам поклон!!! вот положа руку на сердце, безграничная благодарность!!

46

Flash.UA

21 марта 2012, 12:08

#20

Та не за что. Но вам лучше стараться в дальнейшем самому разбираться, иначе так ничего не изучите :)

В 2023 году Google заблокировал более 170 млн фальшивых отзывов на Картах

Все что нужно знать о DDоS-атаках грамотному менеджеру

При наведении на ссылку появляется картина. Как реализовать?