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.
Related
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.
I have a website in wordpress. I recently download a plugin called Advanced Ajax Page Loader. It refreshes you content when clicked on other page without refreshing the whole site(header, footer). I tried to get my answer from plugins developer and wordpress support forum, but none responded.
I read that if ajax jquery call is used then all scripts should be reloaded again, for that the plugin have a place where I should put those codes. Until that everything works correctly, except one thin. When I go from a category to category, everything works fine, but when I open a single Post it completely screws up all my css for that page, when I refresh it, everything looks fine but then again, if I open one of the big categories with many posts, then that pages css is messed up.
I though that I could somehow refresh whole css by putting some code in the "Reload code" box, but I have no idea how to do that using scripts. English isn't my native language, therefore I'm having difficulty finding my answer on google, I tried, but my vocabulary is limited. How can I do it?
are you adding CSS classes to your elements via Javascript? If so, then the styles you add will only affect those elements which are part of the DOM at that point in time, so you might be experiencing a race condition, that actually happens to work in Chrome and Safari, but not Firefox.
second try to validate your markup and CSS and see if you have any error in your css syntax ?
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.
I have one web page in ASP.NET and I want that page to be disabled until the whole page loading process gets completed.
One way is to activate a lightbox without content that will dim the whole page and then on the body onload event hide that lightbox.
Lightbox is a like having a modal window above the original window, and is used to preview pictures and other content. It could easy be modified to do what you want. Just activate a lightbox with no content and then hide the lightbox when the document is loaded.
This is a strange requirement and I would be interested in finding out your reason for doing this. Is there a problem or error that is ocurring. Perhaps you think the best way to prevent the error is to freeze the UI until the page loads.
I think that you should edit your question and describe what the underlying issue is. There might be a better way to improve your page.
I've seen this done with a simple overlay before.
Basically an iframe and a div that covers the page and has a high z-index is output at the beginning of page render. This is styled so it greys the page out and it also makes everything non-clickable. Then, once the page is loaded, a simple bit of javascript can be used to remove the div and iframe (or just set their styles to make them disappear).
I've also seen people attempt this issue by manually iterating over all controls on the page in JavaScript and disabling them. This is a horrible way to attempt it :)
The jQuery BlockUI plugin is another good option with lots of customization options.
I am trying to find out whether a piece of content included via ajax, needs it's own call to the stylesheet, or relies upon the stylesheet loaded of the calling page...
It just isn't clear how it is being styled, and what is the source of that stylings....
My educated gut tells me it get it's styling from the calling page, but i'd like to see some solid reliable proof.
Thanks
The dynamic content will be styled by whatever rules are already present.
If you use Firebug you can see detailed information about the styling of the page as the AJAX is being executed.
Unless it opens a new window or tab in a browser, it's part of the page, and uses the same stylesheets.