jQuery, Ajax and iOS Issues - javascript

Has anyone ever experienced any specific problems relating to the use of jQuery, Ajax events and iOS?
I'm working as a web analyst and on our site we are having issues with iOS in the checkout, we are using jQuery and Ajax events to handle the shopping basket in the background, carry the product information from page to page etc and I'm just taking a stab in the dark because I'm pretty sure it's not the html or css that is causing the issue.
The continue buttons that take you to the next page in the checkout use this href:
Continue
From a little research I found out that a # href just takes the scroll position back to the top, and this does occur on iOS, the html seems to be working, but then the jQuery is supposed to kick in when it detects a click of a href with this class, but it doesn't, scroll position goes back to the top and then nothing happens.
Look I know it's really difficult to make any suggestions without seeing any code, I'm just taking a stab here in the hope someone might go "Oh yeah it could be this".

Try changing href="#" with href="javascript:void(0);"

Add event binding code inside document ready function like this
$(document).ready(function(){
//Event binding code
});

Related

l10n.js button doesn't reload page

I'm building a multilanguage site and i am using the l10n.js library, the example doesn't come with links to refresh the language on user's choice, so i create 2 buttons but they only work if the user refresh the page manually, it only works the first time you click, then you gotta click again and refresh manually...
I'm not a java expert but i can understand the logic, so i tried with different window.location.href but none of them seems to work. here is the fiddle if somebody can take a look, thanks.
fiddle
ud1o0ddk
It's working now, i did add window.location.reload(true), I will leave it there just in case somebody else need it.

Scroll div with "middle button" mouse instantly

I want to implement navigation in a website using the middle button function of scrolling ("clicking" (please re-read clicking) the middle button and roaming around the borders) but I would like this to happen instantly without the need for user input. Something of the kind:
$(element).mouseover(function(){
roamAround(); //I've tried SIMULATING (NOT <--- DETECTING)
//a middle-click from the mouse but failed
});
I am currently using google-chrome and at this stage of development I am not really concerned about cross-browsing this function. If it should work on chrome then it's fine.
What would be the best way to do this using native functions or emulation? Thank you very much!
EDIT: I don't want to DETECT user input, please re-read the question :)
Sounds like you want, like Deryck said, infinite scrolling. There's a jQuery plugin jScroll that does a simpler version for vertical content that can either be auto-loaded or loaded by a button press. You can view the code on Github to see how to do something similar, i.e. your roamAround function could mimic the _load function found there.

Building a "single page" site with animation between pages

I would love to know what is used to have an effect such as this website template: http://www.templatemonster.com/demo/43491.html
I would like to have a single menu and background while once I click on the menu link it triggers the new page to slide into view without being redirected to a new page causing the browser to reload the new page, etc. Something smooth and nice.
I'm not looking for code (other than the functions to use (if JQuery)) and what effects should I be looking for to make this possible?
Just point me in the right direction :)
There are many ways to achieve what you wish, but this is my suggestion on how to go about it conceptually:
Animate the content by animating the position of your content container, that should give a nice smooth feeling to your page. The jQuery documentation should be pretty clear on that. Remember that you want to intercept the normal behaviour of the anchor, so either preventDefault() or return false, or both.
Get your content using an AJAX request. You can use the href attribute that you put in your link in order to fetch the correct content. Then bind an event to that <a> element with a the .on() method. The reason why you leave the href is to have a graceful fallback: should something go wrong with the code, should the user have javascript disabled, or simply navigating on a non-javascript friendly browser, he will still be able to access your content.
These are the two essential steps to achieve what you are looking for. If you want to fine tune your site a bit more, try to think about those things as well:
Make your website look more responsive by the cautious use of loading .gifs.
Don't double serve content: check whether the user is clicking to the link of the currently displaying page and don't fetch the content again; besides looking silly to your user, it will make a useless server load (probably insignificant, but still). Always consider your user, though! Tell him that that link is disabled by clever use of UI.
Manipulate browser history: using the history API. Your site will be more accessible, more user-friendly, more SEO-friendly, and will also look much more advanced.
now there can be tons of ways .. the easy way (but it's not much of a maintainable way )
is to all your website content in one page and wrap every section that you consider a page in a div like so
<div class="home-page">content of home page goes here </div>
<div class="contact-us-page">content of contact us page goes here </div>
etc...
and with jquery hide them all except the home page
$(function(){
$('.contact-us-page').hide();
$('.other-page').hide();
})
and when the user clicks on the link to other page let's say the contact us page you will hide the parent and slide the contact us page instead
$('.contact-us-link').click(function(){
$('.home-page').hide(1000);
$('.contact-us-page').show(1000);
})
and thats it :)
the down fall of this is that there will be no routing ..
so to solve this you have to use something like backbone.js
which takes a while to know it well ...
this is just a quick idea on how this works ..

