Develop Reference

FullPage.js autosliding in iExplore

My website hosted at kylehb
The website works as intended on both Chrome and FireFox, but in iExplorer it automatically loops the slides(pages) and reverts to the first one if you try navigate to any other slide.
Im using fullPage.js
Does anyone know what is causing this?

You are using an old version of fullpage.js which contained a bug. (1.6.8)
Please download the latest one fullpage.js 1.7.8.
The internal functions addTouchHandler and removeTouchHandler have changed since then and sounds to be the cause of your problem.

Touch navigation with Infinite Scroll and WP

I'm using Infinite Scroll on a WordPress based site to load in more posts, and I just realized that the script won't run on Touch based devices (since it is initiated by scrolling). Are there any known, common workarounds for this?

This might be solved replacing your Infite Scroll with LazyLoading.
Here is an example: http://www.appelsiini.net/projects/lazyload/enabled_container.html
It is also supposed to work for posts (not just images) so you can have the selector for your posts.
Optimized for mobile: http://www.metaltoad.com/blog/improved-lazy-loading-mobile-devices-iphone-android-lazy-load-17
So you can set that it can load hundreds of posts, but when scrolling down, or sliding down on a mobile, it then will load more posts.
other popular sites using lazy loading or a form of this are: facebook, 9gag

Use jQuery UI Touch Punch, Default jQuery Not allow the Touch Event

If you use Modernizr it'll give touch class on the html element. Maybe you can use that to do something else on touch devices.

Use wordpress plugin for your post to display:
Infinite-Scroll
after installtion set your setting like this images:
see the screenshort
set your no of post to display:
setting -> reading
Blog pages show at most: "no of post":
More details and demo to go..http://www.infinite-scroll.com/
Want to see infinite scroll in action using this plugins?
http://aurgasm.us/

Jquery mobile loads correctly in Firefox, but not Chrome or Safari

I created a mobile site in html and jquery, but it is not loading properly in Chrome (or on an iphone). There is no backend to the site - all changes to content would happen right through editing the html. Inside of my html, I made no specific reference to ajax. And, each page links through "#pageid. The problem is that as I navigate the site, various pages do not display correctly unless I hit "refresh." URL is mobile.shorelinelake.com. I am VERY new to this, so please be patient with a newbie :) Thanks for any help!
http://mobile.shorelinelake.com (if you click through to "Lake" and then "Sailing," or "Cafe" to "Menu," you can see the problem - the page jumps after loading, cuts off the header, places content below the footer, or will entirely hide jquery elements...)

One thing I noticed right away is that your using an old version of Jquery and Jquery Mobile. There have been alot of improvements since the alpha that you are using. Also you are linking to a few files that aren't there. Phonegap.js and ajax-loader.gif for some reason are not found. In my console I see 196 warnings that I believe are all related to you using old versions.
Also you have 31 html errors. One example is here
line 88:
<a href="tel:16509657474" div data-role="button" data-theme="c" class="ui-btn-text">
You have alot of stranded </p> tags. Most of them are in the menu page. Fixing these errors is necessary to troubleshoot your problem. Try running your document through an html5 validator to find these mistakes.
I also recommend breaking this into smaller pieces. Here is my reasoning:
Easier to maintain and edit.
Keep the dom size reasonable. Jquery will remove the old pages from the dom keeping it very manageable.
Faster page loading resulting in a better user experience. Your user will probably not be going to each page. Only load what they need to see.
Bandwidth could be costing your user extra money on a mobile device.

JavaScript window.open function is displaying toolbar and menubar when instructed not to in IE7

I am currently trying to open another IE window using the code below, but the toolbar and menubar is still showing under IE7, it seems to work under IE8 though. Why is it doing this?
mywindow = window.open("dataviewer.aspx?id=" + id , "", "toolbar=no,location=no,directories=no,menubar=no");

I seem to recall having to add a website to my "trusted sites" list in IE7 to get the toolbars hidden. Of course that isn't going to help if you can't control that for your visitors, but I think it was something locked down as of IE7 -- even though MSDN doesn't state that. It might be an advanced setting, or maybe it was related to some 3rd party add-on or anti-virus I had. I just know I had a website that launched a small window that was meant to be a "floating toolbar" and it worked great in IE6, but once I upgraded to IE7 the width and height worked, but it had toolbars. I added that site to my trusted sites list, and it started working again.
If that is the case for you, I'd check the advanced security features and see what is different between normal and trusted sites, and maybe fine the one setting that controls this.

It works in IE7-mode in IE9. I don't have a machine with real IE7 installed.
The directories features is no longer supported. Just a guess, but that might be your problem.
One thing to try is to specify only "toolbar=no". Once you've specified to disable one of the features, the rest of them default to no. If you wanted no toolbars, but you did want an address bar, you'd have to explicitly say "location=yes" to get them back on. So, setting just one feature to no is good enough to turn the rest of them off as well.
Try this: http://jsfiddle.net/VD8sk/
mywindow = open("dataviewer.aspx?id=" + id , "", "toolbar=no");
Edit: Maybe also try "toolbar=no,menubar=no" without the other features specified.

Browser detection versus capability detection for IE 6 select / z-index bug

I have a written a jquery plug-in which pops-up a div section on hover over an element, and I need to deal with the "select z-index" bug in IE6 (http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx). So, if running in IE6, my code needs to hide some select boxes on the page, when the pop-up div is visible.
My question is: In trying to follow best practices, I would like to avoid detecting the actual browser version and instead do a 'feature-test", to determine whether I am in an affected browser. (http://ejohn.org/blog/future-proofing-javascript-libraries). Is there any way to do this? Or should I just treat this as a special case, detect the browser and handle IE6?

I use this snippet all the time. It's cool because it checks only for IE6. But be aware that if you using any code compression tools that removes HTML comments this won't work.
<!-- THESE LINES ARE NOT NORMAL HTML COMMENTS! They are instructions that only IE6 can understand. -->
<!--[if IE 6]>
<script type="text/javascript">
// redirect to the Default error page passing a custom error code.
window.location = '/your/redirect/page';
</script>
Cheers.

Use the bgiframe plugin to fix the bug without having to hide the select boxes on the page.