jlspurling

SOLVED: it was an issue with how iOS handles overflow:hidden.

Hi everyone, I am experiencing a very frustrating bug on the following page with iOS: http://makethemostof.co.uk/test.html There is a tab in the top right that says "Shopping Bag (empty)" that disappears on iOS. I have attempted to diagnose the issue with Firebug for iPad but can't seem to find the cause. I suspect it has something to do with the fact the element is position:fixed but I'm really not certain. Does anybody know why iOS would behave this way when webkit on mac (and windows as far as I have seen) works just fine? What am I missing? By the way there is also some jQuery acting on that area of the page (around line 100) which could also hold the cause of the problem. Thanks in advance for any help!

Thanks so much Spitfire! That seems embarrassingly obvious in retrospect! Here is the complete working function: function pages() { FB.api('/me/accounts', 'get', {}, function(response) { if(response.data) { for(var i=0,page; page=response.data[i]; i++) { if(page.name) { $('.fb_pages').append(function() { return '<option value="' + page.id + ' - ' + page.access_token + '">' + page.name + '</option>'; }); } } } }); };

Hi everybody. I'm being forced to work with javascript at the moment which is not by any stretch of the imagination my main strength. Currently I have a function that is pulling up accounts (pages, apps etc) from facebook profiles using the graph api. My question is a basic syntax related one which I am sure is simple enough but for some reason I can't get my head around it. Here is my code right now: function pages() { FB.api('/me/accounts', 'get', {}, function(response) { if(response.data) { for(var i=0,page; page=response.data[i]; i++) { if(page.name) { $('.fb_pages').wrapInner(function() { return '<option value="' + page.id + ' - ' + page.access_token + '">' + page.name + '"></option>'; }); } } } }); }; What the above does is output something like this: <select class="fb_pages"> <option value="foo">Foo<option value="bar">Bar<option value="argh!">ARGH!</option></option></option> </select> What I would like is the following: <select class="fb_pages"> <option value="foo">Foo</option> <option value="bar">Bar</option> <option value="wahey">Wahey!</option> </select> Thanks in advance for any help! Also please excuse the messy inclusion of jquery in the middle... it seemed to be the best way to target a class as I already had jquery loaded.

Thanks Mesa. yes animating all links does work that way so the problem is probably with attempting to animate two parts of the same links. The class current-page is used on every page other than the first and the effect works almost always on all browsers except safari where 20% of the time it fails for no apparent reason. Also I want the links to fade in on document ready which is why I did not include a specific event. Do you have any idea why safari would have a sporadic problem and not the others?

i like it but found it quite slow loading. i noticed how many javascript files are included on the home page alone... maybe try minify or something similar to reduce http requests.

I think your next step design wise is to at least gain a basic understanding of photoshop or similar software. Code side I'm sure there are plenty of css techniques you still have left to explore - check out some tutorials.

ok i'm still having no luck with this problem. i'd say about 30% of the time on Safari it works. I cant even figure out what is causing the problem... let alone find a way to fix it. I'd really appreciate an answer if someone has one. thanks again! :-)

looks like 'Elementa' http://new.myfonts.com/fonts/fontfont/ff-elementa/regular/

thanks bocaj sorry i should have mentioned i'm already using the color plugin

looks ok on safari 4 mac. as Wickham said already - design for firefox first and then make adjustments for ie afterwards in conditional stylesheets.

bump. sorry i'm really stuck this time! :S

$(document).ready(function () { $("#nav li.current-page a").animate({color:"#3ea8bd"}, 1800); $("#nav li.current-page a span").animate({color:"#9bd7e3"}, 1800); }); Can somebody please tell me why this little bit of jQuery is causing so many problems for me. Most of the time it works but other times it totally fails to have any effect - the problem is especially prominent in Safari 4 on mac. I feel like I'm missing something really basic! You can see the actual page in action here if that helps: http://positive-intent.com/beta/ Thanks in advance for any answers :-)

perhaps just remove the current page link and apply the styling to the list items instead. changing the cursor may only confuse users.

to begin with reconsider the way you have made the menu itself. perhaps a list would be more suitable and the images would then work well as background images. after that you should find it easier to place the menu as you will be floating the items. if you still find problems use a negative bottom margin on the nav to move it down. if you want to stick with your img tags then using negative bottom margins should still do the trick.