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.
Related
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 there a way for me to get an element's computed style from a page source? Or, if not from the page source, some other way? I want to be able to go to a web page and then get all the computed styles (via my code; I'm not talking about opening a browser tab and clicking Inspect element). Right now I'm using Python BeautifulSoup to get and traverse the document. This gets me all the elements and their attributes, but not the css styles. Ideally this would be with Python, but I'm open to using other languages.
(Sorry, if this has been answered before. I looked at several questions and they all seemed to have to do with getting the info either from "inspect element" or from your own personal page using javascript.)
I'm using PhantomJS. I inject a JavaScript script into the page that runs getComputedStyle.
You can look for CssParsers like the following
http://www.modeltext.com/css/index.html
http://www.codeproject.com/KB/recipes/CSSParser.aspx
I would like to implement the application where user can include the different CSS files when clicked on different buttons. Please let me know how this can be achieved. I don't want to use the theme feature.
I am trying to change the CSS but I have noticed the ungly behaviour as follows:
When using mozilla i see the source
code for page i see code for latest
CSS.
But its not getting downloaded/ tried using the tamper data request to download CSS is not getting sent.
When I inspect the elements style is still the old file
Any idea what could be causing this? Please let me know how to get this working. Desperately looking for a solution.
Can this be done nicely using the ScriptManager control ?
To change styles on the client-side, you need to programmably change the reference to the stylesheet, which would work. However, you wouldn't see this changed in the view source... view source isn't a running document, inspecting all the changes made by JavaScript... so that can be a pain.
Firebug is pretty good, but again, even with Firefox/FireBug, IE dev tools, certain things don't get updated, depending on what you are doing.
So did you write some code and you are not seeing the changes directly, or you see the changes but you can't verify them?
HTH.
In this case I would use xmlHttpRequest with GET verb in order to obtain the needed CSS file from a dedicated handler. Pass the name of the style sheet that you need to request as a query string argument. I suggest that you fire the request dynamically, on click of the button who should download the respective CSS file.
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.