I've been playing around with SimpleHTMLDOM Parser (http://simplehtmldom.sourceforge.net/) which is a great tool, however, I've been running into a problem collecting img elements from inside the body. This is best illustrated through an example:
Here are 2 URL's of the same image. I run the following code on these URLS respectively:
$html = $this->DOMParser->file_get_html($url);
foreach($html->find('img') as $element){
print($element->src);
}
http://imageshack.us/photo/my-images/412/71banksy89789ll7.jpg/
(SHTMLD picks up the images here)
and
http://imageshack.us/scaled/landing/412/71banksy89789ll7.jpg
(SHTMLD picks up nothing)
I've tried for a few days now to figure out what's going on, but the only different in this example would be in the html tags.
Any ideas?
Your second url is pointing to an jpeg file directly, instead of a html page holding img tags. SimpleHTMLDOM Parser can only parse html pages, so it won't work when you fed it an image file instead of a html page.
Simple, Your second URL is not HTML, Its a Jpg! :)
Related
A subdomain http://board.woodstockschool.in will display a content within Iframe from my.woodstock.ac.in.
In the HTTP headers from my.woodstock.acin it does have this entry:
Access-Control-Allow-Origin => http://board.woodstockschool.in
But I'm unable to change the content look using CSS from the board.woodstockschool.in website.
I've tried these as well:
a ,iframe a{
color: red !important;
}
This changes color of all links except for in the Iframe.
There is an array of questions like How to apply style to a div which is inside an iframe of the page? in here but none with CORS enabled.
I've checked https://www.w3.org/wiki/CORS_Enabled#For_Apache but find no mention of css there.
What is the way to apply the css rule from the wrapper site without using any javascript?
What is the way to apply the css rule from the wrapper site
There is no way.
The closest you could come would be to:
Set a query string on the iframe's src and then have the embedded page use server side code to stick a <link> to the stylesheet in based on that.
Use postMessage to send a message (possibly including the URL of the stylesheet) to the embedded page and then have JavaScript running on the embedded page add the <link>.
CORS will not help or hinder you in this. It's entirely irrelevant.
The best way may be the following (in case you control both sites):
1) set the iframe link with style parameter, like:
http://your_site.com/target.php?style=a%7Bcolor%3Ared%7D
(the last phrase is a{color:red} encoded by urlencode function)
2) set the receiver page target.php like this:
<head>
..........
<style><?php echo filter_var($_GET['style'], FILTER_SANITIZE_STRING);?> </style>
..........
Just curious as to why this is not working:
HTML:
CSS:
But when I launch it in chrome, the HTML doesn't seem to be affected by the CSS. The text is black and hasn't been changed. Anyone Know how to fix?
They're in different directories:
C:\....\HTML FILES\firstHTMLfiles.html
C:\....\SCSS and CSS\firstCSSTest.css
your <link> tag is writen to assume that the .css file is in the SAME directory as the .html file.
Try
<link ... href="../SCSS and CSS/firstCSSTest.css" />
instead.
And generally speaking, PICTURES of "broken" code are useless here, since it forces us to re-type any relevant bits. But in this case, the code itself would have been useless, since your directory information wouldn't have been included. But next time... actual code please, not PICTURES of code.
The title bars of the two windows show that the HTML and CSS files are in different directories, but the URL to the stylesheet in the HTML is a relative URL to a file in the same directory.
Either change the URL to point to the right directory or move the CSS file.
the html and css must be (with your code) in the same folder
I'm trying to use as css content and image (base64), but when I load the page is loaded like a broken link image.
Now, i'm using a website to download the base64 image and this is the css that i'm using that gives me the broken images:
.default:after{
content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZD0iTTgsMEMzLjU4MiwwLDAsMy41ODIsMCw4czMuNTgyLDgsOCw4czgtMy41ODIsOC04UzEyLjQxOCwwLDgsMHogTTksMTJjMCwwLjU1Mi0wLjQ0OCwxLTEsMXMtMS0wLjQ0OC0xLTFWNw0KCWMwLTAuNTUyLDAuNDQ4LTEsMS0xczEsMC40NDgsMSwxVjEyeiBNOCw1LjAxNmMtMC41NTIsMC0xLTAuNDQ4LTEtMWMwLTAuNTUyLDAuNDQ4LTEsMS0xczEsMC40NDgsMSwxQzksNC41NjgsOC41NTIsNS4wMTYsOCw1LjAxNnoNCgkiLz4NCjwvc3ZnPg0K1422f94715e8d9b67004ad32568deab3');
position:absolute;
width:100px;
height:100px;
}
if i open the "broken" base 64 image into a new chrome tab, this is the resulting error:
This page contains the following errors:
error on line 10 at column 1: Extra content at the end of the document
Below is a rendering of the page up to the first error.
now, i've never used base64 images, but i have to do something special or it should be just copy and paste the autogenerated code?
thanks in advance for the help
**PS: i'm developing in localhost, i don't know if it could be the cause or not.
You can easily convert a SVG file to a base64 ecoded value for CSS background attribute with this simple bash command:
echo "background: transparent url('data:image/svg+xml;base64,"$(openssl base64 < path/to/file.svg)"') no-repeat center center;"
Tested on Mac OS X.
This way you also avoid the URL escaping mess.
Remember that base64 encoding an SVG file increase its size, see css-tricks.com blog post
It is what it says, you've encoded the document + some additional garbage at the end.
This would seem to be the correct encoding which I obtained by decoding via http://www.opinionatedgeek.com/dotnet/tools/Base64Encode/ removing the garbage and then encoding using the same site.
PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZD0iTTgsMEMzLjU4MiwwLDAsMy41ODIsMCw4czMuNTgyLDgsOCw4czgtMy41ODIsOC04UzEyLjQxOCwwLDgsMHogTTksMTJjMCwwLjU1Mi0wLjQ0OCwxLTEsMXMtMS0wLjQ0OC0xLTFWNw0KCWMwLTAuNTUyLDAuNDQ4LTEsMS0xczEsMC40NDgsMSwxVjEyeiBNOCw1LjAxNmMtMC41NTIsMC0xLTAuNDQ4LTEtMWMwLTAuNTUyLDAuNDQ4LTEsMS0xczEsMC40NDgsMSwxQzksNC41NjgsOC41NTIsNS4wMTYsOCw1LjAxNnoNCgkiLz4NCjwvc3ZnPg==
I'm having problems with the content loaded with AJAX inside a DIV.
I need custom CSS for the loaded content, but using <style> tag inside the div (or anywhere outside the <head>) does not respect the W3C standards.
Even more, in IE8 using <style> inside the div is not working as expected.
How can we solve this situation?
You could have the AJAX response modify the the contents of the <head> tag and add a new style tag. Your response would have two parts to it, the HTML and the CSS. The CSS should be added to the document before the HTML to ensure it is used.
Check out this post for adding CSS to the head: i prepend the css to the end of head tag
I'm assuming you have already been able to load something with AJAX into your page. Just convert your response to a JSON response with two parts, the CSS and the HTML. The JSON Spec might help too. You will need to escape any HTML or CSS that you send as a response.
I want to refer to an image in my main stylesheet for a Grails app and I can't get it to work. My image lives in the standard location in my Grails app...
project\web-app\images\outbound-blue.png
In my stylesheet I want to use it as a background image for a class...
.messageimg {
height:17px;
width:16px;
background-image:url(images/outbound-blue.png);
background-repeat:no-repeat;
}
This doesn't work for some reason. My stylesheet is in the normal location too, i.e.
project\web-app\css\main.css
I get a missing image marker when I load the page in the browser. I have checked that I have no typos in names etc. I have also tried fiddling around with the virtual path in the url, but I can't figure out what I need to put in there to make this work in Grails.
I don't want to use GSP and insert an IMG tag into my code because I want to control the image through styles.
So, what am I doing wrong?
A more portable way to specify image locations is to use the resource() function:
.messageimg {
height:17px;
width:16px;
background-image:url('${resource(dir: "images", file: "outbound-blue.png")}');
background-repeat:no-repeat;
}
Try adding "../" at the beginning of the URI. For example:
../images/outbound-blue.png
The "../" at the start of the URI tells the browser to go up one level to the parent directory then look in the images directory. Currently you have it set up to look for a subdirectory called images in the directory containing stylesheets.
Be aware though. Using $resource{... does not work within a referenced .css file. You need to add a style element.
Typically you would reference a resource in a style sheet as a relative url. The url of your image should be relative to the CSS file's location. So ../images/outbound-blue.png from /appName/css/main.css will be referencing /appName/images/outbound-blue.png
If you are still having issues, You can debug this by using a tool like firebug to inspect the page and verify each step in your style.
Verify that:
The item that you think is being styled is picking up the styles.
The image that you are referencing can be accessed both manually, and via firebug.
The css file that you are loading isn't cached and is actually refreshed by the browser.
So the problem seemed to be that the browser was looking into
http://localhost:8080/<app-name>/assets/images/<background-image-name>
which seems correct but if you inspect other images on the page, they render from the path
http://localhost:8080/<app-name>/assets/background-image-name
So, just by excluding images in your path-name should fix the issue. However, this is just a work around which I am sure would have a better explaination and a solution. Cheers.