MyBB Community Forums

MyBB Community Forums > Resources > Tutorials > Implementing a Collapsible Footer
Full Version: Implementing a Collapsible Footer
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2

effone

2012-08-16, 07:16 AM
I've found this somewhere for WordPress which I've just modified and implemented for MyBB.

Goto:
ACP > Templates & Styles > Templates > {Your_Theme} Templates > Ungrouped Templates > headerinclude

Now find the line:

<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>

Add after this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>

Save it and open your Footer Template:
ACP > Templates & Styles > Templates > {Your_Theme} Templates > Footer Templates > Footer

Add this script function at the very beginning:
<script type="text/javascript">
jQuery.noConflict();
jQuery(function($) {
    var footopen = false;
    var buttonState=document.getElementById("footerSlideButton");
    $('#footerSlideButton').click(function() {
        if(footopen === false) {
            $('#footerSlideContent').animate({ height: '300px' });
            $(this).css('backgroundPosition', 'bottom left');
            buttonState.style.backgroundImage="url('images/footerDn.png')";
            footopen = true;
        } else {
            $('#footerSlideContent').animate({ height: '30px' });
            $(this).css('backgroundPosition', 'top left');
            buttonState.style.backgroundImage="url('images/footerUp.png')";
            footopen = false;
        };
    }); 
});
</script>

Now add your sliding footer content just after this:
<div id="footerSlideContainer">
    <div id="footerSlideButton"></div>
    <div id="footerSlideContent">
        <div id="footerSlideText">

		<hr class="hidden" />
			<span style="float:left">
				<!-- MyBB is free software developed and maintained by a volunteer community. 
					 It would be much appreciated by the MyBB Group if you left the full copyright and "powered by" notice intact, 
					 to show your support for MyBB.  If you choose to remove or modify the copyright below, 
					 you may be refused support on the MyBB Community Forums.
					 
					 This is free software, support us and we'll support you. -->
{$lang->powered_by} <a href="http://mybb.com/" target="_blank">MyBB{$mybbversion}</a>, &copy; 2002-{$copy_year} <a href="http://mybb.com/" target="_blank">MyBB Group</a>.<br />
				<!-- End powered by -->
			</span>
			<span style="float:right">
Sliding Footer By <a href="mailto:[email protected]?subject=Feedback" target="_blank">effone</a> of <a href="http://equinoxdesign.net" target="_blank">Equinox Design</a>.
			</span>
				<br />
<br class="clear" />
            <h3>Add your content here.</h3>
        </div>
    </div>
</div>
(modify as required).

Time for the styling part. Create a new footer.css (or you may just add to your global.css):

ACP > Templates & Styles > Themes > {Your_Theme} > Add Stylesheet
Enter FileName : "footer.css" (without quotes, remember to include .css)
Select Attached To: "Globally"
Select "Write My Own Content". A huge textarea will appear. Paste the following code in it and save stylesheet.
#footerSlideContainer {
    position: fixed;
    left:0;
    bottom:0;
    width: 100%;
}

#footerSlideButton {
    background: url(images/footerUp.png) top left no-repeat transparent;
    position: absolute;
    top: -25px;
    right: 20px;
    width:24px;
    height:24px;
    border: none;
    cursor: pointer;
}

#footerSlideContent {
    width: 100%;
    height: 30px;
    border-top: #5b5a5a 1px solid;
    background: #0264a3;
}

#footerSlideText {
    padding: 10px 20px;
	text-align: center; /* IE 5 fix */
	font: 11px Verdana, Arial, Sans-Serif;
	margin: 0px;
}

#footerSlideText a:link, #footerSlideText a:visited {
	color: #488eff;
	text-decoration: none;
}

#footerSlideText a:hover, #footerSlideText a:active {
	color: #ffffff;
	text-decoration: none;
}

You can further re-color and decorate your sliding footer changing the properties in the css.

Now, upload the navigation buttons to your /image folder. I'm attaching two blue 'up' and 'down' 24x24 png images for you:
[attachment=27075][attachment=27074]

But if you decide to change those; remember to change the paths of the buttons in CSS:
#footerSlideButton {
background: url(images/footerUp.png) top left no-repeat transparent;
as well as in the button function in your footer template:
buttonState.style.backgroundImage="url('images/footerDn.png')";
buttonState.style.backgroundImage="url('images/footerUp.png')";

Also make sure about the size of your arrow picture. If it is not 24x24 then you have to modify the size with yours in CSS:
#footerSlideButton {
.
.
width:24px;
height:24px;
.
}

End result:

[Image: aeb9ef0a.png]

[Image: ea538061.png]

Live demo: http://equinoxdesign.net

