Embed "Join or Login" floating button in templat

Hi,

I'm creating a custom splash page and I'd like to get the standard Boonex "Join or Login" option on the splash page.

I've tried to figure it out but am having trouble.

Anyone have any ideas on how to do this?

Thanks.

What exactly you looking for?  How to generate the pop-up?  Or the exact buttons on one of the dolphin templates.  If the latter, which template (evo, alt, uni)?

Hi dudical thanks for answering. My custom splash screen currently has no "join or login" button. I currently use the Facebook template by abservetech which has the "join or login" on the upper right, exactly like the evo template. they also include a separate "join" button and a "login" button in the slider/banner area.

However, I couldn't use that template and configure it as an entry point, so decided to make a splash screen to cater for users entering the site.

So right now I am after the "join or login" link (or button) same as evo which I can display on the html and then produce the pop up once clicked which shows the dolphin login or join tabbed window.

I appreciate your assistance. Thank you.

Hi. Just hoping anyone has any ideas to this one?

Thanks.

Just insert the following HTML code in the splash code to have standard Login/Join buttons:

<div class="bx-splash-actions bx-hide-when-logged-in"><button class="bx-btn bx-btn-primary bx-btn-sa-join">Join</button><button class="bx-btn bx-def-margin-left bx-btn-sa-login">Login</button></div>

If you are inserting it somewhere else, then you need to add the following JS code as well:

<script type="text/javascript" language="javascript">

	$('.bx-splash .bx-btn-sa-join').bind('click', function() {
		showPopupJoinForm();
		return false;
	});

	$('.bx-splash .bx-btn-sa-login').bind('click', function() {
		showPopupLoginForm();
		return false;
	});

</script>

Thanks, Alex!

I was wanting to do similar to micoots request, but also wasn't certain how to accomplish it.

Your help is much appreciated!

Hi Alex,

Thanks for the below. I have spent a couple of hours on the below but just can't get it to work ie. the buttons show up but clicking on them does nothing - the javascript just doesn't seem to be read.

I disable the splash in the administration and use a custom splash screen, I copy and paste the javascript code into the html and it's like it's not even there. I check browser console for any errors, there are none.

If you do have other suggestions please advise, for the time being I'm stumped so I am leaving that alone for now.

Thanks again for your assistance.

<div class="bx-splash-actions bx-hide-when-logged-in"><button class="bx-btn bx-btn-primary bx-btn-sa-join">Join</button><button class="bx-btn bx-def-margin-left bx-btn-sa-login">Login</button></div>

<script type="text/javascript" language="javascript">

	$('.bx-splash .bx-btn-sa-join').bind('click', function() {
		showPopupJoinForm();
		return false;
	});

	$('.bx-splash .bx-btn-sa-login').bind('click', function() {
		showPopupLoginForm();
		return false;
	});

</script>

Check if the following js file included on your page:

inc/js/functions.js

Hi Alex. Yes I have that added in the page:

<script language="javascript" type="text/javascript" src="inc/js/functions.js"></script>

inc/js/functions.js

Try to set the absolute URL to this file:

<script language="javascript" type="text/javascript" src="http://example.com/your-path/inc/js/functions.js"></script>

Hi Alex. Thanks for this.

I abandoned the way I was doing this, was too much effort for something that shouldn't be that difficult. I just went back to trying to build the splash page within the administration back end. I have something now, not too happy with it but at least it works.

I may look at splash pages in the market also see if there's anything there allowing the join pop up, not just the on-line form on the splash page.

Nevertheless, thanks again for your advice I appreciate it.

<script language="javascript" type="text/javascript" src="http://example.com/your-path/inc/js/functions.js"></script>

 You are missing the "onclick" function on the buttons, you can use the code below to display on your custom splash page. 

<div class="bx-splash-actions bx-hide-when-logged-in">

                        <button class="bx-btn bx-btn-primary bx-btn-sa-join" onclick="javascript:showPopupJoinForm();">Join</button>

                        <button class="bx-btn bx-def-margin-left bx-btn-sa-login" onclick="javascript:showPopupLoginForm();">Login</button>

                    </div>

The above suggestions still didn't work, anyone else out there with something to add? Thanks.

In addition to all the above, you "may" also need to do the following: 

1. Define the site_url  by adding this to your script section:

<script type="text/javascript" language="javascript"> var site_url = 'http://Path to Dolphin/';</script>

2. Add additional jquery functions on page, I needed to include this for tabs js function : 

<script language="javascript" type="text/javascript" src="http://localhost:8888/plugins/jquery/jquery.ui.all.min.js"></script>

You'll also need to include the correct paths for all necessary css and images.