Umbrella Development » Featured

jQuery FAQ fader

Umbrella — Sat, 03 Apr 2010 02:02:59 +0000

A quick little jquery tutorial for anyone that’s interested. Of course I’m going to assume you have at least a little jquery knowledge. Such as setting up the basic foundation for the jquery library.

Now that that’s out of the way. Today I had to make some quick documentation for a piece of software and I wanted a simple single page FAQ system where the questions were at the top of the page and the answers would display inside a dedicated viewing window.

To accomplish this I decided to go with jQuery. And after writing it I figured I’d share it with you. So lets get started.

First we are going to need a container for our Questions list. As well as a container (or div) for our Answers. AND…. A little travelling music please.


    
        Basic Topics
        
            Question 1
            Question 2

Pretty simple right? A standard list where we put our questions. I’ve only put in a couple examples. You will notice our first div element has the id of QContainer this is so we have a id to refer to this element inside our jquery code later. Now lets build our shell for our answer area.

You’ll notice once again our first element in this code sample is called AContainer, again this will be referenced later in our jquery code. We’re almost there now, next we have to add some other ID’s to some elements in both the question and answer list so we can refer to them later just like our main Container div’s. First in our Questions area, we need to give our UL an id so we can refrence it. For prosperities sake I’ve named this questions. Then we need to give each of our LI elements a title attribute that makes them unique, I decided to name them Q1 and Q2.


    
        Basic Topics
        
            Question 1
            Question 2

Next we have to give our Answers area a couple more ID’s as well. I named our Answers UL element with an ID of answers and each LI needs to have an ID that corresponds to the title of the question it answers. For instance when your user clicks Question 1 which has a title value of Q1, we need an answer LI element with an ID of Q1 as well. Look at the next example section of code if that doesn’t make any sense to you.

So now we’re ready to write some jQuery code and get this thing working. Lets start with the document ready statement. We want to make sure we start with all of our Answers hidden.

Next I wanted to make sure I could handle multiple q/a lists so I added some more code to the above ready function. We start this with creating an array of all of our question lists, so just keep adding the names of your lists to this array and all should be well.

            var qLists=["#questions"];
            for (x in qLists)
            {
                $( qLists[x] + " li" ).click(showAnswer);
                $( qLists[x] + " li" ).hover(handleHover);
                $( qLists[x] ).mouseout(handleMouseOut);
            }

Next we need to be able to show and hide the answers when the user clicks on them… yea, finally some fun stuff! This function also goes inside the ready statement we started with, but after our array of question lists. This spod you could just copy and paste if you wanted. No changes needed.

            function showAnswer(){
                var elem = '#' + $(this).attr('title');
                $(elem).parent().children().fadeOut('fast').delay(800);
                $(elem).fadeIn('slow');
                for (x in qLists)
                {
                    if(qLists[x] != '#'+$(this).parent().attr('id'))
                    {
                        $( qLists[x] ).children().removeClass('selected');
                    }
                }
                $(this).parent().children().removeClass('selected');
                $(this).addClass('selected');           
            }

Then I also wanted to be able to have the Question list highlight which question we were on hence we have a handleHover function . Again, just copy and paste. Of course if we only do this and we have two lists then each list could have a highlighted question…so a FAQ with multiple lists could have an item in each list hightlighted. So to correct thia I added th handleMouseOut() function. Both of these functions require no editing and can be used as is.

            function handleHover()
            {
                $(this).parent().children().removeClass('highlight');
                $(this).addClass('highlight');
            } 

            function handleMouseOut()
            {
                $(this).children().removeClass('highlight');
            }

