• [MOD] Floating Guest Message < Jquery > 5 0 5 1
Currently:  

Poll

How is This Mod ?

Realy Suckz
0 (0%)
Iritating
0 (0%)
What and idea man, Great
0 (0%)
Great Work Pal ;)
1 (100%)
I Love it
0 (0%)

Total Members Voted: 1

Author Topic: [MOD] Floating Guest Message < Jquery >  (Read 7846 times)

0 Members and 1 Guest are viewing this topic.

Offline GaYan

  • Sr. Member
  • ****
  • Posts: 301
  • ♫ | G2 | ♫
    • View Profile
    • Ziramagic
[MOD] Floating Guest Message < Jquery >
« on: April 04, 2010, 04:56:15 AM »
[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.

Code: [Select]
#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

Code: [Select]
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:

Code: [Select]
<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

Code: [Select]
{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 :)
« Last Edit: April 04, 2010, 05:11:49 AM by GaYan »
I'm Back :)

Offline hongoctrien

  • Jr. Member
  • **
  • Posts: 56
    • View Profile
    • Thư viện tư liệu LÀNG ANH TUẤN
Re: [MOD] Floating Guest Message < Jquery >
« Reply #1 on: April 05, 2010, 07:38:55 AM »
hey, I see have development it
Please visit http://hocmai.vn/ and see table message of them
http://anhtuanqt.net - Thư viện tư liệu LÀNG ANH TUẤN

Offline wassimo

  • Newbie
  • *
  • Posts: 22
    • View Profile
Re: [MOD] Floating Guest Message < Jquery >
« Reply #2 on: July 31, 2010, 07:51:55 AM »
merci mon ami :lol: