Archive for category: CSS

Solution: Firefox Font-Face Cross Domain Problem

Categories: Apache, CSS, Firefox, HTML

Firefox Font-Face Cross Domain Problem:

The other day I was working on a website that we were accelerating with a content deliver network (CDN). All the static content was to go through the cdn including the styles (css) file. We ran into a weird bug on Firefox. Font-face styles were not showing. The fonts were loading off the cdn.mysite.com sub domain while the rest of the site was running off mysite.com.

@font-face{
	font-family:'PreloSlab';
	src:url('../fonts/preloslab-medium-webfont.eot');
	src:url('../fonts/preloslab-medium-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/preloslab-medium-webfont.woff') format('woff'),
		url('../fonts/preloslab-medium-webfont.ttf') format('truetype'),
		url('../fonts/preloslab-medium-webfont.svg#PreloSlabMedium') format('svg');
	font-weight:normal;font-style:normal
	}

Reason:

Seems that Firefox supports the Cross-Origin Resource Sharing standard (CORS) for HTTP requests of some types of resource. This is a way for a remote host to control access to some types of resource. As it turns out, web fonts are subject to CORS. So, the appropriate Access Control headers need to be sent to the browser to allow the domain originating the request (the Origin) access to the resource.

Firefox Font-Face Cross Domain Solution:

Seems messy but it really isn’t. The correct header is:

Access-Control-Allow-Origin: http://mysite.com

On an Apache server you can accomplish this with a little edit to the .htaccess file.

<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "http://mysite.com"
  </IfModule>
</FilesMatch>
Note: while you should be able to list several domains separated by a comma. This did not work. I had to use Header set Access-Control-Allow-Origin “*” for multiple domains.

Font-Face Mime Types

While you are at it, you can also add the correct mime types to the files.

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff woff

jQuery External Links – Open in New Window

Categories: CSS, HTML, javascript, jQuery

When it comes to website management links are huge. Most people realize that if they have a link off their site that it is a possibility that they will loose person. Now, if the goal for your website it to keep customers where they can buy from you, it makes sense to never send a customer away.

However, the web is an amazing place with a huge amount of information. Your site can’t have all the info. Also, linking to quality content will also improve your SEO. So, you might just end up with more people visiting your site if you share the wealth around a little. But how can you have your cake and eat it too? Well, you could open a new browser window when you were sending someone to another site. That would mean that when they closed that windows, your site would still be there. Just so they don’t get lost.

Today, I am going to produce some code that will automatically open a new window for any external link and also show you how to dress up these links so that people will know that they are going to take them off your site. Hopefully, it will be a useful tutorial in some of the great features built right into jQuery.

1jQuery Selectors
jQuery has some amazing capabilities when it comes to its built in selectors for html elements. In this case, it makes good sense to use a selector to get all the links on the page and then use the jQuery each() function to iterate through each found link and test it to see if it links to an external site.

We’ll test if the link’s hostname matches the pages hostname. If they don’t we’ll know that the link is to another site and then we can do some additional work on it. The code looks like this:

2Alter The External Link
I want to add a new class to each external link (I’ll cleverly call this class ‘externalLink’). We’ll use the jQuery .addClass() function. We’ll use the .click() function to modify the existing onclick event for the link. Note: we could have added a target=”_blank” attribute, but that would not be xhtml compliant. These can be chained onto one line for efficiency.

jQuery(this).click(function(event) {
     event.preventDefault();
     event.stopPropagation();
     window.open(this.href, '_blank');
}).addClass('externalLink');

At this point the code is also complete. We want this code to fire when the page loads. So, we will wrap the code in the jQuery .ready() event handler. There is a shorthand that is great, we’ll use it here.

$(function() {
 // Handler for .ready() called.
});

Lastly, I wanted to style the external links differently from all the other links. We have already added the new class, ‘externalLink’, to the link element. I wanted to add an icon similar to how Wikipedia does. So, we’ll want to add a couple lines of css to the styles.

3Putting It All Together
When we put it all together it is a simple, elegant and extremely useful solution. Here is the final code:

$(function() {
   $("a[href*='http://']:not([href*='"+location.hostname.replace
           ("www.","")+"'])").each(function() {
       $(this).click(function(event) {
             event.preventDefault();
             event.stopPropagation();
             window.open(this.href, '_blank');
        }).addClass('externalLink');
   });
});
.externalLink {
    background: url("/images/externalLink.png") no-repeat scroll right center transparent;
    padding-right: 13px;
}
© 2014 - www.UnseenRevolution.com - Unseen Revolution LLC. 333 NW 4th Ave. Portland, OR 97209
53869aae5ff9b
By
UnseenRevolution.com Portland, OR Category: Webinar
UnseenRevolution.com Portland, OR Category: Webinar
UnseenRevolution.com Portland, OR Category: Webinar