Archive for September, 2011

Ordering mysql results by certain field value first

30 Sep, 2011  No Comment

I needed to order a mysql result but in a somewhat custom way.

Say there is a field “id” and rows of values of 8, 4, 2, and 19.

SELECT `id` FROM `table_name` ORDER BY `id`;

This would obviously return the order: 2,4,8,19.

But what if you needed the 4 to be first and then order by integers?

SELECT IF(`id` = '4','0','1') AS `custom_order` FROM `table_name` ORDER BY `custom_order`;

This would return 4,2,8,19.

Simple and can be really helpful.

How do I make a simple accordian menu?

26 Sep, 2011  No Comment

HTML:

<ul>
<li><a href="/">Home</a></li>
<li><a href="#solutionsList" class="heading">Solutions</a>
    <ul>
    	<li><a href="/locate.php">Locate</a></li>
    	<li><a href="/jobs.php">Jobs</a></li>
    	<li><a href="/timesheets.php">Timesheets</a></li>
    </ul>
</li>
<li><a href="/about.php">About</a></li>
<li><a href="#techSupport" class="heading">Technical Support</a>
    <ul>
    	<li><a href="/support.php">Technical Support</a></li>
    	<li><a href="/support.php">Technical Support</a></li>
    	<li><a href="/support.php">Technical Support</a></li>
    </ul>
</li>
<li><a href="/contact.php">Contact</a></li>
</ul>

