• Page 1 of 1
  • 1
uCause Community » Trash & Archives » Forum » Floating Google +1, Facebook, Twitter Buttons (Floating Google +1, Facebook, Twitter Buttons For Your Forum)
Floating Google +1, Facebook, Twitter Buttons
masoodalam51Date: Thursday, 2011-07-07, 6:01 PM | Message # 1
Member
Group: Senior Members
Messages: 27
Awards: 4
Reputation: 3
Status: :-(
1.Go Main » Customize design » Editing templates » Common templates » Style sheet (CSS)
Add This Code In any Place

Code
#floatdiv {       
          position:absolute;       
          width:94px;       
          height:229px;       
          top:0;       
          left:0;       
              z-index:100       
}

#ucausesidebar {       
              border:1px solid #ddd;       
              padding-left:5px;       
          position:relative;       
          height:220px;       
          width:55px;       
          margin:0 0 0 5px;       
}


2.Main » Customize design » Editing templates » Forum » General appearance of forum pages
Find

Code
</body>

Add Before This Code
Code
<div id="floatdiv">       
<div id="ucausesidebar">       
          <table cellpadding="1px" cellspacing="0">
          <tr>       
          <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">       
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>       
          </td>       
          </tr>
          <tr>       
          <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">       
<g:plusone size="Tall" expr:href="data:post.url"/>       
          </g:plusone></td>       
          </tr>
          <tr>       
          <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="masoodalam51">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>       
          </td>       
          </tr>
          <tr>       
          <td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;">  
          </td>       
          </tr>
          </table>       
</div>       
</div>       
<script type="text/javascript">       
// JavaScript Document

         <!--       
