Recently there have been some customers that have been asking if there's anyway to have javascript hover menus for their navigation on their Viviti websites. During the last release we've made the jQuery Superfish plugin available on your websites so that it's easy to get it working with as little …
Viviti Navigation Component Hover Menus
April 16, 2009
Recent Posts
Markaby and Rails 2.3.2
April 16, 2009
I just pushed up some fixes to my Github repo for use with 2.3.2.
The changes made are not backwards compatible with older versions of rails. If you're using an older version of rails and are following my repository you should not upgrade to this version unless you're updating to the latest version of rails.
http://github.com/dinsley/markaby/tree/master
If anyone finds any problems, just let me know.
SWFUpload and Flash 10
October 20, 2008
With the recent release of Flash 10 by Adobe, a change in security regarding FileReference.browse broken SWFUpload. The details of the security changes are out lined at the following address:
http://www.adobe.com/devnet/flashplayer/articles/fplayer10_security_changes_02.html#head3
Any existing content that invokes a browse dialog box using FileReference.browse or File Reference.download outside of an event triggered by user interaction will need to be updated. The dialog box now has to be invoked directly through a button, keyboard shortcut, or another event directly initiated by the user on the flash video.
If you're using a image button for your 'File selection' link, you'll need to add the following to your SWFUpload instance settings:
button_image_url: "../images/buttons/add_files.png", button_width: "80", button_height: "30", button_placeholder_id: "swfuploadContainer"
The button image should be formatted as Active, Hover, Click, and Disabled states. An example is included in the samples/buttons directory from SWFUpload trunk:
If you're just using a text link for triggering the selectFiles dialog, you can just use the following settings:
button_text: "Select files for upload", button_placeholder_id: "swfuploadContainer"
The button_placeholder_id specified will be replaced with the flash object that is not the selectFiles link.
You'll need the latest version of SWFUpload in order to make these changes. You can checkout the latest version by issuing the following command:
svn checkout http://swfupload.googlecode.com/svn/swfupload/trunk/ swfupload
Native OS X gitk clone
September 12, 2008
Github is currently featuring an awesome native OS X gitk clone. The application matches most of the feature set of gitk as far as I can see, and it also loads up the repositories quite a bit faster.
I'll definitely be using this instead of gitk from now on. You can download the latest stable release by clicking here, or take a look at the project page on by visiting http://github.com/pieter/gitx/wikis.
Javascript debugging in Internet Explorer
May 26, 2008
We're just coming up to finishing a two week iteration of mostly browser compatibility fixes on Viviti, mostly for Internet Explorer. I've poked around quite a bit trying to find anything that even comes close to the glory that is Firebug for Internet Explorer, but I've come up empty handed for the most part. I did find some useful software that can help your Javascript debugging crusades in Internet explorer, I'll outline the test setup and javascript debugging tools below!
Testing enviroment setup
I'm using Virtualbox for my Virtual machine, it's free, seems pretty stable, and is available on a variety of platforms. I'm using it on my Linux box at work, and my iMac at home without any problems. Next up is getting all those different versions of Internet Explorer! The following website has a handy package called Multiple IE that will install all the different versions of IE that you may, or may not want to support. Finally, I have Fiddler installed on there. I've found it particularly useful in debugging the HTTP response and request headers of AJAX requests.
Javascript debugging tools
Normally when a javascript error occurs it would be nice to know what file and line it happened on. The best thing I've found to track that down in Internet Explorer (as well as provide some handy basic debugging functionality) is Visual Web Developer Express 2008. Unfortunately this free version of the Visual Studio debugging isn't actually intended for use on projects created outside of it. Fortunately it is possible to use it on outside projects using the steps outlined on berniecode.com's How to debug javascript with Visual Web Developer Express blog post.
Lastly, there is some Firebug functionality that you can get in Internet Explorer. Firebug Lite supplies the ability to access basic console functions that are pretty handy for debugging (it beats alerting!). The only downside is that Firebug Lite is actually a javascript file that must be included while you're actually doing your debugging. Just don't forget to remove it when you're done!
Conclusion
Leave a comment if you have any other 'must have' tools for Javascript debugging in Internet Explorer, or have any questions about the above software!
TinyMCE button labels
April 8, 2008
While working on getting TinyMCE configured for viviti.com, we found that some of the buttons in TinyMCE weren't exactly clear in what they were intended for. We decided that we'd need to put a label beside the buttons we felt needed more explanation. There wasn't that many changes needed to get this functionality in there, and it actually looks pretty good.
You can play around with the example page here. It works for both the advanced and simple themes of TinyMCE, and for the default theme. I haven't gotten it working under the o2k7 skin yet due to the way the background is done for the buttom images.
In order to add a label to a specific button you just need to do add label to the associative array parameter of your createButton call:
cf.createButton('cleanup', { title : 'simple.cleanup_desc', cmd : 'mceCleanup', label : 'Cleanup Code' })
I've modified the editor_template_src.js of the advanced theme to allow the fourth element of the controls associative array (starts on line 16) to be set as the label. So if you'd like to set the new document button to have a label you'd need to change it to read:
controls : {
bold : ['bold_desc', 'Bold'],
italic : ['italic_desc', 'Italic'],
underline : ['underline_desc', 'Underline'],
... ( Skipping the displaying of alot of them so it doesn't take up too much space)
newdocument : ['newdocument_desc', 'mceNewDocument', null, null, 'New Document'],
blockquote : ['blockquote_desc', 'mceBlockQuote']
}
The second and third indexes of each control item are being used to set the ui and the value values. I'm not totally sure what those two options are for, but in order to provides backwards compatibility I'm using the forth index.
Update: The label patch that was submitted to the TinyMCE developers has been merged into the 3.x branch.
Daniel Insley
