Can someone please take a look at my menu, it is something that is beyond me and I don't know how to fix it.

Please look at the image bellow, and also check out the problem live at http://www.aystot.co.uk

Image 1 - Showing how it should be

Image 2 - After a random page refresh

Image 3 - After another random page refresh

As you can see, my menu is changing layout randomly each time, and not staying align. The error seems to be a problem with all browsers (I checked on 5).

Again, please see http://www.aystot.co.uk

Merry Christmas to you all.

 

Can someone please take a look at my menu, it is something that is beyond me and I don't know how to fix it.

Please look at the image bellow, and also check out the problem live at http://www.aystot.co.uk

Image 1 - Showing how it should be

Image 2 - After a random page refresh

Image 3 - After another random page refresh

As you can see, my menu is changing layout randomly each time, and not staying align. The error seems to be a problem with all browsers (I checked on 5).

Again, please see http://www.aystot.co.uk

Merry Christmas to you all.

 

 

What browser? Safari & chrome on OS X look perfectly fine. i've been navigating through the site and refreshed randomly several times and still looks the same.

 

What browser? Safari & chrome on OS X look perfectly fine. i've been navigating through the site and refreshed randomly several times and still looks the same.

 

 

Thank you very much for checking that for me. I have Mac OS too, and tried 5 browsers - Safari, Internet Explorer, Firefox, Chrome & Opera. Errors on all.

 

I have however, been told it could be something to do with my DNS, it may need flushing? It really does seem to just be a problem my end, but not just my computer as I have tried several computers in my household (Mac & Windows).

 

Since a DNS Flush was new to me, maybe I have done it wrong? You couldn't tell me the correct way to do this could you, or maybe you have another suggestion? The problem has been ongoing now for over a month, and I have tried resetting all sorts of cache etc.

Edited December 28, 201411 yr by a.stott

Update: I have just contacted my hosting provider, and they seem to be duplicating the error, therefore it is no longer just my computer.

 

Seems to be a funny one, because it varies by computer, yet not browsers?

This may not be a solution to your problem but an observation I have that threw up some red flags:

 

• I'm getting errors in the console on your home page 'Failed to load resource: net::ERR_CACHE_MISS'
• When I look at resources you are using a huge number of JS / jQuery plugins. why? Most of what I see on your page bar the slider shouldn't require much JavaScript to re-create. If you do need all these dependencies then at least concatenate and minify them.
• Expanding on the point above: You are loading 25 JavaScript files, and 20 CSS files, a total of almost 1MB. The HTTP requests and overall filesize is really gonna hurt your page-load performance. A lot of this is also being loaded in the head blocking page render until every js file there has downloaded.

The design does look really nice, and if you can refactor things a design like this shouldn't have more than 200kb of js and css combined and everything concatenating into just a few files. You'll find also there will be far less bugs if you rely less heavily on jQuery plugins and write stuff from scratch.

 

N.B: I'm not actually seeing the issue you initially posted about. I hope this info can help you improve you website performance I wouldn't be ssurprisedif this bug was caused by a poorly written plugin you are using.

Edited December 28, 201411 yr by rbrtsmith

I just had a look at your website and the menu was displaying as image 3 in your original post without any reloads. I'm using Windows 8 and Firefox.

 

After loading the Firefox Inspector I found that each menu item had a height of 215px applied, after removing the height using the Inspector, the menu was displaying as shown in image 1. The height is being set inline.

 

I then reloaded the website a couple of times and the menu displayed as seen in image 2 of your original post. This time the <div>s that were given a height of 215px when I first loaded the site, now had a height of 50px.

 

It would appear that there is a script running which is unable to calculate the correct height for the menu items when the website is loaded.

 

I have attached a screenshot of the Inspector, which shows which <div>s had the changing heights. Hope this information helps you to solve the issue.

 

I just had a look at your website and the menu was displaying as image 3 in your original post without any reloads. I'm using Windows 8 and Firefox.

 

After loading the Firefox Inspector I found that each menu item had a height of 215px applied, after removing the height using the Inspector, the menu was displaying as shown in image 1. The height is being set inline.

 

I then reloaded the website a couple of times and the menu displayed as seen in image 2 of your original post. This time the <div>s that were given a height of 215px when I first loaded the site, now had a height of 50px.

 

It would appear that there is a script running which is unable to calculate the correct height for the menu items when the website is loaded.

 

