I am using infinite scroll js (with behaviour set to twitter) to load in new contents on the index page. My concern is, how do I re-initiate animistion on the new posts that are being loaded via infinite scroll? I have described in detail the page structure being followed and would appreciate it very much if anyone can kindly share a solution for the same.
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div class="animsition">
<header class="header"></header>
<main class="main">
<section class="main-body">
<div id="infinite-scroll">
<article class="post">
<div class="post-body">
<h2 class="post-title">
<h2>
</div>
</article>
</div>
<div class="pagination">
Load Older Items
</div>
</section>
</main>
<footer class="footer"></footer>
</div>
</body>
</html>
And here is the JS,
$(".animsition").animsition({
inClass : 'fade-in',
outClass : 'fade-out',
linkElement : '.nav-link',
overlay : false
});
$(function() {
$("#infinite-scroll").infinitescroll({
navSelector: ".pagination",
nextSelector: ".next",
itemSelector: ".post",
behavior: "twitter"
},
function(newElements){
});
I was running into this same problem (animsition + infinite scroll) and couldn't find a good answer here on SO or anywhere else for that matter so I performed some minor surgery on the animsition.js source with nice results.
If you take a look at line 66 (in the current state) you'll see where animsition is binding to link clicks and inserting the animation.
$(options.linkElement).on("click." + namespace, function(event) {
...
}
If we instead use a little Javascript event delegation then we can effectively say "bind to all anchors/links on the page now and in the future". So something like...
$("body").on("click." + namespace, options.linkElement, function(event) {
...
});
This is just a hack on my end for now but I'm going to go back later (when I'm not under the gun on a project) to do a proper fork, test, pull request, etc and try to get it into the main project. Hope this works for you and anyone else for now though.
Related
The following script is the most common I found to be used for managing the preloader but does this actually work or is it just some stuff we display for few seconds and assume the content of the site would have been loaded by then?
Here is that script.
$(document).ready(function() {
$(window).on('load', function() {
$('.loader').fadeOut(); // will first fade out the loading animation
$('.preloader').delay(1000).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(1500).css({'overflow':'visible'});
});
});
and then the HTML
<body>
<div class="preloader">
<div class="loader"> .... </div>
</div>
<div class="content">...</div>
Another thing i would like to ask is if we can have a simple preloader that actually works with just JavaScript instead of jQuery.... there seems to be some problem displayed in console when using the latest version of jQuery
Thanks in advance
I've found here, on Stackoverflow, function, which should toggle between multiple divs. I tried it in JSFiddle and it worked. But for me, on website, it doesn't work. I am really not good at javascript / jQuery, so I will be really glad for any help! And one more thing - is it possible to set link, that I just clicked on add class "active", that it would have underline or something, to see which section is selected??
Thanks!
-- FIDDLE HERE: https://jsfiddle.net/vkmw86bp/
Code is below.
HTML:
<div id="sluzby-nabidka" class="section">
<div class="sluz">div 1</div>
<div class="sluz">div 2</div>
<div class="sluz">div 3</div>
<div class="sluz">div 4</div>
<div class="sluz">div 5</div>
</div>
<div id="text-sluzba" class="section">
<div id="slidingDiv" class="slide-div">1</div>
<div id="slidingDiv_2" class="slide-div" style="display:none;">2</div>
<div id="slidingDiv_3" class="slide-div" style="display:none;">3</div>
<div id="slidingDiv_4" class="slide-div" style="display:none;">4</div>
<div id="slidingDiv_5" class="slide-div" style="display:none;">5</div>
</div>
JS:
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide',
slideDiv: '.slide-div'
};
var options = $.extend(defaults, options);
return this.each(function () {
$(this).click(function () {
$(options.slideDiv).hide();
// this var stores which button you've clicked
var toggleClick = $(this),
toggleDiv = $(this).data('slide-id');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).fadeToggle(options.speed, options.easing, function () {
// this only fires once the animation is completed
// if(options.changeText==0){
//$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
//}
});
});
});
};
$('a').showHide({'slideDiv' : '.slide-div'});
Since I don't have enough reputation yet to add a comment, I'll speak to the issue and then ask for more information, if necessary.
When I loaded your JSFiddle, it didn't work because a JQuery library was not included in the fiddle itself. Once I switched the Frameworks & Extensions selection to any JQuery library, I hit Run and it worked. So this, IMO, means that your JQuery import is either in the wrong place in the HTML DOM, or you're not waiting for the DOM to be ready before hitting the code you provided. Som examples:
<html>
<head>
<title>
</title>
<!-- normally, JQuery script gets added here -->
<script type="javascript" src="path/to/jquery.js"></script>
</head>
<body>
<!-- then, import the above code here, either as a separate JS file or inside some <script></script> tags -->
<script type="javascript" src="path/to/showHide.js"></script>
</body>
</html>
Also, you should wrap the code you provided with:
$(document).ready(function() {
// Your code here
});
This will ensure that the JQuery code doesn't execute until the DOM is loaded. It seems to me that your code is running before the DOM is ready so the lookup isn't finding any anchor tags to attach the showHide functionality to when you make this call:
$('a').showHide({'slideDiv' : '.slide-div'});
I'm running an asynchronous 3rd party script that loads an image gallery into my page, but unfortunately their code doesn't provide me with a callback after their image gallery has finished loading.
The modal starts off like this:
<div class="modal-body">
<div class="container-fluid" id="cincopa">
</div>
</div>
After the gallery is loaded, the modal looks like this:
<div class="modal-body">
<div class="container-fluid" id="cincopa">
<div id="ze_galleria">
//gallery stuff
</div>
</div>
</div>
So I need some way to display a loading animation until #ze_galleria appears. The loading animation function I can do myself, but is there something in jQuery that will listen for when a certain DOM element is created? Once the DOM element appears, it'll run the callback to remove the animation.
Based on how that script adds the gallery/gallery items you could use the DOMSubtreeModified event and then check if that particular item were added
document.addEventListener("DOMSubtreeModified", function(e) {
if (document.querySelector("#ze_galleria")) {
// exists
}
});
Here is a DOM tree event list, where you can check other possible events that might could be used.
https://developer.mozilla.org/en-US/docs/Web/Events
Update
Make sure you take a look at the MutationObserver as well, as it has very good browser support nowadays.
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
Also, you can set an interval:
var cincopa = $('#cincopa');
var counter = 0;
var intervalCode = setInterval(function(){
if (cincopa.find('#ze_galleria').length){
clearInterval(intervalCode);
yourCallback();
}
counter++;
console.log(counter + ' seconds past till the event loaded.');
}, 1000);
I think the code is intuitive, but if there is any doubt, just ask :)
Presuming that your "3rd party library" is going to totally overwrite the contents of what ever you point it at (as your example code suggests it does). You can solve your problem simply by adding an img:
<div class="modal-body">
<div class="container-fluid" id="cincopa">
<img src="loading.gif"/>
</div>
</div>
When the library has done what it needs to do it will overwrite the contents of the div <div class="container-fluid" id="cincopa"> resulting in:
<div class="modal-body">
<div class="container-fluid" id="cincopa">
<div id="ze_galleria">
//gallery stuff
</div>
</div>
</div>
thus removing your loading image.
By the code alone, the scripts and libraries loaded in two pages are identical, the same template used, just slight difference in main content, but leanmodal works only while on the index page, but NOT in any other page.
<script type="text/javascript" src="js/jquery.leanModal.min.js"></script>
<a id="modal_trigger" href="#modal">Login/Register</a>
<div id="modal" class="popupContainer" style="display:none;">
<header class="popupHeader">
<span class="header_title">site.lt</span>
</header>
<section class="popupBody">
<!-- Social Login -->
<div class="social_login">
<div class="">
<script type="text/javascript">
$("#modal_trigger, #add_ad").leanModal({top : 200, overlay : 0.6, closeButton: ".modal_close" });
$(function(){
// Calling Login Form
$("#login_form").click(function(){
$(".social_login").hide();
$(".user_login").show();
$(".password_reset").hide();
return false;
});
You can try it here (click "Prisijungti/UÅūsiregistruoti" in the top right corner) http://www.bilietukai.lt . Can't see anything relevant in console either, well at least I can not see it, because I'm more a PHP guy currently and not good enough in JS/jQuery yet.
Alex Taker found the issue, the relative path of js script. So obvious I just lost the forest for the trees when looking for the problem.
can anyone help me out, been banging my head against a wall for 2 days! Trying to get iScroll to work with my phonegap/jqtouch app. Have tried all the suggestions I can find on the Internet, but all I get is either no scrolling or rubber banding so I can't view the bottom of the page.
My code in a nutshell is:
HTML header:
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript" src="iscroll-lite.js"></script>
<script type="text/javascript" src="myAppCode.js"></script>
<script type="text/javascript">
var myScroll;
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
function onDeviceReady()
{
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
}
function loaded()
{
myScroll = new iScroll('wrapper');
myScroll.refresh();
}
</script>
HTML (I've added the 'wrapper' and 'scroller' divs):
<!-- Options Page header bar-->
<div id="options_page">
<div class="toolbar">
<h1>Past Paper</h1>
<a class="button flip" href="#reset_page">Reset Stats</a>
</div>
<!-- why won't you scroll??? -->
<div id="wrapper">
<div id="scroller">
<!-- Stats section div - dynamically generated stats by refreshStats() -->
<div id="Stats"></div>
<h2>General</h2>
<ul class="rounded">
<li>Only new questions?<span class="toggle"><input type="checkbox" id="notSeen" /></span></li></ul>
<h2>Categories</h2>
<ul class="rounded">
<li>Cardiology<span class="toggle"><input type="checkbox" id="cardiology" /></span></li>
<li>Respiratory<span class="toggle"><input type="checkbox" id="respiratory" /></span></li>
<li>Gastrointestinal<span class="toggle"><input type="checkbox" id="gastrointestinal" /></span></li>
<li>Neurology<span class="toggle"><input type="checkbox" id="neurology" /></span></li>
</ul>
<div id="optionStartQuiz">
<ul><li class="whiteButton">Start!</li></ul>
</div>
</div>
</div>
</div>
myAppCode.js contains the refreshStats() function to display info in the Stats div above:
$(document).ready(function()
{
// load variables from local storage
loadLocalStorage();
// load the stats div
refreshStats();
// refresh scores everytime the main page is loaded
$('#main_page1').bind('pageAnimationStart', function(){
refreshStats();
});
});
function refreshStats()
{
// an HTML ul
var tempStats = '<h2>Current Stats</h2><ul class="rounded"><li>Questions completed<span style="float: right">' + OVERALL_questionsFirstTime + '/' + OVERALL_numberOfQuestions + '</span></li><li>Percentage correct<span style="float: right">' + percentageScore + '%</span></li></ul>';
// display me
$('#Stats').html(tempStats);
}
So basically I want to be able to scroll the stuff within the wrapper and scroller divs but can't get my head around it! Thanks, Nick
I was having the same problem. The div that was supposed to scroll would exhibit rubberbanding until I changed the orientation on the iphone. I tried the timeout methods from the iscroll doc page but nothing worked.
Using v4.0 beta4 I added
checkDOMChange: true
when creating my scroll wrapper. This works like a charm. Not really sure what the problem was but I am using this in a jQTouch page.
One thing to note, the checkDOMChange: is listed as being experimental...
hth
Ok finally got this working. To get jQTOuch and iScroll to play nice with each other, the scrolling areas on the page need to be reset each time JQTouch makes them disappear. In other words, once you hide the div, iScroll doesn't know what to scroll the next time it's made visible. So as a result, you get the infamous rubberband effect. To solve this, just add an event listener that resets the scrolling area right after the div is called. Make sure you give it 100 to 300ms delay. This code below assumes your variable is called myScroll:
$(".about").tap(function(){
setTimeout(function(){myScroll.refresh()},300);
});
And on a side note, here's how to establish multiple scrollers using iScroll:
var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('wrapper1');
scroll2 = new iScroll('wrapper2');
}
Hope this helps someone.
I was facing the same issue. My element used just to bounce and settle back.
I edited the scroll.js to make checkDOMChanges:true and it started working fine.
This is my solution.
$("a").tap(function(){
setTimeout(function(){myScroll.refresh()},300);
});
The codes above assume that your iScroll variable is myScroll,
and the code is force your iScroll to refresh as you tap a link.
I'm not sure about iScroll4, but the original iScroll depended on CSS classes to scroll correctly - specifically, the wrapper needed to be positioned, and have overflow set - in the demo for iScroll4 I see they are still setting similar properties on the wrapper and the scroller:
http://www.cubiq.org/dropbox/iscroll4/examples/simple/
I'm not sure if you've already done this (and just didn't include the CSS) - but your code looks fine.
I've had inordinate troubles with iScroll (pre-iScroll4, haven't tested 4 yet) getting it to work with DIVs instead of UL lists. BUT... today I found a post in google groups (see reply by manmade at 9:59) where it is suggested to add a line:
that.refresh();
into the iScroll code around line 81. In the latest iScroll (v3.7.1), this line is added at line 85, within the case for "START_EVENT" just after the line:
that.touchStart(e);
I haven't analyzed exactly why it works, but it works for getting my div to scroll perfectly.