Why Git > Subversion – a short intro

Subversion is like a tourist bus, everyone has to get there at the same time and check in, if one’s missing – oh crap.  If the bus crapped out, you ain’t going anywhere either. Git is like a rental car, you check in when you’re done using it. If your car broke down, you can replace it with another. I thought this anthology makes sense if you want to visualize it.

Back to the nerd terms, here’s what they are. So finally, I just started a new job that I actually work in a team that use Subversion. It’s great and all, I still don’t like it as much.  Biggest problem as people know is Subversion is a centralized version control system, if the server is down, so are you. Well, not completely, you work on your local copy, when the server is back up, there will be A LOT OF messed up merging to do because it can’t keep tracks of what you’ve done up to that certain point.  You are actually wasting time.  Not to mention it has its own file structure, it’s pretty “tidy” in a way. If you work like a mess like me, Bazzar and Git are our heroes. Git is pretty much like Bazzar, that you can do version control in ANYWHERE you want.  You don’t have to have to let a server knows what you are doing in every 5 minutes to keep things in check, you can just do it locally.  So imagine the server goes down for an hour, in that one hour you drew a nice looking dragon from your whatever, colorized it, added wings etc… and commit each of the change. When the server comes back up.  You tell the Subversion server, hey, I did these. The server goes… what the hell are these craps?? I knew NOTHING about the dragon… it reminds me of my dad kicked my ass one time while I tried to explain why I didn’t do my homeworks, because they were READING ASSIGNMENTS!!!  Now THAT’S a git!

Instead, Git tracks them all offline, so if the server goes down, who cares.  When it’s back up, you can tell the server what you’ve done, how many changes you’ve made, you drew a dragon, added some flames etc… the server WILL know what you did and so will everyone else because it keeps track all the versions offline. So when you “push”, you are actually uploading the old AND the new versions to the server.  Better yet, if the server goes down in flames, you can just find another one, upload what you have and all good to go again. Imagine the Subversion server goes down in flames… I can’t… I just can’t!  I don’t wanna think how to recover all of my awesome dragons! I lied, you can, just not with all the versions you’ve made. Just need to start a new one… me thinks…

Okay okay, here’s the 5 steps to setup Git to a remote server

Enough dragons, I’ve read at least 20 blogs, 10 docs to piece together how people can make the simple setup process hard.  It’s not hard, but they’re just not on the same page for some odd reasons.  For the record, NOT everyone uses Github… I use unfuddle

1. Sign up an account on either Github or Unfuddle
2. Go to Git-scm.com‘s download page to get msysGit (full version to make things simple – not the portable one) - just follow the steps for installation… then it’ll ask you Select either Git Bash or Windows Command - I’m not that smart, but I prefer to look smart, so I chose Git Bash over windows cmd. It’s just like windows cmd anyways with a few nerd commands.
3. For remote hosts such as Unfuddle or Github – they’ll need a SSH key to authenticate the connection to their servers.  Each computer needs a new key, so if you are home, needs one. At work, needs one. At your ex’s house stealing his stuff, needs one. Without it, you can’t get in, simple as that. So let’s get that out of the way first. So let’s do this the easy way without typing much.

   Open up Windows Explorer, find a folder, really, any folder, right click on it and you’ll see “Git GUI here” – click on it. You’ll see a box come up.  Click “Help” -> “Show SSH Key”.  If you see a blank box – click on “Generate key” (Screenshot).  Copy all of that to:

   • Github -> Account Settings -> it’ll nag you if you don’t have a SSH key added yet. So add it.
   • Unfuddle -> Personal Settings (top right) -> Scroll down you’ll find the box then paste all of it in also (give it a name if you want – I do Home, Work)
4. For the purpose of learning, I highly recommend using Git Bash – if you learn the commands, you’ll understand how to use Git GUI later.  First, go to the folder that you would like to start version control (just use your windows explorer) – then right click on the folder “Git Bash here”.  A linux command prompt thingy pops up.
5. Create an new repository on Github or Unfuddle
   • Github: believe it or not, Github gives you ALL of the instructions you need!  So just type what they show you, then you’re good to go!
   • Unfuddle: same for unfuddle but they won’t show it to your face. After you’ve created a new repo, click on “Repositories” – you’ll see the new repo you just created, click on it then you’ll see the instructions.

