Support thread for JcM Be Social sidebar Header_tag V1.0

[♥JcMagpie]

JcM Be Social sidebar Header_tag V1.0

A simple add-on to let you place a Social Media sidebar onto your site.

It is based a nice js script by Copyright (c) 2015 José Gonçalves so all credit is his.

It’s been adapted to run on osC Phoenix and fabulous font 5 .

It is a code free install so just copy all the files and go to admin and install. You can edit your links in admin and also select which of the social media icons you wish to display.

The user can hide the display and reveal it as required. It is responsive and will move as page scrolls. It is also mobile compatible so will show on all devices.

It has been tested on Phoenix 1.0.2.0 only. It should however work on other versions that have fabulous font 5

can be seen on this site

Enjoy.

 

[♥peterpil19]

Hi Zahid,

Firstly, thank you for continuing to work on add-ons for CE Phoenix.

This add-on is a great idea in principle.

However at present, on my computer (Safari and Google Chrome) and iphone (Safari), the sidebar remains fixed when the user scrolls. When the user stops scrolling, the sidebar jumps back into position and the user sees it moving vertically across the screen which is distracting and looks a little odd.

Would it be possible to:

• force the sidebar to move as the user is scrolling so that it may appears to be fixed - just like your 'back to top' add-on? 
• Or, if not possible or easy, cause the side bar to fade out when the user is scrolling, then fade in again when the user has stopped, so that there is a nice transition rather than jumping from one place to the next?

Regards,

Peter

[♥JcMagpie]

Actualy haveing looked at it you can simply remove the scroll fuction from the current add-on and it will be sticky.

In public_html/ext/bs/jquery.besocial.js find line 96 to 115 and comment out like this, now it is sticky and oage will scroll behind it. All other bits will still work. You can set the position from top in the header_tags file by changing the css top.

#contact-buttons-bar {
  position: fixed!important;
  top: 40px;

// Slide on scroll effect
  //$(function(){
    
    // Define element to slide
   // var el = $("#contact-buttons-bar.slide-on-scroll");
    
    // Load top default
   // el.attr('data-top', el.css('top'));
    
    // Listen to scroll
   // $(window).scroll(function() {
    //  clearTimeout( $.data( this, "scrollCheck" ) );
    //  $.data( this, "scrollCheck", setTimeout(function() {
    //    var nTop = $(window).scrollTop() + parseInt(el.attr('data-top'));
     //   el.animate({
     //     top : nTop
     //   }, 500);
    //  }, 250) );
  //  });
 // });

 

[mrbangus]

Is there anyway to move this social links to the right side of the screen so it's not covering up my navigation links?

[anya2001]

Thank you for this add on.

Because G+ is no longer available I replaced that one with a link to a newsletter signup page and changed the FA to /mailchimp/.

I also edited the english/modules/navbar/nb_brand.php to:

define('MODULE_NAVBAR_BRAND_PUBLIC_TEXT', '<font color="b63399"><strong>&nbsp; &nbsp;&nbsp;Follow Us On Social Media</strong></font>');

Finally I moved the position of the >  so it was aligned with the Follow text.

It really works well. 

[anya2001]

On 4/30/2020 at 1:00 PM, mrbangus said:

Is there anyway to move this social links to the right side of the screen so it's not covering up my navigation links?

I think it would be this CSS code in the 

$oscTemplate->addBlock('<style>
 #contact-buttons-bar {
  position: fixed;
  top: 120px;
  left: -50px;
  width: 50px;
  z-index: 99999 !important;
}

you would need to change