Tip About The Paragraph Element in HTML

March 21, 2010

When using the paragraph element in your HTML markup, think about the semantic definition of the paragraph element. A paragraph is a block of text; therefore, you should use it as a block of text. 

Don’t nest other block level elements inside a <p> element.  For instance, it does not make sense to nest a paragraph inside of a paragraph. When the second paragraph begins, it means that the first paragraph has ended. If you nest other block level elements inside of a <p> element, the web page might not display as you imagined.  Furthermore, your markup becomes semantically illogical which might make it more difficult for yourself or others to maintain.


PHP Bubble Sort

November 8, 2009

I haven’t really had any ideas to post about lately; so, I thought that I would post a php bubble sort that I used to sort a multidimensional array (an array holding arrays of names, high scores, dates, and times). Originally, I planned to use usort() with a compare function my_sort() that I found in an example on w3schools; however, this solution didn’t seem to sort correctly(how I needed it to), and I didn’t know how it worked so I couldn’t adjust it properly. Below, is their compare function to be used with usort.

function my_sort($a, $b)  //by my_sort I mean their_sort
if ($a == $b) return 0;
return ($a > $b) ? -1 : 1;

This, seemed to work to an extent. However, it seemed like it randomly picked where to place items in an array if they were equal. I thought that I could place the new item behind all of the elements that were equal to it if I changed the condition that checked for equality to return -1. This didn’t work, it only placed the element after the first element to which it was equal. If there were more elements in the array that were also equal, they would be placed behind the new element.

In a case where multiple elements had scores that were equal, I needed a solution that would place the most currently attained score  behind those elements. Thus, I wrote my own bubble sort wich is shown below.

$thescore= $_POST["scorepass"];   //new highscore
$thedate=$_POST["datepass"];      //current date
$thetime=$_POST["timepass"]."\n"; //current time
$todelete = $newscores[9]; //since scores are sorted last
                           //element will get deleted
for($ind=8;$ind>=0;$ind--) //search for spot to add
{                          //new highscore
if((int)$thescore==(int)$newscores[$ind][0] && $_POST["user"]==$newscores[$ind][1] && $thedate==$newscores[$ind][2] && $thetime==$newscores[$ind][3]) //already added

/*I don't know if this check is needed anymore, but originally I had the form submit to itself. Now, it submits to another php page which uses header() to redirect to the orignal page. */


else if(((int)$thescore <= (int)$newscores[$ind][1])|| $ind==0)
//found spot now propegate backwards
{ //we found a greater score our we traversed the whole array
if($ind!=0 ||((int)$thescore <= (int)$newscores[$ind][1]))
//if score doesn't belong in top spot
$ind++; //add to spot below the score that is higher
} //else add to front of array for a new top score
$todelete = $newscores[$ind];/*temp var to hold old score
during substitution*/
$newscores[$ind] = array($_POST //add new score to its spot["user"],$thescore,$thedate,$thetime);
while($ind<9) //shift rest of scores back 1 pos.
$todeletenxt = $newscores[$ind];
$newscores[$ind] = $todelete;
  $todelete = $todeletenxt;
}//end else if
}//end for loop

Hopefully, this is helpful to you. If you know of any better solutions to this problem, please comment. If you can explain how the usort () works in correlation with that compare function, I would enjoy reading comments about that as well.

CSS Positioning

October 26, 2009

There are four types of positioning in CSS.  These types are static, absolute, relative, and fixed.  

Static is the default type of positioning.  Essentially, static positioning lays out all HTML elements from top to bottom and left to right. There is not much else to discuss about static positioning.

The remaining three types of positioning are all pretty similar, but there are a few slight differences. 

Absolute positioning uses the top and left properties to place an element at any location on a page.  I usually like to set elements using pixels or percent; however, there are few other measurement that are accepted.  In absolute positioning, if you set  the top and left style properties to zero the element is placed in the top left corner of its parent element.   

Fixed positioning works the same as absolute positioning; except, the element remains at this position in the browser even if the user scrolls.  I once read that fixed positioning is not supported as widely as absolute positioning; however, I am not sure if this is the case.  It certainly seems to work in all of the browsers that I have used.

Relative positioning  is essentially a combination of static and absolute positioning.  Elements flow from top to bottom and left to right; however, top and left can also be set.  In relative positioning, setting top and left to zero does not necessarily put an element in the top left corner of its parent element.  Rather, it places the element where it would be positioned if static positioning were used.  If left were set to 10px, the element would then be shifted 10 pixels to the right of its default static position.

Here is an example of how one might define absolute positioning for a div with the id myDiv.

#myDiv{position:absolute;top:10px; left:20px}

The values fixed and relative could also be valid substitutes for the value absolute in this example. That concludes this post about CSS positioning.

How To Submit A Form To Itself On Enter Without Refresh

October 12, 2009

I’m not sure if many people would want to do this or if good reasons exist for doing this; however, I wanted to submit a form to itself without page refresh for a trivia game.  So, after taking the time to research and figure it out, here is a solution.

This solution does not actually submit the form; rather, it uses two JavaScript functions to simulate submitting a form.  By simulating a submission of the form rather than actually submitting the form, one can avoid a page refresh. 

The first step to this process is calling a couple of JavaScript functions in the input element or another element of the form. Below is what my form element looked like for my game.

Team Name: <input id="txt1" onkeypress="return disableEnterKey(event)" onkeyup="showHint(this.value, event)" type="text" />

It may be possible to achieve the same goal by just using onkeypress=”return disableEnterKey(event)”; however, this didn’t seem to work for me. Thus, I added event as a second argument to the showHint() function (the function which does most of the work in my game), and doing this made it possible for the function to handle the form data on enter as well.

