<style>#avviso { background: #000; margin-right: 7px; color: #fff; font-size: 10px; border: 0px solid #94c2e8; padding: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; filter:alpha(opacity=88); -moz-opacity:.88; opacity:.88; -moz-box-shadow:5px 5px 5px #191919; -webkit-box-shadow:5px 5px 5px #191919; box-shadow:5px 5px 5px #191919; } #avviso a:link { color: #fff; text-decoration: none; } #avviso a:visited { color: #fff; text-decoration: none; } #avviso a:hover, #avviiso a:active { color: #fff; text-decoration: underline; } .avviso_fixed { height: auto; position: fixed; top:55%; right: 5%; width: 280px; }</style><div class="avviso_fixed"><div id="avviso">Hello, fellow gamer! If you are reading this, you have not registered or logged in. Click Register above to register - it only takes less than a minute!<p> Once registered, you will enjoy all the features of our forum including the ability to converse with fellow gamers extensively throughout various topic, not to mention, <i>all</i> ads will be removed! Being a member will allow you to participate in our competitions where you can win a variety of things including game keys, game currency, and more!</div></div>
Does anybody know what would need to be done if you could add a little '-' at the top and clicking it would get rid of the notification?
Try this;
<style>#avviso { background: #000; margin-right: 7px; color: #fff; font-size: 10px; border: 0px solid #94c2e8; padding: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; filter:alpha(opacity=88); -moz-opacity:.88; opacity:.88; -moz-box-shadow:5px 5px 5px #191919; -webkit-box-shadow:5px 5px 5px #191919; box-shadow:5px 5px 5px #191919; } #avviso a:link { color: #fff; text-decoration: none; } #avviso a:visited { color: #fff; text-decoration: none; } #avviso a:hover, #avviiso a:active { color: #fff; text-decoration: underline; } .avviso_fixed { height: auto; position: fixed; top:55%; right: 5%; width: 280px; }</style><div class="avviso_fixed"><div id="avviso">Hello, fellow gamer! If you are reading this, you have not registered or logged in. Click Register above to register - it only takes less than a minute!<p> Once registered, you will enjoy all the features of our forum including the ability to converse with fellow gamers extensively throughout various topic, not to mention, <i>all</i> ads will be removed! Being a member will allow you to participate in our competitions where you can win a variety of things including game keys, game currency, and more! <a href="#" onclick="window.close();">Close</a></div></div>
Didn't work, just took me to the top of the page when clicking it
Don't worry about it.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#avviso { background: #000; margin-right: 7px; color: #fff; font-size: 10px; border: 0px solid #94c2e8; padding: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; filter:alpha(opacity=88); -moz-opacity:.88; opacity:.88; -moz-box-shadow:5px 5px 5px #191919; -webkit-box-shadow:5px 5px 5px #191919; box-shadow:5px 5px 5px #191919; } #avviso a:link { color: #fff; text-decoration: none; } #avviso a:visited { color: #fff; text-decoration: none; } #avviso a:hover, #avviiso a:active { color: #fff; text-decoration: underline; } .avviso_fixed { height: auto; position: fixed; top:55%; right: 5%; width: 280px; }
</style>
<div class="avviso_fixed">
<div id="avviso">
<span class="close">Close</span><br />Hello, fellow gamer! If you are reading this, you have not registered or logged in. Click Register above to register - it only takes less than a minute!<p> Once registered, you will enjoy all the features of our forum including the ability to converse with fellow gamers extensively throughout various topic, not to mention, <i>all</i> ads will be removed! Being a member will allow you to participate in our competitions where you can win a variety of things including game keys, game currency, and more!
</div>
</div>
<script>
$(".close").click(function () {
$("#avviso").hide("slow");
});
</script>
Probably could be done in Prototype or even raw JavaScript, which would save you the hassle of loading jQuery, but either way this works fine.
While faviouz's solution should work perfectly, I wouldn't load jQuery in MyBB just to have a fading effect. Outside MyBB, go with jQuery for sure. But MyBB uses Prototype and comes packed with Scriptaculous, which is the animation framework for Prototype.
You can do this:
<script type="text/javascript" src="./jscripts/scriptaculous.js?load=effects"></script>
<script type="text/javascript">
$$('.close').invoke('observe','click',function()
{
Effect.fade(this.up(1));
});
</script>
Pressing on close doesn't do anything :<
Do you have an online example?
Try this:
<style>
#avviso { background: #000; margin-right: 7px; color: #fff; font-size: 10px; border: 0px solid #94c2e8; padding: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; filter:alpha(opacity=88); -moz-opacity:.88; opacity:.88; -moz-box-shadow:5px 5px 5px #191919; -webkit-box-shadow:5px 5px 5px #191919; box-shadow:5px 5px 5px #191919; } #avviso a:link { color: #fff; text-decoration: none; } #avviso a:visited { color: #fff; text-decoration: none; } #avviso a:hover, #avviiso a:active { color: #fff; text-decoration: underline; } .avviso_fixed { height: auto; position: fixed; top:55%; right: 5%; width: 280px; }
</style>
<div class="avviso_fixed">
<div id="avviso">
<span class="close"><a href="#" onclick="$('avviso').fade(); return false;">Close</a></span><br />Hello, fellow gamer! If you are reading this, you have not registered or logged in. Click Register above to register - it only takes less than a minute!<p> Once registered, you will enjoy all the features of our forum including the ability to converse with fellow gamers extensively throughout various topic, not to mention, <i>all</i> ads will be removed! Being a member will allow you to participate in our competitions where you can win a variety of things including game keys, game currency, and more!
</div>
</div>
Then, in headerinclude template, add this:
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/scriptaculous.js?ver=1603"></script>
AFTER
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1603"></script>
You can also include the above js where you're using the div but I prefer to have all the js loaded in the header
EDIT: Make sure you do have the scriptaculous.js in the jscripts folder. It is included in the default MyBB package.
Thank you so much! That worked.
