I have a site I'm building, here: http://ericbrockmanwebsites.com/dev2/
I'm using Cufón because the font the client wants doesn't look very good when the user is on a Microsoft system or on Chrome. SEO is not important as it's, for the most part, not really open to the public.
The problem is that the page loads with the default font and then the cufón script kicks in a second or so later - every time a new page is loaded. Just ended up looking very sloppy.
Does anyone how to remedy this?
Any help is greatly appreciated!
cheers,
I found this answer works well, since you're using jQuery: Cufon delay in Internet Explorer
You essentially hide the text until it's rendered correctly.
How about hiding all the content until the content is loaded? ie...
In CSS, hide the body
body { display:none; }
Then in jQuery when everything is loaded and the window is ready
jQuery(window).ready(function() {
jQuery('body').css({
'display':'block'
});
});
If the website takes a little while to load you might want to consider using a pre loader instead.
Related
We have a WordPress website which loads sufficiently in every browser I've tried, except for IE. For some reason in IE, it seems to freeze the browser for a few seconds every single time the page is loaded, doubly so if it has to load a page with an iframe of another page. The user has to wait awhile before they can interact with anything on the page.
Here's the site.
Someone suggested we could use WP Supercache to solve the issue, but I've had problems with this plugin in the past and am reluctant to rely on it, especially since this seems to be only a problem in IE.
What is the best way I can troubleshoot this issue? How do I find out which scripts in the header, or footer, etc. is causing it? Is there a quick way to do so, or do I just need to start eliminating variables within the theme?
I'd don't quite understand why but in IE9 style.css is being pushed right down the page load order - see request #35 http://www.webpagetest.org/result/130327_Y9_f1d5796658d8475b68e2e537644173f1/1/details/
As a browser won't render until it's downloaded the applicable CSS this blocks rendering.
Chrome on the other hand prioritises downloads so that resources that can block rendering are downloaded ahead of images.
Here's a side-by-side video of the two loading experiences.
(If you want help looking at this further my contact details are in my profile)
Thanks to this thread I just found, the answer appears to be fancybox: Fancybox causing slow load times in IE?
Specifically, the IE-specific filters in the CSS file for fancybox. I removed those filter styles, and it loads fine now.
Sorry, I don't seem to be able to give just a comment. Anyway, in Opera 12.14 it works fine. And in Explorer (8) it works just as well, no errors in the console. Just my .1 cent.
I don't think this is related to JQM but maybe just the CSS.
I have a very basic mobile web page and it loads with the correct css. There is a link on this page that links to the a similar page but with a different css reference.. but it does not apply the css until I hit refresh. I tested this with iphone browser.
anyone having similar issue or seen this?
The way JQM works by default is that it loads each linked page, 'inside' the first page loaded, through ajax.
This is done behind the scenes.
If you want to load different content forced, the quickest way is to make the link an 'external' link using
click here
That's the way I know it will definitely not use ajax. unfortunately this disables the neat page change effects.
In the documentation it says you should use
<script>
$(document).ready(function() {
// disable ajax nav
$.mobile.ajaxLinksEnabled = false;
});
</script>
But this doesn't always work for me.
Remember though that Everything is reloaded, so you will have to include all of your javascript and css in the "new" page.
Another way to achieve what your asking is to load both Css files on all pages and use javascript to media tags to switch between them.
Hope this helps. I spend a long time coming up with a way to make jqm work like a classic website.
For some reason whenever I go to the page of my website that has the crystal report on it my main navigation bar disappears. Here is what the header for the site (with the navigation menu) is suppose to look like:
and here is what it looks like when there is a report on the page:
Could someone tell me what is causing this and how I can fix it?
I'm using master page for the header by the way.
Greener, the Crystal Report viewer is a dynamic HTML representation of the report. It combines JavaScript, HTML and CSS (duh, what doesn't) to represent your report on the webpage. The toolbars are powered by JavaScript calls to .JS that is linked in when the CrystalReportViewer control is rendered to your page.
My point is, all of this introduces a LOT of stuff that can conflict with your existing page. In particular JavaScript errors can occur (which can cause certain things to stop rendering) OR CSS the report uses happens to apply styles you never intended to have applied to objects in your page.
I highly recommend installing the Web Developer toolbar and/or FireBug to FireFox, IE, or whatever browser they are offered on these days. FireFox's implementation of those is quite good in my experience.
When the page loads you can use the 'CSS' menu of the Web Developer toolbar to actually disable some or ALL the styles applied to the page. If disabling Crystal related styles (or all) makes your missing toolbar appear, then it's probably a conflict in your CSS. A front end developer would know to adjust the styles (i.e. add the !important directive to a style, change class/id names, etc.) to address this.
Alternatively, FireBug may be reporting JavaScript errors (heck, even FireFox can show these in the console) which could indicate a problem that prevents the completion of rendering your toolbar.
An outside possibility is that the report itself contains mark-up. For example, if you had certain fields in the report contain HTML that happened to be rendered by the browser, this could create an open div tag, css styles and even JavaScript that would do all the stuff I explained above.
I hope this narrows it down for you. Happy troubleshooting!
I was having the same issue and after hours of searching I finally resolved it... check this out... http://scn.sap.com/thread/1926659
In the crystalreportviewer css file, I adjusted the div class = clear and changed the height attribute and disabled overflow:hidden. Hopefully, that works for you. Good luck!
I found the solution after searching on the web and is a quite simple.
On the Site Master, change the Name for all the places you have the style "clear" for example "clear1" and change it too en the site.css with that name.
The problem is for the conflic with the namespaces with Crystal Report css.
Hope this help.
Is it possible for me to edit the css using coda, and view my changes live in a separate window?
I just downloaded it as I heard good things about it, and I want to learn efficient CSS coding using it.
cmd-2 and cmd-3 are shortcuts that are great, looking for any tips that would help me be fast!
I think you might be looking for a plugin called Lively
http://menumachine.com/blog/2008/12/a-live-preview-window-for-coda/
Also you can add a refresh meta tag to your HTML. This will refresh the page every 2 seconds.
<meta http-equiv="refresh" content="2" />
Another solution is the XRefresh plugin for Firefox...
http://xrefresh.binaryage.com/
Hope that helps!
Couldn't you have the page you're building in a separate browser window and refresh with edits? Especially if you're not working off a server because you don't need to commit anything and all your files are immediately uploaded.
I know Coda has a preview screen for CSS styles. But as answered earlier you may want to try Lively if that's more what you are looking for.
Best of luck
Keep an eye on on LiveReload. It looks as if it has an impressive feature set and will cost you a small bit.
Lively? Coda does this already with the split window function; for example:
Split an index.html file and have one half as preview and the other in edit and you will see the preview change as you edit the editable file you have loaded.
With CSS, split the window and drag an html file from the left menu and change it to preview - saving the edited css file with update the preview.
A footnote to this is a problem where "live update" stops working - awaiting Coda's comments on this as only found one other thread online that refers to this major problem.
Has anyone else ran into the issue where you created a prototype based window using the window.js library and it renders just fine in every browser except IE6?
The test page I am trying to use to debug this issue can be viewed at rik.kmshooting.com/test.php
As you can see, the window graphics, which are background-image values assign in CSS are obviously being wiped out in IE6. I have tried the examples given on the website that actually developed this and it seems to do the same thing there.
I would love it if someone has come up with an answer or good workaround for this issue.
Thanks folks.
~A~
I'm not sure about your particular case, but I have had instances of CSS backgrounds not appearing in modal dialogs on IE6. Pre-loading the image when the page loads using JavaScript solved this issue:
tmpImg = new Image()
tmpimg.src ="image/bg1.gif"
There is a server side fix for flickering background images in IE6.
Add an HTTP header, something like Cache-Control: post-check=3600,pre-check=43200
This page is for IIS but some people mention Apache in the comments:
http://aspnetresources.com/blog/cache_control_extensions.aspx