[MOD] Floating Guest Message < Jquery >
Hey Every one - Today I'm About to release my second MOD
This Mod Allow You ( Administrators ) to Show a Custom And Cool Message For The Guests Logged in Saying (" Please register Buddy :D We Got Milk 4 ya :D") lolz..
This is A Floating Message Which Follows the User Everywhere untill he gets registered or elz the user can close the message box ! This Mod is made out of jquery
so you must have jquery installed ... or elz dont worry, i wll teach you guys to install it :wink:
* Version Compatibility - Works With All 4image Versions since its beta :mrgreen:
* Requirements - Jquery ( Latest Version ) With a 4image installation :lol:
* Demo - Coming Soon
* Source - Attached at the bottom of the post
* Image files & Jquery used ? - They Are Also Attached in the source ;)
* Tip - If u need to control the Message shown in the floating guest message from your admin panel
please install the great mod by Rembrandt the [Mod] News Ticker
http://www.4homepages.de/forum/index.php?topic=25931.msg141414#msg141414
Setp 1
1) Goto Your Template Root and open up the css style sheet belongs to your template and insert the
code below to your css file.
#message_box {
position: absolute;
top: 0; left: 0;
z-index: 10;
background:#ffc;
padding:5px;
border:1px solid #CCCCCC;
text-align:center;
font-weight:bold;
width:99%;
}
Setp 2
2) open up header.html in your template root and paste the codes below . The Jquery
version belongs to this mod is attached. if you already have installed jquery change this line
src="jquery-1.2.6.min.js" to your own version ;)
others paste this code below and upload my attachment to your template root :wink:
<script type="text/javascript" language="javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
//scroll the message box to the top offset of browser's scrool bar
$(window).scroll(function()
{
$('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
});
//when the close button at right corner of the message box is clicked
$('#close_message').click(function()
{
//the messagebox gets scrool down with top property and gets hidden with zero opacity
$('#message_box').animate({ top:"+=15px",opacity:0 }, "slow");
});
});
</script>
Setp 3
3) Place the Coding Below to show the message to your users . in Here im only showing the message on the
home page but you can add it to any page you like ;)
So open up Home.html in your template root and add the code below
{if user_loggedout}
<div id="message_box"><img id="close_message" style="float:right;cursor:pointer" src="12-em-cross.png" />Hey Their Dear Guest - Please <a href="register.php"> Sign up</a> to Experience More Great Features</div>
{endif user_loggedout}
Done - Now Download the attached package and upload them to your root folder to test the mod :)
Please let me know if u have any issues :)