Really, that’s all to it for setting up a new repo server to work with, but for someone who don’t know much about command prompts / shells stuff, it was hard and I’m sure someone else out there had the same problem.

What gives?! Remote hangs???

If you see “Remote hang” – two possibilities:

1. You need to wait for the SSH key a bit longer (if you didn’t do it in step 3 – which should give it enough time, if not, wait a few more minutes)
2. You’ve entered a password when you created a SSH Key. So if this happens, make sure you leave the password fields empty.  If you use Git Bash to generate the key, just hit enter twice when it ask for password. When you’re done, add the SSH-Key back in step 3 – wait a minute a two then try again.

Ignoring Files

Along the path, I’ve asked the same question and it took some diggings to find.  If you have a few files you want to do version control, but want to skip files like .DS_Store, .project, .fla or whatever.

Ignore Files Way #1

1. During “git add .” – instead of doing that.  Just do:
   git add filename.html filename.jpg
   You can add as many files on one line as you wish – DON’T commit yet
2. Type “git status” – you’ll see a list of “untracked files” – make sure those are the files that you DON’T want to track (version control)
3. Then type:
   git ls-files -o --exclude-standard >> .gitignore

   What this does is it will ignore all the files those were showed in “untracked” – then create the .gitignore file for you

4. After you’re done: “git add .gitignore” then commit

Ignore Files Way #2:

1. Fire up notepad and add the file names that you want to ignore. Example:
   .project
   .DS_store
   whatever.jpg
2. Save the file inside the same folder where you just initiated a Git and name it ignorefiles.txt (or whatever you want – something simple)
3. Open up or switch back to Git Bash – assuming that you didn’t change directory and didn’t close it (otherwise, just go back to the folder and do a “Git Bash here”). Type “ls” to see if “ignorefiles.txt” is there.  If not, make sure you save the file here.  Otherwise, type the following to change the file name to “.gitignore”:
   mv ignorefiles.txt .gitignore
git add .gitignore
git commit -m "Added .gitignore"

You would say why not just change the file extension inside Windows Explorer? Well, go try it, then you’ll see why. I’ll wait……… Done? Worded. As you can see, way #1 is easier.  If you did way #1, and want to add more files later, it created the .gitignore automatically for you, so just double click on it and point it to Notepad to open it up.  Or Git Bash it…

Remove Files from Tracking

One more thing I found myself wondered was how the heck do I remove one of the files after it got tracked?? Simple:
git rm --cached filename
I’ve seen people tell others to do: git rm filename

That will delete your file for you, too! Did they even read the question??  I prefer removing it then add to the ignore list, I don’t feel safe removing a file physically even though I got Git to watch my back.

Anyways, these are the stuff I’ve ran into when I first trying to setup my workspace, hope this helps.  Once you’ve finished this, you’re pretty much up and running.  Refer to:  http://git-scm.com/documentation for tons of goodies info.

No related posts.

1. Localhost Timeout Error

As many sane developer would do, you want to test almost everything on a Local server if you’re using Xampp Lite. I have been experiencing timeout error. Maybe it’s due to the firewall at work, but I am going to investigate more using a full verison of the Xampp server

2. “public_html” vs “www” Folders

This may sounds crazy, but I think it might have something to do with the configurations of the server. I tried uploading to my own server, everything works fine. But I couldn’t get it working on my client’s server, it couldn’t CHMOD properly. Crazy enough, I deleted everything and re-uploaded everything to the public_html folder, CHMOD the proper files, then it worked… I know both folders are basically the same thing, but why it happened the way it did, CRAZY! I tell you. So I’m going to try to reproduce this “bug” if it is even a bug or just me…

3. jQuery + zimplit = Site Explosion!

Unfortunately, today I found out zimplit will blow up your some parts of your layout if you have some sorts of scripting going on in the background, such as slideshow, hidden divs. As soon as you insert an editable area, it automatically inserts its own div and classes inside ALL OF YOUR DIVs! Drove me insane for over an hour why my simple page stopped working with a simple slideshow. I mean it’s not the end of the world, you just have to rework your CSS to fit it in. But it would be nice IF SOMEONE TOLD ME BEFOREHAND!!