I have attached a screenshot of the Inspector, which shows which <div>s had the changing heights. Hope this information helps you to solve the issue.

 

menu_problem_aystot_co_uk_Inspector.jpg

 

I'd imagine that's because there is a function that is attempting to calculate those heights before the images have loaded. It should be called after all the resources in the header have fully loaded in.

Edited December 28, 201411 yr by rbrtsmith

Thank you both, rbrtsmith & MetcalfeWebDesign.

 

I have understood all the comments here, but I'm still left puzzled. Now to find out that Metcalfe is duplicating the problem, I have now ruled out it is anything to do with my DNS.

 

Can anyone helping me, also bare in mind that I am not advanced with web design, so I may struggle understanding some things, but i'll try my best to keep up .

 

Do we have any suggestions where to go from here?

Edited December 29, 201411 yr by a.stott

I recommend you find the function that is calculating the heights inside your navigation.

 

Then you need to call that function within the load event. You are using jQuery here so

$(window).load(functionName);

Where functionName is the name of the equal height function. Beyond that it's gonna be difficult and possibly very time consuming to help.

 

This is the danger of creating a complex UI with a load of plugins. It's generally a better approach to create simple UI's and gradually as your abilities improve you can increase the functionality - Either by writing your own code (Most recommended) or using plugins that you fully understand. If you don't understand them what are you gonna do when the client wants it changing in someway? Chances are you'll struggle.

 

Even when you get to a good level of ability it's still a good thing to avoid unnecessary complexity.

I recommend you find the function that is calculating the heights inside your navigation.

 

Then you need to call that function within the load event. You are using jQuery here so

$(window).load(functionName);

Where functionName is the name of the equal height function. Beyond that it's gonna be difficult and possibly very time consuming to help.

 

This is the danger of creating a complex UI with a load of plugins. It's generally a better approach to create simple UI's and gradually as your abilities improve you can increase the functionality - Either by writing your own code (Most recommended) or using plugins that you fully understand. If you don't understand them what are you gonna do when the client wants it changing in someway? Chances are you'll struggle.

 

Even when you get to a good level of ability it's still a good thing to avoid unnecessary complexity.

 

Thank you, but it does seem way too complicated for me to do what you have suggested. I will have to hire someone for this if nothing else works.

I have been advised that it could possibly be down to my website needed a speed opti. It does make sense a little, what you think? My loading only reaches 44%.

Edited December 29, 201411 yr by a.stott

Yes it does need optimising. But to do a proper job would require builing it from scratch without all those plugins. You could improve things just by refactoring but despite that giving a big improvement it would still be far from optimal with over 1mb of js & css resources alone. I guess where you take it from here depends on budget and how important you find performance to be.

Yes it does need optimising. But to do a proper job would require builing it from scratch without all those plugins. You could improve things just by refactoring but despite that giving a big improvement it would still be far from optimal with over 1mb of js & css resources alone. I guess where you take it from here depends on budget and how important you find performance to be.

 

When you say I have over 1mb of JS & CSS. Would this here help what you are suggesting, rather than me create the whole website again?

 

http://journal.digital-atelier.com/videos/cache.mp4 (Very short video).

I'm not so familar with open cart, but that video throws up a load of red flags. in the screen where they view source there's a huge list of js and css resources there. That's really bad practice for performance. The caching will just add expires headers to the files. This means they will be cached by the users browser, however they still have to initially download them to cache them. and that download at 1mb is huge. then there's the large number of images to download too. chaching is a good thing but it doesn't solve your problems.

 

What you need is file concatenation, that will help reduce the total number of files. For each file to download there the browser has to do a DNS lookup amongst other things, all of which take time. if we reduce the number of files then we reduce the pageload time. But that doesn't solve the issue of huge filesize. for that things would need refactoring -- not really advisable with plugins, which is a good reason to get a developer to write most things from scratch -- or at least know how to choose a plugin that is free from bloat.

 

The e-commerce world is highly competitive and one thing that is critical for success is a fast website. Note all those resources would also put a strain on the hosting server if it received a lot of traffic all at once. Hence we see a lot of systems fail during peak periods.

 

As far as plugins for this I don't know open-cart too well so I couldn't advise what plugins would work, but that video doesn't give me much confidence in the platform to be honest.

Edited December 30, 201411 yr by rbrtsmith