Need help with my coding!!

[AlexHenry]

Hi there. I am experiencing a few problems with my website....

Basically, http://alexelliott.org.uk/maint - The new features are on their way.. is fine and clear in IE but in any other browser it isn't. Does anyone know what is wrong with the coding?

Secondly, if you go to http://alexelliott.org.uk/New/contact.html then it comes up with "thank you for contacting us" for a split second and then goes to the form. Or if you refresh it - the same happens.

Does anyone know why?

Thanks in advance. :D

[Tomm]

The link you provided is just a 404.

Also for the contact form the reason it flashes the "Thank you for contacting us" is because you're hiding it using JS in contact.js and the browser will most likely have rendered the page almost completely before it executes the JS to hide it. Just use style="display:none;" rather than using jQuery to hide it at the start.

[AlexHenry]

The link you provided is just a 404.

Also for the contact form the reason it flashes the "Thank you for contacting us" is because you're hiding it using JS in contact.js and the browser will most likely have rendered the page almost completely before it executes the JS to hide it. Just use style="display:none;" rather than using jQuery to hide it at the start.

The link works now and where do I need to put the style="display:none;"

Thank you :D

[Tomm]

On the contactSuccessMessage div.

Also I tried the link you provided in IE, Firefox and Chrome and it looked fine. Can you provide a screenshot to explain what you mean?


The link works now and where do I need to put the style="display:none;"

Thank you :D

[AlexHenry]

On the contactSuccessMessage div.

Also I tried the link you provided in IE, Firefox and Chrome and it looked fine. Can you provide a screenshot to explain what you mean?

style="display:none;"<div class="contactSuccessMessage">style="display:none;" <img src="images/ok.png" alt="" />style - is that right?

---------- Post added 06-06-2012 at 08:23 PM ----------


On the contactSuccessMessage div.

Also I tried the link you provided in IE, Firefox and Chrome and it looked fine. Can you provide a screenshot to explain what you mean?

http://tinypic.com/r/30rs686/6

[Pegle]

Looks fine in IE but not other browsers? o.O That's a change.

But no it looks fine to me on Firefox.

And no:
<div class="divname" style="display:none;"></div>

Although you could stick it in the css I think.

[Tomm]

In terms of Chrome, it does not render TrueType fonts very well. If you can find a OpenType version of that font then it should look better, otherwise there is not much you can do.

Also, no. You'd just want to change <div class="contactSuccessMessage"> to <div class="contactSuccessMessage" style="display:none;">


style="display:none;"<div class="contactSuccessMessage">style="display:none;" <img src="images/ok.png" alt="" />style - is that right?

---------- Post added 06-06-2012 at 08:23 PM ----------



http://tinypic.com/r/30rs686/6

[AlexHenry]

I did that I think but it still ain't working. I will look at it in the morning and hopefully you can still help me. Would be happy to pay credits on Habbo :)

[Tomm]

Yeah it is working, it is not displaying that message as the page loads anymore.


I did that I think but it still ain't working. I will look at it in the morning and hopefully you can still help me. Would be happy to pay credits on Habbo :)

[Kasabian]

I can't help with the coding side of things too much, as I don't know too much about JS. But from a graphics point of view, it's annoying me that the circle background is just a box and not full page :(

[AlexHenry]

I can't help with the coding side of things too much, as I don't know too much about JS. But from a graphics point of view, it's annoying me that the circle background is just a box and not full page :(

What do you mean? :D

---------- Post added 07-06-2012 at 06:20 PM ----------


Yeah it is working, it is not displaying that message as the page loads anymore.

Ahh thanks but it still comes up with a different font and then jumps to its proper font. Know why?...

[Kasabian]

http://icap.me/i/IZSzg8mV5v.png

[AlexHenry]

http://icap.me/i/IZSzg8mV5v.png

Meh, I quite like it like that. :D

[Tomm]

What jumps to the proper font? Are you talking about the "New Features are on their way"? I was talking about the "Thank you for contacting us" that no longer displays before the form.


What do you mean? :D

---------- Post added 07-06-2012 at 06:20 PM ----------



Ahh thanks but it still comes up with a different font and then jumps to its proper font. Know why?...

[AlexHenry]

What jumps to the proper font? Are you talking about the "New Features are on their way"? I was talking about the "Thank you for contacting us" that no longer displays before the form.

On the contact form, the thank you for contacting us doesn't display the form anymore but the text jumps from one style to the correct font very quickly... Thank you for your continued help! :D

[Tomm]

There is not much you can do about this, it is a common problem when using remotely fetched fonts. I see you are using some Javascript called cufon to display the font using canvas. I'm not sure why you chose this option over @font-face like you've used on http://alexelliott.org.uk/maint/ but, regardless, this still would not fix your problem in all browsers. If you use @font-face, webkit based browsers (e.g chrome, safari) will not display any text until the font is loaded, firefox will display the text in an alternative font until your font is loaded (similar to how you see it now) and I'm not sure how IE handles it.

The best way I've found of managing this is to ensure I use proper caching for my @font-face fonts to make sure the user only downloads the font once and therefore only experiences the "flash of unstyled text" on their first page load but subsequent page loads are seamless.


On the contact form, the thank you for contacting us doesn't display the form anymore but the text jumps from one style to the correct font very quickly... Thank you for your continued help! :D

[AlexHenry]

There is not much you can do about this, it is a common problem when using remotely fetched fonts. I see you are using some Javascript called cufon to display the font using canvas. I'm not sure why you chose this option over @font-face like you've used on http://alexelliott.org.uk/maint/ but, regardless, this still would not fix your problem in all browsers. If you use @font-face, webkit based browsers (e.g chrome, safari) will not display any text until the font is loaded, firefox will display the text in an alternative font until your font is loaded (similar to how you see it now) and I'm not sure how IE handles it.

The best way I've found of managing this is to ensure I use proper caching for my @font-face fonts to make sure the user only downloads the font once and therefore only experiences the "flash of unstyled text" on their first page load but subsequent page loads are seamless.

Okay thanks, just gonna leave it but I really appreciate all of your help! :D