Progressive enhancement, behavior when pages are not fully loaded yet

I'm developing sites using progressive enhancement implemented completely in jQuery.
For instance, I'm adding onclick event handlers dynamically to anchor tags to play linked MP3 files "inline" using SoundManager and popping up Youtube players for Youtube links, through $(document).ready(function()).
However, if the user clicks on them while the page is loading, they still get the non-enhanced version.
I've thought about hiding the relevant stuff (via display: none, or something like that) and showing it when loaded, or putting a modal "loading" dialog, but both sound like hacks.
Any better ideas? I feel I'm missing something completely obvious here.
Regards,
Alex
I haven't tested this, but you could try live. The thinking is that you could put your click handlers outside of document.ready so they get executed right away. Since live uses event delegation to achieve it's functionality, you don't really need to wait for the DOM to be ready, and any clicks that are made while the page is loading should still be captured by the event handler.
If that doesn't work, you could try putting the Javascript script tags directly underneath whatever they need to bind. It's not pretty, but it will pretty much eliminate the problem.
Assuming you have used good judgement and people are falling for the non-enhanced version just because the delay is too long then I would use CSS to disable the controls. The CSS will load almost right away. Then using Javascript I would toggle the CSS so the controls are re-enabled.
However, my first reaction is that if the user can click it while the page is loading, then your page or connection is too slow. However, if this is seldom the case--less than 1% of the time--then you can shrug it off as long as the user can achieve his goal, that is listen to his music. I say this because once the users realizes that a better experience awaits half a second later, he will usually wait for Javascript to render and then click.
I take the opposite stance from aleemb regarding using CSS. If you use css to disable the controls, then anyone who has javascript disabled or is using accessibility software will be unable to use those controls without disabling your stylesheet entirely.
You could use a very small inline javascript right before the closing body tag to hide the elements via js really quickly. If it's inline and doesn't have to load external resources it will be very fast, generally faster than a user can click.
However, I do agree with aleemb that if your users are able to mentally process the page and make it to the control they want to click before your js is loaded, there's probably a deeper problem with the way your page is loading. Look into ways to decrease load time: compressing image files, gzipping html/css/js files, minify your javascript, combine images into sprites, etc.
I'd suggest following Paolo Bergantino's advise - event delegation is the way to go to avoid the problem altogether.
I had a similar issue where event delegation couldn't do the job - you can read about that here.

HTML CSS: Iframes/Dynamic Problem

I am having some trouble creating a experimental 'dynamic' style website. The site is set up as follows. The user has a menu of links to choose from, specifically using an image map. When they hover over a selection, an iframe pops up (becomes visible) displaying some data. When the user removes the mouse the iframe goes away, until the user hovers over another link.
-- It seems to be working well, but only intermittently. Sometimes after leaving one of the anchors, the syle, text etc. still occupies the frame even after i hover over another link. This behavior seems to be fairly random, but there must be a way to fix it.
Here's an example of what i'm using. The show function sets the frame to visible if the argument is a 1, and hidden if 0. frameset sets the main frame to the desired html document. I tried implementing a reset to set the frame to something blank after leaving the link to try and fix it, but the problem persists.
<area shape="circle" coords="..." href="..." onmouseover="Show('frame', 1);
frameset('page.html');" onmouseout="Show('frame', 0); reset();" />
And the functions
function frameset(a)
{
document.all.frame.src=a;
}
function reset()
{
document.all.frame.src=blank.html;
}
It's a very hard problem to describe, so let me know if more information or code is needed. Any better alternatives to my method are also welcome, considering i'm not fluent in javascript :)
Thank you
I think what you are doing could be performed better by using a more modern approach.
The image map could have absolutely positioned block level anchor tags.. but this doesn't seem to be the problem.
Instead of using iframes, I'd recommend using AJAX to get the information and a framework like jQuery to help you display the data.
You could load the AJAX and display the box with a loading throbber (http://www.ajaxload.info) on mouseover, and parse the data into viewable format inside the div.
Learning AJAX
AJAX is when a page makes a http request to the server and can also return data which is then used with Javascript to update the DOM.
jQuery is a Javascript framework designed to abstract away browser specific code and inconsistencies and just make using Javascript a better experience.
Check out jQuery's AJAX functions
Good luck!!

Categories