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
}
...
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 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!
I have a problem with my nested accordions.
I have been trying to figure out how to nest my accordions but in a sense that I dont need to write any extra jquery codes for each specific one I add.
I made a jsfiddle as an example... https://jsfiddle.net/L2bwmgL8/
and the code for the accordion looks like this:
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(1000).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).closest('.accordion-section-title');
//console.log(currentAttrValue);
if (currentAttrValue.hasClass('active')) {
close_accordion_section();
} else {
close_accordion_section();
// Add active class to section title
currentAttrValue.addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue.attr('href')).slideDown(1000).addClass('open');
setTimeout(function() {
$('html, body').animate({
scrollTop: $(currentAttrValue.attr('href')).offset().top
}, 1000);
}, 1001);
//console.log((currentAttrValue.attr('href')));
}
e.preventDefault();
});
});
This way it works fine when I dont have them nested. However, when they are nested as in the example, under the first accordion (ignore the broken images).
Then when I click on the specific accordion to close, everything inside that accordion closes, including the parent one. Or, maybe I think just the parent closes.
Now, I tried, maybe passing the currentAttrValue inside the close_accordion_section() function like close_accordion_section(currentAttrValue) and changing the close_acordion_section to:
function close_accordion_section() {
$(this).closest('.accordion .accordion-section-title').removeClass('active');
$(this).closest('.accordion .accordion-section-content').slideUp(1000).removeClass('open');
}
But then everything opens up nicely, but I cant close any of the accordions anymore.
Any help and explanation would be appriciated, I am still learning the ropes so to speak.
I would simplify it, and then just target the siblings of the current accordion so as to not affect the parent accordion of nested accordions etc.
$(document).ready(function() {
$('.accordion-section-title').on('click', function(e) {
e.preventDefault();
var self = $(this).toggleClass('active');
var section = self.closest('.accordion-section');
var siblings = section.siblings('.accordion-section');
siblings.find('.accordion-section-content').slideUp(1000).removeClass('open').end()
.find('.accordion-section-title').removeClass('active');
$('.accordion ' + self.attr('href')).slideToggle(1000).toggleClass('open')
.find('.accordion-section-title.active')
.trigger('click');
if (self.hasClass('active')) {
setTimeout(function() {
$('html, body').animate({
scrollTop: $(self.attr('href')).offset().top
}, 1000);
}, 1001);
}
});
});
FIDDLE
The issue is in your if else statement:
you need to cut one of the calls to close_accordion_section():
I have a problem with my nested accordions. I have been trying to figure out how to nest my accordions but in a sense that I dont need to write any extra jquery codes for each specific one I add.
I made a jsfiddle as an example... https://jsfiddle.net/L2bwmgL8/
and the code for the accordion looks like this:
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(1000).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).closest('.accordion-section-title');
//console.log(currentAttrValue);
if (currentAttrValue.hasClass('active')) {
close_accordion_section();
} else {
//CUT THIS
// Add active class to section title
currentAttrValue.addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue.attr('href')).slideDown(1000).addClass('open');
setTimeout(function() {
$('html, body').animate({
scrollTop: $(currentAttrValue.attr('href')).offset().top
}, 1000);
}, 1001);
//console.log((currentAttrValue.attr('href')));
}
e.preventDefault();
});
});
fiddle: https://jsfiddle.net/kjyqmzuh/
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 am trying to hide the #clients div if any of three #-Content other div's are visible.
$('#PE-Content').hide();
$('#OPS-Content').hide();
$('#NHS-Content').hide();
$('#indic_1').hide();
$('#PE').click(function () {
$('#indic_1').toggle(400);
$('#PE-Content').toggle(400);
$('#OPS-Content').hide();
$('#NHS-Content').hide();
$('html, body').animate({
scrollTop: $("#PE").offset().top
}, 2000);
});
$('#OPS').click(function () {
$('#OPS-Content').toggle(400);
$('#PE-Content').hide();
$('#NHS-Content').hide();
$('html, body').animate({
scrollTop: $("#OPS").offset().top
}, 2000);
});
$('#NHS').click(function () {
$('#NHS-Content').toggle(400);
$('#PE-Content').hide();
$('#OPS-Content').hide();
$('html, body').animate({
scrollTop: $("#NHS").offset().top
}, 2000);
});
if ($('#NHS-Content').is(':visible') || $('#PE-Content').is(':visible') || $('#OPS-Content').is(':visible')) {
$('#clients').hide();
} else {
$('#clients').show();
};
For some reason the #clients div does not hide.
Any ideas welcome!
The html:
<div id="NHS"></div>
<div id="PE"></div>
<div id="OPS"></div>
<div id="NHS-Content"></div>
<div id="PE-Content"></div>
<div id="OPS-Content"></div>
<div class="row" style="margin-top:20px; margin-bottom:20px;" id="clients">
<?php include ('include/clients.php'); ?>
</div>
There were two problems:
your code was never getting called except on initial page load. You need to call it from your click events that change the visibility of the items you are checking.
you had a timer on your toggle, so the item you were hiding/showing wasn't hidden/shown immediately... but the check to see if it was visible would have been done before that was finished. You should use a callback on the toggle to call your code checking visibility
JSFiddle
$('#NHS').click(function () {
$('#NHS-Content').toggle(400, foo);
...
function foo() {
if ($('#NHS-Content').is(':visible') || $('#PE-Conten ...
If you are interested, I cleaned up your code quite a bit (went from 41 to 21 lines) in this example with some minor changes to the dom:
JSFiddle