Portland Web Development™

Script action at http://www.mooforum.net/scripts12/textbox-moo-t2427.html

Hello Everyone,
This is my first release of an open source project ever so you’ll have to fill me in on what you need to clarify how to use TextBoxMoo.0

What is it?
TextBoxMoo.0 is a Class that replaces all text editing nodes, TextBox and TextArea-Less typing on a web page, type text using the DOM to create and style the text you are typing vs. a text box/text area browser controls.

How mature is it?
Not even a fetus yet, it’s actually more like an embryo waiting to be attacked by well.. (let’s not get weird) developers.

Demo?
Yes, http://www.portlandwebdev.com/charlen.php
Go there and just start typing. When you click save page, it will save to http://www.portlandwebdev.com/savepage.php
Check out your changes on that page.

Possibilities:
More powerful controls that are not reliant on inserting a perfectly styled and dimensioned text box only to let the user input some text and then take that value to insert it back… uuggghhH!!!!

Less complicated CMS’.

Less dependency on archaic text controls!

If you find it impossible to get certain items to lay on top of each other in a predictable way, you can always fall back on creating the element further down in your code and absolutely position it wherever you please. There are a few tricks to use in different design layouts, which I will discuss.

if you are using this in a centered div then automatically you are probably thinking this will not work because you must specify top or bottom and left or right parameters. Wrong! Just absolutely position the element, do not specify top; right; bottom; or left parameters, and instead, specify margins! This way the element will move along with your centered div layout as the window is resized or opened in resolutions different from the developer’s machine.

If you have a left justified web site that does not move when the window is resized then forget the margins and only specify that the element is absolutely positioned. That should bring it right to the top.

If many absolutely positioned elements are on top of each other and you want them arranged in a different order, z-index isn’t always the most reliable (especially in ie6), so all you have to do is move the code for the element further down in the page than the element you want behind it, absolutely position them and set the margins, BAM! Problem solved!

Hopefully this will help you if you are pulling your hair out on cross-browser issues. Enjoy yourself!

When most people want to execute javascript from a piece of text they usually use the tag. But they dont want the link to go anywhere so they use a the number symbol # in the href attribute to specify that nothing happens when it’s clicked. That is what in some web applications you will notice the address bar contains a number symbol # at the end ie. portlandwebdev.com/here.php#. This is the improper use of the anchor functionality and if you have a page that scrolls vertically you will notice some unexpected scrolling or jumping when clicking on links that have number symbol # hrefs specified. Instead of trying to get a pointer using this buggy technique, just use css to force the cursor on mouseover.

There are several great rants out there and I will not attempt to top them but in short, PCI Compliance is a scam by the credit card companies to boost the image/price of thier “Secure Seal” that you put on your site stating that the transaction you are about to make is secure. That is laughable when the payment processing companies THEMSELVES are being hacked EASILY because THEY DON’T USE ENCRYPTION! Man this angers me.  Just read it for yourself:  http://redtape.msnbc.com/2009/01/credit-card-hac.html

Anyway, I have listed the PCI Compliance issues I’ve seen and have simple solutions for them. Some of them you can just talk your way out of by submitting a false positive with an answer they can’t really deny or confirm.  Examples given below:

#1  Security warning found on port/service “http (80/tcp)”

Plugin “http TRACE XSS attack”
Category “CGI abuses : XSS”
Priority Ranking “Medium Priority” Synopsis : Debugging functions are enabled on the remote web server. Description : The remote webserver supports the TRACE and/or TRACK methods. TRACE and TRACK are HTTP methods which are used to debug web server connections. In addition, it has been shown that servers supporting the TRACE method are subject to cross-site scripting attacks, dubbed XST for “Cross-Site Tracing”, when used in conjunction with various weaknesses in browsers. An attacker may use this flaw to trick your legitimate web users to give him their credentials.

A: Place this code in any htaccess folder in any directory that has one and have the Compliance test tell you it’s resolved, then the next time you run it, it’ll tell you it’s back.
RewriteEngine on
RewriteCond %{REQUEST_METHOD} ^(TRACE|TRACK)
RewriteRule .* - [F]

# 2 Security warning found on port/service “https (443/tcp)”

Plugin “Weak Supported SSL Ciphers Suites”
Category “General remote services (General)”
Priority Ranking “Medium Priority” Synopsis : The remote service supports the use of weak SSL ciphers. Description : The remote host supports the use of SSL ciphers that offer either weak encryption or no encryption at all.

A: Unfortunately this one needs to be solved by your host.

#3 Security warning found on port/service “ftp (21/tcp)”

