Tag Archives: html 5

Stop the backspace key from going to the previous page in your extjs app

Posted on by
1

If you have an app with just one view and there is even a small possibility that the user will open the app in a browser that they have been using to cruise around the web and the user will likely use the backspace key in your app then you should think about turning off the backspace == url -1 feature in most browsers.

If you actually want to use the backspace button for its intended purpose and you would like to map ext events to the browser history then a good choice might be using Ext.History, which you can learn about in depth by reading Ed Spencer’ blog post its use. (http://edspencer.net/2009/01/why-you-should-be-using-history-in-your.html )

Turning off the backspace key is pretty straight forward. You would just use Ext’s EventManager and create a listener to check for any keypress events that take place on the page. If the user is not in an input field then you would ignore the default action of the backspace button. Placing the code below right under your Ext.onReady … method will do the trick.

Ext.EventManager.addListener(Ext.getBody(), 'keydown', function(e){
        if(e.getTarget().type != 'text' && e.getKey() == '8' ){
            e.preventDefault();
        }
    });

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.

Using the HTML canvas tag, JSON, and Javascript to capture and regenerate drawing

Posted on by
Reply

OK so it’s been a few weeks since the last post, but I have been busy with the holidays, this has slowed my after work development time considerably, but luckily it has not cut into my reading time and I stumbled upon Thomas Bradly’s Signature Pad JQuery plugin here http://thomasjbradley.ca/lab/signature-pad .

The plugin uses the HTML5 Canvas tag and stores the strokes in JSON format so, yes they could be placed into a database, and redrawn later (I already have some great ideas for a mind map app!) The demo is here: http://thomasjbradley.ca/lab/signature-pad-accept.

I’ll have more this week, but I just wanted to get this out there now!

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

Pattern recognition app as an example of Sencha Animator

Posted on by
Reply

Recently I took a trip and met some of my relatives that live in Shanghai, they have a small child and the Glenn Doman pattern recognition cards are very popular in China, so I thought I would write an app and put them on the internet so that you can learn the numbers in Mandarin and our Western character set as well as pattern recognition. Truth be told I wanted to test drive Sencha’s animator as well so I got started and discovered the following bug (but since it’s a beta product it is to be expected), take a look at the series of dots below, figures 1 – 4 are done using the scale method, and appear flawless in the application, however, when translated to the browser they are quite blurry. Figure 5 uses pixel size as the setting and they difference is crystal clear characters, it appears that the scale feature is not working, that said, the product puts out webkit HTML 5 / CSS 3 code that runs in modern browsers and of course on all out mobile devices. The app is much easier to use than Flash, and without plugins there is really no reason to use Flash again. Look for the app in the market soon! If you don’t have an HTML 5 compatible browser then your’e out of luck!

The Sencha Animator Page

A really fuzzy 4 using the scale in Sencha Animator

A really clear 5 using a pixel size instead of scale