Browsing the HTML category

Don’t comment out hidden text fields

I had some hidden text fields on my page to temporarily store values.  While developing the page, I had the type of the text field as “text” (instead of “hidden”) – and I had text labels for me to indicate which box corresponded to the appropriate value.  When I was done, I put a comment surrounding the whole thing.

I didn’t want to change the “type” to “hidden”, figuring that I might need to debug it soon, so it’d be faster if I just commented it out.

By commenting-out the code, the text boxes in essence don’t appear on the page: instead, use CSS to hide (display: none) the fields.

Read the article

Unable to edit .html/.htm pages in Internet Explorer

“Back in the old days” when everyone used Internet Explorer, web developers could hit “View Source,” and the contents would come up in Notepad. Then you could make the changes, hit “Save,” and view the changes by hitting Refresh.

I guess in the new versions of Internet Explorer, the “View Source” doesn’t open up in Notepad, but in IE itself (and it’s color-coded). As such, you can’t make/save changes.

The way around this is to right-click the .html (or .htm) file, select “Open With”, then select Notepad. Now you can make your changes (and be able to save them)

Read the article

Playing audio with HTML5 doesn’t work on mobile – not even with PhoneGap

This is still an unresolved issue.
I have an app (website in an app shell) that plays sound, triggered from a javascript event.  This isn’t just background music playing constantly when the pages loads up: there’s a specific event that’s causing the sound to play (a sound effect).  It works on my desktop computer (in various browsers), but does not work on my mobile devices (Android, iPod) or tablet (iPad).
I searched a lot, and came across something that Apple put (in iOS) to not allow sounds to play by default, without the user explicitly allowing it.  That makes sense.  I’m working on a mobile app, with PhoneGap (specifically, “PhoneGap Build” – where you upload a zip file), so I was hoping there was a work-around.  Apparently there’s a plug-in, but I couldn’t figure out how to activate it (all the websites were referring to “java” – and not updating the “config.xml” file for a HTML/Javascript app).
What’s more, is that when the sound was in the app, I was unable to re-start the app (i.e. after I closed the app, and I re-opened it, I got the error:
Phonegap – “Application Error: The connection to the server was unsuccessful. (file:///android_asset/www/index.html)
by removing the javascript that preloaded (and played) the sound – seeing as how I couldn’t get it to work anyways – that got rid of this error.  Lots of solutions involved creating a “main.html” and have the regular index.html redirect (via window.location) to the new page, but I didn’t have to do that.
Guess my game won’t have sound (yet)!

Read the article

HTML Table not displaying data due to comment was hiding the ASP error

My intern was having a regular table  display on a website, using Classic ASP.  But only the column headings were printing out; the data wasn’t.  He printed out the SQL statement, and we verified that it was correct.  But there was no table data.

 

The problem was that in the TD tag, he had a comment to hide something.  The ASP error was showing up in the “comment,” causing the rest of the page to not load.  By viewing the source of the page (and scrolling to the bottom), we could see it was an ASP error that was causing it.

Read the article

Creating a website template

Website maintenance is much easier if you work with a template. If you have a website with multiple pages, and you have to make an update to a graphic or link that appears on every page, you can change one page, and it will update every page.

External CSS files

Cascading Style Sheets (“CSS”) is used to specify the way a website looks. This could be font color, decoration, and table border styles, etc.

There are three ways CSS can be used: in-line (for one specific element on a page), internal (every element of a certain ID/type is the same on a page), and external (every element of a certain ID/type across the site).

Use external styling when possible. To do this, you create a new .css file, and then reference this file on every page. A simple example would be if you wanted to change the background color of your site – you would specify it in this one file, and then update that one file as necessary.

To implement this:

Create a file myCSSfile.css in a text editor. The contents of this file would be the normal CSS code. Then in every web page, in the HEAD tag, place the line:

<link rel=”stylesheet” type=”text/css” href=”myCSSfile.css“>

(You can change the name of the file).

External Javascript files

As with the external CSS file, you can create an external Javascript to house any common functions you will be reusing.

Create a file myjavascript.js in a text editor. The contents of this file would be the normal Javascript code. Then in every web page, in the HEAD tag, place the line:

<script language="Javascript" type="text/javascript" src="myjavascript.js“> </script>

Of course you can change the name of the file). Also note, there is a space between the opening and closing of the SCRIPT tag. Some sources say it’s needed, which is what I recommend.

 

 

To reference it, you would use one of the following:

PHP:

<?php include(”myfiletoinclude.php”);?>

ASP:

<!–#include file=”myfiletoinclude.asp” –>

Read the article

HTML form in IE10 won’t submit

I had an HTML form that worked in every browser I tested except Internet Explorer 10. And at that, it was only some IE10’s (I think the problem was specifically for Windows 8).

Internet Explorer 10 has a new (cool) feature to insert it’s own form validation errors. For example, I had javascript (jQuery) to ensure that a field only had 2 characters. It works fine, but IE10 put it’s own validation on there:

IE10 Javascript Error

"You must enter text with 2 or fewer characters" - I didn't put that there!!

IE10 was smart enough to put in text that said “You must enter text with 2 or fewer characters.”  I didn’t put that (inline) alert there!

The problem was, that it was validating a field that shouldn’t have been validated.  That specific field in the image above was (and should have been) hidden; the user didn’t check-off a box for it to appear (and, need validation).  But IE10 gave the validation error, anyways.  And since the field was hidden (due to the user not checking off the box), the validation error alert was hidden and it was as if the form just wouldn’t submit!

Now, part of it was my fault.  I was pre-populating the State based on the Zip Code filled in (using Ajax). But the value I was returning  put an extra space before the value returned (I didn’t trim it).  Therefore I was filling in a 3-character value (space + 2 character state abbreviation) into a field that only accepted 2 characters.  Due to my mistake, and Internet Explorer 10 wrongfully validating the form when it shouldn’t be, it looked like the page was just frozen.  Maybe I should look into some sort of “disable auto-validation for IE10”?

 

Update 3/30/13 – it was suggested to just use the “novalidate” attribute in the <form> tag, per http://www.wufoo.com/html5/attributes/11-novalidate.html .  I didn’t try it, but it looks like it would work.

Read the article

Will a DocType cause the page to load slower?

All properly formatted HTML documents should have a DocType.  This tells the browser how to render the file, as intended.

W3schools definition:
http://www.w3schools.com/tags/tag_DOCTYPE.asp

I’ve noticed if it’s not included, the page may not load as intended (on certain browsers, anyways).  The first line in your HTML document is the DocType, and it will look something like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

But I’ve always wondered if the browser has to load that “.dtd” file, thus slowing down the page load.  I’m still not sure, but I think with the high-speed bandwidth people are accustomed to now, it’s not worth excluding which would sacrifice how the site looks.
There are different types of Doctypes (specifically, a “loose” and “strict” one).  Interestingly enough, the new HTML5 version’s Doctype just looks like this:

<!DOCTYPE HTML>

I suspect the reasoning for exclusion of a URL to reference doesn’t have anything to do with the load time though.

Read the article