Plugin “ProFTPD Command Truncation Cross-Site Request Forgery Vulnerability”
Category “File Transfer Protocol”
Priority Ranking “Medium Priority” Synopsis : The remote FTP server is prone to a cross-site request forgery attack. Description : The remote host is using ProFTPD, a free FTP server for Unix and Linux. The version of ProFTPD running on the remote host splits an overly long FTP command into a series of shorter ones and executes each in turn. If an attacker can trick a ProFTPD administrator into accessing a specially-formatted HTML link, he may be able to cause arbitrary FTP commands to be executed in the context of the affected application with the administrator’s privileges.

A: Simply explain that a your software is up to date and that a patch has been applied in your false positive submission.  I’ve never believed in lying but when someone is trying to bamboozle you, fight fire with fire.  I suppose it would be just as easy to update your version also.

#4 Security warning found on port/service “https (443/tcp)”

Plugin “Weak Supported SSL Ciphers Suites”
Category “General remote services (General)”
Priority Ranking “Medium Priority” Synopsis : The remote service supports the use of weak SSL ciphers. Description : The remote host supports the use of SSL ciphers that offer either weak encryption or no encryption at all.

#5 All other unescaped veriable problems.
A: I have found that most variable issues are midigated by using the mysql_real_escape_string function.  Basically, the way to beat these Input/Output “hacks” is to make sure that a user can not produce an error from your site by entering strange data. This DOES NOT mean a site’s customer or Credit Card infomation is vulnerable.

Cheers!

This is an extremely common question that is sometimes answered incorrectly.  Some will say to set at least two DIVs with the left-most DIV at a width of 50% and the right-most DIV with a negative margin that equals half of the right-most DIVs width. Though this does work, it is wrong.

Anyway, here’s the correct css code for a div with an id of ‘wrapper’.

Enjoy.

This is an improvement on a blog post by Zoe Gillenwater, so if you would like a more emotional (jk) experience reading as to why this is necessary, please read that.  Simply use this code:

This will place a scroll bar on the left for your entire site, which users are very use to. They will never notice. What they will notice, is the constant shifting when the scroll bar on the right comes and goes with long content pages. Cheers!

First off, if you don’t know, kerning is defining the space between two letters. Tracking is defining the space between all letters in a line. And finally, the em (pronounced as if you were to say the letter ‘m’, I was just saying E M for a while) space measurement is exactly that, it is the space taken up by the letter m in that particular font. It’s a very relative measurement.

Here’s a conversion table to help explain.

Seems like splitting hairs doesn’t it? I’ll explain.

If you have css code that specifies the letter spacing in px. Your letters will always be that many pixels apart from each other.

If you spicify a certain amount of em space, they will expand proportionally as the user makes the text bigger. So in theory, the page and text will look exactly the same no matter how big it is, assuming you are dynamically resizing your divs (or tables).

I personally prefer to use pixel measurements and restrict the user’s ability to re size the text on the page. Nevertheless, when interacting with design folks who are involved in predominantly print media, you’ll run into these and you’ll need to know how to apply them to the web.

If you are trying to set an image to display = ‘block’; or display = ‘none’; in IE when the default setting is none (you set the element to not display when the page loads), you are not going to be able to make it visible again. Wait..? Visible?!  Actually, that’s the answer, use visibility = ‘hidden’; and visibility = ‘visible’; and you will almost always get the effect you were looking for with the display property.

With the name “display”, it is sort of misleading but what the display property is actually doing is specifying to your browser what type of element the selected element is.  There are different kinds of elements, inline, block, etc. and they all have different behaviors and can have different properties applied to them in your browser.  Display can be used to convert elements from one type to another.  An inline element such as a list item <span>, which cannot be absolutely positioned can be converted to a ‘block’ element and positioned as if it were a div though, this is hardly ever necessary unless you are working with javascript effects libraries such as mootools or jQuery.

For a long time I have been avoiding transparent PNGs because of one browser that is, sadly, still one of the most widely used (as of now, October 2008). Of course I am talking about IE6, the maverick.

Recent project requirements forced me to find an answer to this problem.  I must not have looked very hard before, because this solution was not hard to find. The solution is at ie7-js and the implementation is even more staggeringly easy:

Wow! That’s easy! I, however, opted to download the ie8.js and blank.gif file directly to my client’s website for performance and reliability factors.  At any rate, it worked like a charm! That is, after I read a not-so-obvious part on the google-code page that says every picture you want changed needs to have a -trans suffix added to the filename in the img tag.

Other than that, I am very excited about the possibilities this advancement has brought to current and future projects. Enjoy!

http://www.efectorelativo.net/laboratory/viewer/

It’s very easy to install and edit. I had syncronize the fading of two elements simultaniously.  All I did was add property to the class like so:

Implementation looked something like this:

Pretty easy!