Details about nice "subscription" interface below each post

Posted by ajayg on December 28, 2008 at 8:10pm

I really liked the way UI is designed here on GDO for nice subscription interface. Could you please provide the details how you achieved this? I can see the simple html markup (which is elegant) but I am sure there some jquery or javscript magic. Already looked at about page and it doesn't say. So would love to know more or learn from the script if you can please share.

On a slightly differnt note, this may be a nice alternative to many "create x, create y" links on the group details block on the right.

Comments

Same Question

Posted by deverman on January 3, 2009 at 6:12pm

I was just wondering the same thing and didn't see an explanation on the about page.

In the source it looks like

Posted by ajayg on January 4, 2009 at 3:05am

In the source it looks like the block (div) is already built but hidden. And I think there some jquery which toggles the display of this block on hover

<a title="Subscriptions" href="#node_links_group" rel="#node_links_group" class="load-local"><img src="/sites/all/modules/groupsorg/button_subscriptions.gif" width="138" height="41"></a>
<div id="node_links_group" style="display: none"><div class="item-list"><ul><li><a href="/notifications/subscribe/4556/group/group/162">Subscribe to: Posts in group <em>Groups.drupal.org</em></a></li><li><a href="/notifications/unsubscribe/12949">Unsubscribe from: This post</a></li><li><a href="/notifications/subscribe/4556/author/author/4556">Subscribe to: Posts by <em>ajayg</em></a></li></ul></div>

Can you please explain a bit

Posted by amirtaiar on January 9, 2009 at 8:54pm

Can you please explain a bit more?
For peaple want to acomplish with no PHP knowlege.
Thank you

Amir Taiar | Partner & CTO at Reasonat

and the code

Posted by moshe weitzman on February 6, 2009 at 9:03pm

The following goes in hook_nodeapi('alter')

<?php
      if ($a4) { // $page == TRUE
        foreach ($node->links as $key => $link) {
          if (substr($key, 0, strlen('notifications_')) == 'notifications_') {
            $new[] = l($link['title'], $link['href'], array(), NULL, NULL, FALSE, TRUE);
            unset($node->links[$key]);
          }
        }
        
        if (!empty($new)) {
          $hidden = theme('item_list', $new);
          $hidden = "<div id=\"node_links_group\" style=\"display: none\">$hidden</a></div>";
          $img = '<img src="/sites/all/modules/groupsorg/button_subscriptions.gif" width="138" height="41">';
          $visible = '<a title="Subscriptions" href="#node_links_group" rel="#node_links_group" class="load-local">'. $img. '</a>'. "\n";
          $node->body .= $visible. $hidden;

          // Add the needed JS and CSS
          $path = drupal_get_path('module', 'groupsorg'). '/cluetip';
          drupal_add_css($path. '/jquery.cluetip.css');
          drupal_add_js($path. '/jquery.cluetip.js');
          drupal_add_js($path. '/jquery.dimensions-1.2.js');
          drupal_add_js($path. '/jquery.hoverIntent.js');
          drupal_add_js(drupal_get_path('module', 'groupsorg'). '/groupsorg.js');
        }
      }
?>

The little js thats needed is at http://groups.drupal.org/sites/all/modules/groupsorg/groupsorg.js. You need the jquery plugins cluetip and dimensions and hoverintent. Include those just like I have done above.

Also see bottom of http://groups.drupal.org/sites/all/themes/bluebeach/css/groups.drupal.or... for the cluetip css.

I don't think the button and popup look that great so design help is welcome.

Thanks Moshe ! Created a

Posted by ajayg on February 7, 2009 at 7:58pm

Thanks Moshe ! Created a handbook page under the page which lists various OG snippets and theming tricks
http://drupal.org/node/370765

I'm not a big fan of this

Posted by Garrett Albright on February 10, 2009 at 12:24am

I'm not a big fan of this button and getting really tired of seeing it. I mean, the functionality is nice, but just look at it! It's got that XP-tastic envelope and arrow icon on it. The hinted type smells Windows-y too. Then when you mouse over it, the font sizes in the pop-up are huge, and it doesn't go away when you mouse out if it.

The Boise Drupal Guy!