Base Code Credit: Paul Robinson (thanks)

Harry K.

2012-08-16, 08:30 PM
~This looks great, really nice well written. Great job effone.

Krytic

2012-09-05, 06:58 AM
My image isn't showing up. :'( I used the same code as you showed, except for my Footer template file:

<script type="text/javascript">
jQuery.noConflict();
jQuery(function($) {
    var footopen = false;
    var buttonState=document.getElementById("footerSlideButton");
    $('#footerSlideButton').click(function() {
        if(footopen === false) {
            $('#footerSlideContent').animate({ height: '300px' });
            $(this).css('backgroundPosition', 'bottom left');
            buttonState.style.backgroundImage="url('images/SeabTech/footerDn.png')";
            footopen = true;
        } else {
            $('#footerSlideContent').animate({ height: '30px' });
            $(this).css('backgroundPosition', 'top left');
            buttonState.style.backgroundImage="url('images/SeabTech/footerUp.png')";
            footopen = false;
        };
    }); 
});
</script>
			<br />
<div id="footerSlideContainer">
    <div id="footerSlideButton"></div>
    <div id="footerSlideContent">
        <div id="footerSlideText">

        <hr class="hidden" />
            <span style="float:left">
                <!-- MyBB is free software developed and maintained by a volunteer community. 
                     It would be much appreciated by the MyBB Group if you left the full copyright and "powered by" notice intact, 
                     to show your support for MyBB.  If you choose to remove or modify the copyright below, 
                     you may be refused support on the MyBB Community Forums.
                     
                     This is free software, support us and we'll support you. -->
{$lang->powered_by} <a href="http://mybb.com/" target="_blank">MyBB{$mybbversion}</a>, &copy; 2002-{$copy_year} <a href="http://mybb.com/" target="_blank">MyBB Group</a>.<br />
                <!-- End powered by -->
            </span>
            <span style="float:right">
Sliding Footer By <a href="mailto:[email protected]?subject=Feedback" target="_blank">effone</a> of <a href="http://equinoxdesign.net" target="_blank">Equinox Design</a>.
            </span>
                <br />
<br class="clear" />
            <h2>Thank you for visiting {$mybb->settings['bbname']}. We appreciate your time.</h2>
        </div>
    </div>
</div><!-- The following piece of code allows MyBB to run scheduled tasks. DO NOT REMOVE -->{$task_image}<!-- End task image code -->
{$auto_dst_detection}
		</div>
		</div>

I also changed my footer.css file so that it would reflect the path name for the image.

effone

2012-09-08, 11:38 AM
This is because some hosts convert all filenames to lower case after uploading.
I've faced this problem and I know.

Just rename in CSS, Javascript and the main image files:

From "footerUp.png" to "footerup.png"
From "footerDn.png" to "footerdn.png"

And it will work fine. Make sure you've modified the script, the css and the main image files.

Salih I

2012-09-09, 10:14 AM
I have used jquery way too much in my next version theme. I had already added a different sliding footer. But this one gave me a better idea.

effone

2012-09-10, 03:38 AM
Nice to see it helped anyway Big Grin

Glas

2012-09-10, 01:59 PM
could a shoutbox be put there? maybe it would work D:

Frank.Barry

2012-09-10, 02:36 PM
Why are you using a separate image/link to open close the footer ? Theres an arrow icon in the middle of the footer, why not use that as your open/close link ?

effone

2012-09-10, 04:05 PM
(2012-09-10, 01:59 PM)Glas Wrote: [ -> ]could a shoutbox be put there? maybe it would work D:

Yes it is quiet possible. Just put the shoutbox variable in a div at that place, like:
<div class="trow1">{$myshoutbox}</div>

(2012-09-10, 02:36 PM)Frank.Barry Wrote: [ -> ]Why are you using a separate image/link to open close the footer ? Theres an arrow icon in the middle of the footer, why not use that as your open/close link ?

If you are saying this seeing the demo site then I've used that arrow icon in the middle for Smooth scrolling return-to-top. You can place the switch anywhere you want as per your requirement by just changing these values in css:

#footerSlideButton {
.
.
top: -25px;
right: 20px;

Salih I

2012-09-11, 02:02 PM
Scheduled Tasks wont run using your codes and the debug info also won't be displayed to the admins.

You need to add this to your OP:
<div id="debug"><debugstuff></div>
				
<br class="clear" />
<!-- The following piece of code allows MyBB to run scheduled tasks. DO NOT REMOVE -->{$task_image}<!-- End task image code -->
{$auto_dst_detection}
Pages: 1 2
MyBB Community Forums > Resources > Tutorials > Implementing a Collapsible Footer