SMF News end of page slideout w/ jQuery

in Tutorials on 26 Dec 2012


The idea is to have an element in the page (here it is in the #footer div) that triggers the box to appear using the news SSI.


Create a php block and show everywhere. Add this code.

echo'
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $(window).scroll(function(){
        var distanceTop = $(\'#footer\').offset().top - $(window).height();

        if  ($(window).scrollTop() > distanceTop)
            $(\'#slidebox\').animate({\'right\':\'0px\'},300);
        else
            $(\'#slidebox\').stop(true).animate({\'right\':\'-430px\'},100);
    });

    $(\'#slidebox .close\').bind(\'click\',function(){
        $(this).parent().remove();
    });
});
</script>
<style>
a.close{
    background:transparent url(http://path-to-images/delete.png) no-repeat top left;
    width:16px;
    height:16px;
    position:absolute;
    cursor:pointer;
    top:10px;
    right:10px;
}
#slidebox{
    width:400px;
    height:100px;
    padding:12px;
    background: #f9f9f9;
    border-top:3px solid #b83832;
    position:fixed;
    bottom:0px;
    right:-430px;
    -moz-box-shadow:-2px 0px 5px #aaa;
    -webkit-box-shadow:-2px 0px 5px #aaa;
    box-shadow:-2px 0px 5px #aaa;
}
</style>

<div id="slidebox">
    <a class="close"></a>';
echo'
<div style="border-bottom: 1px dotted #868686">Any Text Here</div>
<br />';
ssi_news();
echo'
</div>';


...and lastly, dont forget the image below ;)



idesignSMF Team
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF.com and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.

idesignSMF.com | SimpleMachines.org



4 Comments

I would really like to try this one out. Is it possible to add an image on this script?
#1
Quote from: JoliePittOnline on 16 Feb 2013
I would really like to try this one out. Is it possible to add an image on this script?

Of course.  You can insert whatever you want.
#2
Thanks Mick! Will play around the codes... ;)
#3
Quote from: JoliePittOnline on 17 Feb 2013
Thanks Mick! Will play around the codes... ;)
Got it working?
#4

rocket_launch

Brand spankin' new free SMF themes every month.