Help - Search - Members - Calendar
Full Version: Click a link to create a vCard
HTMLHelp Forums > Programming > Client-side Scripting
Gardy
Oct 15 2009, 09:27 AM
Hey all,

I have a list of Contacts displayed on my site that is compiled from an external JS fils (Haven't ventured in to SQL yet). I am trying to make it so that a user is able to click a link next to the user and have all of there information saved to a vCard that can be saved to MS Outlook. I think this is possible from other documentation that i have read, but I have fallen flat on my face in trying to achieve this. If any body is able to offer any tip's i'd really appriciate it.

Thanks.

Below is the code I am using to produce the Contact List, just incase any body needs it. I have highlighted red where the vCard link currently is.

CODE
/* **** ------------------------------------------------------------------------
        GLOBAL VARIABLES
------------------------------------------------------------------------ **** */
var i = 0;            // Dummy count
var j = 0;            // Dummy count
var ContactNow        // Whether or not the 'Contact Now' form is displayed
var ContactByPost    // Whether or not the 'Contact by Post' form is displayed

/* **** ------------------------------------------------------------------------
        CONTACT COUNT - So list is displayed correctly (Normal then alt, normal then alt)
------------------------------------------------------------------------ **** */
var inum;
var dnum;

/* **** ------------------------------------------------------------------------
        QUERIES START HERE
------------------------------------------------------------------------ **** */
    // Sets the variables
    ContactNow = "False"
    ContactByPost = "False"
    
    document.write    ('<div class="post_title">');
    document.write        ('<h1 class="left">External Contacts - Displaying '+ContactList.length+' results</h1>');
    document.write        ('<div class="post_date right">'+lastUpdated+'</div>');
    document.write        ('<div class="clearer">&nbsp;</div>');
    document.write    ('</div>');
    
    document.write    ('<div class="post_body nicelist">');
    document.write        ('<ol>');
    j = 0;            
    for (i in ContactList)
      { ContactNow = "False"
        ContactByPost = "False"
        j=j+1
        dnum = j/2;
        inum = (Math.round(dnum));
        if (dnum == inum)
          { document.write    ('<li class="alt">'); }
        else
          { document.write    ('<li class="">'); }
          
        // Avatar
        document.write            ('<div class="staffdirectory left">');
            // Avatar defined in profile
        if ((typeof ContactList[i][4]) != "undefined" && ContactList[i][4] != "")
          { document.write                ('<a onmouseover="window.status=\'Click to see the profile of '+ContactList[i][0]+'\';return true" onmouseout="window.status=\'\';return true" href="staff_profile.html" onClick="this.href+=\'?person='+ContactList[i][0]+'\';return true;"><img alt="" src="'+ContactList[i][4]+'" height="32" width="32" /></a>'); }
        else // Avatar not defined, so default avatar defined here
          { document.write                ('<a onmouseover="window.status=\'Click to see the profile of '+ContactList[i][0]+'\';return true" onmouseout="window.status=\'\';return true" href="staff_profile.html" onClick="this.href+=\'?person='+ContactList[i][0]+'\';return true;"><img alt="" src="img/People/Avatars/sample-avatar.jpg" height="32" width="32" /></a>'); }
        document.write            ('</div>');
        
        // Name - *Company (*Position)
        document.write            ('<div class="staffdirectory">');
            // No Company, so position automatically not shown even if it exists
        if ((typeof ContactList[i][1].comp) == "undefined" || ContactList[i][1].comp == "")
          { document.write            ('<span class="name_staffdirectory"><a onmouseover="window.status=\'Click to see the profile of '+ContactList[i][0]+'\';return true" onmouseout="window.status=\'\';return true" href="staff_profile.html" onClick="this.href+=\'?person='+ContactList[i][0]+'\';return true;">'+ContactList[i][0]+'</a></span>'); }
            // Company (with URL) and Position
        else if (((typeof ContactList[i][1].url) != "undefined" && ContactList[i][1].url != "") && ((typeof ContactList[i][1].job) != "undefined" && ContactList[i][1].job != ""))
          { document.write            ('<span class="name_staffdirectory"><a onmouseover="window.status=\'Click to see the profile of '+ContactList[i][0]+'\';return true" onmouseout="window.status=\'\';return true" href="staff_profile.html" onClick="this.href+=\'?person='+ContactList[i][0]+'\';return true;">'+ContactList[i][0]+'</a> - <a class="news_link" href="mailto:'+ContactList[i][1].url+'">'+ContactList[i][1].comp+'</a> ('+ContactList[i][1].job+')</span>'); }
            // Company (no URL) and Position
        else if (((typeof ContactList[i][1].url) == "undefined" || ContactList[i][1].url == "") && ((typeof ContactList[i][1].job) != "undefined" && ContactList[i][1].job != ""))
          { document.write            ('<span class="name_staffdirectory"><a onmouseover="window.status=\'Click to see the profile of '+ContactList[i][0]+'\';return true" onmouseout="window.status=\'\';return true" href="staff_profile.html" onClick="this.href+=\'?person='+ContactList[i][0]+'\';return true;">'+ContactList[i][0]+'</a> - '+ContactList[i][1].comp+' ('+ContactList[i][1].job+')</span>'); }
            // Company (with URL) without Position
        else if (((typeof ContactList[i][1].url) != "undefined" && ContactList[i][1].url != "") && ((typeof ContactList[i][1].job) == "undefined" || ContactList[i][1].job == ""))
          { document.write            ('<span class="name_staffdirectory"><a onmouseover="window.status=\'Click to see the profile of '+ContactList[i][0]+'\';return true" onmouseout="window.status=\'\';return true" href="staff_profile.html" onClick="this.href+=\'?person='+ContactList[i][0]+'\';return true;">'+ContactList[i][0]+'</a> - <a class="news_link" href="mailto:'+ContactList[i][1].url+'">'+ContactList[i][1].comp+'</a></span>'); }
            // Company (no URL) without Position
        else if (((typeof ContactList[i][1].url) == "undefined" || ContactList[i][1].url == "") && ((typeof ContactList[i][1].job) == "undefined" || ContactList[i][1].job == ""))
          { document.write            ('<span class="name_staffdirectory"><a onmouseover="window.status=\'Click to see the profile of '+ContactList[i][0]+'\';return true" onmouseout="window.status=\'\';return true" href="staff_profile.html" onClick="this.href+=\'?person='+ContactList[i][0]+'\';return true;">'+ContactList[i][0]+'</a> - '+ContactList[i][1].comp+'</span>'); }
          
        // Email link
            // Has email address
        if ((typeof ContactList[i][2].email) != "undefined" && ContactList[i][2].email != "")
          { document.write            ('<div class="contact_details"><a onmouseover="window.status=\'Click to email '+ContactList[i][0].split(" ", 1)+'\';return true" onmouseout="window.status=\'\';return true" href="mailto:'+ContactList[i][2].email+'">Click to e-mail '+ContactList[i][0].split(" ", 1)+'</a></div>'); }
            // No email address
        else
          { document.write            ('<div class="contact_details">No email address available for '+ContactList[i][0].split(" ", 1)+'</div>'); }
        document.write            ('</div>');        
        
        // Contact Details
            // Contact now - Does not show the heading if all elements are empty or undefined
        if (((typeof ContactList[i][2].office) != "undefined" && ContactList[i][2].email != "") ||
            ((typeof ContactList[i][2].mob) != "undefined" && ContactList[i][2].mob != "") ||
            ((typeof ContactList[i][2].off) != "undefined" && ContactList[i][2].off != "") ||
            ((typeof ContactList[i][2].ext) != "undefined" && ContactList[i][2].ext != "") ||
            ((typeof ContactList[i][2].ddi) != "undefined" && ContactList[i][2].ddi != "") ||
            ((typeof ContactList[i][2].fax) != "undefined" && ContactList[i][2].fax != ""))
          { ContactNow = "True"
            document.write        ('<div class="profile_contact left"><h2>Contact '+ContactList[i][0].split(" ", 1)+' now</h2>');
            document.write            ('<table class="contact_details">');
                // E-mail address (email)
            if ((typeof ContactList[i][2].email) != "undefined" && ContactList[i][2].email != "")
              { document.write            ('<tr><td class="method"><a class="header email"><span class="type">E-mail</span>: </a></td><td><span class="value">'+ContactList[i][2].email+'</span></a></td></tr>'); }
                // Mobile (mob)
            if ((typeof ContactList[i][2].mob) != "undefined" && ContactList[i][2].mob != "")
              { document.write            ('<tr><td class="method"><a class="header tel"><span class="type">Mobile</span>: </a></td><td><span class="value">'+ContactList[i][2].mob+'</span></td></tr>'); }
                // Office (off)
            if ((typeof ContactList[i][2].off) != "undefined" && ContactList[i][2].off != "")
              { document.write            ('<tr><td class="method"><a class="header tel"><span class="type">Office</span>: </a></td><td><span class="value">'+ContactList[i][2].off+'</span></td></tr>'); }
                  // Extension (ext)
            if ((typeof ContactList[i][2].ext) != "undefined" && ContactList[i][2].ext != "")
              { document.write            ('<tr><td class="method"><a class="header tel"><span class="type">Extension</span>: </a></td><td><span class="value">'+ContactList[i][2].ext+'</span></td></tr>'); }
                  // Direct Dail (ddi)
            if ((typeof ContactList[i][2].ddi) != "undefined" && ContactList[i][2].ddi != "")
              { document.write            ('<tr><td class="method"><a class="header tel"><span class="type">Direct Dial</span>: </a></td><td><span class="value">'+ContactList[i][2].ddi+'</span></td></tr>'); }
                  // Fax (fax)
            if ((typeof ContactList[i][2].fax) != "undefined" && ContactList[i][2].fax != "")
              { document.write            ('<tr><td class="method"><a class="header tel"><span class="type">Fax</span>: </a></td><td><span class="value">'+ContactList[i][2].fax+'</span></td></tr>'); }
            document.write            ('</table>');
            document.write         ('</div>');
          }
            
            // Contact by Post - Does not show the heading if all elements are empty or undefined
        if (((typeof ContactList[i][1].comp) != "undefined" && ContactList[i][1].comp != "") ||
            ((typeof ContactList[i][1].job) != "undefined" && ContactList[i][1].job != "") ||
            ((typeof ContactList[i][3].add1) != "undefined" && ContactList[i][3].add1 != "") ||
            ((typeof ContactList[i][3].add2) != "undefined" && ContactList[i][3].add2 != "") ||
            ((typeof ContactList[i][3].add3) != "undefined" && ContactList[i][3].add3 != "") ||
            ((typeof ContactList[i][3].add4) != "undefined" && ContactList[i][3].add4 != "") ||
            ((typeof ContactList[i][3].add5) != "undefined" && ContactList[i][3].add5 != "") ||
            ((typeof ContactList[i][3].add6) != "undefined" && ContactList[i][3].add6 != ""))
          { ContactByPost = "True"
            document.write         ('<div class="profile_contact left">');
            document.write            ('<h2>Contact '+ContactList[i][0].split(" ", 1)+' by post</h2>');
            document.write            ('<table class="contact_details">');
            document.write                ('<div class="org">');
                // Company Name
            if ((typeof ContactList[i][1].comp) != "undefined" && ContactList[i][1].comp != "")
              { document.write                ('<tr><td class="method"><a class="header">Company: </a></td><td><div class="organization-name">'+ContactList[i][1].comp+'</div></td></tr>'); }
                // Position
            if ((typeof ContactList[i][1].job) != "undefined" && ContactList[i][1].job != "")
              { document.write                ('<tr><td class="method"><a class="header">Position: </a></td><td><div class="organization-unit">'+ContactList[i][1].job+'</div></td></tr>'); }
            document.write                ('</div>');
                // Address 1
            if ((typeof ContactList[i][3].add1) != "undefined" && ContactList[i][3].add6 != "")
              { document.write            ('<div class="adr">');
                document.write                ('<tr><td class="method"><a class="header">Address: </a></td><td><span class="street-address">'+ContactList[i][3].add1+'</span></tr></td>');
                // Address 2
                if ((typeof ContactList[i][3].add2) != "undefined" && ContactList[i][3].add6 != "")
                  { document.write            ('<tr><td></td><td><span class="locality">'+ContactList[i][3].add2+'</span></tr></td>'); }
                // Address 3
                if ((typeof ContactList[i][3].add3) != "undefined" && ContactList[i][3].add6 != "")
                  { document.write            ('<tr><td></td><td><span class="region">'+ContactList[i][3].add3+'</span></tr></td>'); }
                // Address 4
                if ((typeof ContactList[i][3].add4) != "undefined" && ContactList[i][3].add6 != "")
                  { document.write            ('<tr><td></td><td><span class="postal-code">'+ContactList[i][3].add4+'</span></tr></td>'); }
                // Address 5
                if ((typeof ContactList[i][3].add5) != "undefined" && ContactList[i][3].add6 != "")
                  { document.write            ('<tr><td></td><td><span class="postal-code">'+ContactList[i][3].add5+'</span></tr></td>'); }
                // Address 6
                if ((typeof ContactList[i][3].add6) != "undefined" && ContactList[i][3].add6 != "")
                  { document.write            ('<tr><td></td><td><span class="postal-code">'+ContactList[i][3].add6+'</span></tr></td>'); }
                document.write            ('</div>'); }
            document.write            ('</table>');
            document.write         ('</div>');
          }
            
            // Add Contact Card - Will not display if both 'Contact Now' and 'Contact by Post' are hidden
[color=#FF0000]        if (ContactByPost == "True" && ContactNow == "True")
          { document.write         ('<div class="profile_contact vcard">');
            document.write            ('<h2>Add '+ContactList[i][0].split(" ", 1)+'</h2>');
            document.write            ('<table class="contact_details">');
            document.write                ('<tr><td><a href="http://feeds.technorati.com/contact/http://dynedrewnett" title="Download vCard"><img src="img/vcard_icon.gif" /></a></td></tr>');
            document.write                 ('<tr><td><a href="http://feeds.technorati.com/contact/http://dynedrewnett" title="Download vCard">Click to add '+ContactList[i][0].split(" ", 1)+' to your Address Book</a></td></tr>');
            document.write            ('</table>');
            document.write         ('</div>');[/color]
          }
        
        document.write             ('<div class="clearer">&nbsp;</div>');

        document.write        ('</li>');                                    
      }
    document.write        ('</ol>');
    document.write    ('</div>');
    
    if (dnum != inum )
      { document.write    ('<div class="post_bottom"></div>'); }
    else
      { document.write    ('<div class="post_bottom_alt"></div>'); }
Darin McGrew
Oct 15 2009, 12:57 PM
I've moved this to the client-side scripting forum, since it is about JavaScript.
Gardy
Oct 16 2009, 04:09 AM
QUOTE(Darin McGrew @ Oct 15 2009, 06:57 PM) *

I've moved this to the client-side scripting forum, since it is about JavaScript.

Oh, ok. Sorry, I though MicroFormats were HTML - It's just I am using JS to display it.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.