Archive
Stylish yet simple Javascript / JQuery navigation/control panel
Please note: A follow up post has been made here.
I’m currently working on a project which requires a “hideable” (for lack of a better word) control panel. Somewhere I can place links, forms etc for a user to access once they’ve logged into the site.
After having a look around I found the following jquery plugin : JKPanel. It works pretty well, but I needed additional functionality, such as loading new content inside the panel when clicking on a menu item or opening the panel from a separate button on the site.
It’s a quick hack, but someone out there may find it useful.
First, you need to get jquery here. Version 1.2.6 is recommended.
Next, you’ll need the panel button : 
Now, include the following code inside your <head> tags (license notice left intact by request of original author) :
<script type="text/javascript" src="jkpanel.js"> /*********************************************** * Drop Down Panel script- by JavaScript Kit (www.javascriptkit.com) * This notice must stay intact for usage * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more ***********************************************/ </script>
Include the following styles, whether inside your head tags or inside an external css file :
#dropdownpanel{ /*Outermost Panel DIV*/
position: absolute;
width: 100%;
left: 0;
top: 0;
visibility:hidden;
}
#jkcontentdiv{ /*Div containing Ajax content*/
background: black;
color: white;
padding: 10px;
}
#jkcontrol{ /*Div containing panel button*/
border-top: 5px solid black;
color: white;
font-weight: bold;
text-align: center;
background: transparent url( "../images/panel.gif" ) center center no-repeat; /*change panel.gif to your own if desired*/
padding-bottom: 3px; /* 21px + 3px should equal height of "panel.gif" */
height: 21px; /* 21px + 3 px should equal height of "panel.gif" */
line-height: 21px; /* 21px + 3px should equal height of "panel.gif" */
}
These styles remain largely untouched except for the classnames : I just felt that they needed to be a little more unique, since I’ve seen quite a few templates using .control and .contentdiv. The only thing to look out for here is the panel.gif image used in the #jkcontrol style definition.
Now for the contents of the jkpanel.js file :
//Drop Down Panel script (March 29th, 08'): By JavaScript Kit: http://www.javascriptkit.com
// Modified August 14'th, 08' By Barry Roodt : https://calisza.wordpress.com
var jkpanel={
controltext: 'Close Panel',
$mainpanel: null, contentdivheight: 0,
$contentdiv: null, $controldiv: null,
openclose:function($, speed){
this.$mainpanel.stop() //stop any animation
if (this.$mainpanel.attr('openstate')=='closed'){
this.$mainpanel.animate({top: 0}, speed).attr({openstate: 'open'});
this.$controldiv.show();
} else {
this.$mainpanel.animate({top: -this.contentdivheight+'px'}, speed).attr({openstate: 'closed'});
// comment out the following line if you want the "control" button to remain visible
this.$controldiv.hide();
}
},
loadfile:function($, file, height, speed){
jkpanel.$contentdiv.load(file, '', function($){
var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px';
jkpanel.$contentdiv.css({height: heightattr});
jkpanel.contentdivheight=parseInt(jkpanel.$contentdiv.get(0).offsetHeight);
jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'});
jkpanel.$controldiv.css({cursor:'hand', cursor:'pointer'});
})
},
init:function(file, height, speed){
jQuery(document).ready(function($){
jkpanel.$mainpanel=$('<div id="dropdownpanel"><div id="jkcontentdiv"></div><div id="jkcontrol">'+jkpanel.controltext+'</div></div>').prependTo('body');
jkpanel.$contentdiv=jkpanel.$mainpanel.find('#jkcontentdiv');
jkpanel.$controldiv=jkpanel.$mainpanel.find('#jkcontrol').css({cursor: 'wait', display: 'none'});
jkpanel.loadfile($,file, height, speed);
jkpanel.$mainpanel.attr('openstate', 'closed');
$('#jkcontrol, .panelbutton').click(function(){jkpanel.openclose($, speed)});
})
}
}
All that’s left to do now is create your menu link :
<a href="#" class="panelbutton" onclick="javascript:javascript:jkpanel.loadfile($, 'path/to/content.php', '200px', 500, true);">Example Link</a>
Note the class=”panelbutton” – This is just to tell our script to open the panel when this link has been clicked.
And Bob’s your Aunty, you’re done.
The next step for me is to add a method to load new content inside the panel from within the panel itself (submitting a contact form and displaying the result for example). The applications are pretty endless to say the least – and it all looks pretty stylish.
Have fun and give me a shout if you’ve used it so that I can check it out.
Flex / PHP Gallery
Just finished the conversion of a PHP / HTML based gallery module I wrote quite a while ago to a Flex based interface.
I used the Mate Flex Framework’s “Flickrbook” example as the basis and modified it to interact with my AMFPHP gateway script instead of the Flickr API.
I also modified some aspects of the user interface such as adding a category combobox to the search (populated from the database of course and includes sub-categories). I then converted the main image to the SuperImage component instead and added the photograph title and description to the main panel.
The biggest issue I had was setting the default selectedIndex for the thumbnail TileList as discussed in a previous post. That and learning how the Mate Framework functions, which I’m really impressed with.
All in all, it took me about 26 hours in total, including researching different examples, frameworks, installing the PHP gateway etc. Being pretty new to Flex I don’t think that’s too bad.
AMFPHP was dead easy though – if that took me more than 2 hours in total (including the writing of the gallery gateway class) it was plenty.
The next phase will be to convert the gallery’s admin interface to Flex as well. I’ve already done a file upload manager, so it should be a piece of cake.
You can view an example of the gallery here. Just click on the “View Gallery” link.
Django inspired SEF urls using PHP
Update : Full code, including example usage can be downloaded here.
Over the last 5 years or so, I’ve been developing my own personal php CMS/Framework. Based loosely on Mambo / Joomla with bits and pieces thrown in whenever I found something interesting and inspiring.
After having worked with Django over the last few months I’ve made some significant changes to my framework – actually, I’ve pretty much re-written the entire core from the ground up. I love the way Django works so much, I just had to incorporate some of their ideas – something about mimicry being the ultimate flattery.
So anyway – one of the features I find most useful is the way urls are handled. Powerful, flexible but without sacrificing ease of use – what more could one ask for. I like the fact that it has a default method of handling the urls, but gives you the freedom to create your own conversion rules.
Ok so, mine doesn’t work in exactly the same manner, but the general idea is the same. I have a class file instantiated on every call to my gateway page (index.php). This class reads in the REQUEST_URI, and performs a regex match on an array of “url patterns”. Much like in Django – you have a url.php for each model in the framework which sets up the pattern array for that particular model. I also have a “failsafe” pattern array which gets used if the class cannot find the required url.php, or a match is not found.
Basically, the contents of one of these url.php files could look like the following :
$modelpattern = array(
array('@^/gallery/browse/(?P<category>\d+)[/]*$@', array("op"=>"browse")),
array('@^/gallery/browse[/]$@', array("op"=>"browse")),
array('@^/gallery/(?P.*)[/]*$@', "")
);
Each element of the array is a nested array containing two elements. The first element is the pattern to match while the second element is another array containing any additional parameters one would like to send to your model.
The other thing to note is the “(?P<category>\d+)” part in the example above. As you should probably know, preg_match allows you to read in parameters (the ?P bit) which you can use in your scripts.
So for instance, the url you’re trying to match is /gallery/browse/33 .
The following code loops through each element of $modelpattern and when a match is found, places any parameters we may have set into $matches.
foreach($modelpattern as $pattern){
$matchFound = preg_match($pattern[0], $request, $matches);
if ($matchFound) {
foreach($matches as $key=>$value){
if (is_string($key)){
$_REQUEST[$key] = $value;
}
}
if (is_array($pattern[1])){
foreach ($pattern[1] as $key=>$value){
$_REQUEST[$key]=$value;
}
}
return true;
}
}
What happens is that /gallery/browse/33 is matched with one of our patterns and the value “33” gets placed into $matches[“category”]. The above code then loops through the $matches array and adds each element to the $_REQUEST superglobal therefore $_REQUEST[“category”] now has a value of “33”). It then also loops through the second element of the matching array and loads those parameters into $_REQUEST – in this instance setting $_REQUEST[“op”] to “browse”.
It’s all pretty simple, and I’m sure there are huge improvements that can be made, but it works really well for what I need done. I’ll post the full source up if anyone’s actually interested 😉
Update : Full source code and example usage can be downloaded here.
Flexible Developments 