Category Archives: HTML Course

This is the right place if you are looking for basic HTMl help.

There are errors, damned errors and then there are the IE 80020101 errors.

Posted on by
Reply

These are the errors that follow the well laid out numerical error coding convention put in place right around the time the 2600 was the hot gaming machine. You can rest assured that somewhere in a nondescript office building someone knows the meaning of 80020101, for the seasoned programmers out there it’s almost as elusive as the hit album 0u812, remember the mystery, the assumptions, the summer of 88. If you haven’t seen it or can’t get your hands on IE8 here is what you are in for.

This error occurs in ext applications when you make an ajax request and the data that comes back is not exactly in the format that IE is looking for. In every case I have run into the code performs perfectly in Chrome and Firefox, so the development tools available in those environments will do little to help you out of this one.

As you can imagine that leaves a lot of possibilities so here are some things to look for when troubleshooting this particular error.

Are you loading external pages into your extjs panel? Not sure, take a look at your code for something like the following which is loading an external page into a panel:

Ext.getCmp('some_panel').load({
	url: '/some_external_page_with_code.cfm',
	text:'Loading...',
	scripts:true
});

In my instance, I noticed that the page in question contained a print page script that I picked from the internet that will pop up the print dialog, the code being below:

<script language=" javascript">
<!--//
  function printpage() {
  window.print();
  }
  //-->
</script>

Now I don’t know why the 

<!--//

was inserted into the script, but I do know that IE8 did not like the 

<!--//

or a coldfusion comment tag 

<!---

that was further down in the page. Once these comments were removed from the page that extjs was loading the error disappeared.

Now since this error is so generic it’s very likely that this was just luck, and there are other syntax mistakes in data that’s coming into your app via ajax calls that will throw this exception. If you run down any code that causes this in addition to comments in Ajax data returns then please post them here so there will be a central point for those looking for help.

A look at your most important design decision – font, and size

Posted on by
1

Let’s take a code break for a minute and discuss fonts, target audiences, and why a screen will never equal a piece of paper. When you are designing your pages, the choices that you make regarding fonts and font sizes are some of the most important. Why? First, computer screens by design are going to be harder on the eyes than paper, as paper reflects light, where computer screens emit light and are constantly being refreshed, this means that as a designer you should make every effort to ease the strain and make your site as readable as possible. Take a look at the image below:

The x-size, which is literally the size of the small x in the font family, where the point size is the distance from the top of the ascender to the bottom of the descender. This is the reason that some fonts just look bigger than others when you place them in your code using the same point size in your CSS. For a good example take a look below:

Hey I’m 12 point arial, how do I look?
Hey I’m 12 point times new roman, I know I was designed for newspapers, but how do I look on the screen?
Hey I’m 12 point veranda, how do I look on the screen?
Hey I’m 12 point tahoma, how do I look on the screen?

There you have it, not only does size matter, font style plays an equally important role, but that’s not all …

Notice that some of the fonts are Serif, with the small lines on the ends of the characters, and some are Sans Serif, without the decoration. So what does this mean to the programmer? For the web designer, it’s easier on your audience if you go with a sans-serif font style, which is the opposite of traditional printing. The reason is the dots per inch or dpi on a screen is much less than the dpi when printing, the fonts seem to scale better.

Everything you need to know about web standards and design in 3 minutes!

Posted on by
Reply

I am working on updating some slides for an upcoming HTML course and stumbled across this brilliant video that explains everything you need to know in about three minutes, including why you need to use a standards based approach to design.

Here’s the lyrics

