Is there any way to fetch the raw contents of a CSS file?
Lets imagine that I wanted to fetch any vendor-specific css properties from a CSS file. I would need to somehow grab the CSS contents and parse them accordingly. Or I could just use the DOM to access the rules of a CSS file.
The problem is that in while using the DOM, mostly all browsers (except for <= IE8) tend to strip out all of the custom properties that do not relate to their browser engine (webkit strips out -moz and -o and -ms). Therefore it wouldn't be possible to fetch the CSS contents.
If I were to use AJAX to fetch the contents of the CSS file, then if that CSS file hosted on another domain, then the same origin policy would break and the CSS contents could not be fetched.
If one were to use a cross-domain AJAX approach then there would only be a JSONP solution which wouldn't work since we're not parsing any javascript code (therefore there is no callback).
Is there any other way to fetch the contents?
If a CSS file is on the same domain as the page you're running the script on, you can just use AJAX to pull in the CSS file:
$.get("/path/to/the.css", function(data) {/* ... */});
If not, you could try using Yahoo! Pipes as a proxy and get the CSS with JSONp.
As for parsing, you can check out Sizzle to parse the selectors. You could also use the CSS grammar (posted in the CSS standards) to use a JS lex/yacc parser to parse out the document. I'll leave you to get creative with that.
Good luck!
No, you've pretty much covered it. Browsers other than IE strip out unknown rules from their object models both in the style/currentStyle objects and in the document.styleSheets interface. (It's usually IE6-7 whose CSS you want to patch up, of course.)
If you wanted to suck a stylesheet from an external domain you would need proxy-assisted-AJAX. And parsing CSS from would be a big nasty job, especially if you needed to replicate browser quirks. I would strenuously avoid any such thing!
JSONP is still a valid solution, though it would hurt the eyes somewhat. Basically, in addition to the callback padding, you would have to add one JSON property "padding" and pass the CSS as a value. For example, a call to a script, http://myserver.com/file2jsonp/?jsonp=myCallback&textwrapper=cssContents could return this:
myCallback("cssContents":"body{text-decoration:blink;}\nb{text-size:10em;}");
You'd have to text-encode all line breaks and wrap the contents of the CSS file in quotes (after encoding any existing quotes). I had to resort to doing this with a Twitter XML feed. It felt like such a horrible idea when I built it, but it did its job.
Related
I'm trying to "upload" an html-converted .docx file into a CKEditor. So far, the convertion from .docx to html is nearly perfect and I'm able to pass the code from Java(Spring/Maven) to my webapp(ZK framework, using native CKEditor and JavaScript).
The problems I've had so far revolve around the fact that the loaded text is either half-formatted or not formatted at all, and that's the actual reason I'm working in this (To avoid loss of format present by copy-pasting). I've managed to find the reason of this behaviour: CK likes HTML tags OR won't use multiple styles per container (ie. style="font-weight: bold" is Ok, but style="font-style: italic; font-weight: bold" isn't, it will pick one or another) and Docx4j uses inline styling for formating because of XHTML (As far as I've read).
After that I tried to force the styles in CKEditor by the config file, but that wasn't the solution as one element will overwrite the another, resulting in only one style being used.
With all that, I decided to manipulate a test docx (It's literally a "hello world" line bold, with italics and underline), converted it and forced the tags b, i and u on the resulting HTML file through Java. The result was the desired one.
Now my focus is to config docx4j so it uses tags instead of inline css, as so far it's the "easiest" solution and I liked the resulting html from it. After reasing some more I came across an old class with a method that (by name) will do that, but it's not present in my imported library. I tried both, new and old methods to convert to html but the results are the same.
Is there a setting or a way to let docx4j (v8.2.3 reference) know that I want html tags instead of css styles? I've seen the examples and looked into the javadoc, but it's a bit outdated and didn't really helped me that much. This seems to be the only way to do this, or build my own parser, which is simply not an option due time constraints.
Thanks!
So I want to use Lazysizes (lazy loading responsive images). Included in my Grunt stack is Responsive Images Extender, which outputs responsive image code (srcset) from simply including an "img" tag with a "src" attribute. Lazysizes requires the "data-srcset" attribute in replace of the "srcset" attribute, however. I added a script to my page that changes the "srcset" attributes to "data-srcset" attributes, but this isn't ideal as images are are already downloaded at runtime. It would be ideal if I could change the tags with Grunt, as there is no advantage in changing them live.
This seems like a very common thing, but I cannot find a good way to do it. String replace doesn't seem like an ideal solution, since it can cause problems if I ever use "srcset=" in my code.
I gave the grunt-responsive-images-extender a major makeover and added the possibility to change the attribute name of srcset to anything you want (data-srcset in your case) via the srcsetAttributeName option.
There is a grunt tans called dom_munger. With dom_munger you can change HTML attributes and do a lot of interesting stuff; however I cannot find a way to change an attribute name to another thing. Perhapse you can have a better luck checking it.
I'm building my first ajax-heavy application and am not sure of the proper approach for such things.
If, for example I ajax in a html partial (a form), with:
$('#content').load('form.html');
how should I include the javascript and css?
I can, of course include them in the original document, but that seems wasteful if the form is never loaded. I can inline them (in form.html) with <script> and <style> elements, but that seems like the wrong approach.
You can use a separate JS file and load it using $.getScript() in the .load callback.
Inline CSS should work fine, but since you run the risk of it messing up your main page, you should load it as part of the main page and not with AJAX.
If it were me, though, I wouldn't be afraid to leave a few extra lines of well-targeted JS and CSS code in your main page -- it's more efficient to load it with the other JS and CSS at the beginning, in the same file(s), than to fire off another network connection and wait for it to download.
The $.getScript() would make an additional http request to load the js file that is to be used in form.html.
So, say for example, if you load 20 forms via ajax, you have to make 20+20 http request( 20 for loading js file and 20 for loading the html for forms)
A possible optimized approach is:
loading the all the css ( minified) at the beginning.
IF a single js file is real large even after minifying,
Arrange the js functionality based on the PROABABILITY of use in different files ( (the fewer number of files , the better).
Minify those files and load the file with highest probability at the beginning .
And then use $.getScript() to load the file after checking if the file has already been loaded.
I would like to send a lot of data through ajax request to my server which will generate pdf or jpg format according to that data.
Now i have done all that, my issue is to how output that generated pdf/jpg back to the user trough ajax? I guess i might be able to use json for that, but im not really sure how, and i think there would be a lot issues with pdf.
Also if some one gonna suggest using form with hidden inputs that will not work since i have really big multidimensional array with lot's of data and it would simply take to much effort to make it work.
By the way, i am using jquery, but anything else is acceptable as long as it does the job done without making me to rewrite half of my script.
To display a JPG
AJAX: You can return the data hex encoded (be sure to set the content type appropriately: header('Content-type: image/jpeg')). Then you just inject an <img/> element into the DOM and set it's src attribute to the returned Data URI.
HTML: Also, you could inject the <img/>'s with a normal src URL to some location on your server.
For PDF
It's a little more tricky. Some browsers display PDF's natively (Chrome/Firefox), others rely on optional third-party plugins. You can detect these plugins, but can't control whether the PDF is displayed in a window/frame or is downloaded.
If you choose to display, you can create a new window/tab to display it or display it in an iframe dynamically.
Not sure if what I want to do is possible, but what I am hoping to do is somehow gather certain pieces of text from a website, remove the header, footer, background, all formatting, and place it into my application in a scrollview or something similar...
I'll give you an example... Imagine I was making wikipedia's iPhone app, I want to download the information about the wiki on dogs, without the header, side bars etc, just the text. How would I go about doing this?
I understand that for this I have not provided any example code or what I've tried or started, but that's just because in this case I'm lost! That doesn't mean I want full chunks of code either. Any help will do. If this doesn't work, I will just have to make a 'mobile optimised' version of the webpages I want to include in my app.
Thanks
(Edit: the term I was trying to use was 'strip the web page of its HTML coding')
You may be going about this the wrong way, or perhaps even asking the wrong question.
Does the target website have an API or datafeed of some kind?
Can you get the information you need in JSON or XML format directly from the site?
I think you've misunderstood the technology. HTML is merely the framwork on which the formatting and data is hung.
Parsing the HTML page seems like an awfully big headache, I doubt you'll ever be able to get it to work, because almost all sites these days are partially or wholly generated on the server side, the page is only the result.
Some sites hide the information in memory and others get it dynamically through ajax for example, which means that simply trying to get the data by parsing the HTML will get zero data.
Another issue you should be aware of though, is that simply copying the data from generated websites may open yourself up to copyright issues.
You have to parse the html code and search for the part that you want and "throw" away the part that you do not need. This is more or less like bruteforcing and the code of the website should not change otherwise you are screwed. So you have to write the parser by hand with this method. But maybe there is a atom or rss feed and you can parse this one. This will be much more easier and you are not depending on the website layout because the rss/atom feed is just about the data. For parsing rss you could try out NSXMLParser.
And then you have to make a valid html page out of the data and present it in the UIWebView