jQuery content slider for Typo3 with typoscript
I wanted to use a dynamic jQuery content slider with menu for Typo3. Something like you see on many modern pages: you have some sort of a menu and the content changes based on click events bound to them with some slide/fade etc. effect
I decided to create a hidden page and then use it’s sub pages as the menu elements for the slider. This way you can have multiple content elements grouped by pages. (to edit the content of a slide you edit a page in the tree. To add/remove more items to the menu you create a page within that tree)
In the image the “About credit cards” page has UID=99 and has the “Hide in menu” property checked. We will use this later in the typoscript.
I am usingTemplavoila so I’ve created and mapped the following lib paths: field_about_menu and field_about_ccontent
1. The Typoscript for the menu
lib.field_about_menu = HMENU
lib.field_about_menu.entryLevel = 0
lib.field_about_menu.special = directory
lib.field_about_menu.special.value = 99
lib.field_about_menu.wrap = <ul class="guide-menu"><li class="guide-menu-title">About Credit Cards</li>|</ul>
lib.field_about_menu.1 = TMENU
lib.field_about_menu.1.NO.subst_elementUid = 1
lib.field_about_menu.1.NO.doNotLinkIt = 1
lib.field_about_menu.1.NO.allWrap = <li><a href="javascript:" rel="#guide-content{elementUid}">|</a></li>
You can see here that I am wrapping an UL around the menu and LI around each menu item. I am also building the links by manually using the doNotLink property. In my javascript code I am using the “rel” attribute to identify the link between a menuitem and the content element i want to slide/fade to.
I am using subst_elementUid property to generate the rel attribute for each A tag.
2. The Typoscript for the content of the slider
Now comes the tricky part: building the contents of each slide.
I will query all the children of my hidden page. (“About credit cards” – has UID of 99)
Next I will query all the content elements that belong to each of the pages in the result set.
Finally I will wrap them in some tag. (in my case UL and LI, but it can be DIV-s or anything you like)
lib.field_about_ccontent = COA
lib.field_about_ccontent.wrap = <ul id="second-carousel">|</ul>
lib.field_about_ccontent.1 = CONTENT
lib.field_about_ccontent.1.table = pages
lib.field_about_ccontent.1.select.pidInList = 99
lib.field_about_ccontent.1.renderObj = COA
lib.field_about_ccontent.1.renderObj.9 = TEXT
lib.field_about_ccontent.1.renderObj.9.field = uid
lib.field_about_ccontent.1.renderObj.9.wrap = <li id=”guide-content|”>
lib.field_about_ccontent.1.renderObj.10 = CONTENT
lib.field_about_ccontent.1.renderObj.10.table = tt_content
lib.field_about_ccontent.1.renderObj.10.select.pidInList.field = uid
lib.field_about_ccontent.1.renderObj.11 = TEXT
lib.field_about_ccontent.1.renderObj.11.value = </li>
Look carefully at the code. You will see that the trick is to tap into the renderObject of the first query.
And then use the UID field to query the content elements of each page.
The code groups the content elements of each page by wrapping them in a LI tag and it will use the page’s UID to generate an ID attribute for this wrapper. (this ID will match the ones used in the REL attributes used in the menu links)
You may now use jQuery to bind click events to your menu and handle the content sliding with your favorite plugin.
On my web page I used something like this:
$(".guide-menu li").has("a").each(function() {
if (!($(this).children("a").hasClass("active"))) {
var nonactives = $(this).children("a").attr("rel");
$(nonactives).hide();
}
});
$(“.guide-menu li a”).click(function() {
if (!($(this).hasClass(“active”))) {
var tohide = $(“.guide-menu li a.active”).attr(“rel”);
$(tohide).hide();
$(“.guide-menu li a.active”).removeClass(“active”);
$(this).addClass(“active”);
var toshow = $(this).attr(“rel”);
$(toshow).fadeIn(1000);
}
});
$(“.guide-menu li a”).first().click();
Here is the output of the above code. (and feel free to comment/ask questions)
Using T-Mobile G1 as an Android development phone
I have recently bought a T-Mobile G1 from a local auction site. The reason for doing so was to test my android apps on a real hardware and also to try to tap into the mind of the Android user.
Before committing to a particular device, I took the time to do some research.. however the results were most unsatisfying.. Whenever you search on something related to: Tmobile g1 android development there are so many reviews of the phone and so much buzz and clutter about the android phones that it is almost impossible to find good answers..So the whole reason for this post are the following Q&As:
1. Can I test my own android apps on the T-Mobile G1 (i am talking about the LOCKED device from T-Mobile) ?
Answer: YES YOU CAN
2. Can I DEBUG my own android applications with the T-Mobile G1 ?
Answer: YES YOU CAN
3. Do I need to update to a special version of the Android OS (ROOT my phone, then install a custom ROM) in order to test & debug apps on the T-Mobile G1 ?
Answer: No, you don’t need to. You can enable debugging via the “settings” menu of the phone.
And now finally a quick tip..This was the reason I almost rooted my phone and almost flashed it with a custom firmware. The setting to enable debugging was not in the menu where the google dev-page states it is supposed to be. (the google page does not say it should be under settings so I thought that on the google dev firmware (like in emulator) there will be special shortcuts for development functions)
On my G1 this setting was in Menu / [Settings] / Applications / Development / USB Debugging.
So it was a few menus off, and I just couldn’t find it….. Once that is enabled, whenever you plug in the phone via USB cable to your PC it will recognize it as an android development device. (remember to set your app as debuggable in the manifest file, and install google’s usb driver)
A short tutorial on how to get started:
1. Set USB debugging on your device
2. Plug in the USB cable and connect it to the PC (you don’t need to mount the SD card)
3. Install google’s driver: (you can find it in the Android SDK)
4. Make sure you restart ADB (if you have ADB running while installing the USB, your device may not be listed until you restart ADB)
5. (skip this if you like) After installing the driver restart ADB:
adb kill-server
adb start-server
6. check to see if you device is listed
adb devices (your phone should be listed)
7. Start eclipse and edit the manifest file. Under application set “Debuggable” to true
8. When you run your application a menu will appear asking you if you want to send it to the device or not. (if it does not, you can force adb to use the physical device by typing: adb -d )
Been busy building my new library: SimpleFaces for PHP
I have been inactive on my blog for a long time. In this time I have managed to screw up 4 Xbox360-s with reflowing..I will give up fixing xboxes for now..
In all this time, I have been working on my new library which will definitely help out development for web applications. Soon I will post more info about the matter, but for now development is ongoing..
PHP SimpleFaces is an ajax framework built for PHP. It allows users to define interfaces via XML in a very similar manor to modern UI builders. The cool thing is that you can bind classes and methods to events on your frontend controls and you get to handle them in PHP. Although this seems like something that was done before by other libraries, in SimpleFaces you get to control all the frontend UI elements directly from within PHP.
There are some demos available on the site as well an early video showing off the features. Hopefully I will release a public version in January 2010.