I have a basic back to top Bootstrap button that works perfectly except that its (Bootstrap) tooltip only shows up on the second mouse hovering action, any idea this is not working on the first mouse hovering?
Html side:
<body>
[...]
<a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Click to return on the top page" data-trigger="hover" data-toggle="tooltip" data-placement="left"><span class="glyphicon glyphicon-chevron-up"></span></a>
[...]
</body>
</html>
JavaScript side:
<script>
function fadeInBody() {
$('body').fadeIn(500);
}
$(document).ready(function () {
fadeInBody();
$(window).scroll(function () {
if ($(this).scrollTop() > 5) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').click(function () {
$('#back-to-top').tooltip('hide');
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
$('#back-to-top').tooltip('show');
$('[data-toggle="tooltip"]').tooltip();
});
</script>
I managed to reproduce the issue on my side.
I think the underlying problem is related to your jQuery ready event handler, you actually don't need to call $('#back-to-top').tooltip('show');:
<script>
function fadeInBody() {
$('body').fadeIn(500);
}
$(document).ready(function () {
fadeInBody();
$(window).scroll(function () {
if ($(this).scrollTop() > 5) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').click(function () {
$('#back-to-top').tooltip('hide');
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
// Try to comment this out below
// $('#back-to-top').tooltip('show');
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Let me know if you are still facing the issue.
Since you only shared the child element it makes it harder to debug, but I usually put the data-tooltip on the parent element containing the <a> tag. I also never used the data-trigger parameter, but it doesn't seem to be creating the glitch you're talking about.
Is your script loaded at the end of your <body> tag?
Hope this helps!
Related
$(document).ready(function() {
$(".button1").click(function() {
$("html, body").animate({
scrollTop : $("#screen1").offset().top
}, 800);
});
})
$(document).ready(function() {
$(".button2").click(function() {
$("html, body").animate({
scrollTop : $("#screen2").offset().top
}, 800);
});
})
...and so on
I wrote above code in javascript. If button is clicked, it scrolls to #screen position. However, I have several ".button"s and "#screen"s that basically has the same function. I don't want to repeat the same code so I've tried for in statement, but couldn't get it right. In what way can I avoid repeating codes in this situation?
Now, I cant see your HTML code, but my suggestion would be to add the event listener to a parent element to all the buttons and then add info about the button on the button itself. Here I'm using the attribute data-screen to hold info about the "screen".
UPDATE
I refined the jquery a bit. Using on() instead of click() so that I could remove the original if statement. When the event listener is on the parent element more buttons can be added dynamically and they will work as expected.
$(document).ready(function() {
$("#buttons").on("click", "button", function(e) {
var screenid = $(e.target).attr('data-screen');
$("html, body").animate({
scrollTop: $(`#screen${screenid}`).offset().top;
}, 800);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttons">
<button data-screen="1">Button 1</button>
<button data-screen="2">Button 2</button>
<button data-screen="3">Button 3</button>
</div>
<div>
<div id="screen1"></div>
<div id="screen2"></div>
<div id="screen3"></div>
</div>
Assuming all the buttons & screens follow the naming convention .button${number} and #screen${number}, you can do this:
const numberOfSections = 5;
$(document).ready(function() {
for (let i = 1; i <= numberOfSections ; i++) {
$(`.button${i}`).click(function() {
$("html, body").animate({
scrollTop : $(`#screen${i}`).offset().top
}, 800);
});
}
});
I'm having a bit of a struggle here.
I'm using jquery to load more content, and want to check if all divs with the class .employee are displayed, and if they are, hide the load more button. I will never know how many objects there are. So my html looks like this. (repeating once for every employee).
<div class="employee">
<p> </p>
</div>
And my javascript
$(function () {
$(".employee").slice(0, 4).show();
$("#loadMore").on('click', function (e) {
e.preventDefault();
$(".employee:hidden").slice(0, 4).slideDown();
if ($(".employee:hidden").length == 0) {
$("#load").fadeOut('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});
You can hide the button when there are no more hidden .employee objects as follows:
...
if ($(".employee:hidden").length == 0) {
$("#load").fadeOut('slow');
$("#loadMore").hide(); //ADD THIS
}
...
Im using div's with a onclick= function.
That in turn exectues a confirm box.
If users press OK. it redirects using: window.location.hash and auto scrolls to a div id.
Auto scroll works fine. But Animated scroll breaks at this point.
Using conventional a href's works fine with animated scrolling.
Im an amateur and pieced togheter the following code from different sources. I will post the code and hopefully someone has the answer.
Code:
function FrontAsNew() {
if (confirm("No damage allowed") == true) { window.location.hash = "#side"; }
else { window.location.hash = "#front"; }
}
<div id="cosmetics_box" style="cursor:hand; cursor:pointer;" onclick="FrontAsNew()">As new</div>
Animated scroll script:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<script>
$('div').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 2000);
return false;
});
So in short: Animated scrolling works fine with conventional a href links. But when using divs as links that exectue a function that uses location.hash the animated scrolling breaks.
Thanks for any help in advance!
Try something like this:
function FrontAsNew() {
if (confirm("No damage allowed") == true) {
scrollToTopById('side');
}
else {
scrollToTopById('front');
}
}
function scrollToTopById(id) {
$('html, body').animate({scrollTop: $('#' + id).offset().top}, 2000);
}
I have this jquery code which loads more content from hidden div i got it to open and everything works smooth but i want it to close again but i don't know how to do it.
i also want to change loadmore to close when it is open...
Help
html:
Load More
$(function () {
$("moreinfo").slice(0, 4).show();
$("#loadMore").on('click', function (e) {
e.preventDefault();
$("div:hidden").slice(0, 4).slideDown();
if ($("div:hidden").length == 0) {
$("#load").fadeOut('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.totop a').fadeIn();
} else {
$('.totop a').fadeOut();
}
});
Update:
$(function () {
$("div").slice(0, 4).show();
$("#loadMore").on('click', function (e) {
e.preventDefault();
$(".moreinfo:hidden").slice(0, 4).slideDown();
});
$(".loadLess").on('click', function (e) {
e.preventDefault();
$(".moreinfo:visible ").slice(0, 4).slideUp();
});
});
this will allow it to open and close right away auto...
This function gets the first 4 elements which are hidden and display:block them with the slideDown function. If you want to hide them again, you need to have a reference to these elements BEFORE the slideDown function. Or, if this is appropriate in your html structure, take the last 4 visible div elements and hide them.
So, a function like
$("#loadLess").on('click', function (e) {
e.preventDefault();
$("div:visible").slice(-4).slideUp();
});
In this case, you will need to have an element that will trigger this function to run, most probably at the end of the visible divs
<a id="loadLess">Show less</a>
Having said that, selectors like div:visible or div:hidden are due to cause troubles. You should use some specific class attribute for that, like .contentitems:hidden or something
Edit:
Here's a fiddle link to see it working
and this is the code used in the jsfiddle
<div class="someclass">some content 1 </div>
<div class="someclass">some content 1 </div>
<div class="someclass">some content 1 </div>
<div class="someclass">some content 1 </div>
<div class="someclass">some content 1 </div>
.....
<span id="loadMore">Load More</span>
<span id="loadLess">Load Less</span>
js
$('div').slice(0, 4).show();
$("#loadMore").on('click', function (e) {
e.preventDefault();
$("div:hidden").slice(0, 4).slideDown();
if ($("div:hidden").length == 0) {
$("#load").fadeOut('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
$("#loadLess").on('click', function (e) {
e.preventDefault();
$("div:visible").slice(-4).slideUp();
});
Try using toggle()
http://api.jquery.com/toggle/
Here is an example on how you can use it:
JSFiddle
I'm trying to put a "scroll up" button on my website, and for some reason it isn't working correctly. The button does appear on the page, but for whatever reason whenever I attempt to click it it just redirects me to the front page of the site. I have no idea what I'm doing wrong.
<script>
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()>="100"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()<="1000"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function(){$("#toTo_button").scrollToTop();});
</script>
<style>
#toTo_button { width:70px;text-align:center;padding:5px;position:fixed;bottom:10px;right:12px;cursor:pointer;color:#666;text-decoration:none; }
#ups a img { opacity:0.7; -moz-opacity:0.7; filter:alpha(opacity=70); }
#ups a:hover img { opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100); }
</style>
<div id="ups">
<img src="http://full4dl.ucoz.com/Support/ups.png" alt="" />
</div>
You have to prevent the default action when you click the anchor, as <a href="/" ... will surely redirect to the home page:
$(function () {
$.fn.scrollToTop = function () {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() >= "100") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function () {
if ($(window).scrollTop() <= "1000") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function (e) {
e.preventDefault(); // ding ding ding
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
$(function () {
$("#toTo_button").scrollToTop();
});
You have a couple issues with your code.
First, you have to trigger the function by binding it to a click event.
$('#toTo_button').click(function(event) {
//do your scroll magic here
});
Secondly, when you trigger that click event, you should pass the event and call event.preventDefault(). This prevents the browser from automatically calling a redirect.
Use event.preventDefault() on the click event of the anchor tag, this will stop the default redirect to the homepage of the site(as you have written a href="/").
This should resolve the issue.