This is a typical nested list format. The list components that have an unordered child list group inside them need the following.
1) A link with a specified ID
2) A child ul list that has a class equal to the id of the link (from #1)

CSS:

ul{background:#faf7f3; margin:0; padding:0;}
li{display:block;  list-style-type:none; }
li a{ display:block; font-weight:bold; height: 20px; padding: 8px 0 8px 12px;}
li ul{margin: 8px 0 8px 0; padding:0;}
li ul li{display:block; list-style-type:none; font-weight:normal }
li ul li a{ font-weight:normal; padding: 1px 0 1px 12px; }

Just some styling to align the list items and make them look decent.

jQuery:

[script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"][/script]
[script type="text/javascript"]
$(document).ready(function() {
	$('ul#accordion a.heading').click(function() {
		$(this).css('outline','none');
		if($(this).parent().hasClass('current')) {
			$(this).siblings('ul').slideUp('slow',function() {
				$(this).parent().removeClass('current');
			});
		} else {
			$('ul#accordion li.current ul').slideUp('slow',function() {
				$(this).parent().removeClass('current');
			});
			$(this).siblings('ul').slideToggle('slow',function() {
				$(this).parent().toggleClass('current');
			});
		}
		return false;
	});
});
[/script]

Finally the code that makes the toggled list work.

————————–

NOTE: TOGGLE INITIAL SUB-NAVIGATION
You can set one of the toggle contents to be open by checking the URL and use the jquery toggle function on the sublist ID you want visible. The way I did it was to use the ‘indexOf’ function to see if the link contained a certain value. The following code would go after the click function in ‘$(document).ready’:

var loc = window.location.pathname
var pageVar = '#nothing';
if ((loc.indexOf("locate") != -1)||(loc.indexOf("job") != -1)||(loc.indexOf("timesheet") != -1)){
	pageVar = '#solutionsList'}
else if (loc.indexOf("support") != -1){
	pageVar = '#techSupport'}
 
$.fx.off = true;
$(pageVar).slideToggle('800',function() {
	$(pageVar).parent().toggleClass('current');
});
$.fx.off = false;

How do I queue jQuery ajax requests

21 Sep, 2011  1 Comment

I was recently doing some javascript testing and needed to make some asynchronous (sequential) ajax requests for authentication, creating of records, etc. As with all good things jQuery, the solution to this problem is to install the plugin. The ajaxq plugin, that is.

Installation is as simple as including it in your code.

[script language="javascript" src="/js/jquery-1.6.2.min.js"][/script]
[script language="javascript" src="/js/jquery.ajaxq.js"][/script]

Then calling the $.ajaxq method, which takes the queue name (use different names to run multiple asynchronous queues synchronously) and the settings object with the same parameters as jQuery’s ajax function.

$(function() {
	//Login, then logout
	$.ajaxq("queue", {
		url: '/api/user/login',
		type: "POST",
		data: { 
			username: "username", 
			password: "password"
		},
		success: function(data) {
			document.write("Logged in...<br />");
		}
	});
 
	$.ajaxq("queue", {
		url: '/api/user/logout',
		type: "POST",
		success: function(data) {
			document.write("Logged out...<br />");
		}
	});
});

And finally, an example which runs two queues simultaneously:

$(function() {
	//Login, then logout
	$.ajaxq("one", {
		url: '/api/requestone',
		type: "POST",
		success: function(data) {
			document.write("Request one queue 'one'...<br />");
		}
	});
 
	$.ajaxq("two", {
		url: '/api/user/logout',
		type: "POST",
		success: function(data) {
			document.write("Request 1 queue 'two'...<br />");
		}
	});
 
	$.ajaxq("two", {
		url: '/api/user/logout',
		type: "POST",
		success: function(data) {
			document.write("Request 2 queue 'two'...<br />");
		}
	});
});

Output could either be

Request 1 queue 'two'...
Request 2 queue 'two'...
Request 1 queue 'one'...

or

Request 1 queue 'one'...
Request 1 queue 'two'...
Request 2 queue 'two'...

Pagination in Kohana 3.2

20 Sep, 2011  1 Comment

Unfortunately Kohana 3.2 dropped the pagination module. Usually updates just extend the current features so not sure why they removed the functionality. It may have had pure MVC concepts but it was a nice feature.

However, getting the results in orm for a pagination is still pretty simple. First add the route that will pass the page number from the friendly URL.

Route::set('pagi_page', 'welcome/index(/)')
	->defaults(array(
		'controller' => 'welcome',
		'action'     => 'index',
		'page' => '1'
	));

Next set up the limits in your controller action:

public function action_index()
{
     $limit = 30; //change this to the number of results you want.
     $page_number = $this->request->param('page');
     $offset = $limit * ($page_number-1);
}

And then just use those variables to manipulate the ORM to get the expected results.

public function action_index()
{
     $limit = 30; //change this to the number of results you want.
     $page_number = $this->request->param('page');
     $offset = $limit * ($page_number-1);
 
     $results = ORM::factory('items')->limit($limit)->offset($offset)->find_all();
}

Adding an exit animation to ::Featured Content Glider

18 Sep, 2011  No Comment

Dynamic Drive has a really useful script called Featured Content Glider.
My only complaint was that the layer kept overlapping the previous one instead of a nice flow by having the previous animate out while the new slide animated in.

So what I did was add some lines to the featuredcontentglider.js

1) add “var startingvar = 0;” after “jQuery.noConflict()”
It created a variable that I found useful to know exactly what slide I was on.

2) the if statement following “//Test for toggler not being initialized yet, or user clicks on the currently selected page):” should be replaced with the following if statement:

//Test for toggler not being initialized yet, or user clicks on the currently selected page):
if (config.$togglerdiv.attr('lastselected')==null || parseInt(config.$togglerdiv.attr('lastselected'))!=selected){
	var $selectedlink=config.$toc.eq(selected)
	config.nextslideindex=(selected<config.$contentdivs.length-1)? selected+1 : 0
	config.prevslideindex=(selected==0)? config.$contentdivs.length-1 : selected-1
	config.$next.attr(&#039;loadpage&#039;, config.nextslideindex+"pg") //store slide index to go to when "next" link is clicked on
	config.$prev.attr(&#039;loadpage&#039;, config.prevslideindex+&#039;pg&#039;)
 
	if (startingvar != 0){
		var $previous=config.$contentdivs.eq(config.prevslideindex)
		var startpoint=(config.leftortop=="left")? {left:0} : {top:0} //animate it into view
		$previous.css(config.leftortop, startpoint).css("zIndex", this.csszindex) 
		var endpoint=(config.leftortop=="left")? {left:-config.startpoint} : {top:-config.startpoint} //animate it into view
		$previous.animate(endpoint, config.speed)
	}
	startingvar++;
 
	var startpoint=(isprev=="previous")? -config.startpoint : config.startpoint
	$target.css(config.leftortop, startpoint).css("zIndex", this.csszindex++) //hide content so it&#039;s just out of view before animating it
	var endpoint=(config.leftortop=="left")? {left:0} : {top:0} //animate it into view
	$target.animate(endpoint, config.speed)
 
	config.$toc.removeClass(&#039;selected&#039;)
	$selectedlink.addClass(&#039;selected&#039;)
	config.$togglerdiv.attr(&#039;lastselected&#039;, selected+&#039;pg&#039;)
}

And that is pretty much it. This makes the current slide animate out while the new slide comes in. I think this creates a more friendly rotating feature that is less disruptive to the user experience.

Adding a dynamic robots.txt to Kohana 3

16 Sep, 2011  1 Comment

Adding a function that dynamically generates a robots.txt  to Kohana 3 is actually very easy.

First we need to add a route to bootstrap.php that will route the yourdomain.com/robots.txt url to the function.

Route::set('robots', 'robots.txt')
 ->defaults(array(
  'controller' => 'home',
  'action'     => 'robots',
 ));

Now we create the action “action_robots” in the home controller and output the exclusions we are looking for.

public function action_robots()
{
 
		header('Content-type: text/plain');
		echo "User-agent: *\r\n";
		echo "disallow: /";
		exit();
}

The content-type here is very important, as search engines will not read it as a php file.

NOTE: This will not work if your application if the index_file configuration in bootstrap.php is set to TRUE. This is because if it is set to TRUE then the url would turn out to be /index.php/robots.txt which is obviously not where the search engines will be looking for the restrictions.

Login Approach for a Flex Mobile Application

11 Sep, 2011  No Comment

I find that the best way to make a log-in for a flex application is to make it via states. I originally made my application have a log-in that then forwarded to a new view, but the transfer of data and the overall efficiency proved to be a lot easier by using states between the “LogIn” and the “HomeView”.

The data object saved by the phone while the application is running can keep a user log-in in when the user closes out of the application for a little while. If a username variable in the data object is available, then you can make ‘currentState = “HomeView”‘ otherwise have the ‘currentState = “LogIn”‘.

Again, it’s possible to do it completely with views and data forwarding. I just ran into problems with the back button returning you to the “LogIn” view even though they were already signed in. (since data is only easily pushed to new views. Views needs to be set up to get data from popped views, only to find they need to forward to the next view because they were already signed in.) Although I think there is a way to pop the “LogIn” view from the view stack, but overall I found this method less complex for application authentication.

Custom jQuery “lightbox”

6 Sep, 2011  1 Comment

One thing I learned this week was how to make my own “lightbox” in jQuery. I’ve always used tools like thickbox or lightbox, but I’ve never actually needed to change some of it’s functionality. Or for that matter, change the look of it other than a quick color swap or two.

The below code is the main HTML of the light box. It’s quite fantastic because anything inside the “modal-container” div can be styled exactly how you need it without the over-extensive code written for other light-boxes:

<div id="overlay"> </div>
<div id="modal-container">Hi I'm a lightbox</div>
<a href="#" class="modeBoxLink">Click me to open modal box</a>

Here’s a little CSS to make it invisible on default and set the overlay and container colors:

#overlay, #modal-container{display:none; } 
#overlay{background:#000; width:100%; height:100%; position:fixed; top:0; left:0;  }
#modal-container{background:#fff; width:820px; height:420px; border:3px #ccc solid; top: 10%; left:50%; margin:0 0 0 -420px; position:fixed;filter:alpha(opacity=100);  opacity:1;}

The below code is the main jQuery commands that makes the lightbox appear and go away:

$(document).ready(function(){
	$('#overlay').click(function() {
		$('#overlay').fadeOut();
		$('#modal-container').fadeOut();
		return false;
	});
 
	$('.modeBoxLink').click(function() {
		$('#overlay').fadeIn(1000);
		$('#modal-container').fadeIn(1000);
		return false;
	});
});

So if you have a link on the main page with class set to “modeBoxLink” it will open up the box you just created! Good for whatever content you need in such a window. ((Don’t forget to include the jQuery library))

All together:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#overlay').click(function() {
		$('#overlay').fadeOut();
		$('#modal-container').fadeOut();
		return false;
	});
 
	$('.modeBoxLink').click(function() {
		$('#overlay').fadeIn(1000);
		$('#modal-container').fadeIn(1000);
		return false;
	});
});
</script>
 
<style>
#overlay, #modal-container{display:none; } 
#overlay{background:#000; width:100%; height:100%; position:fixed; top:0; left:0;  }
#modal-container{background:#fff; width:820px; height:420px; border:3px #ccc solid; top: 10%; left:50%; margin:0 0 0 -420px; position:fixed;filter:alpha(opacity=100);  opacity:1;}
</style>
 
<div id="overlay"> </div>
<div id="modal-container">Hi I'm a lightbox</div>
<a href="#" class="modeBoxLink">Click me to open modal box</a>

How do I add a timepicker to the jQuery UI datepicker

5 Sep, 2011  No Comment

I recently needed to add a datetimepicker to an API project I’m working on. I love the jQquery-ui datepicker, but it doesn’t have the option for time. I found a great plugin to the jQuery-ui datepicker called the Timpicker Addon.

The addon supports localization, has sliders to pick the time and is fully configurable. I was able to make it do exactly what I needed, pick to the exact PHP date format I needed (Y-m-d H:i:s).