The Original Jelani Harris The one and only


Fixing Foundation 5’s Unrecognized Expression Syntax Error



I was working on a new marketplace theme in Magento, and I kept getting a peculiar javascript error message. The exact error message that you might receive could vary - but the one I got was:

Uncaught Error: Syntax error, unrecognized expression: [data-'Times New Roman'-dropdown]

Huh? What? But it was the version of Jquery (2.1.1) that I was using that was causing this error. After some poking around (i.e. disabling everything and re-enabling every js file piece by piece), I discovered that the source of this issue is from Foundation's internal namespace.  If you set the namespace to be blank before you activate Foundation, the error goes away. = '';

By setting the Foundation's global namespace to be blank, Foundation won't attempt to set it. I'm not sure why I got this error but doing this allowed me to keep working and hopefully you too.



How to check if a jquery plugin is installed or available

Most Jquery plugins act a lot like functions. They are attached to the main Jquery object, so essentially all we have to do is check that the function exists and is defined.

if ($.pluginFunction) {
  // Function exists, do your plugin stuff here.
} else {
  // Plugin does not exist, use alternatives or do nothing in here.
Tagged as: , No Comments

Using Jquery to disable the enter key

There are times that you do not want a form to automatically submit when a user hits the enter key. Or if you want to do some validation via javascript before you allow the submit to go through.

//Bind this keypress function to all of the input tags
$("input").keypress(function (evt) {
//Deterime where our character code is coming from within the event
var charCode = evt.charCode || evt.keyCode;
if (charCode  == 13) { //Enter key's keycode
return false;

By returning false in the keypress function it tells the browser not to allow the enter key event.


JQuery is the best javascript library out there

I officially declare JQuery to be the best javascript library out there. So much documentation, so many plugins, so many interesting things you can DO with that library. I just lost 7-8 hours, implementing a prototype of a feature for my discussion site, Apparatus Complex. In particular it's a meta-game that I'm developing so that users can compete with each other in a role-playing game  while they wait for the site to update itself with content from other people.

So I had a crazy idea of using jquery and ajax to let people drag and drop equipment into slots, and then dynamically update what that piece of equipment would do to their statistics. Doing this in flash is really easy, I first got the drag and drop implemented (so easy with the Jquery UI), then I set the restrictions on which column each orb could belong in, and then I added the automatic update of the statistics just moments later. It was simply brilliant and it was pretty darn efficient. If you want to play around with this, it's located right here. The equipment orbs are generated randomly and so are the names.

By the way, MooTools and Prototype and Scriptalicious are okay as well. I'm just really impressed with JQuery right now.


Adding a delay to JQuery Functions

Recently I was working on a few functions that I didn't want to have activated immediately after hovered over a div. I neededthe functions to activate after a half a second of hovering by the user. To do this I created this this piece of code.

var display_timeout = 0;
$(".orb_space").hover(function () {
		if(display_timeout != 0) {
                // save a reference to 'this' so we can use it in timeout function
		var this_element = this;
                display_timeout = setTimeout(function() {
				display_timeout = 0;
				// perform things with this_element here buy referencing it like $(this_element)
				if (!$(this_element).hasClass('magic')) {
			}, 500);
		function () {
			if(display_timeout != 0) {

Let's go through line by line to see what's happening here.

Lines 2: The JQuery hover function has two parameters. The first parameter is for the function to call when the user hovers onto the element, and the second one is for when the user hovers out. Lines 4-16 consist of the first function and lines 19-24 consist of the second.

Lines 4-6: So if we happen to flash our mouse over the element very fast twice, this will make sure that we only have one timeout function happening.

Line 9: When we in the setTimeout function we need to remember a reference to our current element so that we don't have to do some tricky DOM navigation to get the hover activated element with the setTimeout event. It's just easier to just make a variable to remember the element.

Lines 11-15: First we reset the display_timeout variable, and then we can perform our necessary hover actions in this setTimeout function. The 500 indicates that we want this function to occur after 500ms.

Lines 20-23: This looks very familiar doesn't it? It's the same thing from lines 4-6. This is so that if the user rolls out of the hover element, the timer countdown will immediately stop and the hoverin functions will not occur.

Tagged as: 8 Comments