6. Member Alerts Pop Up Box

This tutorial will hopefully teach you a bit about using Arrays, and give you a feature with a lot of freedom.

Arrays are objects used to store information, and each piece of information within an array can be accessed by index number. Like a variable which can hold many values.

So first of all, stick this in your CSS (this isn't array related):

Code:


.lgbutton {
border: 2px solid; color: #105289; border-radius: 6px; width: 50px;
text-align: center; font-weight: bold; padding: 2px 2px 2px 2px; margin: 25px 10px 10px 10px;
}

.LGpopup {
position: absolute; background-color: #FFF; border: 3px solid; top: 20%;
left: 30%; border-radius: 8px; color: #105289; width: 40%;
}
.LGpopup a {cursor: pointer;}
.LGpopup h1 {
background-color: #105289; color: #FFF; font-weight: bold; font-size: 14px;
margin-bottom: 10px; text-align: center; padding: 5px 0px 5px 0px;
}
.LGpopup p {
margin: 10px 30px 20px 30px;border: 1px solid #105289;border-radius: 6px;padding: 10px 10px 10px 10px;
}
img.closebutton {
float: right;margin-right: 2px;
background: url('http://i45.servimg.com/u/f45/16/95/07/69/bt_clo10.png') no-repeat 0 -20px;
width:20px;height20px;
}
img.closebutton:hover {background: url('http://i45.servimg.com/u/f45/16/95/07/69/bt_clo10.png') 0 0px;}


(I apologise for the amount of CSS, these are classes i use over and over again and so are heavily defined)

And Now add this HTML into a widget, or annoucement. As always i recommend a Widget is you are using the sidebar, because you can set the permissions accordingly, but for this, it may not be necessary depending on your use for it.

Code:


<div id="mempop" class="LGpopup" style="display: none;">
<div onclick="document.getElementById('mempop').style.display='none';"><img src="http://illiweb.com/fa/empty.gif" class="closebutton" width="20px" height="20px" /></div><h1>Member Alerts!</h1>

<p id="alertpages"></p>

<span id="pageno"style="float:right;margin-right: 5px;">Page 1 of 4</span>
<br><br>
<div style="text-align: center; margin-bottom: 10px;">
<a class="lgbutton" onclick="my_setcookie('mempop','yes',true);document.getElementById('mempop').style.display='none';">Don't Display Again</a>
<a class="lgbutton" id="nextpage" onclick="chngpage();">Next</a>
</div>

</div>


Okay Now so far, that will have done nothing that special other than create an nice looking box, with a nice title and some nice buttons.

---

Now that you have done that, lets get onto the javascript.

We are going to put this SCRIPT above the HTML, but first lets look through it bit by bit:

Code:


<script type="text/javascript">
var popuppages=new Array();
popuppages[0]="<strong>Alert 1: </strong>This box demonstrates a nice use for Javascript arrays, each page is part of an array. <br><br>Click 'Next' to continue.";
popuppages[1]="<strong>Alert 2: </strong>Each part of an array can be accessed by Index number. The first string's index number is 0.  <br><br>Click 'Next' to continue.";
popuppages[2]="<strong>Alert 3: </strong>An Array is like storage. You can write functions which can add to it, remove from it and edit its contents. <br><br>Click 'Next' to continue.";
popuppages[3]="<strong>Alert 4: </strong>Its up to you what you use this box for. The tutorial will show you how to change and add pages. <br><br>On the last page clicking 'Next' will take you back to the start.";


This first chunk is our Array and will be the main focus. The first line is simply the script tag, due to the fact we will be putting this script in HTML, not a JS file, im sure you've seen it before.
The second line is the line which creates and defines our Array. The word 'new' states the creation of a new object (an array being an object), and as you can see the variable 'popuppages' holds our array, so that we can access it.

We then move on to actually creating our pages. You can see each page being written into the array.
'popuppages[0]="..."' says the first value in the Array named popuppages equals this: "..."

And as you can see we carry on to do this for 4 values in total. So our Array now contains 4 strings, which will make us 4 pages.

Code:


var pagenumber=0;
function chngpage() {
pagenumber=pagenumber+1;
if (pagenumber==popuppages.length) { pagenumber=0; }
document.getElementById('alertpages').innerHTML=popuppages[pagenumber];

var pagefix=pagenumber+1;
document.getElementById('pageno').innerHTML="Alert: "+ pagefix + " of " + popuppages.length;
}


This next chunk is our function which will change the page.
The first line defines a variable called pagenumber as a value of 0. The reasons for this is, 0 is the first index of the array with our pages, and we want our pagenumber to be the first page.

The function, when called upon, will add one to this value, meaning it becomes 1, meaning it is now the next page in the array.

The IF statement, says once pagenumber is the same as the arrays length then it should now equal 0 instead. Basically meaning once we reach the end of the array, go back to the start.

The next line then, finds the HTML element we want our text to be displayed in. And enters in the value from the Array. 'popuppages[pagenumber];' is where we access our array. If pagenumber is 2, then the innerHTML of our element will be popuppages[2], so whatever we defined as popuppages[2] in our array will be entered into the element.

The last bit of it simply creates the "Alert: Page 1 of 4" text, im sure you can figure this bit out.

Code:


jQuery(function() {
var checkalert=my_getcookie('mempop');
if (checkalert == "yes") {
document.getElementById('mempop').style.display="none";
}else { document.getElementById('mempop').style.display="block";}
document.getElementById('alertpages').innerHTML=popuppages[pagenumber];
});
</script>


This last bit, is a jQuery function, and therefore executed upon load.
It first of all finds our cookie, which may/may not have been set by the 'Do Not Display Button', if the cookie is read as 'yes' then that means the person has pressed 'Do Not Display Again' and so it hides the box. The last line, enters our HTML into our box for the first time when the page loads, at that point pagenumber=0.

SO i hoped that helped you understand a bit more about how Arrays can be used and accessed to create a wide variety of features. Dion's font-size toggle, also Dions color box, and now this. (shamefully not in the same league).

So after readin through all that you deserve the full code, this is it all together, put this in a widget or announcement or whatever:

Code:


<script type="text/javascript">
var CopyrightNotice='Page effect using an array. Copyright © by LGforum. All Rights Reserved. Use and  modification of this script is not allowed without this entire copyright notice in the original, copied, or modified script. No distribution without consent.';
var popuppages=new Array();
popuppages[0]="<strong>Alert 1: </strong>This box demonstrates a nice use for Javascript arrays, each page is part of an array. <br><br>Click 'Next' to continue.";
popuppages[1]="<strong>Alert 2: </strong>Each part of an array can be accessed by Index number. The first string's index number is 0.  <br><br>Click 'Next' to continue.";
popuppages[2]="<strong>Alert 3: </strong>An Array is like storage. You can write functions which can add to it, remove from it and edit its contents. <br><br>Click 'Next' to continue.";
popuppages[3]="<strong>Alert 4: </strong>Its up to you what you use this box for. The tutorial will show you how to change and add pages. <br><br>On the last page clicking 'Next' will take you back to the start.";

var pagenumber=0;
function chngpage() { pagenumber=pagenumber+1;
if (pagenumber==popuppages.length) { pagenumber=0; }
document.getElementById('alertpages').innerHTML=popuppages[pagenumber];
var pagefix=pagenumber+1;
document.getElementById('pageno').innerHTML="Alert: "+ pagefix + " of " + popuppages.length;
}
jQuery(function() {
var checkalert=my_getcookie('mempop');
if (checkalert == "yes") {
document.getElementById('mempop').style.display="none";
}else { document.getElementById('mempop').style.display="block";}
document.getElementById('alertpages').innerHTML=popuppages[pagenumber];
});
</script>
<div id="mempop" class="LGpopup" style="display: none;">
<div onclick="document.getElementById('mempop').style.display='none';"><img src="http://illiweb.com/fa/empty.gif" class="closebutton" width="20px" height="20px" /></div><h1>Member Alerts!</h1>

<p id="alertpages"></p>

<span id="pageno"style="float:right;margin-right: 5px;">Page 1 of 4</span>
<br><br>
<div style="text-align: center; margin-bottom: 10px;">
<a class="lgbutton" onclick="my_setcookie('mempop','yes',true);document.getElementById('mempop').style.display='none';">Don't Display Again</a>
<a class="lgbutton" id="nextpage" onclick="chngpage();">Next</a>
</div>
</div>


---

Now a few last things. Adding a new page or removing a page should be simple, but in case not here is how.
You will need to put this:

Code:


popuppages[newnumber]="your text here";

New number should be the next number in your array, (if your last one was 3, this should be 4), and obviously fill your text in. You would put this under your last Array entry.

You will not need to make any other edits other than editing the array values. The function is designed to work no matter how many pages you add to it.
And of course edit away at the CSS as much as you like.

And One last thing to think about how to use this array;
Suppose your array values were actually images? Allowing a user to cycle through images... you have yourself a slideshow. THEN suppose you a timer on it using setTimeout(), you then have an automatic slideshow

This is a great feature that I can't wait to add to my forum! Keep up the good work!

Thank you.
This tutorial needs a picture i think. If you wish to, you could provide one of installed on your forum.

This is great! I'm added this to my forum now and I'll give you a picture.
Something that would really come in handy would be a select content button on here, It's so difficult to grab large amounts of code.
I might accidentally miss some code and that would be a pain to figure out.

I just added this and I LOVE it. Great learning experience.

once you get this you can delete it.

Hi,


I've added this and a box showed up for a second and disappeared again, I'm guessing its working??? But how does it work, Hi can I send alerts to members...


This is working now, the pop up box is showing perfectly on foxfire, I'm trying to think what I could use this for though & is there a way I can get it to pop up at certain times or is it just at log in or what?


Looks cool though

Depends where you want it to pop up. It could be used on certain pages, via a javascript check of what page the user is on and running the function accordingly.