2012-12-18, 09:49 PM
Never used cookies before and have only started using JS
So what I'm trying to do is use cookies to remember if the user want's to have snow displaying or not.
By default I've got it hidden because it does cause some lag which somes users may not be able to handle.
I've got a link in the nav bar with (Show/hide snow) which when clicked will hide/show the div containing the snow and this is working fine.
So, the code for the snow I've put in the 'header_welcomeblock_member' template so that only users can use it.
What I thought would do the job would be to have a JS to try and read a cookie from within the 'header_welcomeblock_member' and then show/leave hidden the div.
Attempted 'header_welcomeblock_member' code:
I've really no idea what I'm doing :/
over 100 views and no replies?
what am I to do???
So what I'm trying to do is use cookies to remember if the user want's to have snow displaying or not.
By default I've got it hidden because it does cause some lag which somes users may not be able to handle.
I've got a link in the nav bar with (Show/hide snow) which when clicked will hide/show the div containing the snow and this is working fine.
So, the code for the snow I've put in the 'header_welcomeblock_member' template so that only users can use it.
What I thought would do the job would be to have a JS to try and read a cookie from within the 'header_welcomeblock_member' and then show/leave hidden the div.
Attempted 'header_welcomeblock_member' code:
<html>
<head>
<script type ="text/javascript">
$(document).ready(function() {
// If the 'hide cookie is not set we show the message
if (!readCookie('snow')) {
$('#snow').show();
};
</script>
<script language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
document.getElementById('toggle').innerHTML='Hide Snow (limited browsers)';
createCookie('snow', true, -1)
}
else
{
document.getElementById(divId).style.display = 'none';
document.getElementById('toggle').innerHTML='Show Snow (limited browsers)';
$('#snow').hide();
createCookie('snow', true, 1)
return false;
}
}
</script>
<!---
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
--->
<script type="text/javascript">
lang.no_new_posts = "{$lang->no_new_posts}";
lang.click_mark_read = "{$lang->click_mark_read}";
</script>
<script type="text/javascript">
var snowflakes = [];
var browserWidth;
var browserHeight;
var numberOfSnowflakes = 25;
function setup() {
this.addEventListener("DOMContentLoaded", generateSnowflakes, true);
this.addEventListener("resize", resetPositions, true);
this.addEventListener("focus", tabHasFocus, true);
}
setup();
function Snowflake(element, radius, speed, xPos, yPos) {
this.element = element;
this.radius = radius;
this.speed = speed;
this.xPos = xPos;
this.yPos = yPos;
this.counter = 0;
this.sign = Math.floor(Math.random() * 2);
if (this.sign == 1) {
this.sign = -1;
} else {
this.sign = 1;
}
this.element.style.opacity = .1+Math.random();
this.element.style.fontSize = 12+Math.random()*50 + "px";
this.update = function () {
this.counter += this.speed/600;
this.xPos += this.sign*this.speed*Math.cos(this.counter)/20;
this.yPos += this.speed/10;
this.element.style.left = Math.round(this.xPos) + "px";
this.element.style.top = Math.round(this.yPos) + "px";
if (this.yPos > browserHeight) {
this.yPos = -50;
}
}
}
function generateSnowflakes(e) {
var originalSnowflake = document.getElementsByClassName("snowflake")[0];
var snowflakeContainer = originalSnowflake.parentNode;
browserHeight = window.outerHeight;
browserWidth = window.outerWidth;
for (var i = 0; i < numberOfSnowflakes; i++) {
var snowflakeCopy = originalSnowflake.cloneNode(true);
snowflakeContainer.appendChild(snowflakeCopy);
var initialXPos = setPosition(50, browserWidth);
var initialYPos = setPosition(50, browserHeight);
var speed = 5+Math.random()*40;
var radius = 4+Math.random()*10;
var snowflakeObject = new Snowflake(snowflakeCopy, radius, speed, initialXPos, initialYPos);
snowflakes.push(snowflakeObject);
}
snowflakeContainer.removeChild(originalSnowflake);
setInterval(moveSnowflakes, 30);
}
function moveSnowflakes() {
for (var i = 0; i < snowflakes.length; i++) {
var snowflake = snowflakes[i];
snowflake.update();
}
}
function setPosition(offset, size) {
return Math.round(-1*offset + Math.random() * (size+2*offset));
}
function resetPositions(e) {
browserHeight = window.outerHeight;
browserWidth = window.outerWidth;
for (var i = 0; i < snowflakes.length; i++) {
var snowflake = snowflakes[i];
snowflake.xPos = setPosition(50, browserWidth);
snowflake.yPos = setPosition(50, browserHeight);
}
}
function tabHasFocus(e) {
resetPositions(null);
this.removeEventListener("focus", tabHasFocus, true);
}</script>
<!---
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
--->
<style>
.snowflake {
position: fixed;
color: #FFFFFF;
}
#snow {
display:none;
}
</style>
</head>
<div id="snow">
<p id="snowflake" class="snowflake" style='-moz-user-select: none;-webkit-user-select: none;' onselectstart='return false; cursor:arrow;' >*</p>
</div>
<div class="userbar">
<div class="container">
<div class="row">
<div class="elevencol">
<a style="margin-right: 15px;" href="{$mybb->settings['bburl']}/usercp.php">{$lang->welcome_usercp}</a>
<a style="margin-right: 15px;" href="{$mybb->settings['bburl']}/private.php">Messages</a>
{$modcplink}{$admincplink}
<a style="margin-right: 15px;" href="{$mybb->settings['bburl']}/member.php?action=logout&logoutkey={$mybb->user['logoutkey']}">{$lang->welcome_logout}</a>
</div>
<div class="onecol last" >
<a class="buttons" style="float: right;" title="Close Sidebar"></a>
<a class="clickedbuttons" style="float: right;" title="Open Sidebar"></a>
</div>
</div>
</div>
</div>
<div id="header">
<div class="container">
<div class="row">
<div class="threecol">
<div class="logo">
<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" /></a>
</div>
</div>
<div class="ninecol last">
<div class="menu">
<ul>
<li><a id="homenav" href="http://www.epicurus-gaming.com/">Play Now</a></li>
<li><a id="forumnav" href="http://www.epicurus-rsps.net/vote/vote.php" target="_blank" >Vote</a></li>
<li><a id="calnav" href="http://www.epicurus-rsps.net/purchase.html">Purchase Tokens</a></li>
<li><a id="memnav" href="{$mybb->settings['bburl']}/showteam.php">Staff List</a></li>
<li><a id="snav" href="{$mybb->settings['bburl']}/search.php">Search</a></li>
<li><a id="helpnav" href="{$mybb->settings['bburl']}/misc.php?action=help">Help</a></li>
<li><a id="toggle" onclick ="javascript:ShowHide('snow')" href="javascript:;">Show Snow (limited browsers)</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="forum-body">
<div class="container">
<div class="row">
<navigation>
</div>
</div>
<div class="container">
<div class="row">
<div class="sidebar">
<div class="sideborder">
<div class="tcat" style="padding: 6px;">
{$mybb->user['username']}
</div>
<div class="trow1" style="padding: 6px; overflow: show;">
<div class="avatar">
<img src="{$mybb->user['avatar']}" height="75px" width="75px" alt="Your Avatar" title="Your Avatar" />
</div>
<div class="userstats">
Posts<a href="{$mybb->settings['bburl']}/search.php?action=finduser&uid={$mybb->user['uid']}" ><span style="float: right; font-weight: bold;">{$mybb->user['postnum']}</span></a><br />
Referrals<span style="float: right; font-weight: bold;">{$mybb->user['referrals']}</span><br />
Reputation<a href="{$mybb->settings['bburl']}/reputation.php?uid={$mybb->user['uid']}" ><span style="float: right; font-weight: bold;">{$mybb->user['reputation']}</span></a><br />
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
{myshoutbox_epicurussb}
<div class="forums">
</html>I've really no idea what I'm doing :/
over 100 views and no replies?
what am I to do???