Could you please tell me why :lt() is not working. Here is my code:
https://jsbin.com/refunuyahe/edit?html,js,output
I try to show only 100 items at first, and when the user scrolls it should show a further 100 items.
(function() {
'use strict';
$(function() {
var str = '<ul id="myList">';
var x = 100;
var initialData = '';
for (var i = 0; i < 1000; i++) {
str += '<li>' + i + '</li>';
}
str += '</ul>'
// complete data in str;
// load only first 100 element
$('#container').append(str);
$('#myList li:lt(' + x + ')').show();
})
$('#container').on('scroll', function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
x += 100;
$('#myList li:lt(' + x + ')').show();
}
})
})();
Why is this line not working?
$('#myList li:lt(' + x + ')').show();
There are main two problems with your code. Firstly the x variable is out of scope of the scroll event handler. Secondly the li elements are already visible on load, so calling show() on them would have no effect.
To fix this, place the x definition in a higher scope, and use CSS to only show the relevant elements when the page loads. Try this:
$(function() {
'use strict';
var x = 100;
var str = '<ul id="myList">';
for (var i = 0; i < 1000; i++) {
str += '<li>' + i + '</li>';
}
str += '</ul>'
$('#container').append(str);
$('#container').on('scroll', function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
x += 100;
$('#myList li:lt(' + x + ')').show();
}
})
});
#container {
height: 300px;
border: 1px solid;
overflow: auto;
}
.hide {
display: none;
}
.showItem {
display: block;
}
/* This is the required part */
#container li:nth-child(-n+100) {
display: list-item;
}
#container li {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'></div>
Also note that I tidied your use of an IIFE and document.ready handlers.
I really doubt if it is correct way to achieve what you are actually trying to do. Anyway you'r missing hiding elements.
(function(){
'use strict';
$(function(){
var str ='<ul id="myList">';
var x=100;
var initialData ='';
for(var i=0;i<1000;i++){
str+='<li>'+i+'</li>';
}
str +='</ul>'
// complete data in str;
// load only first 100 element
$('#container').append(str);
$('#myList li:gt('+x+')').hide(); // <-- first hide rest of li's
$('#myList li:lt('+x+')').show();
})
$('#container').on('scroll', function() {
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
x+=100;
// HERE you need to hide elements as well
$('#myList li:lt('+x+')').show();
}
})
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>
</div>
Related
I'm stuck at how to proceed with my custom pagination. In the example I don't have the content part but I know how to do that, just hide and show base on the index clicked.
I'm stuck at how to split and handle the element into better UX, like this
http://jsbin.com/qulipamecu/1/edit?html,css,js,output
var html = '';
for(var i in item){
html += '<li>' + item[i] + '</li>';
}
To do split the UI for the pagination is not really that hard, depending on how complex you wish to make it
As an example, I re-implemented the code in your jsbin without the help of jQuery, and added a function called isPageInRange, this function will check if your page is currently in range, and return true or false for it.
So the main logic changes are the following:
for(var i in item){
if ( isPageInRange( curPage, i, pageLen, 2, 2 ) ) {
html += '<li data-page="' + i + '">' + item[i] + '</li>';
// as we added a page, we reset the separatorAdded
separatorAdded = false;
} else {
if (!separatorAdded) {
// only add a separator when it wasn't added before
html += '<li class="separator" />';
separatorAdded = true;
}
}
}
In case the page is not in range, you can just add a separator (when not added yet -> you don't want multiple separators next to each other)
The sample assumes that:
You want to have the first 2 pages always visible
You want the last 2 pages always visible
You want to configure how many pages before and after your current page should be active
For the rest, I made some small changes, eg:
(active) selection is based on data-page attribute
full div is clickable (and click handler is added only the first time)
full div is re-rendered when the pages change
var pageLen = 20;
var curPage = 2;
var item = [];
for(var i = 1; i<=pageLen;i++){
item.push(i);
}
function isPageInRange( curPage, index, maxPages, pageBefore, pageAfter ) {
if (index <= 1) {
// first 2 pages
return true;
}
if (index >= maxPages - 2) {
// last 2 pages
return true;
}
if (index >= curPage - pageBefore && index <= curPage + pageAfter) {
return true;
}
}
function render( curPage, item, first ) {
var html = '', separatorAdded = false;
for(var i in item){
if ( isPageInRange( curPage, i, pageLen, 2, 2 ) ) {
html += '<li data-page="' + i + '">' + item[i] + '</li>';
// as we added a page, we reset the separatorAdded
separatorAdded = false;
} else {
if (!separatorAdded) {
// only add a separator when it wasn't added before
html += '<li class="separator" />';
separatorAdded = true;
}
}
}
var holder = document.querySelector('#holder');
holder.innerHTML = html;
document.querySelector('#holder>li[data-page="' + curPage + '"]').classList.add('active');
if ( first ) {
holder.addEventListener('click', function(e) {
if (!e.target.getAttribute('data-page')) {
// no relevant item clicked (you could however offer expand here )
return;
}
curPage = parseInt( e.target.getAttribute('data-page') );
render( curPage, item );
});
}
}
render( 2, item, true );
#holder > li {
padding: 5px;
margin: 2px;
display: inline-block;
}
#holder > li[data-page] {
border: solid #a0a0a0 1px;
border-radius: 5px;
}
#holder > li.separator:before {
content: '...';
}
#holder > li.active {
background-color: darkblue;
color: #fff;
}
#holder > li[data-page]:hover {
cursor: pointer;
}
<div id="holder"></div>
I am writing some pure Javascript that requires me to add elements to a flex container dynamically row by row. To my surprise, My mouseover event propagate across the row and trigger the other children even though it shouldn't. Below is my code:
function drawChildren() {
var size = Math.floor(containerSize / childSize);
var counter = 1;
var parent = document.getElementById(parentId);
for(var rowCount = 1; rowCount <= size ; rowCount ++) {
var row = document.createElement('div');
row.id = `${parentId}-rowDiv-${rowCount} `;
row.setAttribute('style', `
height: ${childSize}px;
width: ${containerSize}px;
display: flex;
flex-direction:row; `);
for(var child = 1; child <= size ; child ++) {
var childDiv = document.createElement('div');
childDiv.id = `${parentId}-childDiv-${counter}`;
childDiv.setAttribute('style',`
height: ${childSize}px;
width: ${childSize}px;
background-color: ${getRandomColor()};`);
childDiv.addEventListener("mouseover", onMouseOver);
childDiv.addEventListener("mouseleave", onMouseLeave);
row.appendChild(childDiv);
counter ++;
}
parent.appendChild(row);
}
onmouseover , I called the function below:
function onMouseOver(e) {
e.stopPropagation();
document.getElementById(e.target.id).style.display = 'none';
console.log(e.target.id);
}
The problem is, whenever I mouseover on an object, it propagates across the row and fires the mouseover event for all the other items on the same row. It does fire one at a time also. I tried to stop propagation by adding the js stopPropagation() prop yet nothing change. Please what is causing this and how do I address it? Any help would be appreciated.
The JS logic works just fine after removing the syntax used for getting the variables for size and parentId (which I'm guessing is from JSP). May be the backtick (`) used is the issue.
OR
You are referring to the problem where hovering on first child of the row hides the entire row.
Here, display:none; will be the culprit and you can use visibility: hidden; instead.
display: none; will remove the element from the layout, freeing its space taken from the layout and thus, allowing the next element to take up its space.
In the question, hovering on 1st child frees the space which is now taken by the 2nd element. Since your mouse is still at the same position, it will now remove the 2nd element and the cycle goes so on.
visibility: hidden; only hides the element while retaining its space in the layout of the page.
Here's a working snippet of your code (with display: none; and visibility : hidden;):
var containerSize = 200,
childSize = 50;
function onMouseOverDisplay(e) {
e.stopPropagation();
document.getElementById(e.target.id).style.display = 'none';
console.log(e.target.id);
}
function onMouseOverVisibility(e) {
e.stopPropagation();
document.getElementById(e.target.id).style.visibility = 'hidden';
console.log(e.target.id);
}
function setAttr(elem, attrs) {
for (var attr in attrs) {
if (attrs.hasOwnProperty(attr)) {
elem.setAttribute(attr, attrs[attr]);
}
}
}
function drawChildren(parentId) {
var size = Math.floor(containerSize / childSize),
parent = document.getElementById(parentId),
counter = 1,
rowCount, childCount, row, childDiv;
for (rowCount = 1; rowCount <= size; rowCount++) {
row = document.createElement('div');
row.id = parentId + "-rowDiv-" + rowCount;
row.setAttribute('style', "height: " + childSize + "px; width: " + containerSize + "px; display: flex; flex-direction: row;");
for (childCount = 1; childCount <= size; childCount++) {
childDiv = document.createElement('div');
childDiv.id = parentId + "-childDiv-" + rowCount + "-" + childCount;
childDiv.setAttribute('style', "height: " + childSize + "px; width: " + childSize + "px; background-color: cyan; border: 1px solid red;");
if (parentId === 'tab-display') {
childDiv.addEventListener("mouseover", onMouseOverDisplay);
} else if (parentId === 'tab-visibility') {
childDiv.addEventListener("mouseover", onMouseOverVisibility);
}
// childDiv.addEventListener("mouseleave", onMouseLeave);
row.appendChild(childDiv);
counter++;
}
parent.appendChild(row);
}
}
drawChildren('tab-display');
drawChildren('tab-visibility');
<h2>Using Display None</h2>
<div id="tab-display"></div>
<h2>Using Visibilty Hidden</h2>
<div id="tab-visibility"></div>
Is it possible for li elements animation from here:
http://jsfiddle.net/8XM3q/light/
to animate when there is show/hide function used instead of remove?
When i have changed "remove" to "hide" elements didn't move: http://jsfiddle.net/8XM3q/90/
I wanted to use this function for my content filtering animations - thats why i have to replace "remove" to "hide/show".
I'm not good at JS but i think that it counts all elements, even when they are hidden:
function createListStyles(rulePattern, rows, cols) {
var rules = [], index = 0;
for (var rowIndex = 0; rowIndex < rows; rowIndex++) {
for (var colIndex = 0; colIndex < cols; colIndex++) {
var x = (colIndex * 100) + "%",
y = (rowIndex * 100) + "%",
transforms = "{ -webkit-transform: translate3d(" + x + ", " + y + ", 0); transform: translate3d(" + x + ", " + y + ", 0); }";
rules.push(rulePattern.replace("{0}", ++index) + transforms);
}
}
var headElem = document.getElementsByTagName("head")[0],
styleElem = $("<style>").attr("type", "text/css").appendTo(headElem)[0];
if (styleElem.styleSheet) {
styleElem.styleSheet.cssText = rules.join("\n");
} else {
styleElem.textContent = rules.join("\n");
}
So my question is how to adapt that part of code to count only "show" (displayed) elements?
If you want to have the animation and still have all of the data then use detach() function instead of remove: jQuery - detach
And to count or select elements try to do this using css's class attached to each element.
I edited your jsFiddle:
http://jsfiddle.net/8XM3q/101/
notice that I changed this line:EDIT: http://jsfiddle.net/8XM3q/101/
$(this).closest("li").remove();
to this:
$(this).closest("li").hide("slow",function(){$(this).detach()});
This means hide the item, speed = slow, when done hiding remove it.
Hope this is what you meant.
EDIT: Included detach.
As per your comment:
I wanted to use this function for my content filtering animations -
thats why i have to replace "remove" to "hide/show" I don't want to
remove elements at all. Im sorry if I mislead You with my question.
What you can do is to use a cache to store the list-items as they are hidden when you do the content filtering. Later when you need to reset the entire list, you can replenish the items from the cache.
Relevant code fragment...
HTML:
...
<button class="append">Add new item</button>
<button class="replenish">Replenish from cache</button>
<div id="cache"></div>
JS:
...
$(this).closest("li").hide(600, function() {
$(this).appendTo($('#cache'));
});
...
$(".replenish").click(function () {
$("#cache").children().eq(0).appendTo($(".items")).show();
});
Demo Fiddle: http://jsfiddle.net/abhitalks/8XM3q/102/
Snippet:
$(function() {
$(document.body).on("click", ".delete", function (evt) {
evt.preventDefault();
$(this).closest("li").hide(600, function() {
$(this).appendTo($('#cache'));
});
});
$(".append").click(function () {
$("<li>New item <a href='#' class='delete'>delete</a></li>").insertAfter($(".items").children()[2]);
});
$(".replenish").click(function () {
$("#cache").children().eq(0).appendTo($(".items")).show();
});
// Workaround for Webkit bug: force scroll height to be recomputed after the transition ends, not only when it starts
$(".items").on("webkitTransitionEnd", function () {
$(this).hide().offset();
$(this).show();
});
});
function createListStyles(rulePattern, rows, cols) {
var rules = [], index = 0;
for (var rowIndex = 0; rowIndex < rows; rowIndex++) {
for (var colIndex = 0; colIndex < cols; colIndex++) {
var x = (colIndex * 100) + "%",
y = (rowIndex * 100) + "%",
transforms = "{ -webkit-transform: translate3d(" + x + ", " + y + ", 0); transform: translate3d(" + x + ", " + y + ", 0); }";
rules.push(rulePattern.replace("{0}", ++index) + transforms);
}
}
var headElem = document.getElementsByTagName("head")[0],
styleElem = $("<style>").attr("type", "text/css").appendTo(headElem)[0];
if (styleElem.styleSheet) {
styleElem.styleSheet.cssText = rules.join("\n");
} else {
styleElem.textContent = rules.join("\n");
}
}
createListStyles(".items li:nth-child({0})", 50, 3);
body { font-family: Arial; }
.items {
list-style-type: none; padding: 0; position: relative;
border: 1px solid black; height: 220px; overflow-y: auto; overflow-x: hidden;
width: 600px;
}
.items li {
height: 50px; width: 200px; line-height: 50px; padding-left: 20px;
border: 1px solid silver; background: #eee; box-sizing: border-box; -moz-box-sizing: border-box;
position: absolute; top: 0; left: 0;
-webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
}
div.cache { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="items">
<li>Monday delete
</li><li>Tuesday delete
</li><li>Wednesday delete
</li><li>Thursday delete
</li><li>Friday delete
</li><li>Saturday delete
</li><li>Sunday delete</li>
</ul>
<button class="append">Add new item</button>
<button class="replenish">Replenish from cache</button>
<div id="cache"></div>
EDIT: There is a simpler way without adding any classes, is to use the :visible selector
You need to understand a concept is Javascript, which is that functions are considered objects. You can pass a function to another function, or return a function from a function.
Let's check the documentation on jQuery for the hide function
.hide( duration [, easing ] [, complete ] )
It says that it accepts a function as an argument for complete, which is called when the hide animation is complete.
The function hide does not remove the element from the DOM but simply "hides" it as the name suggests. So what we want to do, is hide the element then when the animation of hiding is done, we add a class "removed" to the list element.
We will accomplish that by passing a function (complete argument) like so :
$(this).closest("li").hide(400, function() {
$(this).addClass('removed');
});
When you want to select the list elements that are not "removed", use this selector $('li:not(.removed)')
I have made this minimal test jsfiddle to show images and navigate with thumbnails, next and previous and also run as a slideshow.
It seems to be working OK, except that I can not get the current displayed image to fadeOut prior to the fadeIn of the next image.
Initially all the images were placed in a stack in the #holder DIV and then FadeIn and FadeOut worked as I expected, but I need to have the images in an array and load as required, because there will be several different values, associated with each image.
I probably have made some fundamental mistake or I do not understand how FadeIn and FadeOut properly work, as I am not an expert in javascript and jquery and I just get by, by looking at examples on here and similar sites.
I suspect I may need to somehow force a delay before loading the next image, but I can not work out how to do that.
Thanks
<style type='text/css'>
#holder { position: absolute; top: 100px; background-color:#CCCCCC;
width: 300px; height: 200px;
}
.slides { position: relative; top: 0px;
display: none;
}
#thumbs li
{
display: inline;
list-style-type: none;
padding-right: 6px;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
// define Global Vars
var timerON = null;
var files = [
["http://dummyimage.com/300x200/000/fff&text=Array-01", "http://dummyimage.com/40x40/000/fff&text=01","Title-01"] ,
["http://dummyimage.com/300x200/000/fff&text=Array-02", "http://dummyimage.com/40x40/000/fff&text=02","Title-02"] ,
["http://dummyimage.com/300x200/000/fff&text=Array-03", "http://dummyimage.com/40x40/000/fff&text=03","Title-03"] ,
["http://dummyimage.com/300x200/000/fff&text=Array-04", "http://dummyimage.com/40x40/000/fff&text=04","Title-04"] ,
["http://dummyimage.com/300x200/000/fff&text=Array-05", "http://dummyimage.com/40x40/000/fff&text=05","Title-05"] ,
["http://dummyimage.com/300x200/000/fff&text=Array-06", "http://dummyimage.com/40x40/000/fff&text=06","Title-06"] ,
["http://dummyimage.com/300x200/000/fff&text=Array-07", "http://dummyimage.com/40x40/000/fff&text=07","Title-07"]
]
var numImages = files.length;
// initial routines
showImage(1);
buildThumbs();
function showImage(num) {
//$('#holder img').fadeOut();
if ( $('#holder img').length > 0 ) { // fadeout existing
$("#holder img").fadeOut(700);
//alert("Faded OUT");
}
$("#holder").html('<img id="' + num + '" src="' + files[num-1][0] + '" style="display:none;"' + '" />');
$("#holder img").fadeIn(700);
//alert("Faded IN");
}
function buildThumbs() {
var thumbs = "";
for (cnt=0; cnt<files.length; cnt++) {
thumbs += '<li><a href="#" id="' + (cnt + 1) + '"><img src="' + files[cnt][1] + '" /></li>';
}
$('#thumbs').html(thumbs);
}
// Initialise routines for acting on click events
$(document).ready(function() {
$('#prev').click( function () {
var currImage = parseInt($('#holder img:visible').attr("id"));
if (currImage == 1) {
// at first position
}
else {
showImage(currImage-1); }
});
$('#next').click( function () {
var currImage = parseInt($('#holder img:visible').attr("id"));
if (currImage == numImages) {
// at last position
}
else {
showImage(currImage+1);
}
});
$('#thumbs a').click( function () {
var selImage = parseInt($(this).attr('id'));
var currImage = parseInt($('#holder img:visible').attr("id"));
showImage(selImage);
});
$('#slideShowBtn').click( function () {
slideShowCheck();
});
});
function slideShowCheck() {
if(timerON != null) {
clearTimeout(timerON);
timerON = null;
$('#slideShowBtn').text('Play Slideshow');
} else {
$('#slideShowBtn').text('Stop Slideshow');
slideShow();
}
}
function slideShow() {
var nextImage = 0;
var currImage = parseInt($('#holder img:visible').attr("id"));
if (currImage == numImages) {
nextImage = 1;
} else {
nextImage = currImage + 1;
}
showImage(nextImage);
timerON = setTimeout(slideShow, 3000);
}
});//]]>
</script>
</head>
<body>
<p>
<button id="prev">« Prev</button>
<button id="next">Next »</button>
</p>
<ul id="thumbs">
</ul>
<p>
<button id="slideShowBtn">Play Slideshow</button>
</p>
<div id="holder">
</div>
<div style="clear:both;"></div>
<ul id="thumbs2">
</ul>
</body>
</html>
Callbacks, callbacks, callbacks.
JS does alot of things async, so you will need to make use of a callback on that fadein.
$(ITEM1).fadeOut("fast", function() {
alert("all the way faded out");
$(ITEM2).fadeIn("fast");
});
Here's your fixed fiddle.
I am working on a wordpress website who's client would like me to adjust our AdSanity plugin to display groups of ads in a rotating image gallery fashion like the ones on this page. The leaderboard ads for sure are AdSanity run. I was able to stem from viewing the source that this is the script I need:
$(function() {
var adsLists = $('.adsanity-group'),
i = 0;
var divs = new Array();
adsLists.each(function() {
divs[i] = $("#" + $(this).attr('id') + " div").not(".clearfix").hide();
i++;
});
var cycle_delay = 12000;
var num_groups = $('.adsanity-group').length;
function cycle(divsList, i) {
divsList.eq(i).fadeIn(400).delay(cycle_delay).fadeOut(400, function() {
cycle(divsList, ++i % divsList.length); // increment i, and reset to 0 when it equals divs.length
});
};
for (var j = divs.length - 1; j >= 0; j--) {
if (divs[0].eq(0).attr('num_ads') > 1)
cycle(divs[j], 0);
else
divs[j].show();
};
//////////
$('#slides').slidesjs({
width: 552,
height: 426,
navigation: false,
play: {
auto: true
}
});
//////////
$('.three_lines_fixed').each(function() {
$clamp(this, {
clamp: 3
});
});
var top_divs = $("#adspace div").not(".clearfix").hide(),
top_i = 0;
var top_num_ads = $('#adspace > div').attr("num_ads");
var top_cycle_delay = 12000;
function top_cycle() {
top_divs.eq(top_i).fadeIn(400).delay(top_cycle_delay).fadeOut(400, top_cycle);
top_i = ++top_i % top_divs.length; // increment i,
// and reset to 0 when it equals divs.length
};
if (top_num_ads > 1) {
top_cycle();
} else {
top_divs.show();
}
var site_url = $("body").attr("site_url");
$("#brpwp_wrapper-2 ul").append("<li style='text-align: center;'><a class='widgetized_read_more' href='" + site_url + "/2013'>Read More</a></li>")
/**/
And some of that I don't believe I need, like the three_lines_fixed or the slides. I also have the CSS used for #adspace:
div.header div#adspace {
float: right;
max-width: 728px;
max-height: 90px; }
div.header div#adspace img {
float: right; }
There is also this CSS:
div#page .main_content ul.widgets li.adspace {
display: none; }
On my site http://dsnamerica.com/eisn/ I want the 300px width ads on the right sidebar to rotate like those on the Vype site. These ads though are not listed with ul and li, they are divs.
So far I've added this to my header.php theme file right before the closing tag:
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/fading-ads.js"></script>
And in that file (js/fading-ads.js), I have this:
function adsanitygroup() {
var adsLists = $('.adsanity-group'),
i = 0;
var divs = new Array();
adsLists.each(function() {
divs[i] = $("#" + $(this).attr('id') + " div").not(".clearfix").hide();
i++;
});
var cycle_delay = 12000;
var num_groups = $('.adsanity-group').length;
function cycle(divsList, i) {
divsList.eq(i).fadeIn(400).delay(cycle_delay).fadeOut(400, function() {
cycle(divsList, ++i % divsList.length); // increment i, and reset to 0 when it equals divs.length
});
};
for (var j = divs.length - 1; j >= 0; j--) {
if (divs[0].eq(0).attr('num_ads') > 1)
cycle(divs[j], 0);
else
divs[j].show();
var top_divs = $("#adspace div").not(".clearfix").hide(),
top_i = 0;
var top_num_ads = $('#adspace > div').attr("num_ads");
var top_cycle_delay = 12000;
function top_cycle() {
top_divs.eq(top_i).fadeIn(400).delay(top_cycle_delay).fadeOut(400, top_cycle);
top_i = ++top_i % top_divs.length; // increment i,
// and reset to 0 when it equals divs.length
};
if (top_num_ads > 1) {
top_cycle();
} else {
top_divs.show();
};
};
}
That is my attempt to define the function and clean out what I didn't need. I don't think, no, I know it's not right. So I'll put my questions in a list, since this post is already wordy.
1) Did I link the js file correctly in the theme's header.php file? It's right before the closing </head> tag.
2) Do I need the second CSS part that says "display: none" and if so, how do I change the CSS to work with divs instead of ul and li? Do I just change div#page .main_content ul.widgets li.adspace {
display: none;}
to
div#page .main_content .widgets .adspace {
display: none; }
then add the class .adspace to the widget?
See, I have been trying to get this to work for a couple days now and I've thought so much on it I'm not making cohesive theories anymore, just shots in the dark. How to solve this?