Your site design is the first thing people see
it should be reflective of you and the industry
easy to look at with a nice navigation
when you can’t find what you want it causes frustration
a clear Call to action to increase the temptation
use appealing graphics they create motivation
if you have animation
use with moderation
cause search engines can’t index the information
display the logos of all your associations
highlight your contact info that’s an obligation
create a clean design you can use some decoration
but to try to prevent any client hesitation
every page that they click should provide and explanation
should be easy to understand like having a conversation
when you design the style go ahead and use your imagination
but make sure you use correct color combinations
do some investigation, look at other organizations
but don’t duplicate or you might face a litigation
design done, congratulations but it’s time to start construction
follow these instructions when you move into production
your photoshop functions then slice that design
do your layout with divs make sure that it’s aligned
please don’t use tables even though they work fine
when it come to indexing they give searches a hard time
make it easy for the spiders to crawl what you provide
remove font type, font color and font size
no background colors, keep your coding real neat,
tag your look and feel on a separate style sheet
better results with xml and css
now you making progress, a lil closer to success
describe your doctype so the browser can relate
make sure you do it great or it won’t validate
check in all browsers, I do it directly
gotta make sure that it renders correctly
some use IE, some others use Flock
some use AOL, I use Firefox
title everything including links and images
don’t use italics, use emphasis
don’t use bold, please use strong
if you use bold that’s old and wrong
when you use CSS, you page will load quicker
client satisfied like they eating on a snicker
they stuck on your page like you made it with a sticker
and then they convert now that’s the real kicker
make you a lil richer, your site a lil slicker
design and code right man I hope you get the picture
what I’m telling you is true man it should be a scripture
if it’s built right you’ll be the pick of the litter
everyone will want to follow you like twitter
competition will get bitter and you’ll shine like glitter
if you trying to grow your company will get bigger
design and code right man can you get with it

Building a menu on top of Jon Rohan’s Triangles in CSS post with facebook style callouts using javascript for animation

Posted on by
Reply

Jon Rohan posted an excellent article on the ability to create triangles and other shapes simply by manipulating the borders of div tags, as it turns out it’s not that hard to put a callout effect on any plain rectangular div without using images. The original post is here (http://jonrohan.me/guide/css/creating-triangles-in-css/) . So what about taking this a bit farther and turning it into a fully fledged menu system where the selected element has the callout, and on rollover the callout follows your mouse up and down the menu? Take a look at the sample below, which will be explained in this post.

Try it out here: http://www.learnsomethings.com/testsomethings/rollover_tabs.html

First, there is the css that will give us the tabs, triangles, which when placed almost over one another form the callout, and the content boxes.

 
	body{
		font-family:Arial, Helvetica, sans-serif;
	}
	.chat-bubble:hover{
		cursor:pointer;
	}
	.chat-bubble {
	  background-color:#EDEDED;
	  border:1px solid #666666;
	  font-size:14px;
	  float:left;
	  line-height:1.3em;
	  margin:10px auto;
	  padding:5px;
	  
	  position:relative;
	  text-align:center;
	  width:120px;
	  -moz-border-radius:10px;
	  -webkit-border-radius:10px;
	  -moz-box-shadow:0 0 5px #888888;
	  -webkit-box-shadow:0 0 5px #888888;
	}
	
	.chat-bubble-arrow-border {
	  border-color: #666666 transparent transparent transparent;
	  border-style: solid;
	  border-width: 10px;
	  height:0;
	  visibility:hidden;
	  width:0;
	  position:absolute;
	  bottom:-21px;
	  left:30px;
	}
	
	.chat-bubble-arrow {
	  border-color: #2e6a8e transparent transparent transparent;
	  border-style: solid;
	  border-width: 10px;
	  visibility:hidden;
	  height:0;
	  width:0;
	  position:absolute;
	  bottom:-19px;
	  left:30px;
	}
	#content{
	display:block;
	width:500px;
	float:left;
	}
	
	.content_box{
	  width:100%;
	  height:300px;
	  border:1px solid #060;
	  float:left;
	}

Now, inside the tags of your page you will need to place the

tags that will make up the tab boxes, as well as the content panels that will be switched out on mouseover using javascript.

