Total results: 24

An effective LESS.js file include pattern

In the previous article I gave an introduction to CSS preprocessors and explained the potential advantages of using this technology. One of the mentioned examples was the ability to break down your stylesheet into multiple files and join them together to create a single final CSS file. This method provides a clean hierarchy for managing stylesheets.

My preferred pattern for the architecture of a preprocessed stylesheet is as follows:

  • Settings
  • Libraries
  • Modules
  • Views

First include the settings for my project (colours, fonts etc. in variables).

Secondly library code you have, for example, reset.css should be included.

Next I include my global styles and separate them into manageable modules. e.g. Links, Forms, Tables.

Finally I include my view related code for specific web pages and any overrides that are required. For example, a "view" could be the website home page as it usually differs from the rest of the website.

Example LESS.js Stylesheet

# screen.less

// Import settings
@include "settings/global.less";

// Import libraries
@include "libs/reset.css"; // Notice the .CSS extension

// Import global modules
@include "modules/core.less";
@include "modules/links.less";
@include "modules/forms.less";
@include "modules/site_header.less";
@include "modules/site_footer.less";

// Import views
@include "views/home.less";
@include "views/contact.less";
@include "views/admin.less";

Although the syntax is in LESS, this will also work with SASS using the import command

LESS/SASS: The Advantages of CSS Preprocessing Explained

CSS has a very powerful syntax but can easily become very verbose when working on non-trivial projects. In recent years the need to solve this problem has brought to life the concept of the CSS preprocessors such as SASS/SCSS and LESS.js. The former is written for the Ruby programming language whilst LESS is compiled using JavaScript.

A preprocessor allows additional leverage over CSS by providing additional syntax that delivers the following advantages:

  • Nested syntax

  • Ability to define variables

  • Ability to define mixins

  • Mathematical functions

  • Operational functions (such as “lighten” and “darken”)

  • Joining of multiple files

SCSS and LESS have very similar syntaxes, with SASS being a slight variant on SCSS. The similarities between them allows a developer to switch seamlessly if need be. In the following demonstration I will focus on the LESS syntax but all of the concepts can be transferred to the Ruby world.

Detect if page is within Facebook iframe or not: Javascript

Make sure to check the update at the end of the article. 

There is a handy piece of Javascript which you can use to tell if the current page is within the Facebook canvas iframe, or if it is being viewed normally in the browser.

The Facebook canvas gives its window a special "name" attribute. In most cases unless you generated the browsing window, it will have no name so we can use the piece of code below.

  if(window.name != "") {
    //We are on Facebook
  } 
  else
  {
    //We are just in the normal browser window
  }

However, if you changed your window name through Javascript, change the IF statement to match.

With this information, we can hide, add or manipulate our HTML in any way that is required to highlight the difference between your Facebook app and the regular web app.

 

Update Feb 2016:

As noted by Kilian in the comment section, an imporved way to detect the Facebook iframe is:

if(window.name.indexOf('iframe_canvas_fb') > -1)

Detect if HTML 5 Geolocation is Enabled

If you want to check whether a browser has HTML 5 geolocation support enabled and display a warning message to the user if it is not, then this function should help you out.

function display_nosupport_message()
{
	if(!navigator.geolocation)
	{
		$('#map_canvas’).text('Your browser does not support HTML 5 geolocation. ');
	}
}

In this example I check to see if the navigator.geolocation method is available. If not then I use a jQuery command to update the div that would normally house the Google Map by adding warning text for the user.

Easy Javascript crossfading with jQuery

In today’s World Wide Web many websites are featuring projects or artwork on their homepage via a crossfading gallery. In the past this was normally done by an Adobe Flash movie but these days it is usually much easier to implement with Javascript.

A Javascript solution provides many benefits such as cross browser support, no plugins required and highly improved performance. There are many different ways to implement a crossfade in Javascript, many of them very complex, so today I will be showing you how this effect can be achieved with the jQuery framework, Cycle plugin and only a few lines of code.

First of all you must include the jQuery JavaScript by either downloading it from jQuery or including it right from their website.

Next we must download the Cycle plugin and include it from your computer.

Next step is to define your slideshow files in HTML. Simply write your img tags into a slideshow div tag.

Finally all you have to do is include an inline Javascript function to initiate the cycler. Remember to match up the class name of the slideshow div with the class name in the function.

<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>

That's it, a Javascript crossfading gallery in minutes. To see examples and additional effects that the cycle plugin can perform, please see the cycle plugin website.

Highlight textfield onclick

To highlight the value of a textbox when the user clicks on it, simply use the built in JavaScript function "select()"

Example:

<input onclick="this.select();" type="text" name="title" value="Title...">

Installing syntaxhighlighter error: XregExp not defined

I recently installed syntaxhighlighter. The useful JavaScript tool for professional formatting of code blocks for blogs etc. by Alex Gorbatchev.

I followed the installation guide properly adding the shCore.js and brush scripts I needed. I also included shCore.css and shThemeDefault.css style files but kept receiving the same JavaScript error: XregExp not defined in shCore.js

It turns out after a lot of trial and error that you do not use the JavaScript files in the "/src/" folder of the download files. These do not work. You must use the 3 files with the same name in the "/scripts/" folder, specifically:

  • shCore.js, 
  • shLegacy.js 
  • shAutoloader.js

© Blake Simpson, 2012 – 2017