Overall, zimplit is still an awesome idea, but it’s quite intrusive. It works well if you have a very simple website or planned ahead to use it at the beginning. If you decide to implement afterward, it is much more difficult because you’ll probably have to rework lots of CSS. But I think I will try my hands on it again next time when I build a site from scratch.  Just my 2 cents.

No related posts.

I finally launched the never-ending homepage redesign project yesterday for my company, so far so good, not everything I want, but at least got what my bosses want. I didn’t like the way how it was put together, but I had fun scripting with jQuery once again. This time, he wants to do “wipe up” sort of effects and he resisted that me HTML-ing the hidden contents because he wants it “the way it is” for the contents. *dies* So I’m stuck with image maps… the loading time on the page is “glorious” to say the least… hey… I do what I asked of me. He didn’t want to hear loading time, the web standards, best practices, and stuff like that. Although, I added the helpful image preloader plugin to speed things up just a bit, better than nothing. Over the course of the project, I’ve learned some little interesting things…

Interesting things I’ve learned…

1. If you add “padding” around an image that has “hotspots” over it; IE (no matter what version) WILL offset the coordinates by the padding – the “hotspots” will be off by the amount of padding you put around the image. But in Firefox, the image map hotspots behave the way it should be. So if you need to adjust the spacing of the images when using image maps, use “margins”, don’t use “padding”. Took me a short while to figure this out…
2. Relative + absolute positions will snap pictures in any corner you want. In my case, I wanted the image to be lower left corner to achieve the “wiping” effect – otherwise, it’ll just “slide” the image out if you don’t absolute position it.

     	<div style="position:relative">
       	<div style="position: absolute; bottom: 0; left: 0;">Image here</div>
       </div>

3. Too many image map hotspots is like Freddie Cougar’s face… ugly as hell and a freaking nightmare
4. jQuery $.each() saved pounds of my hair once again
5. Do not add negative padding inside a jQuery.animate() – it will crash like a 100 cars pile-up on a highway…
6. Don’t try to explain to my boss why adding more image hotspots inside an image map is such a bad idea – he looks at me funny and starts getting pissy

Besides all the pain and suffering for a month, the most fun I got out of this project was scripting the animations and solving the “image map within an image map” problem. Here’s the run-down of the project:

1. There will be main menu at the bottom of the screen, when the user hovers over each of time, the corresponding content (the image) will “wipe up” – I am calling this Tier 1 menu
   1. Now “wiping” and “sliding” are two different animals, and my mini-boss specifically wants “wiping”, not “sliding”. So I had quite a bit of fun trying to make the image contents “wipe” up
   2. Solution: create a “wrapper” div that wraps all the hidden “content images” – default the “wrapper” to 0px, then use jQuery to animate the height of the “Wrapper” to the full height when hover over. So I basically created a “mask” to do this hide the images. Attach the corresponding image, show, then “wipe” up
2. Each of those image will have image map hotspots (no problem here)
3. Within Tier 1 menu’s contents, one of the contents has multiple links within it and has a Tier 2 menu – better yet, the Tier 2 menu has four sub-contents WITH DIFFERENT unique image maps…

The Problem

The problem? If you use the same map for all the images, they will have other hotspots showing up in images that you don’t want. Let’s say Image A is using #map1, Image B needs to have the same menu but has different hotspot links. When Image B uses #map1 again, well, all the hotspots intended for Image A will also shows up. Of course, the obvious solution is to have multiple maps. The problem is the Tier 2 Menu shows/hides its contents. So if you have multiple maps, the Tier 2 Menu won’t able to hide and show content accordingly unless you want to code each of the Tier 2 menu with its own little script. Repetitive, inefficient, and probably won’t work.

The Solution(s)

