This is another post for my ‘Annoying Stuff’ collection and this one is very, so very annoying…
The problem is that jQuery UI, supports forms in dialogs but the problem is that a user can’t hit ‘Enter’ to submit the form, it will break everything, a user has to actually hit the ‘Submit’ (or whatever) button manually. This make the whole thing completely useless unless you make some changes that are basically tweaking the internals of jQuery UI, which is ugly and can break if they change things around but sadly this is the only solution for now.
Assuming that you use the same syntax jQuery UI suggests to create your form, the fix is something like this:
$('.dialog').find('input').keypress(function(e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$(this).parent().parent().parent().parent().find('.ui-dialog-buttonpane').find('button:first').click(); /* Assuming the first one is the action button */
return false;
}
});You might have to modify it a tiny bit, if that’s the case, you most likely have to change the part $(‘.dialog’) so that it selects the right container that wraps the form…
jQuery UI Dialog And The Enter – Return Key Problem
When you have nested elements and you add an onMouseOut event handler to the parent element, browsers trigger onMouseOut event when mouse pointer hovers it’s child elements.
While this is a standard behaviour, for one project I needed to write a code to override this behaviour.
With this code, when you mouse over the child elements, onMouseOut event will be ignored.
You can download this code here:
http://images.code-head.com/code/javascript/fixOnMouseOut.zip
You can test it here:
http://images.code-head.com/code/javascript/fixOnMouseOuttest.html
This code is cross browser and here is how to use it:
<script language="javascript" type="text/javascript" src="fixOnMouseOut.js"> </script>
<div onMouseOut="fixOnMouseOut(this, event, 'JavaScript Code');">
So many child elements
</div>
markItUp is a cool little text editor and the nice thing about it is that it’s very simple and light weight.
I had some layout issues in Gecko and Webkit browsers and the way to fix it is this:
1 – Go to:
/markitup/skins/markitup
2 – Open style.css and find:
.markItUpEditor {
font:12px 'Courier New', Courier, monospace;
padding:5px 5px 5px 35px;
border:3px solid #3C769D;
width:643px;
height:320px;
background-image:url(images/bg-editor.png);
background-repeat:no-repeat;
clear:both; display:block;
line-height:18px;
overflow:auto;
}3 – Replace the it it with:
.markItUpEditor {
font:12px 'Courier New', Courier, monospace;
padding:5px;
border:1px solid #AAAAAA;
width: 275px;
height: 150px;
line-height:18px;
overflow:auto;
}I hope this helps someone…
Fixing markItUp layout issues in some browsers…
I finally decided to release PML as an open source software. I developed this template engine for a project that unfortunately never happened using Python.
Here is a sample application using PML and Yahoo! Search API:
http://web-search.code-head.com/
You can download it here:
[D O W N L O A D]
The web search example is also included in the download.
PML was written to be fast, simple and compact. Here are some of it’s features:
1 – Template filters
2 – Output filters
3 – Template variable filters
4 – Template cache – default
5 – Bytecode cache – default
6 – Complete output buffer cache
7 – Garbage collection
8 – Output compression – GZIP
9 – A powerful, quick compiler
10 – Ability to add helpers easily
11 – Ability to add custom compiler tags
12 – Auto escaping your variables, even lists, dicts, and tuples
13 – Compile templates once until you edit them
And more.
I will write a tutorial in my next post.
PML – A Python template engine
I was looking for a nice and simple CSS tabs implementation and came across:
http://htmldog.com/articles/tabs/
While this was a nice solution, it didn’t support padding the tabs and when you did it didn’t look right in all the browsers so I had to modify it to this:
HTML side:
<div id="tab-nav">
<ul>
<li id="selected"><a href="#">1st tab</a></li>
<li><a href="#">2nd tab</a></li>
<li><a href="#">3rd tab</a></li>
</ul>
</div>
<div id="page-content">
Some content
</div>CSS side:
#tab-nav {
border:1px solid #FFFFFF; /* Stupid IE7 */
}
#tab-nav ul {
list-style-type:none;
padding:0px;
margin:0px;
}
#tab-nav li {
float:left;
border: solid;
border-width:1px 1px 0px 1px;
border-color:#666666;
margin:0px 0px 0px 10px;
background-color:#c9cde2;
}
#tab-nav a {
text-decoration:none;
padding:7px 10px 7px 10px;
color:#333333;
display:block;
}
#page-content {
border:1px solid;
border-color:#666666 #CCCCCC #CCCCCC #CCCCCC;
border-width:1px 2px 2px 1px;
clear:both;
padding:10px;
}
#tab-nav #selected {
position:relative;
top:1px;
background-color:#FFFFFF;
}And here is how this looks like:
Some content
CSS Tabs
You might know already that there are some issues with transparent GIFs but PNGs don’t have those issues.
The problem with transparent PNGs is that Internet Explorer doesn’t like them so much and gives them a funny background.
So here is the solution that works great:
http://homepage.ntlworld.com/bobosola/index.htm
How to fix transparent PNGs in Internet Explorer
Acid test is a test to identify problems web browsers have when rendering web pages.
There are 3 versions Acid Test 1, 2 and 3.
Acid2 should look like this:
But here is how Acid Test 2 works on my different browsers:
Google Chrome:
Firefox:
Opera:
Safari:
Retarded Internet Explorer 7:
!!!
Now, none of my browsers passed Acid Test 3!!!
It should look like this:
Google Chrome:
Firefox:
Opera:
Safari:
Retarded Internet Explorer 7:
Of all the browsers, all perform almost the same but only Internet Explorer is way off, I don’t know what the developer team who is in charge of Internet Explorer does at Microsoft every day. I’d say all of them deserve to be fired!!!
Of all the other browsers, I think Apple Webkit rendering engine is the best (Google Chrome and Apple Safari) which I think is another reason for Google to use it in their browser Chrome.
Apple Webkit is a state of the art and open source HTML rendering engine developed and released by Apple.
Here are the links to these tests:
Acid2
Acid3
Acid Test and different web browsers
1 – It was extremely easy to install.
2 – It looks like a solid product.
3 – It doesn’t crash like IE 8.
4 – It’s fast.
5 – It’s very smooth.
6 – Has spell checking built in. (Just right click on the words that are underlined…)
7 – It’s very simple and elegant looking.
8 – Has nice new JavaScript engine V8.
9 – Has a nice JavaScript console and debugger.
10 – It doesn’t take 3 seconds (15 million instruction) to open a new tab.
11 – When you right click on a link it says “Copy link address” not “Copy shortcut” 
I’m using Google Chrome to write this and it might be the end of IE horror for me 
(and yes I don’t like Firefox…)
I also noticed that Cnet news wrote this funny article:
http://news.cnet.com/8301-17939_109-10030522-2.html
In case the author doesn’t know (which I think they should, before they write for Cnet) that is Google’s general terms of services and applies to all of their products including Gmail:
https://www.google.com/accounts/TOS?loc=US&hl=en
My first impressions of Google Chrome
Now you can download a beta version here:
http://www.google.com/chrome/
I make web pages so I have to have all the possible browsers installed so I can check the pages I code in all of them and make sure they look the same.
So far I have Internet Explorer 7, Internet Explorer 6, Firefox, Opera, Safari and now Google Chrome!
It was a really easy and smooth installation and it even automatically imported my favourites from Internet Explorer.
Google Chrome; another browser for your browser arsenal!
Here is how to do it:
1 – Open your image
2 – On the top menu, go to Commands > Creative -> Fade Image
3 – A dialog box will open, choose the kind of fading effect that you want
4 – Click OK
5 – If you select your image, you will see a line with a dot and a rectangle on each side, hold the dot and move it around and experiment. Use the rectangle to move the whole effect around and the dot to resize it and change it’s direction.
Enjoy
Fading images with Fireworks
Back To Top
Back To Previous Page
Author Bio
Hamid Alipour is a partner in Codehead, LLP with his wife, Tess. Hamid speaks 12 markup and programming languages [Yes, 12: PHP, CSS, Ajax, JavaScript, HTML/XHTML, Java, Python, C/C++, ASP, Visual Basic, Scheme and Action Script]; has a penchant for solving the unsolvable; an affinity for clean, hand-written code and is a Zend Certified 
Services
Blog
Tools
About
Contact
Blog Home