var floatingMenuId = 'floatdiv';       
var floatingMenu =       
{       
          targetX: 0,       
          targetY: 300,
          hasInner: typeof(window.innerWidth) == 'number',       
          hasElement: typeof(document.documentElement) == 'object'       
              && typeof(document.documentElement.clientWidth) == 'number',
          menu:       
              document.getElementById       
              ? document.getElementById(floatingMenuId)       
              : document.all       
                ? document.all[floatingMenuId]       
                : document.layers[floatingMenuId]       
};
floatingMenu.move = function ()       
{       
          floatingMenu.menu.style.left = floatingMenu.nextX + 'px';       
          floatingMenu.menu.style.top = floatingMenu.nextY + 'px';       
}
floatingMenu.computeShifts = function ()       
{       
          var de = document.documentElement;
          floatingMenu.shiftX =        
              floatingMenu.hasInner        
              ? pageXOffset        
              : floatingMenu.hasElement        
                ? de.scrollLeft        
                : document.body.scrollLeft;        
          if (floatingMenu.targetX < 0)       
          {       
              floatingMenu.shiftX +=       
                  floatingMenu.hasElement       
                  ? de.clientWidth       
                  : document.body.clientWidth;       
          }
          floatingMenu.shiftY =       
              floatingMenu.hasInner       
              ? pageYOffset       
              : floatingMenu.hasElement       
                ? de.scrollTop       
                : document.body.scrollTop;       
          if (floatingMenu.targetY < 0)       
          {       
              if (floatingMenu.hasElement && floatingMenu.hasInner)       
              {       
                  // Handle Opera 8 problems       
                  floatingMenu.shiftY +=       
                      de.clientHeight > window.innerHeight       
                      ? window.innerHeight       
                      : de.clientHeight       
              }       
              else       
              {       
                  floatingMenu.shiftY +=       
                      floatingMenu.hasElement       
                      ? de.clientHeight       
                      : document.body.clientHeight;       
              }       
          }       
}
floatingMenu.calculateCornerX = function()       
{       
          if (floatingMenu.targetX != 'center')       
              return floatingMenu.shiftX + floatingMenu.targetX;
          var width = parseInt(floatingMenu.menu.offsetWidth);
          var cornerX =       
              floatingMenu.hasElement       
              ? (floatingMenu.hasInner       
                 ? pageXOffset       
                 : document.documentElement.scrollLeft) +       
                (document.documentElement.clientWidth - width)/2       
              : document.body.scrollLeft +       
                (document.body.clientWidth - width)/2;       
          return cornerX;       
};
floatingMenu.calculateCornerY = function()       
{       
          if (floatingMenu.targetY != 'center')       
              return floatingMenu.shiftY + floatingMenu.targetY;
          var height = parseInt(floatingMenu.menu.offsetHeight);
          // Handle Opera 8 problems       
          var clientHeight =       
              floatingMenu.hasElement && floatingMenu.hasInner       
              && document.documentElement.clientHeight       
                  > window.innerHeight       
              ? window.innerHeight       
              : document.documentElement.clientHeight
          var cornerY =       
              floatingMenu.hasElement       
              ? (floatingMenu.hasInner        
                 ? pageYOffset       
                 : document.documentElement.scrollTop) +       
                (clientHeight - height)/2       
              : document.body.scrollTop +       
                (document.body.clientHeight - height)/2;       
          return cornerY;       
};
floatingMenu.doFloat = function()       
{       
          // Check if reference to menu was lost due       
          // to ajax manipuations       
          if (!floatingMenu.menu)       
          {       
              menu = document.getElementById       
                  ? document.getElementById(floatingMenuId)       
                  : document.all       
                    ? document.all[floatingMenuId]       
                    : document.layers[floatingMenuId];
              initSecondary();       
          }
          var stepX, stepY;
          floatingMenu.computeShifts();
          var cornerX = floatingMenu.calculateCornerX();
          var stepX = (cornerX - floatingMenu.nextX) * .07;       
          if (Math.abs(stepX) < .5)       
          {       
              stepX = cornerX - floatingMenu.nextX;       
          }
          var cornerY = floatingMenu.calculateCornerY();
          var stepY = (cornerY - floatingMenu.nextY) * .07;       
          if (Math.abs(stepY) < .5)       
          {       
              stepY = cornerY - floatingMenu.nextY;       
          }
          if (Math.abs(stepX) > 0 ||       
              Math.abs(stepY) > 0)       
          {       
              floatingMenu.nextX += stepX;       
              floatingMenu.nextY += stepY;       
              floatingMenu.move();       
          }
          setTimeout('floatingMenu.doFloat()', 20);       
};
// addEvent designed by Aaron Moore       
floatingMenu.addEvent = function(element, listener, handler)       
{       
          if(typeof element[listener] != 'function' ||       
             typeof element[listener + '_num'] == 'undefined')       
          {       
              element[listener + '_num'] = 0;       
              if (typeof element[listener] == 'function')       
              {       
                  element[listener + 0] = element[listener];       
                  element[listener + '_num']++;       
              }       
              element[listener] = function(e)       
              {       
                  var r = true;       
                  e = (e) ? e : window.event;       
                  for(var i = element[listener + '_num'] -1; i >= 0; i--)       
                  {       
                      if(element[listener + i](e) == false)       
                          r = false;       
                  }       
                  return r;       
              }       
          }
          //if handler is not already stored, assign it       
          for(var i = 0; i < element[listener + '_num']; i++)       
              if(element[listener + i] == handler)       
                  return;       
          element[listener + element[listener + '_num']] = handler;       
          element[listener + '_num']++;       
};
floatingMenu.init = function()       
{       
          floatingMenu.initSecondary();       
          floatingMenu.doFloat();       
};
// Some browsers init scrollbars only after       
// full document load.       
floatingMenu.initSecondary = function()       
{       
          floatingMenu.computeShifts();       
          floatingMenu.nextX = floatingMenu.calculateCornerX();       
          floatingMenu.nextY = floatingMenu.calculateCornerY();       
          floatingMenu.move();       
}
if (document.layers)       
          floatingMenu.addEvent(window, 'onload', floatingMenu.init);       
else       
{       
          floatingMenu.init();       
          floatingMenu.addEvent(window, 'onload',       
              floatingMenu.initSecondary);       
}
//-->
</script>


Make these changes:
Replacemasoodalam51 with your Twitter username

