I'm coding my blog theme. I have this button to load in the entires, but I want to make that button change to "No more entries" once all is loaded. Any clue?
<script>
$(document).ready(function () {
size_li = $(".all .one").size();
x=3;
$('.all .one:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+5 <= size_li) ? x+5 : size_li;
$('.all .one:lt('+x+')').fadeIn();
});
});
</script>
Check if there are any hidden elements after starting to fade in the items. If there are no any, just show the message.
$(document).ready(function() {
size_li = $(".all .one").size();
x = 3;
$('.all .one:lt(' + x + ')').show();
$('#loadMore').click(function() {
x = (x + 5 <= size_li) ? x + 5 : size_li;
$('.all .one:lt(' + x + ')').fadeIn();
if (!$(".all .one:hidden").length) {
// Do something when everything is loaded
$(this).replaceWith("<p>No more entries<p>");
}
});
});
.one {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="all">
<div class="one">1</div>
<div class="one">2</div>
<div class="one">3</div>
<div class="one">4</div>
<div class="one">5</div>
<div class="one">6</div>
<div class="one">7</div>
<div class="one">8</div>
<div class="one">9</div>
<div class="one">10</div>
</div>
<button id="loadMore">Load more</button>
You could just add condition inside your click event :
if( size_li == $('.all .one:visible').length ){
$(this).replaceWith('No more entries');
}
Hope this helps.
Related
I need to cycle up and down through two sets of divs simultaneously. This code works well for cycling up the list (button1) but when I tried to create a down button (button2) it messes up the div order and doesn't cycle correctly. How can I alter this code to make it successfully cycle up and down through the list in the correct order?
$(document).ready(function() {
var divs = $('div[id^="num-"]').hide(),
i = 0;
function cycleone() {
divs.hide().eq(i).show();
i = ++i % divs.length;
};
cycleone()
$('#button1').click(function() {
cycleone()
})
});
$(document).ready(function() {
var divsv = $('div[id^="numv-"]').hide(),
iv = 0;
function cycletwo() {
divsv.hide().eq(iv).show();
iv = ++iv % divsv.length;
};
cycletwo()
$('#button1').click(function() {
cycletwo()
})
});
$(document).ready(function() {
var divs = $('div[id^="num-"]').hide(),
i = 0;
function cycleonedown() {
divs.hide().eq(i).show();
i = --i % divs.length;
};
cycleonedown()
$('#button2').click(function() {
cycleonedown()
})
});
$(document).ready(function() {
var divsv = $('div[id^="numv-"]').hide(),
iv = 0;
function cycletwodown() {
divsv.hide().eq(iv).show();
iv = --iv % divsv.length;
};
cycletwodown()
$('#button2').click(function() {
cycletwodown()
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="num-1">1</div>
<div id="num-2">2</div>
<div id="num-3">3</div>
<div id="num-4">4</div>
<div id="num-5">5</div>
<div id="num-6">6</div>
<div id="num-7">7</div>
<div id="numv-1">A</div>
<div id="numv-2">B</div>
<div id="numv-3">C</div>
<div id="numv-4">D</div>
<div id="numv-5">E</div>
<div id="numv-6">F</div>
<div id="numv-7">G</div>
<button id="button1">Up</button>
<button id="button2">Down</button>
As i can see you are using jquery, try the snippet below
$(document).ready(function(){
var lettersArray=[];
var step=1;
var lastStep=parseInt($(document).find('.num').length);
if($(document).find('.numv').length){
$(document).find('.numv').each(function(){
var letter=$(this).html();
lettersArray.push(letter);
});
}
showCycle=function(step){
var stepLetter=lettersArray[step-1];
$('#number').html(step);
$('#letter').html(stepLetter);
}
$(document).on('click','#button1',function(){
step=step+1;
step=step > lastStep ? 1 : step;
showCycle(step);
});
$(document).on('click','#button2',function(){
step=step-1;
step=step < 1 ? lastStep : step;
showCycle(step);
});
});
.num, .numv{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div id="num-1"class="num">1</div>
<div id="num-2"class="num">2</div>
<div id="num-3"class="num">3</div>
<div id="num-4"class="num">4</div>
<div id="num-5"class="num">5</div>
<div id="num-6"class="num">6</div>
<div id="num-7"class="num">7</div>
<div id="numv-1"class="numv">A</div>
<div id="numv-2"class="numv">B</div>
<div id="numv-3"class="numv">C</div>
<div id="numv-4"class="numv">D</div>
<div id="numv-5"class="numv">E</div>
<div id="numv-6"class="numv">F</div>
<div id="numv-7"class="numv">G</div>
<div id="number">1</div>
<div id="letter">A</div>
<button id="button1">Up</button>
<button id="button2">Down</button>
I have 10 div and when any one click on any div and then click on increment button then font size of that div should be increase.
It is working for single div. But I need for more than one div.
When I remove getDate(), then it is working for one div.
I have to click on div and then click on increment or decrement tag.Then font size of that div should be increment or decrement.
function getDate(e) {
var originalSize = $('#' + e).css('font-size');
}
$(document).ready(function() {
//var originalSize = $('div').css('font-size');
$('#linkIncrease').click(function() {
modifyFontSize('increase');
});
$('#linkDecrease').click(function() {
modifyFontSize('decrease');
});
$('#linkReset').click(function() {
modifyFontSize('reset');
})
function modifyFontSize(flag) {
var divElement = $('#divContent');
var currentFontSize = parseInt(divElement.css('font-size'));
if (flag == 'increase')
currentFontSize += 1;
else if (flag == 'decrease')
currentFontSize -= 1;
else
currentFontSize = 16;
divElement.css('font-size', currentFontSize);
}
});
.divClass {
font-size: 12px;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<a id="linkIncrease" href="#"><b>+</b></a>
<a id="linkDecrease" href="#"><b>-</b></a>
<a id="linkReset" href="#"> <b>X</b></a>
<br /> <br />
<div id="divContent" class="divClass" onClick="getDate(this.id);"> Hello </div>
<br>
<div id="divContent1" class="divClass" onClick="getDate(this.id);"> Hello </div>
Version that increases only CLICKED div
It saves the original size on the div itself in a data attribute
I also bail out if nothing was clicked before plus or minus are clicked
let divElement;
function modifyFontSize(flag) {
let $divElement = $("#" + divElement);
if ($divElement.length === 0) console.log("Nothing selected")
let currentFontSize = parseInt($divElement.css('font-size'));
if (flag == 'increase')
currentFontSize += 1;
else if (flag == 'decrease')
currentFontSize -= 1;
else
currentFontSize = $divElement.data("orgSize") || 16;
$divElement.css('font-size', currentFontSize);
}
$(document).ready(function() {
$(".divClass").on("click", function() {
divElement = this.id;
if (!$(this).data("orgSize")) $(this).data("orgSize", $(this).css('font-size'))
})
$('#linkIncrease').click(function() {
modifyFontSize('increase');
});
$('#linkDecrease').click(function() {
modifyFontSize('decrease');
});
$('#linkReset').click(function() {
modifyFontSize('reset');
})
});
.divClass {
font-size: 12px;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<a id="linkIncrease" href="#"><b>+</b></a>
<a id="linkDecrease" href="#"><b>-</b></a>
<a id="linkReset" href="#"> <b>X</b></a>
<br /> <br />
<div id="divContent" class="divClass"> Hello </div>
<br>
<div id="divContent1" class="divClass"> Hello </div>
Try this,
let divId = '';
function getDate(e) {
var originalSize = $('#' + e).css('font-size');
divId = e;
}
$(document).ready(function() {
//var originalSize = $('div').css('font-size');
$('#linkIncrease').click(function() {
modifyFontSize('increase');
});
$('#linkDecrease').click(function() {
modifyFontSize('decrease');
});
$('#linkReset').click(function() {
modifyFontSize('reset');
})
function modifyFontSize(flag) {
var divElement = $(`#${divId}`);
var currentFontSize = parseInt(divElement.css('font-size'));
if (flag == 'increase')
currentFontSize += 1;
else if (flag == 'decrease')
currentFontSize -= 1;
else
currentFontSize = 16;
divElement.css('font-size', currentFontSize);
}
});
.divClass {
font-size: 12px;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<a id="linkIncrease" href="#"><b>+</b></a>
<a id="linkDecrease" href="#"><b>-</b></a>
<a id="linkReset" href="#"> <b>X</b></a>
<br /> <br />
<div id="divContent" class="divClass" onClick="getDate(this.id);"> Hello </div>
<br>
<div id="divContent1" class="divClass" onClick="getDate(this.id);"> Hello </div>
I added a variable 'divId' to store the selected div when the function getDate() is called. Then I apply font-sizing to that div only.
I'm trying to develop a very simple carousel with Pure Javascript and CSS. I'm having trouble with the "next" and "previous" button, since they should communicate the with each other, setting the current position of the carousel.
Here is my current code (or JsFiddle: https://jsfiddle.net/kbumjLw2/1/):
// Slider
var listRecommendations = document.getElementById('list-recommendations');
listRecommendations.style.left = 0;
// Previous button
document.getElementById("btn-prev").onclick = function() {
// Making sure this functions will not run if it's the 0px of the slider
if (parseInt(listRecommendations.style.left) != 0) {
var currentPosition = parseInt(listRecommendations.style.left) + 100;
listRecommendations.style.left = currentPosition + 'px';
console.log(currentPosition);
};
}
// Next button
var num = 100;
var maxValue = 1000 + 120;
console.log(maxValue);
document.getElementById("btn-next").onclick = function() {
if (num < maxValue) {
num += 100;
listRecommendations.style.left = '-' + num + 'px';
console.log(num);
};
}
#list-recomendations{
position: absolute;
}
.wrap-items .item{
float: left;
}
<div class="recommendation">
<div id="slider">
<div id="list-recommendations" class="wrap-items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
<!-- Slider controls -->
<button id="btn-prev" class="btn-slider prev">Previous</button>
<button id="btn-next" class="btn-slider next" title="Ver mais sugestões">Next</button>
</div>
As you can see on the console, the next button increases "100" at each click, and the previous button decreases "100" at each click. The previous button seems to be working fine, but the next button don't get the updated value, it always increase using the latest value it used.
Expected result:
Next button clicked: 100 > 200 > 300...
Prev button clicked: 200 > 100 > 0...
Next button clicked: 100 > 200 > 300...
Current result:
Next button clicked: 100 > 200 > 300...
Prev button clicked: 200 > 100 > 0...
Next button clicked: 400 > 500 > 600...
Any idea on what may be causing this issue?
check this updated fiddle
// Previous button
document.getElementById("btn-prev").onclick = function() {
// Making sure this functions will not run if it's the 0px of the slider
var currentPosition = parseInt(listRecommendations.style.left) - 100;
listRecommendations.style.left = currentPosition + 'px';
console.log(currentPosition);
}
// Next button
var num = 100;
var maxValue = 1000 + 120;
console.log(maxValue);
document.getElementById("btn-next").onclick = function() {
if (num < maxValue) {
var currentPosition = parseInt(listRecommendations.style.left) + 100;
num = currentPosition;
listRecommendations.style.left = num + 'px';
console.log(num);
};
}
you basically need to take the left value each time and do plus (+ next) minus (- prev) on it.
There is no use of num as you can play with the current position of the element.
Also note, - will concatenate the - symbol the the value, it will not subtract the value.
Ty this:
var maxValue = 1000 + 120;
var listRecommendations = document.getElementById('list-recommendations');
listRecommendations.style.left = 0;
document.getElementById("btn-prev").onclick = function() {
var val = parseInt(listRecommendations.style.left);
if (val != 0) {
val -= 100;
listRecommendations.style.left = val + 'px';
console.log(val);
};
}
document.getElementById("btn-next").onclick = function() {
var val = parseInt(listRecommendations.style.left);
if (val < maxValue) {
val += 100;
listRecommendations.style.left = val + 'px';
console.log(val);
};
}
#list-recomendations {
position: absolute;
}
.wrap-items .item {
float: left;
}
<div class="recommendation">
<div id="slider">
<div id="list-recommendations" class="wrap-items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
<!-- Slider controls -->
<button id="btn-prev" class="btn-slider prev">Previous</button>
<button id="btn-next" class="btn-slider next" title="Ver mais sugestões">Next</button>
</div>
Fiddle here
I'm making an image carousel
see my fiddle : https://jsfiddle.net/gd2n6paw/8/
i'm new to jquery and just wanted to know that how can we make carousel 'next' and 'prev' controls thanks for the help .
you can see my code here also :
my html
<div class="slider">
<div class="container" id="img-slider">
</div>
</div>
<button onclick="prev()">
prev
</button>
<button onclick="next()">
next
</button>
my css
.slider{
min-height:300px;
max-width:400px;
border:1px solid #000;`
}
.container{
background-image:url('http://www.xenergie.com/wp-content/uploads/2015/05/nature.jpg');
min-height:300px;
max-width:400px;
}
my jQuery
(function(){
// main image carousel index.html you can customize it ...
var imgSlider = $('#img-slider');
var counter = 0;
var imgSliderContainer = ['http://www.xenergie.com/wp-content/uploads/2015/05/nature.jpg','http://www.pycomall.com/images/P1/Natural_Background.jpg','http://www.gochecks.net/data/media/91/Mobile_Nature_Wallpapers_35.jpg'];
function ImageSliderHome(){
imgSlider.fadeOut('5000' ,function(){
imgSlider.css('background-image', "url('" + imgSliderContainer[counter] + "')");
}).fadeIn('5000');
counter++;
if(counter >= imgSliderContainer.length){
counter = 0;
}
}
function prev(){
?
}
function next(){
?
}
setInterval(ImageSliderHome,3000);
})();
What about this?
https://jsfiddle.net/gd2n6paw/12/
$('#next').click(function(){
counter++;
ImageSliderHome();
});
$('#prev').click(function(){
if(counter == 0)
counter = imgSliderContainer.length;
else
counter--;
ImageSliderHome();
});
I have 3 div. 2 are hidden by default.
By clicking on a link "add" or a link "remove", I want the other div to be shown or hidden. And then, I would like to count dynamically div which are shown.
Here is my HTML :
<div id="clone1" class="billet">
<input type="text" /><span id="test"></span>
</div>
<div id="clone2" class="billet" >
<input type="text" />
</div>
<div id="clone3" class="billet" >
<input type="text" />
</div>
<div id="ajout-suppr">
<a href="javascript:;" class="ajoutBillet" >Ajouter un billet</a>
<span>-------------</span>
<a href="javascript:;" class="supprBillet" >Supprimer un billet</a>
</div>
jQuery :
$(document).ready(function () {
$(".supprBillet").hide();
$("#clone2").hide();
$("#clone3").hide();
$(".ajoutBillet").click(function (){
var nb = $('.billet:not([style*="display: none"])').size();
$('#test').html(nb);
if(nb < 2) {
$(".supprBillet").hide();
}
else {
$(".supprBillet").show("slow");
}
if($("#clone2").hide()) {
$("#clone2").show("slow");
}
if($("#clone3").hide() && $("#clone2").show()) {
$("#clone3").show();
}
if($("#clone3").show() && $("#clone2").show()) {
$(".ajoutBillet").hide("slow");
}
}); // fin du click function ajout billet
$(".supprBillet").click(function (){
var nb = $('.billet:not([style*="display: none"])').size();
if(nb < 2) {
$(".supprBillet").hide();
}
else {
$(".supprBillet").show();
}
if($("#clone2").show() && $("#clone3").hide()) {
$("#clone2").hide();
}
}); // fin du click function suppr billet
});
As you see nothing works.
Could you please show me an issue?
Thanks in advance.
you can try something like this:
jQuery('.ajoutBillet').on('click',function(){
var lengthDivs = jQuery('.billet:visible').length;
if(lengthDivs < 2 && jQuery('.supprBillet:visible').length > 0){
jQuery('.supprBillet').hide();
}
});
I made this into a fiddle. This does seem to do what is expected (by code). Are you referencing the jquery library?
I did make some changes to your count by checking on 1
if(nb < 1) {
$(".supprBillet").hide();
}
You need to check the visible div by jquery .is(':visible') function.
Like this way :
Replace this
var nb = $('.billet:not([style*="display: none"])').size();
With
var nb = $('.billet').is(":visible").length;
Now shows and hides the inputs:
$(document).ready(function() {
$(".billet input:nth-child(1)").hide();
$(".billet input:nth-child(2)").hide();
$("#new").click(function() {
var count = 0;
$(".billet input").each(function() {
if ($(this).is(":visible")) {
count++;
}
});
$(".billet input:nth-child("+count+")").show();
if ($("#total-divs").html() < 3) {
$("#total-divs").html(count+1);
}
});
$("#delete").click(function() {
var count = -1;
$(".billet input").each(function() {
if ($(this).is(":visible")) {
count++;
}
});
if (count > 0) {
$(".billet input:nth-child("+count+")").hide();
$("#total-divs").html(count);
}
});
});
input {
margin: 4px 0;
width: 100%;
}
.actions {
display: block;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="billet" >
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div class="actions">
New | Delete
</div>
Total: <span id="total-divs">1</span>