Server Side Guy

The scenario is this: You have a table and you want to let users sort each column and filter the results. Fortunately, jQuery and dataTables has just what you need. There are so many options out there which can help you accomplish anything from a simple implementation to a full-fledged server-side sorting on the scale of Amazon.com. (Amazon is the most prominent website to feature the dataTable functionality.)

There are 7 easy steps to making the table happen.

1. Create a table with a table head <thead>, body <tbody>, and foot <tfoot>. Don’t forget to give your data Table a class name.
2. If you wish to filter each individual column with a search box, create a <tr><th><input> inside of the <tfoot>.
3. Include jquery.js, jquery.dataTables.js, and the jquery.dataTables.columnFilter.js files.
4. If you wish to use the formatting to go along with your tables, include the @import CSS segment:

<style type="text/css" title="currentStyle">
			@import "/js/DataTables/media/css/demo_page.css"; 
			@import "/js/DataTables/media/css/header.ccss";
			@import "/js/DataTables/media/css/demo_table.css";
</stule>

5. Make your $document ready and include the code:

<script>
$(document).ready(function(){
$('.dataTable').dataTable()
.columnFilter();
});
</script>

6. If you wish to skip columns with the filter function, you can add this:

$(document).ready(function() {
	$('.dataTable').dataTable()
 
	.columnFilter({
		aoColumns: [
			null,
			{type: "text"},
			{type: "text"},
			{type: "text"}		]
	});
});

7. And if you only want to sort, just eliminate the .columnFilter function like this:

<script>
$(document).ready(function(){
$('.dataTable').dataTable();
});
</script>

It’s really quite easy to use. You can then select individual elements and style them to your heart’s content.

And when you’re ready, you can look at more advanced examples here:

This is one of the easiest fixes ever, but I believe I’m the first on the internet to blog about this issue. The issue arises when building a mobile project in Adobe Flash Builder with the Air namespace. In the *-app.xml file, the namespace is what is used to define whether the XML document is “well-formed” or not.

If your [project]-app.xml file is generating a namespace error, it could be one of two things. The first is simply that the namespace version is not up-to-date. In this case, the “problems” panel will show you which version you should be using.

If it’s saying your version is 0.0.0 and you know you have 3.1 or 3.2 in the namespace, then you probably have the same issue. Here’s the error message:

namespace 0.0 in the application descriptor file should be equal or higher than the minimum version 3.1 required by flex sdk

If this issue comes up, your problem might be as simple as directional quotes. This could happen if you have typed ‟ or ” rather than “. The solution is simple. Make sure that your quotation marks are not directional. Here’s how your namespace declaration should look.

<application xmlns=”http://ns.adobe.com/air/application/3.1″>

Hope that was helpful for you.

Aligning things in the middle and centered is something quite common, but it can be a challenge to figure out on your own.

Let’s say you’re making a quiz which populates the answers and the select buttons from a database. Let’s say the answers vary from 1 to 3 lines. The easiest thing to do is to put the answers and their corresponding buttons in a table and then align the table cells to the middle.

But you should never (Well, almost never…) put things into tables. And in this case, you’re lucky not to need to put them in a table.

First, create an unordered list with list items for each answer. (ul and li)

You have two choices at this point. You can either make another ul and li within your li and make the structure look like above, or you can (better) put divs inside of your li’s:

 <ul>
    <li>
<ul>
    <li>Answer button 1</li>
    <li>Answer 1</li>
</ul>
</li>
<li>
<ul>
    <li>Answer button 2</li>
    <li>Answer 2</li>
</ul>
<li>
</ul>

Once you have your list laid out, I’ll encourage you to replace the inner ul and li with div’s instead. Nested lists are too ugly and there’s too much to keep track of when formatting it.

 <ul>
    <li>
    <div id="answer-btn-1">Answer button 1</div>
    <div id="answer-1">Answer 1</div>
    </li>
    <li>
    <div id="answer-btn-2">Answer button 2</div>
    <div id="answer-2">Answer 2</div>
    </li>
</ul>

Now that you’re all set with your div’s inside of lists, you’ll need to style the divs within the lists to allow them to center vertically in the middle. Here’s the CSS:

li div {
display:table-cell;
vertical-align:middle;
width:700px;
}

The first style formats the divs as though they were table cells. The second line makes them align middle (which is now possible, since they’re being styled as table cells). The final one is just setting the width of your new “cells”

Now you’ll want to make sure that your answer divs are aligned in the middle vertically (vertical-align: middle;) But not horizontally (unless you want them horizontally aligned.) Then you want to eliminate floats, since the float will cause the divs to display all right next to each other. If these three lines don’t do it, you could try working with a height property and fixing the height. But if it’s working fine without a height property, why make your work more difficult than it needs to be?

With these fixes, you should be able to align just about anything in the center.

Since there has yet to be a jQuery Mobile to be released, we are stuck using what works on our desktop browsers.  Unfortunately, not all these features will transfer to give the user the same experience on the new mediums of phones and tablets.   Simply stated, the jQuery UI library doesn’t support touch events(touchstart/touchmove/touchend) which are used to interact with the widgets. (they currently listen to mouse events(mouseover/mousemove/mouseout)).

So, for Example:  If I hold and slide a slider on an ipad, the value will show zero until I let go.  Ideally, you’d want the values to change just as they would on a computer as you slide.

