Jump to content
Sign in to follow this  
Elemental

lightbox or greybox? (was creating a temporary event?)

Recommended Posts

Hi Folks, I guess "event" was confusing so I changed it. I need to create an effect similar to what the lightbox or greybox can do; hide or cover the actual webpage with an alpha hue frame and on top of that add a content box with the information you want the visitor to focus on. I guess one could say it's like an "alert" type of event as well but that too would be the wrong terminology. I used "temporary event" because it's going to be a temporary thing, when the workshop is over I will remove the effect. I thought about using a "lightbox" or "greybox" effect but I wanted to get some suggestions from the "web masters", see if there was a more "standards" way of doing it, a different way or an easier way...? Thanks for any and all ideas on this... Peace,Elemental

Edited by Elemental

Share this post


Link to post
Share on other sites

Hi Ingolme, Thanks for the reply... I used the the word event cause I was thinking of using Javascript but anyway I guess I used it wrong. By "event" I mean the "lightbox" or "greybox" that would cover the actual website, and I mentioned it would be a temporary event because it would only be up until the day of the workshop, then I would remove it. does that help, I hope? Peace,Elemental

Share this post


Link to post
Share on other sites

If you just want to display some content then search for alert replacements. There should be several that try to act as "modal" dialogs, where they cover the background.

  • Like 1

Share this post


Link to post
Share on other sites

The concept is pretty simple if you're interested in doing one yourself. All it requires is two divs: One (the 'overlay') that is positioned absolute (or fixed if your page scrolls), has it's height/width set to 100%, a semi-transparent background, and z-index set to something really high like 999 so it appears on top of everything. The second div (the 'content'), also absolute or fixed position, will hold your content. This div will need to have a higher z-index than the overlay. If desired you can add a button to close (hide) the dialog. You'll then use JavaScript to toggle the display of both 'overlay' and 'content'.

  • Like 1

Share this post


Link to post
Share on other sites

justsomeguy, ShadowMage, Thank you both for the reply, much appreciated. "The more I learn, the less I know" Peace,Elemental

Share this post


Link to post
Share on other sites
The concept is pretty simple...You'll then use JavaScript to toggle the display of both 'overlay' and 'content'.
ShadowMage,If it’s not too much trouble could you please expand a little bit on the above bold text?I took your advice and created my own modal effect, I got the html & css working, I even got a small script to close it using an onclick() event:
function closeThis(){hcp = document.getElementById("modal");hcp.style.visibility = "hidden";}

For me this was a big deal; trust me.However, I've spent all day trying to get the cookie/JavaScript part to work with no luck; my brain just ain't computing this stuff and all the tutorials I've read over the last couple of days just make me feel like I'm a complete idiot; no comments please.This is what I think I need to do but haven't been able to implement, please correct me if my logic is wrong.On page load check to see if first time visitor, if yes then show modal.(this tells me that they have been to the site and have clicked on one of the three links I have on the dialog box: close modal, register for workshop or read more about it)If not first time visitor, check the date of last visit (the cookie should have this info).If last visit was >= to 3 days show modal again else continue hiding the modal.If, show modal, then when they click on any of the three links again the cookie is reset for the next 3 days.I think if I had a database set up I could check to see if they had registered for the workshop in which case I would hide the modal from them permanently but I would continue to show it periodically, after 3 days, for the other two.This is what I have so far.