The next step is coding these two functions. Below is the disableEnterKey() function that I used to disable form submission on enter.

function disableEnterKey(e)
var key;
key = window.event.keyCode; //IE
key = e.which; //firefox
return (key != 13);

I grabbed this function off of www.bloggingdeveloper.com. This code should be included in the head section of your html file, or you can include it in a separate .js file and link to it in the head section of your html file as I did.

I included a similar block of code in my showHint() function to process the form data when the enter key is released.

var key;
key = window.event.keyCode; //IE
key = e.which; //firefox
if(key==13)//the enter key was pressed
//your code to run when the enter key is pressed

That pretty much sums up this tutorial. If you would like to see what the working example functions like, you can visit my two minute drill game. It is a game to see if you can name all 32 NFL teams in two minutes. If you play, you should be aware that you are responsible for remembering the teams that you already named, and there is no special prize or notification if you name all 32 teams in the two minute time limit.

3 Ways to Include One HTML File in another HTML File

October 5, 2009

Sometimes it makes sense to create one html file that will be used in many other html files.  For instance, you might have some code that you would like to use as a header on each page of your web site.  Instead of typing this code out on each page of your site, you could just create a separate file with this code and name it header.html. Also, header.html doesn’t have to contain a complete html file structure with <html> </html>, <head> </head> and <body> </body> elements; rather, it just needs to follow the html standards as part of the file in which it will be included. In example, you could create a file called heading.html with the following contents.

<h1> Welcome to my site </h1>

Then, type the include statement just after the head element in the file that you wish to include heading.html in, and there will be no problems rendering the site. 

Now, I will describe three ways to include this file named heading.html. The first method will use php (Note: use must have php installed and enabled on your server for this to work).  To include this file using php, change the name of the file from heading.html to heading.php. Also, the file that has the include statement must also be saved with the .php extension.  Finally, at the location where you would like the code to appear type:

<?php include('heading.php'); ?>

The next two methods are virtually the same;  they just involve using different file extensions.  As noted before, you should make sure these technologies are enabled on your server before using them on your site. In the next to methods of performing a server side include, if you want to include a file called heading.html, this file can keep the .html file extension. Then, the file that you would like to include heading.html in would need to be saved with a .asp or .shtml file extension. The code for the include statement is below.

<!--#include file="heading.html" -->

In conclusion, you now know three ways to perform a server side include. Using include statements decreases file size, and it saves work if future editing is needed.

Why is my design broken in other browsers?..Try a different DTD

September 30, 2009

Chances are that if you are reading this you probably spent hours (maybe less if you’re lucky) trying to fix your design so that several browsers will display it symmetrically. 

If that is the case you may or may not be kicking yourself after you read the rest of this article.  Sometimes, the answer to cross-browser compatibility is as simple as changing the DTD or document type declaration. I know that  this was the case for me. For my site, I am using the HTML 4.01 transitional DTD with the DTD URL. This DTD is shown below.

< !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
http://www.w3.org/TR/html4/loose.dtd&#8221; >

The reason that I chose this DTD is because it is accepted as standards mode in most browsers, and is almost standards mode in others. Furthermore, I have some deprecated elements and attributes in my code forcing me to stick to a transitional DTD.  If you did not include depracated elements, tags, or attributes in your source code; then, a strict DTD would be your best option. Almost every strict DTD is accepted as standards mode in all major browsers.

How To Make A Div Fill The Full Height of The Screen

September 20, 2009

This is a pretty simple procedure, but I thought that I would explain it anyway.

How to make a div 100 percent of the screen’s height:

  1. make the html and body have a height of 100%
  2. make the div have a height of 100%, and set its position to relative

html, body{height:100%;}
#mydiv{position:relative; height:100%;}

I Can’t Comment on YouTube Videos-Solution!

September 18, 2009

So, you can’t comment on YouTube videos, huh? Well, you have come to the right place for a solution.  Assuming that your account is in good standing, this is probably due to the fact that you tried to post a url in the comment.  If you didn’t try to post a url; then, try pressing refresh after you hit post.  If you did try to post a url; then, get rid of it or type something like h t t p slash slash cloudedvision dot wordpress dot c o m instead. I hope this helps.

How To Make A Small Image A Full Screen Background – Part II

September 14, 2009

As promised in a previous post, I will now discuss a second solution to creating a full screen background out of a small image.  This solution probably works best with gradient images; however, it should work with other images that have a solid color at the bottom.  The code is below.

body{background: #FFFFFF url("bg2.JPG") repeat-x;}

While, the image you are using as the background doesn’t fill the entire screen in this example, this code creates the illusion that the image is filling the entire screen. Essentially, you create a vertical gradient.  Then, you remember what the bottom color is. Next, you type the code above. Where I typed #FFFFFF, you enter the color (hexadecimal or name) at the bottom of your gradient.  In this fashion, a seemless transition is created between the bottom of the gradient and the body background color.  Thus, you have the appearance of a full screen background.

How To Make A Small Image A Full Screen Background

September 5, 2009

Is it possible to create a full screen background out of a 10×400 gradient image (or any other image)? Yes, it is quite simple using the css code below. After adding the following code to your css, just insert the image into your html and set its id equal to background to have a full screen background image.

body, html{
width: 100%;

I searched Google countless times for a solution, and I could not find an answer. Finally, I gave up and settled for a different solution which I will discuss in a later post. However, while I was trying to solve another problem, I realized what was missing from one of my previous attempts. I only needed to adjust the padding and margin to 0 for the html and body elements.