one last thing you will need for this to really work you will need the following css classes. Of course you can edit these to your liking.

        #answers
        {
            list-style-type: none;
            padding:0;
            margin:0;
            width:100%;
        }
        #QContainer ul
        {
            list-style-type: none;
            padding:0;
            margin:0 0 0 20px;
        }
        #QContainer ul li
        {
            diplay:block;
            cursor: pointer; cursor: hand;
            padding:3px;
            font-weight:bold;
            margin:0;
        }
        .selected { color:#000; background:#EAEAAE; }
        .highlight { background:#EAEAAE; }

Finally if you followed along correctly your javascript should look like this:

Of course you could expand on this and use it for things other than an FAQ display and if you do we’d love to see what you used it for and how you implemented it. Love to hear your feedback as well. Have a better way of accomplishing this please share. All we ask is that if you do use this code you make sure you are using it for good and not evil. Have a great day and check back for more tutorials and tips.

Featured Auctions Displayed

Umbrella — Thu, 25 Mar 2010 23:09:00 +0000

It’s a common question. How do we make the front page show more than just 3 featured product or service Auctions? And it’s not as hard as you think!

Open your main.php file in your favorite editor and then find the following code



        // #### FEATURE AUCTIONS ###############################################

        $show['featuredserviceauctions'] = $show['featuredproductauctions'] = false;

        $featuredserviceauctions = $featuredproductauctions = array();
        if ($ilconfig['globalauctionsettings_serviceauctionsenabled'])

        {

                $featuredserviceauctions = $ilance->auction->fetch_featured_auctions('service', 3, 1, 0, '', true);

        }

        if ($ilconfig['globalauctionsettings_productauctionsenabled'])

        {

                $featuredproductauctions = $ilance->auction->fetch_featured_auctions('product', 3, 2, 0, '', true);

        }

You will note line 1471 and 1475 are highlighted in the code above. These are the two lines we need to edit to change the number of auctions we are displaying. You will note that in each line there is a 3. This is the number of featured auctions that will be returned. Just change that number to equal how many you want to have appear on your main page.

Thats it.

See I told you it was easy!

Trouble shooting Plugins

Umbrella — Wed, 24 Mar 2010 02:03:51 +0000

Plugins, we want em, we need em, we love em.

But sometimes they have bugs. Unfortunately as with all software, even plugins will have their bugs. We try our hardest to test them, but inevitibilly we cannot account for every environment that they will be assimilated into. Sometimes plugins can push eachother around, other times it can be another customization that causes a Plugin to go rogue. While everyone loves a self starter I’ve found that sometimes self-starters shoot themselves in the foot due to a lack of understanding what it is they’re doing. So, I’m hoping this article will help some of you self starters avoid what I’ve found to be a common pitfall in debugging plugins when they act funny after you install them.

Most ilance marketplace owners at least attempt to do some of their own debugging prior to waiting for a support response. I think everyone familiar with any modicum of programming knows to make backups of the files they plan on altering. If you don’t then shame on you. If you do, then there is something you need to know about your plugin_xxxxx.xml files.

Making a backup is very important. So in backing up your plugin you will most likely make a copy of it. Good idea! However, what most marketplace owners fail to realize is how iLance loads those plugins. When making your backup copy make sure you rename your copy so that the first word in the title is not “plugin_”. This is exactly what iLance looks for when it’s loading your plugin files. Anything inside your /functions/xml/ Directory that starts with the string value of “plugin” will be loaded. What happens if you do? iLance will load that plugin twice, because it things that plugin_myplug.xml and plugin_myplug_old.xml are two separate plugins that need to be loaded. Which in turn will make it look like you have the plugin installed twice on your marketplace by duplicating everything the plugin does.

I’ve personally been contacted numerous times by the self-starting marketplace owners who are taking their code into their own hands (kudos to you guys/gals!). Unfortunately for them they had and left the plugin_ at the beginning of the file name when making their backup copy. So remember to put some word or text in front of the term plugin in your file name.

Member Profiles – Default Tabs?

Umbrella — Tue, 08 Dec 2009 02:40:33 +0000

It was recently asked in the iLance forums how to set which tab is the default that appears on a members profile when someone clicks the link. Our goal here is to make the Full Profile tab be our default visible tab whenever someone clicks a username link to go to their profile. There are several ways to accomplish this, so lets review them.

First we need to know how iLance prints the username and it’s associated link. One might think it’s straight forward, and that editing the html template will do the trick. Sorry, that’s not the case. With a little digging you will find that iLance prints the users name and profile link with a function called print_username. You’ll find this function in the functions/core/ directory buried in the functions.php file.

The function accepts a number of parameters which you can see in the code below:

 

function print_username($userid, $mode = 'href', $bold = 0, $extra = '', $extraseo = '', $displayname = '')
{

The userid...simple enough.
The Mode, upon reviewing the code you will find that there are several modes for this function to handle. those being:
href, plain, custom, and url.
bold. A simple 1 or 0 will tell the function whether or not to make the link bold.
extra: allows us to pass custom parameters to the url that will be placed inside the link
extraseo: allows us to pass custom parameters to the url and will display the url and not return a link.
The final one doesn't even warrant an explaination.

Now that we know our function lets look at a couple different ways to acheive our goal. The first and simplest approach is to hack the function to make it do what we want. Simple enough. I personally am not using SEO currently so in this example I will only show how to alter the regular links.

First we need to find everywhere in the code where we are building the link I've highlighted the relevant lines below so you can see what I'm talking about.


function print_username($userid, $mode = 'href', $bold = 0, $extra = '', $extraseo = '', $displayname = '')
{
        global $ilance, $myapi, $ilpage, $ilconfig;
       
        $username = fetch_user('username', intval($userid));
        $html = '';
       
        // modes: href and plain
        if (isset($mode) AND $mode == 'href')
        {
                $displayname = $username;
                // bold usernames?
                if (!empty($bold) AND $bold)
                {
                        $displayname = ''.$username.'';
                }
                // does admin use SEO urls?
                if ($ilconfig['globalauctionsettings_seourls'])
                {
                        $html .= '' . $displayname . ' ' . construct_username_bits(intval($userid));
                }
                else
                {
                        $html .= '' . $displayname . ' ' . construct_username_bits(intval($userid));
                }   
        }
        else if (isset($mode) AND $mode == 'plain')
        {
                $displayname = $username;
                // bold usernames?
                if (!empty($bold) AND $bold)
                {
                        $username = ''.$displayname.'';
                }
                $html = $username;
        }
        else if (isset($mode) AND $mode == 'custom')
        {
                // bold usernames?
                if (!empty($bold) AND $bold)
                {
                        $displayname = ''.$displayname.'';
                }
                // does admin use SEO urls?
                if ($ilconfig['globalauctionsettings_seourls'])
                {
                        $html .= '' . $displayname . '';
                }
                else
                {
                        $html .= '' . $displayname . '';
                }
        }
        else if (isset($mode) AND $mode == 'url')
        {
                // does admin use SEO urls?
                if ($ilconfig['globalauctionsettings_seourls'])
                {
                        $html .= ((PROTOCOL_REQUEST == 'https') ? HTTPS_SERVER : HTTP_SERVER) . print_seo_url($ilconfig['memberslistingidentifier']) . '/' . construct_seo_url_name($username) . $extraseo;
                }
                else
                {
                        $html .= ((PROTOCOL_REQUEST == 'https') ? HTTPS_SERVER : HTTP_SERVER) . $ilpage['members'] . '?id=' . intval($userid) . $extra;
                }
        }
       
        return $html;
}

Now we need to alter the code. Lets take our first highlighted line as an example:


$html .= '' . $displayname . ' ' . construct_username_bits(intval($userid));

make it look like this:


$html .= '' . $displayname . ' ' . construct_username_bits(intval($userid));

If you look closely you will notice right after the $extra.' we added &profile=1" so now it looks like this $extra . '&profile=1"

Now just do this for all three highlighted areas in the code and you're done! Right? Well, yes and no. You are if you don't mind a hackjob. The more elegant way to do this and the way it was meant to be used, albeit the more time consuming method is to use the function as it is supposed to be used. By setting the parameters the way you want them set when you call the function.

What did he just say?!!

Simple, throughout the iLance script the print_username function is called. Do a find all with your favorite editor and then recode the calls to the functions so they provide the desired results. Of course this is also the more code intense way as well and you will need to be familiar with php and html.

For example, the forum ask's how this can be achieved from auction area. So for example we will use a product or forward auction as an example. Navigate to a product auction on your marketplace. You will note that the page in the url that you are looking at is merch.php, open that file, follow the code to the correct template. In our case the template is listing_forward_auction.html now open that up. Follow the template html to where the link is appearing. You will find it is actually being parsed into the template as a variable called {seller}

{apihook[seller_infobit_table_start]}

Now if we go back the the merch.php file, and scroll up until we find where $seller is being set we will find something like this:

$seller = print_username($res_project_user['user_id'], 'href', 0, '', '');

Now we would want to update this code to looke like this

$seller = print_username($res_project_user['user_id'], 'href', 0, '&profile=1', '');

Now you would just have to do this simple little change all over the place. The trick is finding where you want to do it and everywhere it occurs. How to accomplish this falls outside the realm of this tutorial, but hey, you're an iLancer, which means you'll find a way! The only real problem with this, is when you upgrade your changes will be over-written so make sure you make good notes of where you changed things.

Hope this tutorial helped some people. Now I turn it over to you, discuss...

{seller}