If you have already added the Google +1 Button somewhere in your blog then you may skip Next Step.
Main » Customize design » Editing templates » Forum » General appearance of forum pages
Find

Code
</body>

Add Before This Code
Code
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>


Scrren Shot:
Attachments: 0208806.gif(938.2 Kb)


Electronics Student
If You Found My Post Helpfull Add Rep


Message edited by masoodalam51 - Friday, 2011-07-08, 7:33 PM
 
0 Thanked you For This Useful Post:
Maczo12310Date: Thursday, 2011-07-07, 6:36 PM | Message # 2
Member
Group: Senior Members
Messages: 987
Awards: 12
Reputation: 11
Status: :-(
Hm. Really nice script.

Btw, how do you do this animation ? Is it just video in .gif format or what ?



Visit my Graphic forum board on uCause !!!
 
0 Thanked you For This Useful Post:
ParadoxDate: Thursday, 2011-07-07, 6:39 PM | Message # 3
Haunter
Group: Senior Members
Messages: 468
Awards: 6
Reputation: 11
Status: :-(
Neat script. Thanks happy

Donught, the file extension is gif so I'd guess that your assumption is correct.


Request Terminated_

Message edited by Paradox - Thursday, 2011-07-07, 6:40 PM
 
0 Thanked you For This Useful Post:
masoodalam51Date: Thursday, 2011-07-07, 6:40 PM | Message # 4
Member
Group: Senior Members
Messages: 27
Awards: 4
Reputation: 3
Status: :-(
Quote (Donught)
Btw, how do you do this animation ? Is it just video in .gif format or what ?

This Animation For Show How Floating Is Work..
First I Create Video Then Convert To Gif Format


Electronics Student
If You Found My Post Helpfull Add Rep
 
0 Thanked you For This Useful Post:
Maczo12310Date: Thursday, 2011-07-07, 6:52 PM | Message # 5
Member
Group: Senior Members
Messages: 987
Awards: 12
Reputation: 11
Status: :-(
smile So I was correct biggrin Paradox, I didn't think of checking extension file.. Thanks up


Visit my Graphic forum board on uCause !!!
 
0 Thanked you For This Useful Post:
AnimorphDate: Friday, 2011-07-08, 3:05 PM | Message # 6
uCause forum Admin
Group: Developer
Messages: 2835
Awards: 73
Status: :-(
masoodalam51, I love this script , i'm thinking of putting it on uCause smile
 
0 Thanked you For This Useful Post:
masoodalam51Date: Friday, 2011-07-08, 7:32 PM | Message # 7
Member
Group: Senior Members
Messages: 27
Awards: 4
Reputation: 3
Status: :-(
Quote (Animorph)
masoodalam51, I love this script , i'm thinking of putting it on uCause

Why Not...............


Electronics Student
If You Found My Post Helpfull Add Rep


Message edited by masoodalam51 - Friday, 2011-07-08, 7:45 PM
 
0 Thanked you For This Useful Post:
CreativeCollusionsDate: Friday, 2011-07-08, 10:27 PM | Message # 8
Member
Group: Senior Members
Messages: 359
Awards: 2
Reputation: 5
Status: :-(
It's good. But really getting on my nerves. Lol.

Creative Collusions is a web & graphics studio based in Yorkshire, England.

Twitter:
@CCollusions (Company) and @elliottmangham (Personal)
 
0 Thanked you For This Useful Post:
MeepDate: Saturday, 2011-07-09, 3:56 AM | Message # 9
Member
Group: Senior Members
Messages: 28
Awards: 0
Reputation: 1
Status: :-(
Should be a cross on top of it so visitors can close it.
but it's kinda annoying, but a nice script
 
0 Thanked you For This Useful Post:
uCause Community » Trash & Archives » Forum » Floating Google +1, Facebook, Twitter Buttons (Floating Google +1, Facebook, Twitter Buttons For Your Forum)
  • Page 1 of 1
  • 1
Search:


"Making uCoz web designs simple and easy to use"
- uCause Developers