Code & Config – sharing the smart bits

There are cases where you do not want turn the visibility of certain elements off in your default CSS file. The reason is simple. When you get user who turned off the javascript in his/her browser these elements should be visible. The visibility off these elements should only be turned off for users we javascript turned on. Here is an example. You might have a content in boxes with tab navigation on top off them. You only want the first tab content to be visible when the page loads and leave the other turned off. The tab navigation is using javascript so you need to make sure that even when javascript is turned off the content off the other tabs is visible. In this example you can’t just simple turn the other boxes off in your main CSS and you also can’t use onload javascript or jquery function to turned this off because they would be visible until the page fully loads.

Here is the solution. Create javascript file and link it from the top of your page.

You can see the example on lewro.com.

<script type="text/javascript" src="/scripts/script_styles.js"></script>

Create a CSS file called script_styles.css and inside of it turn off the elements you do not want to be visible. You could for example create CSS class called visibility_off.

.visibility_off {
  display:none;
}

Inside the file javascript file we have created earlier and linked from the top of our page insert this function. Make sure the path to the CSS file is right.

(function () {
  var head = document.getElementsByTagName("head")[0];
    if (head) {
      // Lets build the CSS link
      var scriptStyles = document.createElement("link");
      scriptStyles.rel = "stylesheet";
      scriptStyles.type = "text/css";

     // Set the path to your CSS file
      scriptStyles.href = "http://www.lewro.com/wp-content/themes/caffee/css/script_styles.css";
      head.appendChild(scriptStyles);
  }
}());

So what is happening in here? The javascript fires when the page starts loading and inserts the link to your script_styles.css into the page’s head. This way your styles are immediately applied and there is not flickering of text which should not be visible during the loading of the site.

The support of browsers for rounded corners has not reached the level so we could use as default solution but there are always part of the site where it kind of make sense to use it. What i mean is that it will not really break the visual experience if the corners will not be rounded in some browsers (we talking Internet Explorer here).

The support for rounded corners is not the same across the browsers but there are ways around. This is what you need to do so the rounded corners syntax is understood by all browsers who are able to handle it.

Lets say we have class called “rounded_corners” we want to apply the rounded corners.

.rounded_corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

I would recommend to store this syntax as snippet if you text editor supports code snippets. You could assign shortcut such is “round” which would bring both of this CSS properties so you do not have to remember them. They are not the best to remember. Coda and TextMate supports code snippets.

So what is the jQuery most first function? It is an onload function. What does it mean? Let start from beginning. You need to understand how javascript work. Javascript is a scripting language which is used to manipulate html elements of the page. It can interact with the elements which are already part of the page or it can even insert or remove additional elements from the page. If we want to execute the javascript commands we need to be sure that the page has already finished loading so we do not try to interact with elements which has not been loaded yet. That is why we need function which takes care of all this for us. jQuery onload function can do just that. It makes sure that the page (actually DOM – Document Object Model) has been fully loaded so our javascript “commands” can fire safely.

$(function(){
  // All your functions will come in here
});

Is it that simple? Yes it is!
Lets do simple example.

$(function(){
  // so we said that everything we put in here will be executed after the DOM finished loading
  // lets do the simplest function alert
  alert("hello world");

  // if you use Firebug (very important Firefox extension) you will find very useful to print stuff into its console, this is how you do it
  console.log("hello console");
});