<body onload="javascript:hover('1');">
    	<div id="tab_panel">
            <div class="chat-bubble" name="1" id="1" onmouseover="javascript:hover(this.id)"  style="padding-left:10px;">
                Tab 1
              <div class="chat-bubble-arrow-border" id="1_tri" ></div>
              <div class="chat-bubble-arrow" 		id="1_arr" ></div>
            </div>
            <div class="chat-bubble" name="2" id="2" onmouseover="javascript:hover(this.id)" style="border-left:none">
                Tab 2
              <div class="chat-bubble-arrow-border" id="2_tri" ></div>
              <div class="chat-bubble-arrow"		id="2_arr" ></div>
            </div>
            <div class="chat-bubble" name="3" id="3" onmouseover="javascript:hover(this.id)" style="border-left:none;">
                Tab 3
              <div class="chat-bubble-arrow-border" id="3_tri"  ></div>
              <div class="chat-bubble-arrow" 		id="3_arr"  > </div>
            </div>
            <div class="chat-bubble" name="4" id="4" onmouseover="javascript:hover(this.id)" style="border-right:1px solid #666666;border-left:none;">
                Tab 4
             <div class="chat-bubble-arrow-border"  id="4_tri"  ></div>
              <div class="chat-bubble-arrow"  		id="4_arr"  ></div>
           </div>
       </div>
       <br clear="all"/>
       <div id="content">
       		<div id="content_1" name="content_1" class="content_box" style="display: none;background-color: #E5872C">
            	Page 1
            </div>
            <div id="content_2"  name="content_2" class="content_box" style="display: none; background-color: #3E4E6C">
            	Page 2
            </div>
            <div id="content_3"  name="content_3" class="content_box" style="display: none; background-color: #92CF00">
            	Page 3
            </div>
            <div id="content_4"  name="content_4" class="content_box" style="display: none; background-color:#333">
                Page 4
            </div>
       </div>
           
           
</body>

Finally, there is a script block that you need to put in the of your page right under the

tag that will control the changing of the tabs, callout triangles, and the main content.

<script>
	
	var last_hover_id = 1;
	
	function hover(id){
		
		var tri_obj= document.getElementById(last_hover_id + '_tri');
			tri_obj.style.visibility = "hidden";
		var arr_obj= document.getElementById(last_hover_id + '_arr');
			arr_obj.style.visibility = "hidden";
		
		document.getElementById(last_hover_id).style.backgroundColor = "#EDEDED";
		document.getElementById(last_hover_id).style.color = "#000";
		
		document.getElementById('content_' + last_hover_id).style.display = 'none';
		document.getElementById('content_' + id).style.display = 'block';
		
		var tri_obj= document.getElementById( id + '_tri');
			tri_obj.style.visibility = "visible";
	 	var arr_obj= document.getElementById( id + '_arr');
			arr_obj.style.visibility = "visible";	
		
		document.getElementById(id).style.backgroundColor = "#2e6a8e";
		document.getElementById(id).style.color = "#FFF";
		
		last_hover_id = id;
	}

</script>

You can see that the names of the content blocks as well as the id's of the tab boxes are no coincidence, this only works if the content boxes remain "content_x" and the id of each tab box is a numerical number that matches the content box.

The full source is here: http://www.learnsomethings.com/testsomethings/rollover_tabs.html

Setting multiple selected values in a html selectbox using javascript

Posted on by
Reply

I couldn’t find any really good answers to this question as most of the results when looking for this pertained to reading the multiple values versus setting the multiple values, so I thought I should post this piece of code. Assuming your multiple values are coming out of the database in the form of a comma delimited string [ 7,8,78,55 ] the following code will set the values using javascript.

// This is a great function I found @ 
// http://stackoverflow.com/questions/143847/best-way-to-find-an-item-in-a-javascript-array
// for determining
// if a value exists in an array.

function include(arr, obj) {  
	for(var i=0; i<arr.length; i++) {    
	if (arr[i] == obj) return true;   } 
}

var selections =  some_data_from_db; // this would be the data from the database
var selectedValues = new Array();
var your_sb      =  document.getElementById('id_of_sb');					
//if selections has a length then there is more than one category that was selected.
//there is a difference in how you have to handle multiple vs. sigle values selected.
if(selections.length){
	selectedValues = selections.split(',');
	for ( i = 0; i < your_sb.options.length - 1; i++){			
    if ( include(selectedValues, your_sb.options[i].value)){
	          your_sb .options[i].selected = true;  
	    } else {  
	         your_sb .options[i].selected = false;  							
	   }  
	} // end for loop
} else {	// this would be a single value									
        your_sb .value = some_data_from_db;							
}