I have a an app that I will port to Phonegap, and I am using iScroll 5 to handle some aspects of the scrolling.
This app is built with some CSS from Ratchet, but quite modified, and just about all the Ratchet javascript has been removed; also jQuery; FastClick.js.
The app is a single HTML file (not using push.js from Ratchet), and divided into Pages that are inside a master Content area, and change with CSS3 transitions. So far, iScroll is used in two places; initialized at the same time with two different calls to IScroll("#id").
The first iScroll works fine - it is just a simple set of sections with paragraphs scrolling between two fixed header/footer bar elements.
The second one wraps an entire page that shows on an internal transition. In other words, its not a page as described above, but it is a full width element that is taller than the page, and sits beneath the header and one other button set. That may or may not be important, but when it shows the first time, there is nothing anywhere I can do to get it to initialize properly.
Since the js variable is global, I can see it, and this is what I have noted so far:
> myScroll.initiated=0
> myScroll.enabled=true
> myScroll.scrollBy and myScroll.scrollTo both work as expected
> myScroll.refresh() and myScroll.resetPosition called from
js file or from console have no effect whatsoever
I am using Chrome with touch events enabled for development, but the behavior is replicated on my iPhone. The div (which only contains a simple list) responds to touchmove events, in that they are logged in the console, but there is literally no scrolling movement at all. I believe that there is probably a bug related to multiple layers being positioned with transitions, but I don't know what to do next.
Can anyone offer some guidance on,
How To Fix This
Or failing that, what is the best placed to look to debug this, and find out why nothing is happening.
Thanks
Related
I am having a listener for displaying tooltips on hover which calculates the position of it using the jquery $.offset function.
On IE 11 I am getting horrible performance everytime that the listener is triggered causing a delay on showing the tooltip or even the hover css class of the element.
The part where the target elements are is embed on an angular app, if I load it directly the performance is just fine like in other browsers and I can see the call to getBoundingClientRect takes small time but if I interact with other views on angular before going to this one then the performance goes bad as it is shown in the screenshot.
(I know I shouldn't use jquery inside angular but I am pretty sure the problem is not because of that since it is working the first time I load the page and in other browsers too)
How could I avoid this layout recalculation or how I could find out what is causing this issue ?
I have a feeling what ever gave me problems that I tried to find a solution in this question - Can't trigger a jquery function with scroll on a particular div - might be responsible for scroll related issues here.
Short version: Can't get this, or anything similar, to work
$("#Container3").scrollTop(0);
Nothing happens really, no error in the console, no wierd behaviour, just seems to ignore the scrollTop(0) request.
Long version: I'm sorry but posting a code snippet isn't feasible as it's a complex app-like interface but I'll try to explain the issue to the best of my abilities:
Mobile responsive website that loads different interfaces depending on screen real-estate.
Smallest interface composed of 3 parts - navigation at the top, search at the bottom and content in the middle.
Content is mostly loaded during use and not at page load.
At the push of a button that re-loads the contents of a particular div I also need to scroll that div to the top for usability purposes.
While it doesn't seem to influence my problem (removing it doesn't solve the issue) I should disclose that I'm using hammer.js to simulate touch events as it might influence the solution.
The load is done outside the viewport so animations aren't needed but I'll take them as long as they get this to work.
This is what my jquery request looks like
$(document).on("click",".NavRowButton",function(event){
$("#Container3").scrollTop(0);
var $targetButtonId=$(event.target).attr("id");
$("#Content").load("/load/login/"+$targetButtonId+".php");
$("#DisplayContentName").html("<span class='NavColSpan'>"+$targetButtonId+"</span>");
$("#Container3").find(".WindowBorder").css("top","0");
});
#Container3 has the scroll bar and is the immediate parent of #Content.
This is a function I'm still building and is the solution for the problem I had before and also what I'm using now to help debugging this one:
document.addEventListener('scroll',function(event){
if(event.target.className==='Container'){
var $currentScroll=$(event.target).scrollTop();
console.log($currentScroll);
var $targetId=$(event.target).attr("id");
console.log($targetId);
}
},true);
Thanks in advance.
Edit: I just noticed that if I put a $(event.target).scrollTop(0); at the end of the scroll distance debugging function it actually resets the scroll so it seems that as long as the div is the event.target it works while from the outside as during the click function I might not selecting it appropriately.
Edit2: I just learned I can cache event.targets into variables and with a .get() inside the click function I'm sure I'm selecting the right element so it just leaves how the scrollTop(0) method works.
They now look like this(also had to add a condition to limit load events):
global variable:
$DivTestVar="";
click:
$(document).on("click",".NavRowButton",function(event){
var $targetButtonId=event.target.id;
if($targetButtonId != $("#DisplayContentName").html()){
$($DivTestVar).scrollTop(0);
console.log($($DivTestVar).get());
$("#Content").load("/load/login/"+$targetButtonId+".php");
$("#DisplayContentName").html($targetButtonId);
$("#Container3").find(".WindowBorder").css("top","0");
};
});
scroll debugging:
document.addEventListener('scroll',function(event){
if(event.target.className==='Container'){
$DivTestVar=event.target;
var $currentScroll=$($DivTestVar).scrollTop();
console.log($currentScroll);
var $targetId=event.target.id;
console.log($targetId);
}
},true);
If I click before scrolling the console.log($($DivTestVar).get()); returns empty but if at the first scroll it starts returning the correct DOM element. The scrollTop(0) is ignored anyway.
Edit3: I just want to leave a small update. I have since given up on the method I was trying to use here for something with a similar effect but not as user friendly as what I was trying to achieve. As such I no longer care about this personally but if you're reading this and have a similar problem I have come across this issue a couple more times to a smaller effect and I now think it's related to position:fixed; elements and how scrollTop() deals with that but I don't have the time to delve into it more so good luck and godspeed.
Did you try the pure JS version ?
document.getElementById('Container').scrollTop = 0
You have two possibilities, as far as I know.
1-Scroll the whole page until it reached the top of your #Content div position with jQuery.
2-Your #Content is inside a div with scroll, which scrollTop(0) will work for that (example: http://jsfiddle.net/zkp07abu/).
First off, I am sorry in advance- anyone who reads this is going to hate me.
So, I am currently finishing a webpage for a client. Things are going decently, except I'm having a bit of an issue with the positioning of an element. There is a little contact box that is supposed to slide in from the side when you click on it. The issue is that I basically have had my hands tied, and I have to use wordpress for this page, and this contact box is a plugin that the original author of this page chose. For some reason- this contact box always ends up behind other elements. I tried setting the z-index in the source code of the plugin by finding the name of the variable that is supposed to hold the instance of the slider- and I could not get anything to work (partially because I havent used jquery in a while, and, this isn't my plugin). I tried using the .zIndex function, but, it kept throwing errors. So, I went to CSS. I got the IDs of the wrapper and the actual box itself, and set their z-index to 100. This did nothing, which has left me stumped. Unfortunately, I can only provide links to the site, and a pastebin of the plugin's code- since the source code for the website is huge... and I also dont actually have access to the server- only the WordPress admin page (which doesnt allow me to edit the source of pages)
http://pastebin.com/NX8AnB16 - pastebin of the plugin source
http://buyinghouseinusa.com/ - the site i am currently trying to finish
If anyone could help me figure out what I need to apply the z-index to to make the stupid contact form stay on top, I would be very greatful. I apologize for the inconvenience of not having the actual code offhand (with the exception of what the browser can show me)
z-index only applies to positioned elements.
Then, in order to make div.dwp-contact-wrapper{z-index: 2000} work, you need
div.dwp-contact-wrapper {
position: relative;
}
I'm working on a website using scrollmagic.
I have pinned a div and made a wipe with translate y, the problem is when I resize my window the section pin seems to lost its height and hide the rest of the content.
I believe it might be an error about what is loaded first
Here my site http://eloisemonteiro.hol.es/ ,
I put also here the but the scrollmagic doesnt seems to work:
http://jsfiddle.net/5k2p88o3/
The problem with your fiddle is, that the paths to your Libs are wrong.
Current: http://jsfiddle.net/yeEBa/jquery.scrollmagic.min.js
Correct: https://rawgit.com/janpaepke/ScrollMagic/master/js/jquery.scrollmagic.min.js
Modernizr was non-existent...
Correct: http://modernizr.com/downloads/modernizr-latest.js
Furthermore there were scripts mixed into the HTML code, that were executed before the controller was even initiated.
Once you correct these issues your wipe seems to be working as expected:
http://jsfiddle.net/5k2p88o3/1/
On your other page I was unable to reproduce your issue.
If it persists I invite you to post an issue in the appropriate section of the GitHub project: https://github.com/janpaepke/ScrollMagic/issues
If you decide to do that, please make sure to mind the support guidelines:
https://github.com/janpaepke/ScrollMagic/blob/master/CONTRIBUTING.md
take care,
J
Have started a project using jQuery Isotope. Initially integrated with Infinite scroll, but thought it was a little clunky.
Was hoping to replace Infinite Scroll with Lazy Load, and wondered if anyone has had any luck combining the two. Any tips to get them to play nice would be great.
Thanks a mill
If you want to use isotope's sorting/filtering functions, you will need to set the failure_limit of lazyload and trigger the event with isotope's onLayout callback.
jQuery(document).ready(function($) {
var $win = $(window),
$con = $('#container'),
$imgs = $("img.lazy");
$con.isotope({
onLayout: function() {
$win.trigger("scroll");
}
});
$imgs.lazyload({
failure_limit: Math.max($imgs.length - 1, 0)
});
});
Explanation
According to the docs ( http://www.appelsiini.net/projects/lazyload )
After scrolling page Lazy Load loops though unloaded images. In loop it checks if image has become visible. By default loop is stopped when first image below the fold (not visible) is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong.
With an isotope sorted/filtered list, the page order is certainly different from the HTML so we need to adjust our failure_limit.
As you can see we store the jQuery object so that we can use its length-1 as our failure_limit. If you're curious as to why it is length-1, it's because of the following check in lazyload's update method.
if (++counter > settings.failure_limit) {
return false;
}
Lazy load on other events
If you are not triggering your lazyloads on scroll, you will need to swap the "scroll" trigger for whichever event you are using.
Demo
http://jsfiddle.net/arthurc/ZnEhn/
I think you might have some luck using this instead : https://github.com/fasterize/lazyload
It's library independent so won't break.
Here's working code using both jquery isotope and lazyload together successfully (tested in Chrome)
http://jsfiddle.net/wN6tC/62/
In the browser console you will get console.log('loaded image') confirmation when an image is loaded, as you scroll down. Drag the jsfiddle html box to change the width and you will see the layout change dynamically.
I added the background red class so you can see how isotope alters the dom after it loads. Most of the problems while trying to set this up come from, IMHO, isotope's dom manipulation.
I hope this is enough to get you started. Have fun.
Update:
I never tested example in other browsers, and apparently IE or FF failed to work because of the HTTPS references for the javascript resources (for some odd security reason). Replacing them was all that was needed to get it working in IE and FF as seen here:
http://jsbin.com/ajoded/
and
http://jsfiddle.net/wN6tC/73/