window.onload = function checkCookie(){document.cookie = "cookieName=hcpEvent";if(checkCookie="false"){hcp=document.getElementById("modal");hcp.visibility="visible";}else if (checkCookie="true"){hcp.visibility="hidden";}alert("is the cookie set ?????");  //  the alert fires}function closeThis(){myDate = new Date("02/22/2012 04:30:00 AM");document.cookie = "cookieName=hcpEvent; expires=" + myDate.toString + ";";hcp = document.getElementById("modal");  // This workshcp.style.visibility = "hidden";  // as does this alert("cookie set");  // and this }

Any help would be appreciated, not asking for you to write me the script just to point out where I missed the boat or if I'm gonna drown anyway. Peace,Elemental

Share this post


Link to post
Share on other sites

Are you having problems displaying/hiding the dialog or with reading the cookie? The bolded section you quoted was referring to displaying the dialog by modifying the CSS display property of your overlay element and the dialog content element.

Share this post


Link to post
Share on other sites
Are you having problems displaying/hiding the dialog or with reading the cookie? The bolded section you quoted was referring to displaying the dialog by modifying the CSS display property of your overlay element and the dialog content element.
ShadowMage, Thanks for your reply and help, much appreciated. I got the "overlay and dialog" elements to show and hide using JavaScript with an onclick() event but I can't seem to get the cookie to remember the settings, the "overlay/dialog" keep's popping up every time I refresh or close and reopen the browser window.if it makes things easier here's a link to the test page http://www.heartcenteredprograms.com/test, I've added the JavaScript to the header and separated it all along with the HTML element id to make it easier to find and read. Again, thanks for the help. Peace,Elemental

Share this post


Link to post
Share on other sites

You have a missing " on this line:<meta property="og:title: content="Heart-Centered Programs : Enhancing productivity through work-life balance programs"/> However, the JavaScript does seem to be firing (as the alerts show up), so that's not the problem.The problem is that you are not properly reading the cookie. This page has a good getCookie function you can use to check a cookie's value.

  • Like 1

Share this post


Link to post
Share on other sites

ShadowMage, Thanks for the help and the link but I still can't figure out what I'm doing wrong. The link shows a cookie that stores and then retrieves a persons name and although this example should explain to me how it all works it doesn't; or rather, I ain't getting it. As simple as setting a cookie may be, or so I keep reading in all the tutorials I've looked at, I can't seem to read between the lines and get the concept. Here's the ORIGINAL CODE

function getCookie(c_name){var i,x,y,ARRcookies=document.cookie.split(";");for (i=0;i<ARRcookies.length;i++)  {  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);  x=x.replace(/^\s+|\s+$/g,"");  if (x==c_name)	{	return unescape(y);	}  }} function setCookie(c_name,value,exdays){var exdate=new Date();exdate.setDate(exdate.getDate() + exdays);var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());document.cookie=c_name + "=" + c_value;} function checkCookie(){var username=getCookie("username");if (username!=null && username!="")  {  alert("Welcome again " + username);  }else  {  username=prompt("Please enter your name:","");  if (username!=null && username!="")	{	setCookie("username",username,365);	}  }}

Here's what I did

window.onload = function checkCookie(){var c_name=getCookie("c_name");  if (c_name != null && c_name != "")  {document.getElementById("modal").style.visibility="hidden";  } //  since I'm not asking for a username I did the following else if (c_name == null && c_name == "")  {document.getElementById("modal").style.visibility="visible";}alert("Test 1");} function getCookie(c_name){var i,x,y,ARRcookies=document.cookie.split(";");for (i=0;i<ARRcookies.length;i++){x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);x=x.replace(/^\s+|\s+$/g,"");if (x==c_name){return unescape(y);}}} function setCookie(c_name,value,exdays){var exdate=new Date();exdate.setDate(exdate.getDate() + exdays);var c_value=escape(value) + ((exdays==null) ? "" :"; expires="+exdate.toUTCString());document.cookie=c_name + "=" + c_value; //  I added this to close the overlay document.getElementById("modal").style.visibility = "hidden"; alert("Test 2");}

The alerts are both firing but the setCookie is still not working What am I doing wrong?

Share this post


Link to post
Share on other sites

ShadowMage, Thanks and I'm sorry, I'm just burnt... HTML text, basically I'm calling it on an onclick="setCookie()" event, see first <p> element; thanks again.

<!-- ** BEGIN of modal ** //--><div id="modal"> <p id="modal-header"><span><a id="clsBtn" href="#" title="close window" onclick="setCookie()"></a></span></p> <!-- ** BEGIN of flyer ** //--><div id="eventInfo"><p id="eventInfo-title">Life is a Balancing Act</p><p id="eventInfo-sub-title">How to Keep the Balls in the Air Without Dropping Them!</p><img class="centered" src="modal/images/juggling.jpg" alt="" /><p class="style_01">Please join us:</p><p class="style_02">Saturday, February 25th.  from: 9am to 4pm</p><p class="style_02"><span>at</span>Glendale Community College</p><p id="register"><a href="https://cse.glendale.edu/CourseStatus.awp?&course=12WPD042" title="link to the the Glendale Community College">Register Now</a><span>(Page opens in a New Window)</span></p><p>For more information about the workshop view the <a href="modal/LifeisaBalancingAct_flyer.pdf" title="link to an Adobe PDF document">Life is a Balancing Act</a> Flyer.</p><!-- **** END of flyer **** //--></div><!-- **** END of modal **** //--></div>

Share this post


Link to post
Share on other sites

right, but your not passing it anything. Look in your function definition, it expects three arguments:* c_name* value* exdays read up on functions if you aren't sure what I'm talking about, these are basic fundamentals of functions and if it hasn't been said, or you don't know, make sure you are looking in the error console of your browser. This should be showing a bunch of undefined errors.

Edited by thescientist
  • Like 1

Share this post


Link to post
Share on other sites
right, but your not passing it anything. Look in your function definition, it expects three arguments:* c_name* value* exdays read up on functions if you aren't sure what I'm talking about, these are basic fundamentals of functions and if it hasn't been said, or you don't know, make sure you are looking in the error console of your browser. This should be showing a bunch of undefined errors.
thescientist, Thanks for your input, you too ShadowMage... I ain't gettin it guys; I'll just keep at it, maybe the light bulb will go off at some point. Peace,Elemental

Share this post


Link to post
Share on other sites

so, are there or aren't there errors in your console? Do you understand what we're talking about? read the tutorials, the three arguments are pretty self explanatory* c_name - the name of the cookie, i.e. username* value - the value for the cookie, i.e. thescientist* exdays- how long until the cookie expires, i.e. 365 (one year)http://www.w3schools.com/js/js_cookies.asp if you don't tell us what you don't get, it's harder for us to help you.

  • Like 1

Share this post


Link to post
Share on other sites
so, are there or aren't there errors in your console? Do you understand what we're talking about? read the tutorials, the three arguments are pretty self explanatory* c_name - the name of the cookie, i.e. username* value - the value for the cookie, i.e. thescientist* exdays- how long until the cookie expires, i.e. 365 (one year)http://www.w3schools.../js_cookies.asp if you don't tell us what you don't get, it's harder for us to help you.
thescientist, Thanks for your reply, I will re-read what I have on functions again, I apologies I just feel burnt after so many days of trying to figure this out. The tutorial on w3schools on cookies isn't commented enough for me to understand how it works; unfortunately for me, on some things, I need a blow by blow explanation in order to get it. I'm not understanding the value argument at all, is this the value (the id) of the element I'm setting the cookie for? The name argument I get, we have to name the cookie in order to check for it or delete it and we do so with the setCookie function, which in my case should be set when I close the event information content window. The time or date argument I understand; although, I may not quite understand the code completely, yet, I get that we have to set a time value in order to know how long the cookie will live. This argument, when we check it on page load, will either read true or false, or yes the argument is set, you've been here before, so don't show the modal and event information or no the argument is not set, this is your first time here, so show the modal and event information. In Firefox:Tools / Web Developer / Web ConsoleI'm not getting any JavaScrip error messages / both alerts fire, I'm able to close the modal and the event information content. In IE 8Tools / Developer Tools (F12)Object doesn't support this property or method index.html. line 82 character 1 82| hcp=document.getElementById("modal");83| hcp.style.visibility="hidden";the createCookie function which is suppose to be set on an onclick() event isn't firing and the first alert("") only fires on the initial page load not on refresh (F5). Peace,Elemental

Share this post


Link to post
Share on other sites

well, post your code as it is now and tell us exactly what your issue is

Share this post


Link to post
Share on other sites
I'm not understanding the value argument at all, is this the value (the id) of the element I'm setting the cookie for?
The value argument is the value of the cookie. Often, you'll need to specify a specific value, but in your case the value doesn't really matter. You only need to know that the cookie is set. You can set the value to anything you want. I typically would use a 1 in this situation but you could use something like true or 'yes' or 'visited'. The only thing I recommend is to avoid values like 0 or '' (an empty string) which evaluate to false in loose boolean comparisons.
In IE 8Tools / Developer Tools (F12)Object doesn't support this property or method index.html. line 82 character 1 82| hcp=document.getElementById("modal");83| hcp.style.visibility="hidden";the createCookie function which is suppose to be set on an onclick() event isn't firing and the first alert("") only fires on the initial page load not on refresh (F5).
There is nothing wrong with that line. Perhaps there is an error earlier in the code. As scientist said, post your current code as is so we can have a look at it.
  • Like 1

Share this post


Link to post
Share on other sites

Okay, After re-reading and re-googling I went with the following simplified code.

<script type="text/javascript"><!--window.onload = function checkCookie(hcpEvent){if (document.cookie!="hcpEvent"){document.getElementById("modal").style.visibility="visible";alert("Thanks for visiting");  //  used to check script}else if (document.cookie=="hcpEvent"){document.getElementById("modal").style.visibility="hidden";alert("Thanks for coming back");  //  used to check script}} function setCookie(){document.cookie="hcpEvent=hcp;expires=Tue, 06 Mar 2012 24:00:00 GMT";document.getElementById("modal").style.visibility="hidden";alert("Cookie Set");  //  used to check script}//--></script>

The cookie is being set, I checked and it's there; however, the checkCookie function is not working. When I reload or refresh the page the overlay and the event information dialog box are still showing. Peace,Elemental As for the value thing... I needed to assign value a variable, I chose "hcp", in order for the function to work. However, to me, that variable means nothing, it has no real value other than a requirement to make the script work and hense my confution. name, is required to set, check and delete the cookie.expires, is required to set the length of time the cookie will live.But, value, to me, has no meaning; no reason why it's even used other than, in the above example, a requirement to make the script work. Am I making sense?

Share this post


Link to post
Share on other sites
The cookie is being set, I checked and it's there; however, the checkCookie function is not working. When I reload or refresh the page the overlay and the event information dialog box are still showing.
Because you are checking the cookie against the string 'hcpEvent'. document.cookie is equal to "hcpEvent=hcp;expires=Tue, 06 Mar 2012 24:00:00 GMT" not "hcpEvent". You have to check the cookie's value not just its name. That is what the getCookie function does in the W3Schools tutorial. The name is used to locate the cookie, the value is what you need to check. In your case the value doesn't matter. It can be anything as long is there is a value.The W3Schools tutorial has a good example of a cookie that uses a value. They are creating a customized welcome message where the user's name is stored in the cookie and when the user returns to the site, the name is read from the cookie and used to display a message. The name of the cookie is username and the cookie's value is the user's name. I am really not sure how else to explain the name/value situation. Here's a working example that should do what you want. It is tested and verified:
window.onload = function() {    var c = getCookie('UserVisited'); //Get the cookie's value    //Check to see if the cookie was set.  If the cookie is not set, c will be null.    //If it is not set, display the dialog and set the cookie, otherwise do nothing.    if (!c) {        document.getElementById("modal").style.visibility="visible";        var exp = new Date();        exp.setDate(exp.getDate()+365);        //Remember, the value of the cookie can be anything you like.  It doesn't matter for your situation.        document.cookie = 'UserVisited=yes;expires='+exp.toUTCString();    }}function getCookie(c_name) {    var i, x, y;    var ARRcookies = document.cookie.split(";"); //This gets the list of cookies currently set for this page    for (i=0;i<ARRcookies.length;i++) { //Loop through each cookie parsing out its name and value        x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); //Parse cookie name        y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); //Parse cookie value        x=x.replace(/^\s+|\s+$/g,"");        //If the current name matches the one passed in, return its value        if (x==c_name) {            return unescape(y);        }    }}

  • Like 1

Share this post


Link to post
Share on other sites
Because you are checking the cookie against the string 'hcpEvent'. document.cookie is equal to "hcpEvent=hcp;expires=Tue, 06 Mar 2012 24:00:00 GMT" not "hcpEvent". You have to check the cookie's value not just its name. That is what the getCookie function does in the W3Schools tutorial. The name is used to locate the cookie, the value is what you need to check. In your case the value doesn't matter. It can be anything as long is there is a value.The W3Schools tutorial has a good example of a cookie that uses a value. They are creating a customized welcome message where the user's name is stored in the cookie and when the user returns to the site, the name is read from the cookie and used to display a message. The name of the cookie is username and the cookie's value is the user's name. I am really not sure how else to explain the name/value situation. Here's a working example that should do what you want. It is tested and verified:
window.onload = function() {	var c = getCookie('UserVisited'); //Get the cookie's value 	//Check to see if the cookie was set.  If the cookie is not set, c will be null.	//If it is not set, display the dialog and set the cookie, otherwise do nothing.	if (!c) {		document.getElementById("modal").style.visibility="visible";		var exp = new Date();		exp.setDate(exp.getDate()+365);		//Remember, the value of the cookie can be anything you like.  It doesn't matter for your situation.		document.cookie = 'UserVisited=yes;expires='+exp.toUTCString();	}} function getCookie(c_name) {	var i, x, y;	var ARRcookies = document.cookie.split(";"); //This gets the list of cookies currently set for this page	for (i=0;i<ARRcookies.length;i++) { //Loop through each cookie parsing out its name and value		x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); //Parse cookie name		y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); //Parse cookie value		x=x.replace(/^\s+|\s+$/g,""); 		//If the current name matches the one passed in, return its value		if (x==c_name) {			return unescape(y);		}	}}

ShadowMage, Again, thank you; specially for your persistence and patience. Before I go any further let me see if I finally understand this So, the "value" argument, is one I create if I want to check for a specific thing, such as: username, the known answer to a given question -Are Dolphins mammals? ("true") or what does 2+2 equal ("4") etc...; then, the cookie, specific to that particular event, checks the known value to the one given or previously set by the user/visitor as in "username"? Peace,Elemental

Share this post


Link to post
Share on other sites
So, the "value" argument, is one I create if I want to check for a specific thing, such as: username, the known answer to a given question -Are Dolphins mammals? ("true") or what does 2+2 equal ("4") etc...; then, the cookie, specific to that particular event, checks the known value to the one given or previously set by the user/visitor as in "username"?
Pretty much, yeah. A cookie always needs a value though. In some situations (like what you are trying to accomplish) you only need to know if a cookie exists. Since cookies require a value, it does not matter what that value is as long as it has a value. To further explain why you don't need a specific value for your cookie:If a user has never visited your site, they will obviously not have the cookie on their computer. Once they visit, your script sets a cookie. From this point forward, they will have that cookie. Its value will never change (unless changed by your script). It will only expire after a certain amount of time, at which point they no longer have the cookie (it has been deleted by the browser). Since the value never changes, you don't need to look for any specific value because your script created it in the first place (and if your script created it, obviously the user has visited your site). You only need to know if the cookie exists (the user has visited) or if it does not (the user has not visited or the cookie has expired). I hope this clears it up a little.
  • Like 1

Share this post


Link to post
Share on other sites
Pretty much, yeah. A cookie always needs a value though. In some situations (like what you are trying to accomplish) you only need to know if a cookie exists. Since cookies require a value, it does not matter what that value is as long as it has a value. To further explain why you don't need a specific value for your cookie:If a user has never visited your site, they will obviously not have the cookie on their computer. Once they visit, your script sets a cookie. From this point forward, they will have that cookie. Its value will never change (unless changed by your script). It will only expire after a certain amount of time, at which point they no longer have the cookie (it has been deleted by the browser). Since the value never changes, you don't need to look for any specific value because your script created it in the first place (and if your script created it, obviously the user has visited your site). You only need to know if the cookie exists (the user has visited) or if it does not (the user has not visited or the cookie has expired). I hope this clears it up a little.
ShadowMage, Actually yes; thanks again, you were very helpful. I added an "else if" so that the "modal" won't show up on reload or refresh -although it still does for a moment and then goes away- and I changed the onclick() event to simply hide the "modal" since it's already set. I get that in my case I don't need to give a name to the value argument but since one is still required how are you setting it?Is it the 1 in the +1 in the following? y=ARRcookies.substr(ARRcookies.indexOf("=")+1); //Parse cookie value Peace,Elemental

Share this post


Link to post
Share on other sites
I added an "else if" so that the "modal" won't show up on reload or refresh -although it still does for a moment and then goes away- and I changed the onclick() event to simply hide the "modal" since it's already set.
If you use CSS to change the modal to be hidden initially you don't need the else if and you won't see it flicker.
I get that in my case I don't need to give a name to the value argument but since one is still required how are you setting it?Is it the 1 in the +1 in the following? y=ARRcookies.substr(ARRcookies.indexOf("=")+1); //Parse cookie value
No, the cookie's value is set here:'UserVisited=yes;expires='+exp.toUTCString(); UserVisited is the cookie name, yes is the value. The +1 is moving the start index of the substr function one position beyond the position of the '='. The substr function takes, at minimum, one argument: the index, or position, in the string to begin extracting the substring. The indexOf function finds the first position of '='. We don't want to include the '=' in the cookie's value so we need to start extracting from the next position in the string.
  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...