0
Я пытаюсь отобразить всплывающую подсказку с ссылкой базы идентификатора якоря прокрутки, подсказка будет активна до активного DIV ид, после того, как она будет отображаться рядом уважала ссылку подсказкиидентификатора базового анкера прокрутка связь с подсказкой
, но для меня он не отображается во время прокрутки, я использую tooltipster и специальный код для привязки прокрутки ссылки из переполнения стека
например. http://us.blackberry.com/smartphones/blackberry-passport/overview.html
вот мой код
jQuery(document).ready(function($) {
$(".scroll").click(function(event) {
event.preventDefault();
$('html,body').animate({ scrollTop:$(this.hash).offset().top } , 1000);
});
});
/**
* This part handles the highlighting functionality.
* We use the scroll functionality again, some array creation and
* manipulation, class adding and class removing, and conditional testing
*/
var aChildren = $(".dotservices li").children(); // find the a children of the list items
var aArray = []; // create the empty aArray
for (var i=0; i < aChildren.length; i++) {
var aChild = aChildren[i];
var ahref = $(aChild).attr('href');
aArray.push(ahref);
} // this for loop fills the aArray with attribute href values
$(window).scroll(function(){
var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
var windowHeight = $(window).height(); // get the height of the window
var docHeight = $(document).height();
for (var i=0; i < aArray.length; i++) {
var theID = aArray[i];
var divPos = $(theID).offset().top; // get the offset of the div from the top of page
var divHeight = $(theID).height(); // get the height of the div in question
if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
$("a[href='" + theID + "']").addClass("nav-active popactive");
$('.poptip').tooltipster({
position:'right'
});
$('.popactive').tooltipster('show'); \t
} else {
$("a[href='" + theID + "']").removeClass("nav-active popactive");
$('.popactive').tooltipster('hide');
}
}
if(windowPos + windowHeight == docHeight) {
if (!$(".dotservices li:last-child a").hasClass("nav-active")) {
var navActiveCurrent = $(".nav-active").attr("href");
$("a[href='" + navActiveCurrent + "']").removeClass("nav-active");
/* $("a[href='" + navActiveCurrent + "']").removeClass("nav-active").tooltip('hide');*/
/* $(".dotservices li:last-child a").addClass("nav-active").tooltip('show');*/
}
}
});.dotservices {
width: 40px;
height: auto;
padding: 0;
text-align: center;
font-weight: bold;
color: #444;
text-decoration: none;
position: fixed;
top: 20%;
left: 0.5%;
display: block;
z-index:9999;
}
.dotservices li {
list-style: none;
}
.dotservices a {
display: block;
clear: both;
text-decoration: none;
font-family: 'FontAwesome';
font-weight: normal;
font-style: normal;
text-align: center;
font-size: 14px;
color: #D1A94D;
line-height: 50px;
text-decoration: none;
width: 40px;
}
.dotservices a:before {
content: "\f111";
}
.dotservices a.nav-active:before {
content: "\f10c";
font-size: 18px;
}
.dotservices a:hover {
text-decoration: none;
}<link rel="stylesheet" type="text/css" href="http://itracktraining.com/web4/css/tooltip-style.css" />
<link rel="stylesheet" type="text/css" href="http://itracktraining.com/web4/css/tooltipster.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="http://itracktraining.com/web4/js/jquery.js" type="text/javascript"></script>
<script src="http://itracktraining.com/web4/js/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://itracktraining.com/web4/js/jquery.tooltipster.min.js"></script>
<div class="dotservices">
<ul>
<li><a href="#services1" class="scroll poptip active" title="3G implementation & integration"></a></li>
<li><a href="#services2" class="scroll poptip" title="Full Turnkey Solutions"></a></li>
<li><a href="#services3" class="scroll poptip" title="IBS & Das Solutions"></a></li>
<li><a href="#services4" class="scroll poptip" title="Spare Parts management Services"></a></li>
<li><a href="#services5" class="scroll poptip" title="Operation & Maintenances"></a></li>
<li><a href="#services6" class="scroll poptip" title="Technical Consultancy Services"></a></li>
</ul>
</div>
<div id="services1" style="background-color:#CCC; display:block; width:100%;">
<p>services1</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="services2" style="background-color:#999; display:block; width:100%;">
<p>services2</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="services3" style="background-color:#006; display:block; width:100%;">
<p>services3</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="services4" style="background-color:#CCC; display:block; width:100%;">
<p>services4</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="services5" style="background-color:#999; display:block; width:100%;">
<p>services5</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="services6" style="background-color:#006; display:block; width:100%;">
<p>services6</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>демо ссылка
http://itracktraining.com/web4/tool.html
Консоль браузер говорит 'jquery.tooltipster.min.js: 1 Tooltipster: один или несколько подсказок уже прикреплены к этому элементу: не обращая внимания. Используйте параметр «multiple», чтобы прикрепить больше всплывающих подсказок ». Может ли это быть здесь? – ViRuSTriNiTy
Я не получаю, вы можете объяснить это больше :) – Aryan
Вы можете видеть эти сообщения при открытии консоли разработчика вашего браузера. Я проверяю следующую строку в '$ (window) .scroll()', чтобы быть причиной '$ ('. Poptip'). Tooltipster ({...' – ViRuSTriNiTy