iPhone app - JQTouch & iScroll won't work - any ideas? - javascript

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.

Related

site preloader actually works?

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

Trying to build a content locker using jQuery

I am very new to jQuery and not entirely sure what I'm doing. Will try my best to explain the problem I'm facing.
I'm trying to lock some content on a landing page until a user shares the link using FB, Twitter, LinkedIN or G+. The first version of the script I wrote (which worked fine) ran like this:
<head>
<script type="text/javascript">
...
$(document).ready(function()
{
$('.class').click(clearroadblock());
buildroadblock();
}
</script>
<style>
.class
{
[css stuff]
}
</style>
</head>
<body>
<div id="something">
<ul>
<li> Link1 </li>
<li> Link2 </li>
</ul>
</div>
</body>
The problem I'm now facing is changing out this code to replace the list elements with social share buttons. As they are no longer under .class, but classes like fb-share-button and twitter-share-button. Please help me understand what I need to modify to accommodate this? PS: This is not a Wordpress site.
function clearroadblock()
{
$('#roadblockdiv').css('display', 'none');
$('#roadblockBkg').css('display','none');
}
This is the way I'm clearing the overlay once a click is detected, BTW.
Can I wrap the social buttons in divs, assign them IDs and use those IDs to trigger the click like below?
<div id="Button">
Tweet
</div>
$('#Button').click(clearroadblock());
You can have multiple classes on an element by separating them with a space. Try the following:
class="class fb-share-button"
Your jquery will still work off the "class" class. I would recommend you change this name to something more meaningful though. Your css can target the "class" for general styles, but you can also target fb and twitter separately.
Update
I decided to create a quick JSFiddle for this.
Some of the styles etc won't be the same as what you're doing, but the problem is resolved. I've created a div with id main that contains the content that you want to hide. There's an absolutely positioned div over the top of this, this is the roadblock. The javascript is showing the roadblock (assuming that's what you wanted to do with buildroadblock()).
On click of a link in the ul with id socialMedia we call clearroadblock. Notice the lack of parenthesis. This hides the roadblock.
This isn't a great way of preventing someone from seeing information, you might want to think about pulling the content down from the server when the action is performed, however, I think this answers your question.

Swipebox - Loading HTML instead of images

I chose Swipebox as my lightbox because the requirements that I want is that it is swipable in mobile devices ad is responsive.
I mainly used this for images. However, I have a use case where I want to use Swipebox to show HTML.
Can this be done?
If this feature is not supported by Swipebox, are there any alternatives that support the featureset that I am looking for(swipeable + responsive + can show HTML)?
Swipebox can display inline content. Probably is not documented but you can view it in this issue answer:
https://github.com/brutaldesign/swipebox/issues/248
...
...
<div style="display: none">
<div id="slide1">Slide 1 Content</div>
<div id="slide2">Slide 2 Content</div>
</div>
I use the option "afterOpen: function () {}" clean the content of swipebox and put my content there. Here is my code:
var html = $('the HTML');
$('.swipebox').swipebox({
afterOpen: function () {
$('#swipebox-slider').empty();
$('#swipebox-slider').append(html);
}
});
I found this one (bxSlider) but I have not tried it yet. It claims to support what you need.
Perhaps your CSS isnt loaded correctly.
Check to make sure that you have the following code within your head:
<link rel="stylesheet" href="source/swipebox.css"/>
Hope this helps,
#_Sub

Dynamic Content Swap via AJAX

Only this much now: I'm creating a vcard design for myself. My motivation is to make it look as good as possible. I want to apply to a webdesign company with this vcard to get a professional education for webdesign.
I still have a lot to change till it completely fulfills in my requirements, but this is my current version of the design I just uploaded to get you an overview over the design.
So as you can see it's focused on retro, vintage, ribbons and scetch elements.
Right know I want to get rid of these jerking content refreshs. So I thought a dynamic content swap via ajax and jQuery would be the best way to do it.
I never did much with js or actually ajax.
I want to ask you guys about a solution you think benefits in my design. I was thinking about something smoothly.
The content which needs to be changed is placed in
<nav>
(...)
<ul class="ribbon s"><!--Following links got the class="ribbon b/p/l/k"-->
<li class="ribbon-content">Link</li>
<!--
?content=blog
?content=portfolio
?content=lebenslauf
?content=kontakt
-->
</ul>
(...)
</nav>
<section id="content">
<div class="con clearfix">
(...)
</div><!--An empty div for possibly swapping without touching the vintage paper thing -->
</section>
http://robert-richter.com/boilerplate/
for example use jquery.
first add jquery to your html. within the domready-event you can register click events on your ribbon-menue. on each click you load the div-content from the given link-url in the html-part.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$.ready(function(){
$(".ribbon-content a").on("click", function(event){
event.preventDefault();
$(".con").load($(event.target).attr("href"), function(){
// add code after loading - for example change classes of menue
})
});
})
</script>
additionly you can the the browser-history to enable the prev- and next-buttons of the browser.

scrollTo/localscroll.js not working at all

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script src="js/jquery.localscroll.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/script.js"></script>
script.js:
$(document).ready(function() {
$('#menu').localScroll({
target:'#content'
});
});
html:
<div id="container">
<div id="menu">
<nav>
<ul>
<li>HOME</li>
<li>GIGS</li>
<li>TOP10</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<div id="content"><!-- content -->
<div id="home">home</div>
<div id="gigs">gigs</div>
<div id="top10">top10</div>
<div id="contact">contact</div>
</div><!-- end of content -->
i don't understand what is wrong....help me! thnx
The problem is partially in your HTML formatting, and there might be some CSS errors on your side as well (can't tell from here.)
First of all, it's a bad idea to use an html element like <nav>, (i have no idea what it is, this is the first time i've ever seen it and it might cause problems with jQuery)
Second, your content div must have a fixed size, and overflow:scroll as CSS markup.
To see a working example, check out This JsFiddle i made for you
I remember using this plugin at some point and I think you need to specify a target
$(document).ready(function() {
$('#menu').localScroll({
target:'#content'
});
});
Keep your menu wrapper as is and change the js conde to:
$(document).ready(function()
{
$('#menu').localScroll({duration:800});
}
);
And I don't think you need the content ID in content wrapper. That might help.
I had exactly the same problem.
Chrome was driving me nuts in why it was not working, but the funny thing was is that I've used this plugin before and it worked in all browsers!!!
So I looked at every single bit of HTML, CSS, JS, to try and figure out what was different.
See below my anchor.
<a class="anchor" name="myanchor"></a>
My CSS on the class 'anchor' was blank. As soon as I added CSS 'position: relative' to the anchor element, Bingo! it worked in Chrome.
Hope this helps someone!
This worked for me: I was including the file twice.
In our header:
<script type="text/javascript" src="/js/lib/jquery.scrollTo-min.js"></script>
And in our footer:
<script type="text/javascript" src="/scripts/jquery.scrollTo-1.4.2-min.js"></script>
Removing the second include solved the problem.
This happened due to merging of a new website design onto our existing one.
I've just wrote a blog post about localscroll at chrome: http://lukaszkups.pl/blog/localscroll-chrome-problem/
You should use:
$("html,body").localScroll({duration:800});
Duration is optional of course, but at least set html/body as a target ;)

Categories

Resources