So while we wait for an official release for mobile devices, I use jQuery UI Touch Punch for these extended phone and iPad capabilities.  This hack has provided an easy fix to get the functionality to work on mobile.

“jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library.”

Implementing this is pretty easy as well.  Full instructions are here.

• Include the latest/desired version of jQuery and jQuery UI
• Include jQuery UI Touch Punch (after jQuery UI and ui.mouse.js)
• Activate it by applying the “draggable” function on the element needing the touch support. (after jQuery UI Touch Punch include)

And then voila, your interface should now be working on mobile devices.

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>$('#widget').draggable();</script>

If you’ve found this article, congratulations! Only statisticians seem to know what it’s called. It looks like a big blob in a frying pan.

But once you’ve found out what it’s called, the rest is fairly easy with the jqchart jquery plugin. You can fully customize the chart for however many categories you have and then you inject the data.

It requires simply one div with a class or id so you can select it. The div is made into a canvas and the chart is drawn for you.

jqChart is a one-stop place for all your charting needs with jQuery. Any other kind of chart you could imagine can be generated with the jqchart plugin, including bubble charts, scatter charts, pie charts, financial charts, and even the plain and simple bar charts.

Another alternative for Radar charts is to use a combination of jQuery and Google Charting. The resulting chart does not have a radius or values listed as does the jqChart plugin, but it’s just as easy to use. And Here’s an example of where you can find it: Chart Types.

It is also possible to develop your own functions in JavaScript to make your own charts, but with the ease of use jqChart provides and with its flexibility, it’s hard to imagine why you wouldn’t just use that.

We needed modal functionality for a Kohana 3 app we have. I could see how this could be reusable in our future applications and for everyone else developing on Kohana 3, so I put it in a module to share with you. This module is used to created a lightbox style modal window.

Download

REQUIREMENTS:

-Kohana 3.0+. This will not work on Kohana V2.
-JQuery needs to be loaded before Modal is displayed.

HOW TO USE:

This Modal module is very easy to use. Put the modal folder in the modules directory of your Kohana application. Include it

in your bootstrap.php file:

'modal'        => MODPATH.'modal',        // Modal/Lightbox style Windows

Put the following code right under the tag:

 echo Modal::display();

Change the config file in the module directory to better suit your model window size and traits.

Congrats, the module is installed! Set a modal by:

Modal::Set($message(message or a loaded view), $locked( optional boolean defaulted to false));

If $locked is set to true, the screen will be locked, not allowing the user to exit the modal.

You may also add the class “modal-close” to any element. If that element is clicked it will exit the modal unless locked.

If any questions or requests, be sure to comment.

So you’re editing away on the server and all the sudden, your styling disappears. Disconcerting? Absolutely. But you’ve come to the right place for a solution.

One of two things could be happening with a permissions error (especially if you had everything working before). The less likely is that something was messed up with the .htaccess file. In this case, you’d need to go in and repair it. WordPress will fix the .htaccess file whenever you update your permalink structure…just a hint.

The second, and more likely problem is that your software somehow saved the file with the wrong permissions. When you upload it to the server, the permissions stayed the same. So here’s the fix:

1. Update the file’s permissions to 755. (That’s rwxr-xr-x)

(That’s the whole solution.)

The basic idea is that the file needs to be able to execute and be read by the world. The first set of 3 applies to the user (i.e. the php file), the second applies to the group (i.e. a workgroup) and the third to everyone else. In this case, the permissions are probably set so that the file cannot execute at all and perhaps not be read by either group or world. So your browser can’t send a request to the file, because the permission is denied.

So there you have it! Pure and simple file permissions!

There’s no doubt that Android and iOS are the most popular mobile platforms today. And everyone wants to have their own mobile app. Traditionally, it has been possible to develop for multiple devices using Adobe Flash Builder or Flash Professional. Not until the 4.5 and 5.5 releases respectively has it been possible to build a single project and package it for both markets.

Although better performance is obtained by using Xcode for iOS (because of threading and memory management) and Java for Android, not everyone is able to work with both languages or has the time to build two projects. Wherever superior performance isn’t required, your efforts are easily rewarded by using Flash Builder 4.5 or newer.

Here are the steps:

1. Provisioning (Development) Certificate
2. Develop/Test/Debug your app
3. Prepare graphics (logos, icon, screenshots)
4. Sign the app (Distribution Certificate, MobileProvision Certificate)
5. Build the project
6. Upload to Android (Google Play Market)
7. Upload iOS App Metadata
8. Download ApplicationLoader
9. Upload .ipa with the Application Loader
10. Wait for Apple’s approval

I ran into this problem this week.  I made a folder, set my permissions, and was stumped to find I couldn’t upload my files.  I found through some trial and error that this only applied to PDFs as other people were uploading their images just fine.  Equally as confusing, I could indeed still upload PDFs as a Super Admin.  So I was convinced Expression Engine was broken in regards to member permissions.

But with some research on the new EE2 settings, I found out how to fix this.  (note, it’s a bit of a workaround, but hey, it works)

In the control panel: Admin -> Security and Privacy -> Security and Sessions
Set “Apply XSS Filtering to uploaded files?” to “No”

When the EE2 came out, the XSS security settings was added to help when pdf files appear to have problems. If you trust your uploaders, turning it off should be okay.  People in forums are starting to realize that those XSS security settings may be a bit too strict to actually be useful.
(Of course, you should first make sure that folder has permissions for your user group, that might be your solution on its own.)