Spunky

Oh perfect, this describes exactly my issue. I guess I'll either need to adjust to how many pixels it is actually viewing or use the viewport and design the site accordingly. Having it not zoom out will suddenly make me need to change more items than intended. But at least now I have a base to work with. I don't understand why all the tutorials I have read I've never came across this, but they always give suggested widths, I usually see around 480px for smartphones. Does anyone know if there is a way to see how many pixels it is actually viewing? The link states Android is as much as 800, but I can set the media query to as high as 980px and it will show the stylesheet. For example, there are sites that will show how many pixels wide a device is, the resolution, etc, is there a way to find out the viewing width or whatever it may be called?

Can someone at least explain why <link href="test2.css" media="screen and (min-width: 980px)" rel="stylesheet"/> loads test2.css on my mobile device that is 360px wide? I need to get a mobile version working but I can't seem to understand this concept of media queries so I can utilize them to different device sizes.

"In that link it does state the localStorage.remove item function. It's located towards (area on page). Hope that helps!" Would have been the proper, friendly way to go about it. After all, I am only human and clearly missed it. I'm sorry you do not see how your posts come across as rude, but to others, not everyone, but some, they can.

So you did not see the part of my post that clearly stated I didn't see how to remove items? Please don't be sarcastic and rude, thanks.

Correct. The localStorage ObjectThe localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year. The sessionStorage ObjectThe sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window. Right from the link I posted in my first post.

I recently came across an article about an alternative to cookies. The article was in-depth and I always fall-back to w3schools to do a wonderful job at making concepts easy to understand so I came searching for it and found it: http://www.w3schools.com/html/html5_webstorage.asp However, the information here seems to be very limited. For example it doesn't explain how to empty the storage. I always start out with a basic example of my own to establish the basics and make sure I understand it. Well this is what I have, the function is ran when the body loads. <script>function user_visit() { if(typeof(Storage) !== "undefined") { if (localStorage.visit) { localStorage.visit = true; } else { localStorage.visit = false; } } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage..."; } if(localStorage.visit = true){ include_first_forum(); } else{ alert("Welcome first timer!"); }}</script> When I first ran the script though, it ran the function include_first_forum(); So I don't know how to confirm that this is really working, I didn't get a chance to have it do something different the first time. Can someone direct me to a good source to learn more about this concept?

To try to put it more simply: <link href="test.css" rel="stylesheet"/><link href="test2.css" media="screen and (min-width:480px)" rel="stylesheet"/> Works in every browser I try it in. Even on my mobile device that is only 360px wide..why? <link href="style.css" media="screen and (min-width:800px)" rel="stylesheet" /><link href="mobileStyle.css" media="screen and (min-width:360px) and (max-width:640px)" rel="stylesheet"/> Does not work on any browser. Only style.css renders, including on my mobile device. <link href="style.css" media="screen and (min-device-width:800px)" rel="stylesheet" /><link href="mobileStyle.css" media="screen and (min-device-width:360px) and (max-device-width:640px)" rel="stylesheet"/> Only mobileStyle.css renders on my mobile device, which is what I want. But it only works on my Chrome browser on my mobile device. There's inconsistency because I don't understand why the test code works just fine, but mine does not.

Hey guys, I am trying to style my website for mobile devices and am having a very difficult time understanding media queries. I understand perfectly how to implement them but don't understand why the correct query doesn't seem to be used based on the size device I am testing. I can get the right styles to display on my Chrome browser on my Galaxy S3 with the following query: <link href="style.css" media="screen and (min-device-width:480px)" rel="stylesheet" /><link href="mobileStyle.css" media="screen and (max-device-width: 480px)" rel="stylesheet"/> However it doesn't work in the default Browser app that comes on the phone. According to mydevice.io as well as other such sites I have seen, the size of my device is 360px. Thinking the problem was that this other browser (and I read IE and of course other browsers) don't support media queries I did some research and found something called Respond.js. The .zip came with a test.html which I removed where it called the .js and the queries work just fine without it on the queries do work fine in every browser I try. They use: <link href="test.css" rel="stylesheet"/><link href="test2.css" media="screen and (min-width: 37.5em;)" rel="stylesheet"/> <!-- 37.5em = 600px @ 16px --> Which I changed to: <link href="test2.css" media="screen and (min-width: 480px;)" rel="stylesheet"/> Still works. But when I change it to max-width, that stylesheet doesn't render. Beyond that, this is how the style.css looks (connected to the test.html) /*This is just a test file for making sure the script is working properly.If it is, the media queries below will change the body's background color depending on the browser width.For a realistic use case for media queries: read up on Responsive Web Design: http://www.alistapart.com/articles/responsive-web-design/*/body { background: black; color: #333; font-family: Helvetica, sans-serif;}p { width: 60%; min-width: 18.75em; /* 300px @ 16px */ max-width: 43.75em; /* 700px @ 16px */ margin: 2em auto; background: #fff; padding: 20px;}a { color: #333;}/* hide the attribute-test element. test2.css will show it */#attribute-test { display: none;}/*styles for 300 and up @ 16px!*//* The max-width declaration below blocks this from ever working */@media only screen and (min-width: 18.75em){ body { background: yellow; }}/*styles for 480px - 620px @ 16px!*/@media only screen and (min-width: 30em) and (max-width: 38.75em) { body { background: green; }}@media screen and (min-width: 38.75em),only print,projector{body{background:red;}}/*styles for 800px and up @ 16px!*/@media screen and (min-width: 50em){ body { background: blue; }}/*styles for 1100px and up @ 16px!*/@media screen and (min-width: 68.75em){ body { background: orange; }}/*one with pixels too! *//* NOTE - if the user were to increase his browser font size to 20px (chrome: Large), the above (68.75em) media query will be incorrectly ignored!!! Assuming 20px browser setting, we would expect to see this progression: yellow > green > red > blue > NAVY > orange However, the orange never kicks in... which seems like a browser bug! Here's the math (assuming 20px browser setting): 1200/20 = 60em < 68.75em*/@media screen and (min-width: 1200px){ body { background: navy; }}@media only screen and (min-width: 1250px) and (min--moz-device-pixel-ratio: 1.5), only screen and (min-width: 1250px) and (-moz-min-device-pixel-ratio: 1.5), only screen and (min-width: 1250px) and (-o-min-device-pixel-ratio: 3/2), only screen and (min-width: 1250px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 1250px) and (min-device-pixel-ratio: 1.5), only screen and (min-width: 1250px) and (min-resolution: 1.5dppx), screen and (min-width: 1250px) { body { background-color: pink; }} On my device, that claims to be 360px wide, my background color shows blue (on my desktop it shows pink). I would expect it to be yellow. Mind you this works in 3 diff browsers on my mobile phone (all blue background). Ok so let's just try to get something to work for me. I am simply trying to use one stylesheet if the device is this size, and the other if it is that size. I cannot get anything to work unless I add the word device to the query: <link href="style.css" media="screen and (min-device-width:640px)" rel="stylesheet" /><link href="mobileStyle.css" media="screen and (max-device-width: 360px)" rel="stylesheet"/> And even that only works on the Chrome browser on my mobile device (and it works fine, if I load the page in landscape view, style.css will load because my device is 640px wide that way). But I cannot get anything to work in the other browsers. I can however, use min-width and it will render the stylesheet I use it on, but then it of course renders both, not resulting in the correct style. I'm getting inconsistency and it is really confusing me. My goal is to change which stylesheet renders based on the size of the device. I am drastically changing the header and navigation so it seems to make more sense than having media queries within the same style sheet that attempts to change the style, I read that is good for minor, subtle changes.

So I have a page that the form action sends the user to once they submit the form. This handles everything from sending the form to emails and giving the user a confirmation that it is sent. My question is, how do I stop robots from being able to enter this page or simply typing it in on the url (www.mysite.com/form_confirmation.html for example). A while back I dabbled in something like this when I was messing with creating a login session, if the page was attempted to be entered without the login session being active, it would redirect or error or something. So, I'm pretty sure it would be some sort of header that checks for something right? What might I check for? Just a little unsure how I would handle this.

Interesting. I felt the else if would be unnecessary, why does it cause problems without it?

function submitResponse(response){ if(count == 1){ switch(response){ case 'otokonoko': if(user_gender == "female" && user_age == "adult"){ //does not important stuff first_response = response; count++; include_text_prompt(); } break; case 'onnanoko': if(user_gender == "female" && user_age == "adult"){ //does not important stuff first_response = response; count++; include_text_prompt(); } break; case 'otokonohito': if(user_gender == "female" && user_age == "adult"){ //does not important stuff first_response = response; count++; include_text_prompt(); } break case 'onnanohito': if(user_gender == "female" && user_age == "adult"){ //does not important stuff } break; default: //does not important stuff first_response = response; count++; include_text_prompt(); break; } } if(count == 2){ alert(response); switch(response){ case 'otokonoko': if(user_gender == "female" && user_age == "adult"){ if(first_response == response){ //does not important stuff } else{ //does not important stuff } second_response = response; count++; include_text_prompt(); } break; case 'onnanoko': if(user_gender == "female" && user_age == "adult"){ if(first_response == response){ //does not important stuff } else{ //does not important stuff } second_response = response; count++; include_text_prompt(); } break; case 'otokonohito': if(user_gender == "female" && user_age == "adult"){ if(first_response == response){ //does not important stuff } else{ //does not important stuff } second_response = response; count++; include_text_prompt(); } break case 'onnanohito': if(user_gender == "female" && user_age == "adult"){ //does not important stuff } break; default: if(user_gender == "female" && user_age == "adult"){ //does not important stuff count++; include_text_prompt(); } break; alert("end"); } This function runs when include_text_prompt() ends, which you will also see runs at various times throughout the code. My issue is, when it gets to the if(count == 2) section (bottom half, top half is if(count == 1) and both halves are very similar), for some reason it runs the code again. The idea right now is that the answer is "onnanohito". So if response == "onnanohito" the first time while count == 1, the code ends just like it is suppose to. However, if it equals one of the other cases and thusly makes it to count == 2, if response == "onnanohito" this time, the code displays as it is suppose to, but instead of ending, it goes back to the top of where if(count == 2) is at and response now equals what it did the first time. Gosh this is hard to explain. response == "otokonoko" count = 1 submitResponse(response) runs case: "otokonoko" runs count = 2 include_text_prompt(); runs response == "onnanohito" submitResponse(response) is re-entered case: "onnanohito" runs code then makes it to the alert on bottom but then it goes back to alert(response) where you see it under if(count == 2). It doesn't even re-enter the whole function, checking count again, which it's not suppose to do anyway, and somehow when that alert runs, response == "otokonoko" again, which was what it equaled the first time through. When case: "onnanohito" runs the 2nd time through, it is suppose to end the code just like it does the first time through. Any ideas?

Oooh thanks for the tip of how to make it more readable I like that. I actually do have some of that appear and reappear using CSS and JavaScript, but JavaScript initially puts the whole thing there in the first place. But I will consider doing it differently. Thanks so much for this tip!

Dang I was afraid that might be the issue. I'd tried several things to prevent it and ultimately I decided that wasn't the issue. But suppose it is.. The problem is that I ultimately need the code to look like this: prompt_div = "<div id='genderCheck'><h4>First of all, select your gender:</h4><input type='radio' name='gender' value='male' onClick='userprompt('male','');'>Male<input type='radio' name='gender' value='female' onClick='userprompt('female');'>Female</div><div id='ageCheck'><h4>Now a bit more..</h4><input type='radio' name='age' value='adult' onClick='userprompt('','adult');'>Adult<input type='radio' name='age' value='child' onClick='userprompt('','child');'>Child</div><div id='textPrompt'><h4>Great! Now, go ahead and type a response to your fellow classmates:</h4><textarea id='userResponse'>Type here...</textarea><button type='button' onClick='submitResponse();'>Enter</button></div>"; It all squished together inside a variable to be used in JavaScript to display it when I call it. Can you recommend a better way I can go about this task?

I am completely bewildered about this error that I am getting. At first I thought it was being caused by the JavaScript that ran with it, but I completely gutted my code and found the perp but I cannot figure out why... <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title></head><body><div id='genderCheck'><h4>First of all, select your gender:</h4><input type='radio' name='gender' value='male' onclick='userprompt('male','');'>Male<input type='radio' name='gender' value='female' onclick='userprompt('female');'>Female</div><div id='ageCheck'><h4>Now a bit more..</h4><input type='radio' name='age' value='adult' onclick='userprompt('','adult');'>Adult<input type='radio' name='age' value='child' onclick='userprompt('','child');'>Child</div><div id='textPrompt'><h4>Great! Now, go ahead and type a response to your fellow classmates:</h4><textarea id='userResponse'>Type here...</textarea><button type='button' onclick='submitResponse();'>Enter</button></div></body></html> Uncaught SyntaxError: Unexpected token } test_prompt.html:10 This error only occurs when I have parameters in the function calls, without the parameters the functions run fine (except that I need the parameters). It says line 10 when Male or Female is selected and line 12 when Adult or Child is selected. I cannot for the life of me figure out why. I've been staring down this code for forever.

So I've been super busy lately, so haven't had a chance to implement suggestions here on this post but I discovered something interesting. I began working on other aspects of the website today which included going to the web page with the form. However I never filled anything out or pressed the submit button. I noticed that other than during that span that my browser was on the page and the last time my browser was on this page (last time I posted in this post), was the only time I was receiving the blank emails. So, it seems that this only occurs if a browser is on the page, regardless of if the submit button is pressed. Would someone be able to explain to me why this is? Perhaps there is a different solution I should pursue before I begin tackling it?

Dangit I would never have guessed that cookies were server side since it just uses JavaScript. Alright, thanks for the info, that settles that.

To get to the bottom of this, I started putting alerts everywhere. There's explanations of the code on the tutorial but I need a bit further explanation. function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); alert(ca); for(var i=0; i<ca.length; i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1); if (c.indexOf(name) != -1) { return c.substring(name.length, c.length); } } return "";} Should the alert I put in show blank? For some reason the variable 'user' appears to be ending up blank. According to the tutorial, this function return ""; if the cookie isn't found. I am unable to get any alerts in this function to show anything but blank.

Yes. Yes. Yes (otherwise I wouldn't even being getting the prompt at all). Yes (same). Yes (otherwise the tutorial on the site wouldn't work). Any other theories? It doesn't make sense to me either.

Yes, nothing appears.

Hey everyone. I've decided to start diving into using cookies so where do I turn? w3schools.com of course. Love it. http://www.w3schools.com/js/tryit.asp?filename=tryjs_cookie_username That's the tutorial I am looking at..well, the "do it yourself" portion. The tutorial works, despite my title of this post, but when I try to use it, it doesn't. It's hard to debug code fresh from a tutorial unfortunately . So, I was hoping maybe we could get to the bottom of this. What happens is every time I load the page it prompts the user for their name. Rather than on the tutorial, it only asks for that the first time, and then after that it sends an alert that greets the user by the name they entered. My html: <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script src="cookies.js"></script><title>Untitled Document</title></head><body onload="checkCookie();">We are doing cookie work!</body></html> My JavaScript code within cookies.js: function setCookie(cname,cvalue,exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expires=" + d.toGMTString(); document.cookie = cname+"="+cvalue+"; "+expires;}function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1); if (c.indexOf(name) != -1) { return c.substring(name.length, c.length); } } return "";}function checkCookie() { var user=getCookie("username"); if (user != "") { alert("Welcome again " + user); } else { user = prompt("Please enter your name:",""); if (user != "" && user != null) { setCookie("username", user, 30); } }} The only thing I did differently from the tutorial is that I have my code in an external file. I tried putting it in the header like in the tutorial to see if that might be something, but the same thing happens.

You're saying that maybe something even as little as a space is being input into the text box? I didn't think of that. I'll see if I can combat that. Guys, I know I need stronger validation. Right now I am trying to pinpoint exactly what the problem is. If I was receiving actual spam I would believe that I am being attacked by a spambot. Or if I was getting hundreds of entries that would crash the server or something. So I feel there is a different reason for the blank entry. But if it is not, that's ok too. I could validate all the fields the same way as the name and we'd still have the same issue if whatever it is is sending blank spaces. Why do you say that? It is just a form that is filled out online and an email address isn't required or needed from the user. What is the thinking behind this? (I'm new to this concept, I'm just trying to accommodate a client's need, learning how to implement this sort of stuff.) Note: I can confirm that there are no spaces after in the entries. Not that I can tell anyways. I highlight the Name: and Telephone: and Message: and there are no spaces after the colon.

I'll keep that in mind, this is only beta code anyway until I get a solution. No reason to add more code until I find the solution.

Hey everyone small question. I have this code for sending a filled out form to an email. The form is written in HTML5 and uses the required attribute in the fields which stops the user from being able to send a blank form. Trouble is, I get blank emails anyway, but not from a "user", perhaps somehow from a bot? (I don't actually see how, I only have this site live for testing purposes, but I know it is possible). To combat this, I also put in a back-up server side check to ensure a blank form is not sent. Here is the total code: <?php if(empty($_POST['name'])){ exit(); } else{ $ToEmail = 'email'; $EmailSubject = 'Emergency Contact Form'; $mailheader = "From: ".$_POST["name"]."rn"; //$mailheader .= "Reply-To: ".$_POST["email"]."rn"; $mailheader .= "Content-type: text/plain; charset=iso-8859-1"."rn"; $MESSAGE_BODY .= "Name: ".$_POST["name"]."rn"; $MESSAGE_BODY .= "Telephone: ".$_POST["telephone"]."rn"; $MESSAGE_BODY .= "Message: ".nl2br($_POST["message"])."rn"; mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader) or die ("Failure"); }?> The if statement simply checks to see if the "name" field is blank. But as I said, I still receive some sort of blank email. When the email is received, it shows the recipient as the Name provided. In my blank emails it shows it as "World Wide Web Owner" When the form is filled out with a name, the email tagged to it is name@spinin1.securesites.net While if it is blank it is www@spinin1.securesites.net This makes me believe it has something to do with the host of the site? I don't manage the host, so I don't know who hosts it. I was hoping someone could tell me how to stop receiving random blank forms to the email? They get sent randomly, I haven't been able to confirm if it is only while I have my browser on the web page or not. Ultimately the goal is to have these emails sent to multiple people's phone (for a business), so receiving random blank forms in their email would become a nuisance. Thanks

Maybe not... Not clean code but thanks. I changed it to text/plain. That worked, thank you. I'd gotten this code from elsewhere, so still getting to understand it.

Could anyone tell me why this code is not putting the $MESSAGE_BODY content on a new line when viewed in the email? <?php $ToEmail = 'email'; $EmailSubject = 'Emergency Contact Form'; $mailheader = "From: ".$_POST["name"]."rn"; $mailheader .= "Content-type: text/html; charset=iso-8859-1"."rn"; $MESSAGE_BODY .= "Name: ".$_POST["name"]."rn"; $MESSAGE_BODY .= "Telephone: ".$_POST["telephone"]."rn"; $MESSAGE_BODY .= "Message: ".nl2br($_POST["message"])."rn"; mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader) or die ("Failure");?> Thanks