Advertisement:
« previous next »
Pages: [1]

Author Topic: Floating login and Floating Share button menu  (Read 4533 times)

BuySellAndSwap

  • Sr. Member
  • ****
  • Posts: 389
Floating login and Floating Share button menu
« on: October 04, 2011, 04:29:08 pm »
Hi

Iwould like to have a floating bar for the login, register, my account and facebook login etc... which will go up and down the page as the user scrolls

Also i would like to know how to implement the share buttons from this website as i've followed the instructions
http://www.designchemical.com/lab/jquery-plugin-social-share-buttons/getting-started/

Where would i need to place the codes please?

Any help will be greatly apprecitated

Thank you
Logged

RajaSekar

  • Hero Member
  • *****
  • Posts: 791
  • ராஜசேகர்
Re: Floating login and Floating Share button menu
« Reply #1 on: October 04, 2011, 08:00:50 pm »
Jquery plugin share

add the jquery.easing.js and jquery.social.share.1.1.min.js into themes js folder

locate these line in main.php

Code: [Select]

<body>


Replace the above line with this

Code: [Select]

<body>
<div id="social-share"></div>


add these line into style.css

Code: [Select]

/* Floater */
.dc-social-float .tab {
cursor: pointer;
height: 38px;
margin-left: -1px;
}
.dc-social-float .dc-social-float-content {
background: #fff;
border: 1px solid #bbb;
padding: 5px 5px 0 5px;
text-align: center;
}
.dc-social-float .dc-social-float-content {
border-radius: 5px; -webkit-border-radius: 5px;
}
.dcssb-btn {margin-bottom: 5px;}


locate these line in head.php

Code: [Select]

<script type="text/javascript" src="<?php echo osc_current_web_theme_js_url('tabber-minimized.js') ; ?>"></script>


Replace the above line with this

Code: [Select]

<script type="text/javascript" src="<?php echo osc_current_web_theme_js_url('tabber-minimized.js') ; ?>"></script>
<script type="text/javascript" src="<?php echo osc_current_web_theme_js_url('jquery.social.share.1.1.min.js') ; ?>"></script>
<script type="text/javascript" src="<?php echo osc_current_web_theme_js_url('jquery.easing.js') ; ?>"></script>
<script type="text/javascript">
$(document).ready(function($){
$('#social-share').dcSocialShare();
});
</script>

« Last Edit: October 04, 2011, 08:09:10 pm by RajaSekar »
Logged

RajaSekar

  • Hero Member
  • *****
  • Posts: 791
  • ராஜசேகர்
Re: Floating login and Floating Share button menu
« Reply #2 on: October 04, 2011, 08:29:06 pm »

Floating login

add these line into style.css

Code: [Select]

#floatlogin
{
padding: 10px;
-shadow: 1px 1px 5px #B7B7B7;
-moz-box-shadow: 1px 1px 5px #B7B7B7;
-webkit-box-shadow: 1px 1px 5px #B7B7B7;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #FFF;
position: fixed;
top: 0px;
}


Locate these line in header.php

Code: [Select]

<div id="user_menu">


Replace the above line with this

Code: [Select]

<div id="user_menu">
<div id="#floatlogin">


Locate these line in header.php

Code: [Select]

<div id="form_publish">


Replace the above line with this

Code: [Select]

</div>
<div id="form_publish">


Logged

BuySellAndSwap

  • Sr. Member
  • ****
  • Posts: 389
Re: Floating login and Floating Share button menu
« Reply #3 on: October 05, 2011, 12:38:30 am »
Hi RajaSekar

The 1 answer worked thank you for your help with that. The second one which is the floating menu dosnt work... What i want is a box which goes up and down the page as they scroll if you can help again?

Thank you
Logged

RajaSekar

  • Hero Member
  • *****
  • Posts: 791
  • ராஜசேகர்
Re: Floating login and Floating Share button menu
« Reply #4 on: October 05, 2011, 11:45:01 am »

@hunt4it

It works well for me

wait i will check the code once a again
Logged

BuySellAndSwap

  • Sr. Member
  • ****
  • Posts: 389
Re: Floating login and Floating Share button menu
« Reply #5 on: October 05, 2011, 11:48:01 pm »
Hi

was the code right? as its not working on my site

Thanks for your help
Logged
Pages: [1]
« previous next »