Using a user stylesheet, I want to put a special icon before any link that takes me to a different domain from any website(e.g. example.com to example1.example.com, example.com to stackoverflow.com, example.com to example.com:80,*http://example.com* to https://example.com etc. but not example.com/patha to example.com/pathb). How would I do this? I already know that to put the image before a link, I must use something like
a:before
{
content:url(path/to/icon.png);
}
I have tried it and made sure it works, but how would I make it select only cross-domain links? My limitations are to that of the user style sheet in Chrome, meaning no scripts unless I can specify a user-written script without turning it into an extension.
I've tried a[href^=http]:before but a) not every website puts protocol in front of urls and b) websites can link to themselves with the protocols.
Thanks!
I've found the perfect solution to your problem.
Sadly, it's in CSS4, and we're still waiting for all of CSS3.
Here's the code anyway, as found in w3 specs;
a:not(:local-link(0)):before {
content:url(path/to/icon.png);
}
Related
I have a wufoo form that I am trying to customize with css. My css form is being uploaded as far as I can tell, but so far I haven't been able to change anything. Any tips?
The only thing I've tried to do is change the header color like so:
.wufoo .info h2 {
color:blue;
}
Here are the necessary links:
Stylesheet - http://crimsonroot.com/files/php/custom.css
Form - https://thedrawshop.wufoo.com/forms/r60xxmf0kwbb7j/
The issue as far as I can tell is that you are trying to link to a stylesheet, that is not on an secure connection. Basically it's http but your form is secured https. Many browsers by default prevent the loading of "mixed content" you will need them to both be on the same connection style before it will even begin to load.
Hope that helps.
Also try this, tested and works.
http://thedrawshop.wufoo.com/forms/r60xxmf0kwbb7j/
I ran into the same problem and then I hosted it on Github but it seems that Wufoo is still not loaded it even if it was imported correctly when you check the source.
What I did was to host it instead on Dropbox. I used the sharing link and then added raw=1 at the end.
E.g. https://www.dropbox.com/s/x2fhvsk83fnebw3/wufoo.css?raw=1
That did the trick for me. I hope it helps.
I've just been tasked with migrating a website from a Windows server to a Linux server.
One of the issues I've noticed straight away is that there are a number of CSS url() definitions that don't work because the case in the CSS is not the same as the actual file.
eg:
background: url(myFile.jpg);
while on the server the file is actually MyFile.jpg.
Does anyone know of a simple tool or browser plugin I can use just to scan the CSS file and verify that the url() declarations exist so that I can easily find and fix them?
The site is quite large, so I don't want to have to navigate through the pages to find 404 errors if I can avoid it.
Use Developer Tools in Google Chrome or Firebug in Firefox.
When you load HTML page with that CSS, it will show any missing resources in Network tab.
EDIT
I guess there is no any tool that will
Scan through CSS file for all the URLs
Check whether each URL exists or not.
But you can try following two links for these two tasks.
RegEx to get the URLs from CSS : With this you will have all list of URLs used in CSS
Check if a URL exists or not with cURL : An example in PHP was given.
You can still search for these two items separately and try fixing the issues.
Let me know if this helps.
What, if you simply write a http request into browser's URL bar pointing directly to the image and/or css?
How about firebug in firefox? It would give you all 404 in its console.
download
You can install Firebug if you're using Firefox or you can press F12 if you're using Chrome.. i think that goes the same with IE.. From there you will be able to check the URL and even view it in a new tab.
Turns out that the W3c Link Checker also scans CSS files which is very handy.
Had this have not worked I would have had to put together something like Vanga's solution.
Here's how I would approach this.
Make sure all image requests are handled by a (PHP) script, by adding the following to my .htaccess
RewriteRule .(?:jpe?g|gif|png|bmp)$ /images.php [NC,L]
Use file_exists() to check if the file exists, maybe even try if a lowercase version of the file exists.
Log missing files into a database table or text file.
Use a script to loop through the website's sitemap with curl to get a complete list of requested filenames that resulted in a 404.
I'm trying to execute an HTTP GET from my website to another website that is brought in via iframe.
On Firefox, you can see in the source that the correct url is in the iframe src along with it's correct parameters-- and it works.
On IE, you can see in the source that the correct url is in the iframe src along with it's correct parameters-- and it doesn't work...
Is there something about IE that doesn't let you pass parameters through an iframe in the querystring?
I've tried refreshing the iframe in IE, I've tried refreshing my page & the iframe in IE, and I've tried copying the url and re-pasting it into the iframe src (forcing it to refresh as if I just entered it into the address bar for that iframe window). Still no luck!
Anyone know why this is happening, or have any suggestions to try to get around this?
Edit: I cannot give a link to this because the site requires a password and login credentials to both our site and our vendor's site. Even though I could make a test account on our site, it would not do any good for the testing process because I cannot do the same for the vendor site. As for the code, all it's doing is creating the src from the backend code on page load and setting the src attribute from the back end...
//Backend code to set src
mainIframe.Attributes["src"] = srcWeJustCreated;
//Front end iframe code
<iframe id="mainIframe" runat="server" />
Edit: Problem was never solved. Answer auto accepted because the bounty expired. I will re-ask this question with more info and a link to the page when our site is closer to going live.
Thanks,
Matt
By the default security settings in IE query parameters are blocked in Iframes. On the security tab under internet options set your security level to low. If this fixes your problem then you know that is your issue. If the site is for external customers then expecting them to turn down their security settings is probably unreasonable, so you may have to find a work around.
Let's say your site is www.acme.com and the iframe source is at www.myvendor.com.
IIRC, most domain-level security settings don't care about the hostname, so add a DNS CNAME to your zone file for myvendor.acme.com, pointed back to www.myvendor.com. Then, in your IFRAME, set the source using your hostname alias.
Another solution might be to have your Javascript set the src to a redirector script on your own server (and, thus, within your domain). Your script would then simply redirect the IFRAME to the "correct" URL with the same parameters.
If it suits you, you can communicate between sites with fragment identifiers. You can find an article here: http://tagneto.blogspot.com/2006/06/cross-domain-frame-communication-with.html
What BYK said. I think what's happening is you are GETting a URL that is too large for IE to handle. I notice you are trying to send variable named src, which is probably very long, over 4k. I ran into this problem before, and this was my code. Notice the comment about IE. Also notice it causes a problem with Firefox then, which is addressed in another comment.
var autoSaveFrame = window.frames['autosave'];
// try to create a temp form object to submit via post, as sending the browser to a very very long URL causes problems for the server and in IE with GET requests.
var host = document.location.host;
var protocol = document.location.protocol;
// Create a form
var f = autoSaveFrame.document.createElement("form");
// Add it to the document body
autoSaveFrame.document.body.appendChild(f);
// Add action and method attributes
f.action = protocol + '//' + host + "/autosave.php"; // firefox requires a COMPLETE url for some reason! Less a cryptic error results!
f.method = "POST"
var postInput = autoSaveFrame.document.createElement('input');
postInput.type = 'text'
postInput.name = 'post';
postInput.value = post;
f.appendChild(postInput);
//alert(f.elements['post'].value.length);
// Call the form's submit method
f.submit();
Based on Mike's answer, the easiest solution in your case would be to use "parameter hiding" to convert all GET parameters into a single URL.
The most scalable way would be for each 'folder' in the URL to consist of the parameter, then a comma, then the value. For example you would use these URLs in your app:
http://example.com/app/param,value/otherparam,othervalue
http://example.com/app/param,value/thirdparam,value3
Which would be the equivalent of these:
http://example.com/app?param=value&otherparam=othervalue
http://example.com/app?param=value&thirdparam=value3
This is pretty easy on Apache with .htaccess, but it looks like you're using IIS so I'll leave it up to you to research the exact implementation.
EDIT: just came back to this and realised it wouldn't be possible for you to implement the above on a different domain if you don't own it :p However, you can do it server-side like this:
Set up the above parameter-hiding on your own server as a special script (might not be necessary if IE doesn't mind GET from the same server).
In Javascript, build the static-looking URL from the various parameters.
Have the script on your server use the parameters and read the external URL and output it, i.e. get the content server-side. This question may help you with that.
So your iframe URL would be:
http://yoursite.com/app/param,value/otherparam,othervalue
And that page would read and display the URL:
http://externalsite.com/app?param=value&otherparam=othervalue
Try using an indirect method. Create a FORM. Set its action parameter to the base url you want to navigate. Set its method to POST. Set its target to your iframe and then create the necessary parameters as hidden inputs. Finally, submit the form. It should work since it works with POST.
I want to hack my browser to redirect from one website to another when I type in a URL.
For example:
When I type "facebook.com" into my Firefox address bar, I want it to redirect to "lite.facebook.com"
Are there configuration files in Firefox that allow me to do this? Almost like a local mod_rewrite?
It looks like the Greasemonkey plugin for Firefox will let you do this.
For instance, it will let you redirect a page to the equivalent secure version, like so:
window.location.href = window.location.href.replace(/^http:/, 'https:');
If you're doing more than just changing hosts, and you're using Firefox, you might consider Greasemonkey. It might be a little more than what you're looking for, though.
Write a greasemonkey script that does the redirect in javascript.
Is there a built in way to change the favicon for different themes? If not would it be as simple as creatign a custom control to emit the link tag with the correct url to the icon?
Update
So based on what I have found in order to do this, it looks like I am going to have to create an http handler that will intercept all calls for favicon.ico.
This handler will then determine which theme we are using (in my case it will be based on the domain name), it will then output the themed favicon.ico from the various themes folders.
Since I am supporting IE7, I'm thinking this is the only option I have. Still curious if anyone else has a better way.
As long as your user is not using IE, that should be fine. IE (up to at least version 7) only reads the favicon.ico file and completely ignores the link tag.
After some research and thought It looks like the only way to do this and still support IE7 and earlier (I am not sure if IE8 updated support for favicon or not). Would be to dynamically serve the icon to do this you can do the following:
Create and register an HttpHandler to process requests for FavIcon.ico
Configure IIS to send requests for .ico files to ASP.Net (If your using IIS6 or earlier)
Run the logic that you use to determine which theme and from that find the .ico your going to serve up, and send it to the browser.
Note that per W3Schools
http://www.w3schools.com/browsers/browsers_stats.asp
You should expect about 1/2 your users to be using IE.