Scrolling in web application in iOS with iScroll - javascript

I have a few web applications that were previously developed for use in Android apps, and we're trying to port them to iOS.
The first problem was that the ad we had was not staying in place, since position:fixed is no good in mobile Safari. So, I downloaded iScroll.
I figured out that iScroll doesn't play nice with our RSS feed reader (zRSSFeed for jQuery). In fact, when both are enabled on the same page, the iScroll functionality "works", but gets stuck at the top of the page.
I posted to the iScroll user group (https://groups.google.com/group/iscroll/browse_thread/thread/5dd274ff4159a672) but got no useful answers.
I even tried to change to a different RSS library, but it seems they all elicit this issue.
Has anyone had this issue before? Has anyone solved it? Should I just give up and put the ad at the bottom of the webapp, or what?
Thanks, all.
EDIT: I figured I should add in a bit of code.
Basic structure of web stuff:
....
<div id="appBody">
<div id="feedResults">
<!-- rss entries go here -->
</div>
</div>
<div id="appAdvertisements">
<!-- admob JS stuff goes here -->
</div>
....
Basic JS:
var scroll;
document.addEventListener('touchmove', function (e) { e.preventDefault();}, false);
function loaded() {
scroll = new iScroll('appBody');
$('#feedResults').rssfeed('<feedurl>', {<options>}, function() { scroll.refresh() });
}
document.addEventListener('DOMContentLoaded', loaded, false);

I would suggest you first populate the #feedResults with your parsed rss and oncomplete of this action, you start the iScroll. Don't start both at same time nor use refresh() without setTimeout like Matteo said in iScroll4 documentation.
Considering the function() after stands for the onComplete, try something like this:
var scroll;
function loaded() {
$('#feedResults').rssfeed('<feedurl>', {<options>}, function() {
scroll = new iScroll('appBody');
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault();}, false);
document.addEventListener('DOMContentLoaded', loaded, false);
I think that will give time to the DOM to have your rss on it and then iscroll will calculate the correct height of your entire wrapper (appBody in this case).

I just had the exact same problem. The solution for me was to add position: absolute; to the element directly inside your wrapper, in your case you would need to add position: absolute; to feedResults.

In HTML5 based application, smooth scrolling is always challenging. There are third parties libraries available to implement smooth scroller but there implementation is very complex. In this scroller library, user only need to add scrollable=true attribute in the scrollable division, then that div will scroll like smooth native scroller. Please read readme.doc file first to start working on it
library link
http://github.com/ashvin777/html5
Advantages :
1 No need the manually create scroller object.
2 Scroller will automatically refreshed in case of any data being changed in the scroller. 3 So no need to refresh manually.
4 Nested Scrolling content also possible with no dual scrolling issue.
5 Works for all webkit engines.
6 In case if user wants to access that scroller object then he can access it by writing “SElement.scrollable_wrapper”. scrollable_wrapper is id of the scrollable division which is defined in the html page.

Related

Smooth scrolling to anchor on another page

After combing the forums and how-to guides, I have found a solution to a Smooth Scrolling problem that I had, but I'd like to ask some kind folks if the solution below will work for me before I try it, or if I'm missing something important.
I'm working on a live site and I don't want to create problems or break anything, so I'd like to be sure before I add the code below. I also know nothing about java or coding, so please forgive me if I don't use the right terms.
I want to enable smooth scrolling to an anchor on another page.
e.g. from my home page "domain.com/home", click the link, then
load the new page, e.g. "domain.com/contact"
and on loading the new page, smoothly scroll to the anchor, "domain.com/contact#section1".
Currently, it simply jumps, and I'd like to know if the steps below will enable the smooth scrolling.
I'm planning to:
Add the following codes to the website template's '' section (in the Joomla admin panel):
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
I'm unsure whether this is necessary because I already use jQuery with some components, is it unnecessary to load jQuery again? Or will it not hurt to add this code regardless?
Then add this code to the same section in the template:
<script type="text/javascript" >
$('html').css({
display: 'none'
});
$(document).ready(function() {
var hashURL = location.hash;
if (hashURL != "" && hashURL.length > 1) {
$(window).scrollTop(0);
$('html').css({
display: 'block'
});
smoothScrollTo(hashURL);
} else {
$('html').css({
display: 'block'
});
}
});
function smoothScrollTo(anchor) {
var duration = 5000; //time
var targetY = $(anchor).offset().top;
$("html, body").animate({
"scrollTop": targetY
}, duration, 'easeInOutCubic');
}
</script>
As far as I know, this will enable the smooth scrolling, but I haven't added anything like 'smoothscroll.js' (which I've read a lot about) -- will that also need adding in the '' (after I upload it to the server), or is that included in the jQuery library?
I'm sorry if this seems very naive, I'm learning as I go. Thank you very much in advance to anyone who provides some feedback on this, I am truly grateful for your time and patience.
Best,
Ben
Firstly, Joomla already loads jQuery, so you do not need to load it again. I would either use a Joomla extension (there is a free one here) or use a smooth scroll library (like this one). Assuming you choose to do the latter, you just need to put the link in your Joomla template to the JS file and initialise it (this is all explained on the Github project page).
Both options are simple but if you don't have much experience in coding then the extension is probably the best way to go.
EDIT: To use smoothscroll on page load with the GitHub library, you will need to change your last function to:
function smoothScrollTo(anchor) {
var scroll = new SmoothScroll();
scroll.animateScroll(anchor);
}

Fixed Floating Elements jQuery Wordpress

I have added this code to my site (without all the stuff to set up the comments and headers): http://jsfiddle.net/WzLG2/3/ Below is the javascript.
jQuery.noConflict();
jQuery(document).ready(function() {
var top = jQuery('#smi').offset().top - parseFloat(jQuery('#smi').css('margin-top').replace(/auto/, 0));
jQuery(window).scroll(function (event) {
// what the y position of the scroll is
var y = jQuery(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
jQuery('#smi').addClass('fixed');
} else {
// otherwise remove it
jQuery('#smi').removeClass('fixed');
}
});
});
My site: http://hollyshelpings.com
I'm trying to get the brown box underneath my header to scroll to the top and then stop there like in the jsfiddle. I'm using thesis and I have jquery enabled. I have wordpress and I already looked up how to use jquery in wordpress with replacing $ with jQuery.
I got the basis for the code from this site: Jquery for designers (it won't let me post the link)
I tested and jquery appears to be loading, I used firebug and I'm not seeing errors that pertain to this code (it looks like some plugins may have errors, however). I'm pretty new at coding so I'm not sure what else to test or how to troubleshoot much past this. My end goal is to use this for my social media icons instead of the tabs on the side. Any guidance or suggestions are greatly appreciated.
First step is to check your javascript console and remove any errors you see coming up there, as they can cause problems elsewhere. Not saying it's related, but your call to jQuery('#commentluv') is broken. I also notice you're using jQuery 1.4.2 which is really old, and should consider upgrading (maybe not to version 2 as that changed a lot, but at least to 1.9, maybe 1.10).

Extending a site when scrolling down?

Does anyone have a suggestion on how to extend a site automatically?
For example the site "9gag.com" also known as 9fag. It loads a part into the browser, but as you scroll, the site extends itself, without the need to click on "the next site".
I woule like to use this in on a shop I created.
For example here:
http://saasil.de/wohnraumleuchten/deckenleuchten/
When you scroll down, you see that you can choose to go to the 2nd site...
It would be great if someone could just point me to the correct technology to use here.
As someone mentioned above in comments, you are searching for infinite-scroll. There is plenty of jQuery plugins which can help you achieve desired effect. Of, course if you are loading content dinamicaly, you can fetch your data with AJAX.
Similar technology is used at Twitter, Pinterest, etc, and of course on 9gag.
You can see explanation and working demo at http://www.fieg.nl/infinite-ajax-scroll-a-jquery-plugin
Have a look at this question on SO. In this example, the page will extend 100px before reaching the bottom of the page
function loadMore()
{
console.log("More loaded");
// load your content (e.g. via ajax)
$("body").append("<div>");
$(window).bind('scroll', bindScroll);
}
function bindScroll()
{
if($(window).scrollTop() + $(window).height() > $(document).height() - 100)
{
$(window).unbind('scroll');
loadMore();
}
}
$(window).scroll(bindScroll);​
thanks to JoeFletch!

Using jQuery Infinite scroll plugin without pagination markup?

So I'm trying to implement the popular inifnite scroll plugin to replace my current home made infinite scroll script:
http://www.infinite-scroll.com/
&
https://github.com/paulirish/infinite-scroll
Anyway it seems like this plugin requires there to be html pagination on the page. Namely due to these options:
nextSelector: "div.navigation a:first",
navSelector: "div.navigation",
I don't have pagination markup on the page. I don't care if my site isn't compatible for crawlers/js disabled users.
So is there a way to implement this plugin without a physical html pagination?
In my custom script I was doing something like:
var $page = 1;
// Load content for $page
$page++;
Anything like this, i.e. I can pass in the starting page as an integer?
Take a look at this, very simplified version of infinite scroll, that doesn't require any pagination elements.
http://www.innovativephp.com/demo/infinitescroll/
You can create it easily with jQuery/javascript.
It's a bit hard to write a universal for anything now, but the main principle is this:
If you're loading latest content (newest first, older scrolled):
Load first set of elements (weather it be blogsposts, images, quotes) that takes a bit more than screen height. Keep the last item's ID in a variable.
use setInterval to detect if user scrolled the page, then load data that has lower ID than your last ID that you saved. Then keep saving last ID's and load new content.
Good luck!
Something like this:
function loadnewdata()
{
// do ajax stuff, update data.
}
setInterval(
function (){
if(($(document).height() - $(window).height() - $(document).scrollTop()) < 500){
loadnewdata();
}
},
500
);
You'd write the loadNewData() function for yourself, of course. Depends on your data.
This loads new data each 500 if the user has scrolled the page.

Using iScroll in iframe

All
I want to use iScroll in iframe.
This is my code
HTML
<form>
<input type="text" class="frmUrlVal">
<input type="submit" class="frmSubmit" value="Go">
</form>
<iframe src="http://www.css-tricks.com" width="360" height="500" id="dynFrame"></iframe>
JS
$(function()
{
$('.frmSubmit').click(function(e)
{
$('#dynFrame').attr('src', $('.frmUrlVal').attr('value'));
e.preventDefault();
});
});
This is my jsfiddle link : http://jsfiddle.net/ajaypatel_aj/JtCJa/
​
​You can see here there is vertical scrollbar, i want to use iSroll instead of that regular scroller.
I tried with applying the id but it not work for me.
Thanks In Advance !
I think the closest option you would have is http://jsfiddle.net/JtCJa/9/ it will still need tweaking and you cannot click the links but it works as you would expect :)
You can't do this from parent frame. You must add iScroll's script directly to "http://www.css-tricks.com" page. If this site doesn't belong to you, you can't do this because executing JavaScript code on pages from different domain is forbidden for security reasons.
You can set very big height of frame, so scroll bar inside the frame will disappear, only the scroll bar of parent frame will remain. This scrollbar can be styled with JavaScript because it belongs to your domain. But I think scrolling page with mouse inside frame will not work (you can't receive mouse events from third-party frame). And page height becomes very big (you can't determine the height of frame contents).
Well, you can download entire page contents on server side and display its copy on your site. In this case JavaScript on this page will work and scrollbar can be styled. There are several scripts for doing this. Trey're called "web proxies". You can use one of them, for example, PHProxy. It's complicated to implement this functionality yourself because there are some techinal difficulties (downloading related files, redirecting ajax requests, saving cookies etc).
hey ajajy you have to add class also in your file
<iframe src="http://www.css-tricks.com" width="360" height="500" id="navbar" class="navbar_relative"></iframe>
and js funcation
function magentoScrollMimic(){
j(document).scroll(function(e){
if(j(window).scrollTop()>138)
{
j('#dynFrame').addClass('navbar_fixed');
j('#dynFrame').removeClass('navbar_relative');
}
else
{
j('#dynFrame').removeClass('navbar_fixed');
j('#dynFrame').addClass('navbar_relative');
}
});
}
samjyo
and use directly
<ul id="dynFrame" class="navbar_relative">
i used this and its working
j(document).ready(function(){
magentoScrollMimic(); }

Categories