PDA

View Full Version : Image Swap Delay


Chapo
12-28-2011, 04:41 AM
Ok.. i made a menu in html and css, but its haivng sometimes a delay when Rollover, it doesn't change fast, instead it takes longer and the image swap occurs. Not sure why, but i thought maybe the internet speed.

Also, sometimes in Explorer a message appears saying about Active X and the menu and header doesn't work until you allow it.

Finally, when the site downloads it does very ugly, i mean, i will like to the layout to appear first, then the header, the menu and then the content.. is this possible ?

How can i fix these problems ?

www.fotorazi.com (http://www.fotorazi.com)

Ricky55
12-28-2011, 11:26 AM
Not sure about the Active X without looking into it more.

Regarding page loading you do have some control.

The problem here is that you are loading all your javascript in the head of the document so the browser is having to load all of that code before it starts to load the body, i.e. your page design.

Try adding all of this code at the bottom just before the close of the body tag. Leave the CSS just the JS.

Regarding your rollovers. Its always best if you can to just use CSS rather than using images. You could achieve that look in CSS3 using border radius for the blue and the orange is just a flat colour. I'd let IE just have a square rollover or use CSS PIE and see if you can get it working in IE. Should be able to.

If you must continue to use images make the regular state image and the rollover all one image and just change the position with CSS on hover. The reason for the delay is because the browser is loading the image once its in cache its fine but by then the whole look is spoilt.

If you want more help on how to do this come back to us but like I say I'd just do the whole thing with CSS.

HTH

http://css3pie.com/

Chapo
12-28-2011, 12:47 PM
Thanks for the help, im not yet familiar with css3, can i do it with with regular css ? I build that menu with hide/show elements behavior. Do you an example or tutorial on how to achieve it with css ?

Ricky55
01-01-2012, 11:15 AM
Hi mate, CSS3 is still just CSS don't be thinking its any harder, just new properties that's all.

To achieve this menu you would just use a list with a orange background then on hover of the links in that list change the orange to blue and then round off the top with the border radius property.

You could even add CSS transitions to animate the effect all achievable without JavaScript, no delays, quick loading everyone is a winner.

If I get some time today I'll create it for you and post a vid tut for ya.

Ricky55
01-01-2012, 11:23 AM
By the way chappo the menu doesn't work on the iPad, it breaks the menu.

I'll have a look for you today if I can.

Chapo
01-01-2012, 03:01 PM
Hey, happy new year friend...w
Thanx for your amazing help. I think it sounds great and even better with the transitions , ive never done that but i really want to learn. The big problem and maybe you haven't notice is that below the image of the links i have another div with some small corner images. I did this because i wanted a folded effect but the bottom corner image will need to get inside the image next to it. So the only way was creating a div below with this corner images and that allows me to invade space from the div next to it. So i use the show/elements for this effect. You rollover the link and the image will swap and at the same time it says show that image corners. Hope you understand. I made this before in flash and works great but it doesnt work in apple devices. So the problem here are thos bottom corners images to create a folded effect. If you think this possible it will be great news and will try hard to make it real.

Thanx once again and hope you could help me out.

Ricky55
01-01-2012, 07:05 PM
Hi mate, happy new year to you too!

Yes I've seen what you mean although if I'm being honest I don't think they had a great deal. I quite like then at the ends so the whole of the navigation looks like its wrapping around the page but those other little triangles don't add much IMO.

Been a bit busy today getting some stuff ready for ebay, I'll take a look for you though and see how near I can get. Leave it for now I promise I look at it for you.

Like I say I'll record a tut for you and post it up on vimeo and link to it from here.

Cheers mate

Chapo
01-01-2012, 11:22 PM
Thanx, i will be waiting for your help or rescue mission.

Chapo
01-04-2012, 03:01 AM
Hey, im still thinking about the menu in how to make real..... hehe let me know if figure something out if you can.

Ricky55
01-04-2012, 04:31 PM
Aye sorry Chapo I'll have a look for you this evening been mental this week with it being the first week back.

Chapo
01-05-2012, 03:43 PM
Hi mate, no problem. I think i have the solution, im working on it and let you know as soon as i finish.

Ricky55
01-06-2012, 08:26 PM
Not forgotten you Chapo mate, just working on it now for you. I'll build a page mock up that you can choose to use if you want.

Just been looking at this site in more detail and there are loads of improvements I can make.

I'll build the template then record a video tut and post it all up for everyone to see.

I'll use some CSS3 and HTML5. Might be a nice one for the main site tuts Dom?

Up to you but I'd appreciate it.