MyBB Community Forums

Hello guys! I'm interested to add in my MyBB this next script.

the footerslide code can be directly added to myBB footer AND the css can be added thru a separate file
if there is a jQuery conflict then you have to adjust the jQuery with noconflict code ... etc.

(2011-10-14, 07:47 AM)ranjani Wrote: [ -> ]the footerslide code can be directly added to myBB footer AND the css can be added thru a separate file

Please help me for implement this code!?

Go to ACP -> Styles and templates -> Your style -> New CSS and paste the CSS style.

#footerSlideContainer {
	position: fixed;
	bottom:0;
	width: 100%;
}
#footerSlideButton {
	background: url(sliderButton.png) top left no-repeat transparent;
	position: absolute;
	top: -55px;
	right: 20px;
	width:50px;
	height:50px;
	border: none;
	cursor: pointer;
}
#footerSlideContent {
	width: 100%;
	height: 0px;
	background: #251b15;
	color: #CCCCCC;
	font-size: 0.8em;
	border: none;
	font-family: DejaVuSansBook, Sans-Serif;
}
#footerSlideText {
	padding: 15px 10px 25px 25px;
}

Next create new JavaScript file(name_of_file.js) and upload it to /jscripts/.

// Use 'jQuery(function($) {' for inside WordPress blogs (without quotes)
$(function() {
	var open = false;
	$('#footerSlideButton').click(function() {
		if(open === false) {
			$('#footerSlideContent').animate({ height: '300px' });
			$(this).css('backgroundPosition', 'bottom left');
			open = true;
		} else {
			$('#footerSlideContent').animate({ height: '0px' });
			$(this).css('backgroundPosition', 'top left');
			open = false;
		}
	});
});

Go to templates of your current style and find not grouped templates and go to headerinclude. Add line.

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

Next go to fotter template and convert old template for new script.

<div id="footerSlideContainer">
	<div id="footerSlideButton"></div>
	<div id="footerSlideContent">
		<div id="footerSlideText">
		Paste actually footer template code.
		</div>
	</div>
</div>