[phpbb] Floating jquery message

**shadow.prx** · 16th Feb 2010, 11:03 PM

Hey guys thought i would start contributing some useful stuff for phpbb im no pro at it so if you want to complain don't bother im going to show you how to make a nice jquery floating message

You can see a demo of it on my forum (the yellow bar at the top)

Code:

http://gfx-scene.com/forums/

What you need ?

Code:

The latest version of jquery-http://jquery.com/

Code:

This image (rename it to 12-em-cross.png )-http://imgcentre.com/img/uploads/big/99e9a22135.png

If you are using a dark background use this image instead (thanks to surfing)
http://imgcentre.com/img/uploads/big/fd0fb51a03.png

Where to put these files
put the jquery script in {your style name}/theme
Put the image file in {your style name}/theme/images

What to edit

Ok 1st open {your style name}/themplate/overall_header.html

Find:

Code:

</head>

Before add:

Code:

<script type="text/javascript" language="javascript" src="{T_THEME_PATH}/jquery-1.4.1.min.js"></script> 
<script type="text/javascript" language="javascript"> 
//  Developed by Roshan Bhattarai  
//  Visit http://roshanbh.com.np for this script and more. 
//  This notice MUST stay intact for legal use 
$(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>

Find: (might be different its under the </head> tag)

Code:

<body id="phpbb">

Add after:

Code:

<div id="message_box">
    <img id="close_message" style="float:right;cursor:pointer" src="{T_THEME_PATH}/images/12-em-cross.png" />
Your message goes here</a>
</div>

If you want this to only show for guests just add this instead

Code:

<!-- IF not S_USER_LOGGED_IN --><div id="message_box">
    <img id="close_message" style="float:right;cursor:pointer"  src="{T_THEME_PATH}/images/12-em-cross.png" />
Your message goes here</a>
</div><!-- ENDIF -->

Ok now open {your style name}/theme/stylesheet.css

Add this to the bottom (you can add it to any other stylesheets on prosilver)

Code:

#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%;
}

Thats is credits go to

Code:

http://roshanbh.com.np/2008/07/top-floating-message-box-using-jquery.html

i just adapted it for phpbb enjoy all need any help just ask here and i will try me best to help

shadow.prx Reviewed by shadow.prx on 16th Feb 2010. [phpbb] Floating jquery message Hey guys thought i would start contributing some useful stuff for phpbb im no pro at it so if you want to complain don't bother im going to show you how to make a nice jquery floating message You can see a demo of it on my forum (the yellow bar at the top) http://gfx-scene.com/forums/What you need ? The latest version of jquery-http://jquery.com/ This image (rename it to 12-em-cross.png )-http://imgcentre.com/img/uploads/big/99e9a22135.png If you are using a dark background use this Rating: 5

**FancyPants** · 16th Feb 2010, 11:49 PM

Might want to fix some things such as:

Code:

<script type="text/javascript" language="javascript" src="{T_THEME_PATH}/jquery-1.4.1.min.js"></script>

Code:

<script type="text/javascript" language="javascript" src="{T_THEME_PATH}/theme/jquery-1.4.1.min.js"></script>

And

Code:

<!-- IF not S_USER_LOGGED_IN --><div id="message_box">
    <img id="close_message" style="float:right;cursor:pointer"  src="{T_THEME_PATH}/images/12-em-cross.png" />
Your message goes here</a>
</div><!-- ENDIF -->

Code:

<!-- IF not S_USER_LOGGED_IN --><div id="message_box">
    <img id="close_message" style="float:right;cursor:pointer"  src="{T_THEME_PATH}/theme/images/12-em-cross.png" />
Your message goes here</a>
</div><!-- ENDIF -->

**shadow.prx** · 16th Feb 2010, 11:55 PM

In phpbb {T_THEME_PATH} means /theme its so if i style is using a different theme path for whatever reason it know where to go

**FancyPants** · 17th Feb 2010, 12:30 AM

oh well mines was a bit weird

anyways here's my example:

Code:

http://warezdistrict.com

**shadow.prx** · 17th Feb 2010, 12:41 AM

Works well but that cross is only for light backgrounds

will see if i can dig up a better one for darker backgrounds for you

**FancyPants** · 17th Feb 2010, 12:51 AM

http://www.psdgraphics.com/icons/psd...d-cross-icons/
There are plenty when you search on google

also I know litewarez knows a couple more places
http://imgcentre.com/images/view/fd0fb51a03.png <-- the one i am using now

**shadow.prx** · 17th Feb 2010, 01:09 AM

Edited the 1st post

thanks for that surfing

**FancyPants** · 17th Feb 2010, 01:13 AM

NP, Well thank you for the mod

**shadow.prx** · 17th Feb 2010, 01:17 AM

No problem glad you like it i thought it was a good alternative to the guest image so if your no good at gfx or a little short on funds (like i am now

) to pay for one or you just like jquery

**Chutad** · 17th Feb 2010, 09:35 AM

hey shadow thanks for this..

[phpbb] Floating jquery message

Thread Tools

Display

[phpbb] Floating jquery message

Sponsored Links

Thread Information

Users Browsing this Thread

Similar Threads

[Help] How to show a floating image on visitors not logged in your site?

How to create floating ads?

Facebook Fan Page floating

JQuery help

Can we convert phpbb 3.0.8 to phpBB SEO premod 3.0.8 ?

Tags for this Thread

Posting Permissions

themaCreator - create posts from...

themaCreator - create posts from...

themaPoster - post to forums and...

themaManager - edit and manage...

themaLeecher - leech and manage...