]> gitweb.fluxo.info Git - lorea/elgg.git/commitdiff
Updated Friends Picker UI and added to core css.
authorpete <pete@36083f99-b078-4883-b0ff-0f9b5a30f544>
Wed, 10 Mar 2010 21:19:24 +0000 (21:19 +0000)
committerpete <pete@36083f99-b078-4883-b0ff-0f9b5a30f544>
Wed, 10 Mar 2010 21:19:24 +0000 (21:19 +0000)
git-svn-id: http://code.elgg.org/elgg/trunk@5352 36083f99-b078-4883-b0ff-0f9b5a30f544

mod/bookmarks/languages/en.php
mod/members/views/default/members/css.php
mod/notifications/views/default/notifications/css.php
mod/notifications/views/default/notifications/subscriptions/forminternals.php
views/default/css.php
views/default/friends/collections.php
views/default/friends/picker.php
views/default/js/friendsPickerv1.php

index ee30569757f0f2f40ce5ce7cc80c986749e7c02c..87d7772ca280466c9d3213a813ce671dc28b25ae 100644 (file)
@@ -41,7 +41,7 @@ $english = array(
 
                'item:object:bookmarks' => 'Bookmarked items',
 
-               'bookmarks:group' => 'Community bookmarks',
+               'bookmarks:group' => 'Group bookmarks',
                'bookmarks:enablebookmarks' => 'Enable community bookmarks',
                'bookmarks:referenceadded' => 'You have added that bookmark as a reference',
                'bookmarks:referenceerror' => 'There was a problem adding that bookmark as a reference',
index 3b8cc1cf06fabdf21c87218a160ad5d54a02a42b..805bcc3e1a56fc285594576e0163670f195e765f 100644 (file)
@@ -28,5 +28,5 @@
        margin:4px 0 5px 0;
 }
 #memberssearchform .search_input {
-       width:176px;
+       width:196px;
 }
\ No newline at end of file
index be1ef922cd599e5b733d258e3bfa131b72d8a315..5c855d84295718416b41d551189a337899615960 100644 (file)
@@ -64,8 +64,8 @@
 .notification_personal {
        margin-bottom: 25px;
 }