After losing a couple hundreds of my hair, the solution? Create separate image maps for each of the unique hotspots map. So Image A gets its own map, Image B etc… use jQuery to clone the map according to the active menu and attach to the the “main map” (#map1), add a temporary class, and then remove them when the user hovers over a different menu item. Meaning: #map1 is the Tier 2 main menu and is defaulted to Image A. #map1 has the Tier 2 main menu, and the rest has its own unique hotspots maps without the Tier 2 Menu. Let’s say Image C has unique hotspot links, so when the user hovers over Image C. jQuery will tell this Image C to append #map3 hotspots (<area>) to #map1. When the user hovers to a different one, it removes all the previously attached “hotspots” – I identified them by adding a dummy class in each of the attached <area> map, then append another set if needed. Painful, but not bad for a workaround I think.

I find front-end development is like solving puzzles, and I love solving puzzles especially when it involves jQuery. Well, that’s it folks.

No related posts.

I was trying to “brand” myself in a way, what’s better than a made-up word that describes perfectly of what I do, right?  I love the lime green colors, but I thought it was getting too boring with the light gray and white.

So I spiced things up this time with dark brown and hot pink.  I was loving the fun colors as I was designing, it looked almost “hippy” which fits my personalities – I never did drugs in my life, but I seem so…

At the moment, it’s still in Beta with basic functions, hoping to AJAX-fy it in the next few days.  Right now, it is xHTML 1.0 Transitional validated, and with only TWO hacks to make IE6 looks pretty.  So I was very thrilled that it turned out well and only with minimal hack works needed to be done with IE6.

So check it out, and please give me feed backs!

No related posts.

Lately I started to like CSV (Common Separated Values) more and more comparing to XML.XML is a pain to setup even as entering data, then grabbing the data requires Einstein’s brain plus 3 sleepless and hair-pulling days of coding… okay, I maybe exaggerated a bit, but that’s how I feel about XML. My first encounter with CSV was InDesign, in there, you can import a bunch of data and generates PDF like Word’s Mail Merge feature. Then one day, someone asked me if I can find a better and easier way to help the non web people to maintain a site. I started out with search terms like “jQuery read text files” or something like that, one of the results returned as using CSV and there is a plugin called CSV2Table in the jQuery Plugins website by Toshiro Takahashi written earlier this year. Testing… testing… and hot damned! It’s like magic!!!

The awesome thing about CSV is you can enter all the data using Excel, then simply save the file as something.csv and it’s ready to be used. No stupid header <xml></xml> tags, inner tags, child tags or whatever the heck tags. Just simple data. If you really, really want to be fancy; you can even add HTML such as <img> – believe it not, it worked like a charm. Although, it’s silly to format your CSV data within while you have your hands on the god-awsome jQuery framework to manipulate all of those data. Then to generate the table, all you simply have to do is:

	$(document).ready(function(){
    	$("#div").csv2table(csvfile,{ <em>options</em> });
    });

Well, I’m not going to get into the options detail but you can refer back to the CSV2Table docs. You can manipulate how the data display, format, colorize, draw a dragon or whatever. This plugin is very flexible when it comes to formatting the results. Some people describe me as lazy, but I like to describe myself as “efficient” because I don’t like to repeat myself or do extra work. So it doesn’t make sense to write the code above everytime I need to reuse it, that’s just not the Mon’s way, here’s Mon’s way:

	function csvReader(container,csvfile){
			$(container).csv2table(csvfile,{
				sortable: true,
				removeDoubleQuote : true,
				nowloadingMsg: "Loading "+$("#eblastsYear").val()+" eblasts archive...",
				errorMsg : "Error loading "+$("#eblastsYear").val()+" eBlasts archive. Archive either doesn't exist or renamed. Please contact Mon (mlu@equuscs.com) for support.",
				onload : function(id,op,data,ary){
					$("#totalEblasts").text(ary.length-1); //Display the total rows of the eblasts
					$(container+' tr:even').css('background','#efefef'); //Every even row gets colorized
					$(container+' th').css({"text-align":"left"}); //Just setting the TH rows will be left aligned
				 }
			});
		}

I wrote a function that because I know I’m going to reuse the code to load the exact same data, just maybe the CSV file or the DIV container might be different. Instead of writing re-writing again. If I ever need it, all I have to do is:

	csvReader("#csvContainer","data.csv");

Done. Now, you probably wonder, what the heck did I use it for? Well, see screenshot:

So when the user clicks on “View Archive”, it loads a new CSV file like this:

$("#selectYear").live('click',function(){
    csvReader("#csv","eblasts/"+$("#eblastsYear").val()+".csv");
});

Less work = better. One minor thing I felt missing was when the file is missing or failed to load, it just get stuck on the default “Now loading” message. I dug under the hood of the CSV2table codes, it uses $.get() to process the data which doesn’t really can tell whether the XHR request was successful or not; nor it can detect it unless you add the ajax.error() handle. So I’ve decided to change it to using the actual $.ajax() to call the data, and detect if there is a 404 error, it’ll display an error message accordingly instead of just “Loading…” – while I was at it, I felt, well, I and I’m pretty sure most people want to customize their sucessful load and error messages, right? So I added two more settings inside the plugin which are: nowloadingMsg and errorMsg. If you are so darn lazy and don’t want to customize it, it defaults to “Now loading…” (fades out) and “CSV file not found.”. Here’s the modifications:

	op = $.csv2table.setting[id] = $.extend({
			url                : url,
			nowloadingImg      : $.csv2table.loadImg,              //Image of now loading...
			nowloadingMsg      : null,     						   //Message of now loading...
			errorMsg		   : null,							   //Error Message
       	// The rest of the codes...

Do a search for “op.nowloadImg” and you’ll see “$.get()”. I modified as follow around line 130 if you added what’s above:

	//Default loading message if not set in settings
    if(op.nowloadingMsg == null){ op.nowloadingMsg = "Now loading..."; }
    $(contents).before('
<div class="csv2table-loading"><img src="'+op.nowloadingImg+'" alt="" /> '+op.nowloadingMsg+'</div>
' )
 
    //Default error message
    if(op.errorMsg == null){ op.errorMsg = "CSV file not found."; }
 
    $.ajax({
       type: "GET",
       url: url+"?"+(new Date()).getTime(),
       data: $.csv2table.data[id],
       success: function(data,textSatus){
         $(".csv2table-loading").hide();
         $(".csv2table-loading").remove();
         $(contents).css("display","none").html(mkRowsAry(id,data));
         setCSS(id);
         $(contents).fadeIn();
         if(op.use_api=='jqchart'){
            if(op.use_api_type=='jqchart:line')op.type=$.csv2table.setting[id].type='line';
            else if(op.use_api_type=='jqchart:bar')op.type=$.csv2table.setting[id].type='bar';
            useChart(id,op,data,$.csv2table._rowsAry[id]);
         }
         if($.csv2table.setting[id].onload)$.csv2table.setting[id].onload(id,op,data,$.csv2table._rowsAry[id]);
       },
       error : function (xhr, e) {
          if (xhr.status == 404) {
            // page not found
            $(".csv2table-loading").addClass("csv2table_error").text(op.errorMsg);
          }
        }
    });

To sum it up for the CSV2Table mod, these are the changes I’ve made:

• 2 extra settings: nowloadingMsg / errorMsg (defaults to “Now loading…” and “CSV file not found.”)
• Changed $.get() method to $.ajax()
• Added 1 extra CSS class: csv2table_error

My modded: jquery.csv2table-mod

No related posts.

Software Note: Pods CMS 1.7.3 / WP 2.8.4

Documentation: http://pods.uproot.us/codex/magic_tags

What are Magic Tags

From Pods CMS’ documentation: Magic Tags are used exclusively within Pod templates to dynamically pull in column values.

Usage: {@column_name} / {@column_name,display_helper}

In addition to the documentation: {@column_name.another_column_name}

The above method allow you access a different Pod’s columns when it is a PICK column inside a pod.

Let’s say you have to two pods. The Person pod, and Country pod. The Person pod has a PICK column of the Country pod to identify the nationality of that person, and you want to list all the people as: Person’s Name, Country (where you want to access by: http://domain.com/person). So inside the Pod Templates you would have something like this to show:

<p>{@name}, {@country}</p>

The above displays something like below on the Person list page (http://domain.com/person):

Mon Lu, United States
John Smith, Canada
Ken Yamamoto, Japan

Now you want to get a bit sophisticated that you want to link the person’s name to its own detail page, and the country is linked to its own page listing all the people from that country or something like that. Not only that, you want to link the page using its own slugs/permalinks like this: http://domain.com/person/mon_lu and http://domain.com/country/usa – assuming you have a column named slug in the Person pod, and or abbrv in the Country pod. Before I figured this out, I used a Display Helper to grab the abbrv from the Country pod. But the easier way is the following, assuming this is still http://domain.com/person listing all the people where the Country pod is a PICK column inside the Person pod:

<p><a href="/person/{@slug}">{@name}</a><a href="/country/{@country.abbrv}">{@country}</a></p>

Simple enough, yeah?

No related posts.

Documentation: http://pods.uproot.us/codex/helpers

What are Input Helpers

An Input Helper lets you completely customize the appearance of any input field… when adding new data contents.

In plain n00b English: as an example, the default field “name” I had it to store last names, and a separate column to store first names (fname). The problem of that would be when you’re using Bi-directional relationship PICK column to another Pod (let’s call this: Person) is you can only relate one of the columns, not both First Name and Last Name. So if you use the PICK column the “name”; which stores the Last Names, and with the last name like Johnson – you probably can’t tell which Johnson that is. Input Helpers can grab and display the full names for you when you’re adding data. See screenshot:

How to add a new Input Helper

Customized Dropdown Input Helper

The following refers back to the example and screenshot above where it pulls full names from the “name” and “fname”columns as a PICK column to display as a drop down menu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<select class="form pick1 <?php echo $name; ?>">
        <option value="">-- Select one --</option>
<?php
        if (!empty($value))
        {
            foreach ($value as $key => $val)
            {
                $lastname = $val['name'];
                $firstname = $val['firstname'];
                $fullname = $lastname.", ".$firstname;
                $selected = empty($val['active']) ? '' : ' selected';
?>
        <option value="<?php echo $val['id']; ?>"<?php echo $selected; ?>><?php echo $fullname; ?></option>
<?php
            }
        }
?>
    </select>

The crucial parts:

<select class="form pick1 <?php echo $name; ?>">

The class “form pick1″ are required by the default CSS unless you don’t care about the CSS. The $name is just an column’s name to identify the column’s name. Just like Display Helper, it passes the $value array for you to manipulate. The rest of the codes are very straight forward to read through the $value array, make sure that it actually have something in it before reading it. Then split it in parts to display. The $select is simply default select whatever previous selected when you are browsing existing content. If you’re adding new content, it is default to “–Select one–”. The very last part of this script is just simply displaying each option, giving each of them their unique row ID, then finally displaying the full names.

Another one I ran into was when I want to do a Multi PICK column, such as people who belong to a Dojo or Federation. See below:

I referenced the code above, with the help of FireBug, this saved the day:

Customized Multi PICK Column Input Helper

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div class="form pick <?php echo $name; ?>">
<?php
        if (!empty($value))
        {
            foreach ($value as $key => $val)
            {
                $lastname = $val['name'];
                $firstname = $val['firstname'];
                $fullname = $lastname.", ".$firstname;
                $active= empty($val['active']) ? '' : ' active';
?>
       <div class="option<?php echo $active; ?>" value="<?php echo $val['id']; ?>"><?php echo $fullname ; ?></div>
<?php
            }
        }
?>
</div>

As you’ve noticed, there are only minor differences between the two. The differences are “div” instead of “select”, $active, and the very last line (line 12). Obviously the very last line is the default CSS that used by Pods CMS for Multi PICK columns, unless you want something different.

Using the helpers

Simply click on the pencil/Edit icon of the column, and choose the helper. Like this:

Well, that’s it for now. I’ll update this section if I learn more.

No related posts.

The problem of this awesome plugin that it is quite new, the documentations, tutorials, and resources are quite limited. But the developers are extremely helpful on their own forum – so you’ll have to do a lot of digging to find the answers you need… in which I did. I also found the tutorials were kind of half way done, they stopped at displaying the data, but not showing how to write simple Display Helper and Input Helper. So I’m going to jog that down here.

If you have not gone through the documentations and have some basic data to play with, you should get going (thinking putting one simple guide of how to put all the pods together later).

Disclaimer:

The following helpers are very basic ones that I found myself used them a lot and repeatedly, so hopefully these will be useful for someone else also.  On a side note that I am NOT a hardcore PHP coder, I understood enough basic PHP codes to customize them. If you know a better way, feel free.

So let’s get rolling…

Software Note: Pods CMS 1.7.3 / WP 2.8.4

Documentation: http://pods.uproot.us/codex/helpers

Display Helpers: Display Helpers are the codes that help to display your results in a nicer, customized look.  For example, say that you want to show all of your ingredients in a recipe, by default, they’ll be list as such: “Ingredient 1Ingredient 2″ – it is hard to read.  So you can write a Display Helper to show them as “Ingredient 1, Ingredient 2″.  Got it?

By default, the Display Helper passes $value as an array for you to manipulate as such: $value[0][’column_name’].

Adding a Display Helper

Adding a new Display Helper is very simple, see below:

Pods CMS – Add new Display Helper

List Single Result ONLY (No Link)

Add a new Display Helper and name this one something like “print_r”:

<?php print_r($value[0]['name']); ?>

I have these two generic Display Helpers displaying a single result only.  By default, if you having something like {@column_name}, it will show column’s name and it is linked to a its own detailed page (if it is bi-directional), something like (http://domain.com/your_pod/column_name/1).  Where the very last part is actually the row ID.  So what if you want to display your data with a custom permalink/slug?  Such as: (http://domain.com/your_pod/slug_name)  This helper will come in handy in your Pod Templates page:

<a href="/pod_name/{@slug}">{@column_name,print_r}</a>

You probably noticed that I put the helpers right next to the Magic Tags instead of adding the Display Helpers like this:

Display Helper

It’s a matter of personal preference really. If you want, you can add the helper inside the admin interface. If you’d rather add the Display Helper through the admin interface, you don’t need to add “print_r” inside {@print_r}.

Displaying Arrays

The following will display “Ingredient 1, Ingredient 2, Ingredient 3″ instead of “Ingredient 1Ingredient 2Ingredient 3″ with links or no link to your liking:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php
$pod = pods_url_variable('first');
 
if (is_array($value) && 0 < count($value))
{
    foreach ($value as $val)
    {
        $output[] = "<a href='/".$pod."/".$val['slug']."' />".$val['name']."</a>";
    }
echo implode(', ', $output);
} else {
   echo "No record found";
}
?>

If you just want to display the results without the links, simply remove the “href” on line 8.

Note: This helper will only link to current pod, what I mean: “/pod1/slugname”, but not able to link “/pod2/slugname”. The reason is that this script will only grab the pod’s name which is “/pod1″ and add itself to the “a href…”. If you want to link to a different pod, you’ll just have to add a new helper with a minor change of instead of ‘$pod’ (line 8 ) where the “a href…” is to your actual pod’s name, make sense?

Well, that’s it for now… next up, Input Helper.

No related posts.

	var rand = Math.floor(Math.random()*5);
	if(rand > 0){
		rand = rand+1;
		alert(rand);
	} else {
		rand = 1;
		alert(rand);
	}

No related posts.

I’ve been using this script quite a bit, and I think it’s time to jog it down somewhere. A few things to keep in mind when using this script:

1. Try not to use this script on the main/root time line. If you have movie clips within the main timeline, when the timer is up, it speeds through the entire time line to the every end. Stop(); won’t do anything.
2. This script works well inside a movie clip, also works for movie clips within a movie clip. But try to minimize it to only one clip
3. The controls (Pause, Play) buttons work best in the main / root time line, doesn’t work too well if there are clips within a clip

Just insert the following inside a movie clip’s time line where you want it to pauses for a few moments:

	 stop();
 
    var startTime:Number = getTimer();
    var pausedTime = 0;
    //countTo = number of seconds.
    var countTo:Number = 10;
    var ref:MovieClip = this;
 
    this.onEnterFrame = function():Void {
        if (!paused) {
            var elapsedTime:Number = getTimer()-ref.startTime-pausedTime;
            var count:Number = Math.ceil(countTo-(elapsedTime*0.001));
            if(count<1){
                this.gotoAndPlay(nextFrame());
            }
        }
    }

In addition if you want to have Pause / Play buttons, insert the following codes after the above codes:

	_root.puz1.onRelease = function() {
       if (!paused) {
          pauseTime = getTimer();
          paused=true;
          _root.puz1.gotoAndStop(2);
       }
    }
    _root.play1.onRelease = function() {
       if (paused) {
          pausedTime += getTimer() - pauseTime;
          paused=false;
          _root.puz1.gotoAndStop(1);
       }
    }

No related posts.