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.

i like it. but i would reconsider the shade of orange you have for the header's 'welcome' and 'latest projects'. also for the grey content area - i would perhaps bring it a shade or two closer to white. worth a try anyway...

i personally don't think the colours are a problem - they could work. the layout is the problem for me. it's hard to say exactly what doesn't sit right for me - the bottom half definitely works better in my opinion. the top just seems a bit messy -perhaps it's just one column too many at the top. i think this design has plenty of potential though!

i have it installed on vmware fusion and i find it very smooth. ...saying that i still keep finding myself use xp, which still feels more reliable.

In my opinion the page is very hard to navigate and really difficult to read. I personally think there are too many colours (but I do like the direction you were taking with the robot colours). I think it the biggest change that would help would be to split those sections up into separate pages (especially the links section), or at least finding a neater way to organise them. Also PLEASE change the colour of the blue links on the dark 'website design' section... they're impossible to read. Once again though, I really like the robot/colour idea. I think the styling on the page currently lacks consistency though.

i'm not aware of any plugins for this purpose. you'll probably be quicker and better off putting something quick together with php straight into a template file - sometimes this just saves time in the long run.

if you are familiar with wordpress but not php then next gen really is your best option if working with a client.

thanks welshhuw. unfortunately i'd already checked both mod_rewrite and also allowoveride ALL to make sure the .htaccess would have an affect but still no luck! i guess i'm just forever doomed to ugly links when testing... i'll live! thanks for trying

try 'save for web' in photoshop because the load time on that site is just crazy because of those images. however, visually it's not too bad at all. the typography is just letting it down big time. also i'd make this design one column - remove the right column and integrate the basket into the header.

no background all the way.

Ummmmm... you make websites for exhibitions? Put them in if they're good and leave them out if bad. We can't give you much more advice without having seen them.