-
-.settings_form .friendsPicker_container h3 {
+/*
+.settings_form .friends_picker_container h3 {
        color:#999999;
        font-size:3em;
        margin:0 0 20px;
@@ -73,6 +73,7 @@
        background: none;
        border-bottom: none;
 }
+*/
 
 
 
index 673e30cc335c1b72a610298571efce0c80e93bb8..9030d20a8f4b98d88eabffc591731e104ebdba39 100644 (file)
 ?>
 
 
-       <div class="friendsPicker_wrapper">
-       <div id="friendsPicker<?php echo $friendspicker; ?>">
-               <div class="friendsPicker_container">
+       <div class="friends_picker_wrapper">
+       <div id="friends_picker<?php echo $friendspicker; ?>">
+               <div class="friends_picker_container">
 <?php
 
        // Initialise letters
@@ -279,7 +279,7 @@ END;
 
 <script type="text/javascript">
                // initialise picker
-               $("div#friendsPicker<?php echo $friendspicker; ?>").friendsPicker(<?php echo $friendspicker; ?>);
+               $("div#friends_picker<?php echo $friendspicker; ?>").friendsPicker(<?php echo $friendspicker; ?>);
 </script>
 <script>
        $(document).ready(function () {
@@ -290,7 +290,7 @@ END;
                foreach($activeletters as $letter) {
                        $tab = strpos($chararray, $letter) + 1;
 ?>
-       $("div#friendsPickerNavigation<?php echo $friendspicker; ?> li.tab<?php echo $tab; ?> a").addClass("tabHasContent");
+       $("div#friends_picker_navigation<?php echo $friendspicker; ?> li.tab<?php echo $tab; ?> a").addClass("tabHasContent");
 <?php
                }
 
index aac5008717e7c9c33a3fcb2a22132c84cef2084c..6673df8766dc78a09c88af17633578435f525c21 100644 (file)
@@ -955,6 +955,8 @@ select.styled .select_option {
 p.entity_title {
        font-weight: bold;
        font-size: 1.1em;
+       line-height:1.2em;
+       color:#666666;
 }
 p.entity_title a {
        color:#0054A7;
@@ -964,6 +966,7 @@ p.entity_subtext {
        padding:0;
        color:#666666;
        font-size: 90%;
+       line-height:1.2em;
 }
 /* entity metadata block */
 .entity_metadata {
@@ -1139,8 +1142,8 @@ input[type="text"]:focus {
        background-image: url(<?php echo $vars['url']; ?>_graphics/button_graduation.png);
        background-repeat: repeat-x;
        background-position: left 10px;
-       -webkit-border-radius: 7px; 
-       -moz-border-radius: 7px;
+       -webkit-border-radius: 5px; 
+       -moz-border-radius: 5px;
        width: auto;
        padding: 2px 4px;
        margin:0 10px 10px 0;
@@ -1173,8 +1176,8 @@ input[type="submit"] {
        background-image:  url(<?php echo $vars['url']; ?>_graphics/button_graduation.png);
        background-repeat:  repeat-x;
        background-position:  left 10px;
-       -webkit-border-radius: 7px; 
-       -moz-border-radius: 7px;
+       -webkit-border-radius: 5px; 
+       -moz-border-radius: 5px;
        width: auto;
        padding: 2px 4px;
        margin:10px 0 10px 0;
@@ -1202,8 +1205,8 @@ input[type="submit"]:hover {
        background-repeat:  repeat-x;
        background-position:  left 10px;
        border: 1px solid #999999;
-       -webkit-border-radius: 7px; 
-       -moz-border-radius: 7px;
+       -webkit-border-radius: 5px; 
+       -moz-border-radius: 5px;
        width: auto;
        padding: 2px 4px;
        margin:10px 0 10px 10px;
@@ -1268,7 +1271,6 @@ a.action_button:focus {
        background-image:  url(<?php echo $vars['url']; ?>_graphics/button_graduation.png);
        background-repeat:  repeat-x;
        background-position:  left 10px;
-       /*display:inline-block;*/
        width:auto;
        height:auto;
        padding: 3px 6px 3px 6px;
@@ -1313,6 +1315,162 @@ a.action_button:focus {
 .delete_button a:hover {
        background-position: 0 -16px;
 }
+
+
+/* ***************************************
+       FRIENDS PICKER SLIDER
+*************************************** */
+.friends_picker_container h3 {
+       font-size:4em !important;
+       text-align: left;
+       margin:10px 0 20px 0 !important;
+       color:#999999 !important;
+       background: none !important;
+       padding:0 !important;
+}
+.friends_picker .friends_picker_container .panel ul {
+       text-align: left;
+       margin: 0;
+       padding:0;
+}
+.friends_picker_wrapper {
+       margin: 0;
+       padding:0;
+       position: relative;
+       width: 100%;
+}
+.friends_picker {
+       position: relative;
+       overflow: hidden;
+       margin: 0;
+       padding:0;
+       width: 730px;
+       height: auto;
+/*
+       background: #dedede;
+       -webkit-border-radius: 8px;
+       -moz-border-radius: 8px;
+*/
+}
+.friendspicker_savebuttons {
+       background: white;
+       -webkit-border-radius: 8px;
+       -moz-border-radius: 8px;
+       margin:0 10px 10px 10px;
+}
+.friends_picker .friends_picker_container { /* long container used to house end-to-end panels. Width is calculated in JS  */
+       position: relative;
+       left: 0;
+       top: 0;
+       width: 100%;
+       list-style-type: none;
+}
+.friends_picker .friends_picker_container .panel {
+       float:left;
+       height: 100%;
+       position: relative;
+       width: 730px;
+       margin: 0;
+       padding:0;
+}
+.friends_picker .friends_picker_container .panel .wrapper {
+       margin: 0;
+       padding:4px 10px 10px 10px;
+       min-height: 230px;
+}
+.friends_picker_navigation {
+       margin: 0 0 10px 0;
+       padding:0 0 10px 0;
+       border-bottom:1px solid #cccccc;
+}
+.friends_picker_navigation ul {
+       list-style: none;
+       padding-left: 0;
+}
+.friends_picker_navigation ul li {
+       float: left;
+       margin:0;
+       background:white;
+}
+.friends_picker_navigation a {
+       font-weight: bold;
+       text-align: center;
+       background: white;
+       color: #999999;
+       text-decoration: none;
+       display: block;
+       padding: 0;
+       width:20px;
+       -webkit-border-radius: 4px;
+       -moz-border-radius: 4px;
+}
+.tabHasContent {
+       background: white; 
+       color:#333333 !important;
+}
+.friends_picker_navigation li a:hover {
+       background: #333333;
+       color:white !important;
+}
+.friends_picker_navigation li a.current {
+       background: #4690D6;
+       color:white !important;
+}
+.friends_picker_navigation_l, .friends_picker_navigation_r {
+       position: absolute;
+       top: 46px;
+       text-indent: -9000em;
+}
+.friends_picker_navigation_l a, .friends_picker_navigation_r a {
+       display: block;
+       height: 43px;
+       width: 43px;
+}
+.friends_picker_navigation_l {
+       right: 48px;
+       z-index:1;
+}
+.friends_picker_navigation_r {
+       right: 0;
+       z-index:1;
+}
+.friends_picker_navigation_l {
+       background: url("<?php echo $vars['url']; ?>_graphics/friends_picker_arrows.gif") no-repeat left top;
+}
+.friends_picker_navigation_r {
+       background: url("<?php echo $vars['url']; ?>_graphics/friends_picker_arrows.gif") no-repeat -60px top;
+}
+.friends_picker_navigation_l:hover {
+       background: url("<?php echo $vars['url']; ?>_graphics/friends_picker_arrows.gif") no-repeat left -44px;
+}
+.friends_picker_navigation_r:hover {
+       background: url("<?php echo $vars['url']; ?>_graphics/friends_picker_arrows.gif") no-repeat -60px -44px;
+}
+.friends_collections_controls a.delete_collection {
+       display:block;
+       cursor: pointer;
+       width:14px;
+       height:14px;
+       margin:2px 3px 0 0;
+       background: url("<?php echo $vars['url']; ?>_graphics/icon_customise_remove.png") no-repeat 0 0;
+}
+.friends_collections_controls a.delete_collection:hover {
+       background-position: 0 -16px;
+}
+.friendspicker_savebuttons .submit_button,
+.friendspicker_savebuttons .cancel_button {
+       margin:5px 20px 5px 5px;
+}
+
+#collectionMembersTable {
+       background: #dedede;
+       -webkit-border-radius: 8px;
+       -moz-border-radius: 8px;
+       margin:10px 0 0 0;
+       padding:10px 10px 0 10px;
+}
+
+
 /*  ////////////////////////////////////////////////////////////////////////////////////////// >>>End Verified */
 
 
@@ -1433,255 +1591,4 @@ a.action_button:focus {
 }
 
 
-/*
-
 
-#elgg_topbar_panel {
-       background:#333333;
-       color:#eeeeee;
-       height:200px;
-       width:100%;
-       padding:10px 20px 10px 20px;
-       display:none;
-       position:relative;
-}
-#elggFooterContents .footer_legal_links {
-       text-align:right;
-}
-#elggFooterContents .footersidebar {
-       text-align:right;
-}
-#elggFooterContents table td.footersidebar a img {
-       float:right;
-       padding:5px 0;
-}
-.generic_comment_owner {
-       font-size: 90%;
-       color:#666666;
-}
-.generic_comment {
-       background:white;
-       -webkit-border-radius: 8px;
-       -moz-border-radius: 8px;
-       padding:10px;
-       margin:0 10px 10px 10px;
-}
-.generic_comment_icon {
-       float:left;
-}
-.generic_comment_details {
-       margin-left: 60px;
-}
-.generic_comment_details p {
-       margin: 0 0 5px 0;
-}
-.generic_comment_owner {
-       color:#666666;
-       margin: 0px;
-       font-size:90%;
-       border-top: 1px solid #aaaaaa;
-}
-
-
-Object page headers blogs/pages/files etc
-
-
-table.search_gallery {
-       border-spacing: 10px;
-       margin:0 0 0 0;
-}
-.search_gallery td {
-       padding: 5px;
-}
-.search_gallery_item {
-       background: white;
-       -webkit-border-radius: 8px; 
-       -moz-border-radius: 8px;
-       width:170px;
-}
-.search_gallery_item:hover {
-       background: black;
-       color:white;
-}
-.search_gallery_item .search_listing {
-       background: none;
-       text-align: center;
-}
-.search_gallery_item .search_listing_header {
-       text-align: center;
-}
-.search_gallery_item .search_listing_icon {
-       position: relative;
-       text-align: center;
-}
-.search_gallery_item .search_listing_info {
-       margin: 5px;
-}
-.search_gallery_item .search_listing_info p {
-       margin: 5px;
-       margin-bottom: 10px;
-}
-.search_gallery_item .search_listing {
-       background: none;
-       text-align: center;
-}
-.search_gallery_item .search_listing_icon {
-       position: absolute;
-       margin-bottom: 20px;
-}
-.search_gallery_item .search_listing_info {
-       margin: 5px;
-}
-.search_gallery_item .search_listing_info p {
-       margin: 5px;
-       margin-bottom: 10px;
-}
-
-#NewListStyle  {
-       padding:0;
-       margin:0;
-}
-#NewListStyle  .search_listing {
-       -webkit-border-radius: 0; 
-       -moz-border-radius: 0;
-       background:none;
-       border-bottom:1px dotted #CCCCCC;
-       margin:0;
-       padding:5px 0 7px 0;
-       display: inline-block;
-       position: relative;
-       clear:both;
-}
-#NewListStyle  .ListTop {
-       margin:0 0;
-       clear:both;
-       width:auto;
-}
-#NewListStyle  .search_listing:hover {
-       background-color: #eeeeee;
-}
-#NewListStyle  .search_listing:last-child {
-       border-bottom:1px dotted #CCCCCC;
-}
-
-#NewListStyle .search_listing_icon {
-       float:left;
-       margin-left:3px;
-       margin-top:3px;
-}
-#NewListStyle .search_listing .search_listing_info {
-       float:left;
-       margin-left:7px;
-       min-height:28px;
-       width:693px;
-}
-#NewListStyle .search_listing .search_listing_info .ItemMetaData {
-       float:right;
-       margin-left:15px;
-       margin-top:0;
-       margin-right: 3px;
-       color:#AAAAAA;
-       font-size: 90%;
-}
-
-.ItemMetaData.special {
-       float:right;
-       margin-left:15px;
-       margin-top:0;
-       margin-right: 3px;
-       color:#AAAAAA;
-       font-size: 90%;
-}
-
-used on groups members listings where there is only a delete button in table 
-#NewListStyle .search_listing .search_listing_info .ItemMetaData table.singlecell {
-       width:auto; 
-}
-#NewListStyle .search_listing_info p.tags {
-       font-size:90%;
-       margin:0;
-       padding-top:1px;
-}
-*/
-
-
-/* ***************************************
-  COLLAPSABLE BOXES - for widgets?
-*************************************** */
-/*
-.collapsable_box {
-       margin: 0 0 20px 0;
-       height:auto;
-
-}
-.collapsable_box_header {
-       color: #4690d6;
-       padding: 5px 10px 5px 10px;
-       margin:0;
-       border-left: 1px solid white;
-       border-right: 1px solid #cccccc;
-       border-bottom: 1px solid #cccccc;
-       -moz-border-radius-topleft:8px;
-       -moz-border-radius-topright:8px;
-       -webkit-border-top-right-radius:8px;
-       -webkit-border-top-left-radius:8px;
-       background:#dedede;
-}
-.collapsable_box_header h1 {
-       color: #0054a7;
-       font-size:1.25em;
-       line-height: 1.2em;
-}
-.collapsable_box_content {
-       padding: 10px 0 10px 0;
-       margin:0;
-       height:auto;
-       background:#dedede;
-       -moz-border-radius-bottomleft:8px;
-       -moz-border-radius-bottomright:8px;
-       -webkit-border-bottom-right-radius:8px;
-       -webkit-border-bottom-left-radius:8px;
-       border-left: 1px solid white;
-       border-right: 1px solid #cccccc;
-       border-bottom: 1px solid #cccccc;
-}
-.collapsable_box_content  {
-       margin-bottom:5px;
-}
-.collapsable_box_editpanel {
-       display: none;
-       background: #a8a8a8;
-       padding:10px 10px 5px 10px;
-       border-left: 1px solid white;
-       border-bottom: 1px solid white;
-}
-.collapsable_box_editpanel p {
-       margin:0 0 5px 0;
-}
-.collapsable_box_header a.toggle_box_contents {
-       color: #4690d6;
-       cursor:pointer;
-       font-family: Arial, Helvetica, sans-serif;
-       font-size:20px;
-       font-weight: bold;
-       text-decoration:none;
-       float:right;
-       margin: 0;
-       margin-top: -7px;
-}
-.collapsable_box_header a.toggle_box_edit_panel {
-       color: #4690d6;
-       cursor:pointer;
-       font-size:9px;
-       text-transform: uppercase;
-       text-decoration:none;
-       font-weight: normal;
-       float:right;
-       margin: 3px 10px 0 0;
-}
-.collapsable_box_editpanel label {
-       font-weight: normal;
-       font-size: 100%;
-}
-*/
index a013dc1dae395ff596925d573c58a7f984d29f94..d73568b7153599c3d3c30a413eaad1f828498f64 100644 (file)
@@ -15,7 +15,6 @@ if (!isset($friendspicker)) {
        $friendspicker = 0;
 }
 
-echo "<div class=\"contentWrapper\">";
 
 if (is_array($vars['collections']) && sizeof($vars['collections'])) {
        echo "<ul id=\"friends_collections_accordian\">";
@@ -31,8 +30,6 @@ if (is_array($vars['collections']) && sizeof($vars['collections'])) {
        echo elgg_echo("friends:nocollections");
 }
 
-echo "</div>";
-
 ?>
 
 <script>
index 1ac8b23af7288435a0e65424c9edb7669480ed1a..bca3e5e89ca0de94b7a8f68e163c8154a30c0c7f 100644 (file)
@@ -135,9 +135,9 @@ if (!isset($vars['replacement'])) {
        }
 ?>
 
-<div class="friendsPicker_wrapper">
-<div id="friendsPicker<?php echo $friendspicker; ?>">
-       <div class="friendsPicker_container">
+<div class="friends_picker_wrapper">
+<div id="friends_picker<?php echo $friendspicker; ?>">
+       <div class="friends_picker_container">
 <?php
 
 // Initialise letters
@@ -290,7 +290,7 @@ if (!isset($vars['replacement'])) {
 
 <script type="text/javascript">
        // initialise picker
-       $("div#friendsPicker<?php echo $friendspicker; ?>").friendsPicker(<?php echo $friendspicker; ?>);
+       $("div#friends_picker<?php echo $friendspicker; ?>").friendsPicker(<?php echo $friendspicker; ?>);
 </script>
 <script>
 $(document).ready(function () {
@@ -301,7 +301,7 @@ if (sizeof($activeletters) > 0)
        foreach($activeletters as $letter) {
                $tab = strpos($chararray, $letter) + 1;
 ?>
-$("div#friendsPickerNavigation<?php echo $friendspicker; ?> li.tab<?php echo $tab; ?> a").addClass("tabHasContent");
+$("div#friends_picker_navigation<?php echo $friendspicker; ?> li.tab<?php echo $tab; ?> a").addClass("tabHasContent");
 <?php
        }
 
index 32b495938e13cda7774eb023f8c691fcb5901645..2fa4e373ff158189673a3242639bfae59032de48 100644 (file)
@@ -12,16 +12,16 @@ jQuery.fn.friendsPicker = function(iterator) {
        return this.each(function() {
        
                var container = $(this);
-               container.addClass("friendsPicker");
+               container.addClass("friends_picker");
                // set panelwidth manually as it's hidden initially - adjust this value for different themes/pagewidths 
-               var panelWidth = 678;
+               var panelWidth = 730;
 
                // count the panels in the container
                var panelCount = container.find("div.panel").size();
                // calculate the width of all the panels lined up end-to-end
                var friendsPicker_containerWidth = panelWidth*panelCount;
                // specify width for the friendsPicker_container
-               container.find("div.friendsPicker_container").css("width" , friendsPicker_containerWidth);
+               container.find("div.friends_picker_container").css("width" , friendsPicker_containerWidth);
                
                // global variables for container.each function below
                var friendsPickerNavigationWidth = 0;
@@ -30,17 +30,17 @@ jQuery.fn.friendsPicker = function(iterator) {
                // generate appropriate nav for each container
                container.each(function(i) {
                        // generate Left and Right arrows
-                       $(this).before("<div class='friendsPickerNavigationL' id='friendsPickerNavigationL" + iterator + "'><a href='#'>Left</a><\/div>");
-                       $(this).after("<div class='friendsPickerNavigationR' id='friendsPickerNavigationR" + iterator + "'><a href='#'>Right</a><\/div>");
+                       $(this).before("<div class='friends_picker_navigation_l' id='friends_picker_navigation_l" + iterator + "'><a href='#'>Left</a><\/div>");
+                       $(this).after("<div class='friends_picker_navigation_r' id='friends_picker_navigation_r" + iterator + "'><a href='#'>Right</a><\/div>");
                        
                        // generate a-z tabs
-                       $(this).before("<div class='friendsPickerNavigation' id='friendsPickerNavigation" + iterator + "'><ul><\/ul><\/div>");
+                       $(this).before("<div class='friends_picker_navigation' id='friends_picker_navigation" + iterator + "'><ul><\/ul><\/div>");
                        $(this).find("div.panel").each(function(individualTabItemNumber) {
-                               $("div#friendsPickerNavigation" + iterator + " ul").append("<li class='tab" + (individualTabItemNumber+1) + "'><a href='#" + (individualTabItemNumber+1) + "'>" + $(this).attr("title") + "<\/a><\/li>");               
+                               $("div#friends_picker_navigation" + iterator + " ul").append("<li class='tab" + (individualTabItemNumber+1) + "'><a href='#" + (individualTabItemNumber+1) + "'>" + $(this).attr("title") + "<\/a><\/li>");             
                        });
                        
                        // tabs navigation
-                       $("div#friendsPickerNavigation" + iterator + " a").each(function(individualTabItemNumber) {
+                       $("div#friends_picker_navigation" + iterator + " a").each(function(individualTabItemNumber) {
                                // calc friendsPickerNavigationWidth by summing width of each li
                                friendsPickerNavigationWidth += $(this).parent().width();
                                // set-up individual tab clicks
@@ -48,45 +48,45 @@ jQuery.fn.friendsPicker = function(iterator) {
                                        $(this).addClass("current").parent().parent().find("a").not($(this)).removeClass("current"); 
                                        var distanceToMoveFriendsPicker_container = - (panelWidth*individualTabItemNumber);
                                        currentPanel = individualTabItemNumber + 1;
-                                       $(this).parent().parent().parent().next().find("div.friendsPicker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
+                                       $(this).parent().parent().parent().next().find("div.friends_picker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
                                });
                        });
                        
                        // Right arow click function
-                       $("div#friendsPickerNavigationR" + iterator + " a").click(function() {
+                       $("div#friends_picker_navigation_r" + iterator + " a").click(function() {
                                if (currentPanel == panelCount) {
                                        var distanceToMoveFriendsPicker_container = 0;
                                        currentPanel = 1; 
-                                       $(this).parent().parent().find("div.friendsPickerNavigation a.current").removeClass("current").parent().parent().find("a:eq(0)").addClass("current");
+                                       $(this).parent().parent().find("div.friends_picker_navigation a.current").removeClass("current").parent().parent().find("a:eq(0)").addClass("current");
                                } else {
                                        var distanceToMoveFriendsPicker_container = - (panelWidth*currentPanel);
                                        currentPanel += 1;
-                                       $(this).parent().parent().find("div.friendsPickerNavigation a.current").removeClass("current").parent().next().find("a").addClass("current");
+                                       $(this).parent().parent().find("div.friends_picker_navigation a.current").removeClass("current").parent().next().find("a").addClass("current");
                                };
-                               $(this).parent().parent().find("div.friendsPicker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
+                               $(this).parent().parent().find("div.friends_picker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
                                return false;
                        });
                        
                        // Left arrow click function
-                       $("div#friendsPickerNavigationL" + iterator + " a").click(function() {
+                       $("div#friends_picker_navigation_l" + iterator + " a").click(function() {
                                if (currentPanel == 1) {
                                        var distanceToMoveFriendsPicker_container = - (panelWidth*(panelCount - 1));
                                        currentPanel = panelCount;
-                                       $(this).parent().parent().find("div.friendsPickerNavigation a.current").removeClass("current").parent().parent().find("li:last a").addClass("current");
+                                       $(this).parent().parent().find("div.friends_picker_navigation a.current").removeClass("current").parent().parent().find("li:last a").addClass("current");
                                } else {
                                        currentPanel -= 1;
                                        var distanceToMoveFriendsPicker_container = - (panelWidth*(currentPanel - 1));
-                                       $(this).parent().parent().find("div.friendsPickerNavigation a.current").removeClass("current").parent().prev().find("a").addClass("current");
+                                       $(this).parent().parent().find("div.friends_picker_navigation a.current").removeClass("current").parent().prev().find("a").addClass("current");
                                };
-                               $(this).parent().parent().find("div.friendsPicker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
+                               $(this).parent().parent().find("div.friends_picker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
                                return false;
                        });
                                                
                                // apply 'current' class to currently selected tab link
-                               $("div#friendsPickerNavigation" + iterator + " a:eq(0)").addClass("current");
+                               $("div#friends_picker_navigation" + iterator + " a:eq(0)").addClass("current");
                });
 
-               $("div#friendsPickerNavigation" + iterator).append("<br />");           
+               $("div#friends_picker_navigation" + iterator).append("<br />");         
   });
 };