I'm not sure of what other factors played a role (the fact that the element was in a absolute positioned container, or that the immediate container to the flash element was in a float) but I had the call to the swfobject javascript in the BODY tags of the html (not within the head tags). This was apparently causing Firefox to not display the flash. Simply moving the swfobject javascript code within the head tags of the html instantly fixed the problem.

I know I've used swfobject inside the body before – so I'm sure there's something else that contributed to the problem.

Related posts:

1. Multi-Row Carousel and Image Loader with JQuery A recent project I've been working on involved a portfolio...

Related posts brought to you by Yet Another Related Posts Plugin.

<input type="image" SRC="blahButton.gif" ALT="blah" name="blah" id="blah" value="blah" />

Which works fine when simply submitting the form when there's ONE button. But on one page I had TWO buttons. The form would submit to itself, and then depending on which button was clicked, I would handle the form as appropriate. Worked fine in firefox – nothing happened in IE. I found this page in a search.

What I had been doing was simply (in php)

if (isset($_POST["blah"])) {
//do stuff
} else if (isset($_POST["blahblah"])) {
//do different stuff
}

What fixed the problem was changing that code to this:

if (isset($_POST["blah_x"])) {
//do stuff
} else if (isset($_POST["blahblah_x"])) {
//do different stuff
}

Now my form works…

Related posts:

1. Multi-Row Carousel and Image Loader with JQuery A recent project I've been working on involved a portfolio...
2. Wordpress 2.8 Issues In case you hadn't heard (and if you're using wordpress,...
3. Striping IMG tags from the_content in WordPress (and how to fudge page excerpts) Background: For a site I was working on, I was...

Related posts brought to you by Yet Another Related Posts Plugin.

I was asked to create a "look up" tool that would sort of "translate" one piece of text to another. The user would enter in the first piece of text, and then they'd be given the "value". Oh, and this list updates every few months or so.

At first I started looking into creating a database, and writing a script that would update that database – problem was that creating and accessing a database for this project was going to be time consuming and difficult. A server-side script would have been the best solution under the circumstances. A few hours this morning searching around turned up this "dictionary" script.

I'm actually being given the the text and values in excel, so I just need to create a sort of "template" in excel that formats everything so it will look like the code – and then I just copy and paste it all into the ASP file.

So here's kind of what I have in my file:

SET TextToNumber=CreateObject("Scripting.Dictionary")
TextToNumber.Add "name", "292949"
TextToNumber.Add "date", "123414"
etc. etc…

Then my form looks like this:

<form name="textlookup" action="lookup.asp" method="post">
Text: <input type="text" name="text" value="" /><br>
<input type="submit" name="submit" value="Look Up Text Number" /></form>
Text: <% Response.Write(Request.Form("text")) %><br>
Number: <%
TextValue=Request.Form("text")
NumberValue=TextToNumber(TextValue)
Response.Write(NumberValue)
%>

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

echo $variable == 'value' ? 'print if true' : 'print if false';

Related posts:

1. Simple Shortcode for Line Breaks One kind of funny thing with WordPress is that entering...
2. Conditionally change path to HTTPS One of my clients had set it up so that...

Related posts brought to you by Yet Another Related Posts Plugin.

Using "break" in the middle of a while loop will break the loop entirely. (no more looping)

So this code

<?php
$i = 0;
while ($i < 5) {
$i++;
if ($i%2) {
echo "value = " .$i . " – inside if<br>";
continue;
}
echo "value = " .$i . " – outside if<br>";
}
?>

Will produce this:
value = 1 – inside if
value = 2 – outside if
value = 3 – inside if
value = 4 – outside if
value = 5 – inside if

Where as this

<?php
$i = 0;
while ($i < 5) {
$i++;
if ($i%2) {
echo "value = " .$i . " – inside if<br>";
break;
}
echo "value = " .$i . " – outside if<br>";
}
?>

Will produce this:
value = 1 – inside if

See more about while loops here.

Related posts:

1. Playing with Post Attachments I've been doing a ton of sites recently using WordPress...

Related posts brought to you by Yet Another Related Posts Plugin.

So I was working on a form. Used this method to create the form. Minimal HTML. Simple CSS. Started playing around with the :focus pseudo-class… and that's when I noticed my submit button started looking crummy. (From a usability perspective, I think there are some things that SHOULDN'T be over-styled. Scrollbars, Buttons. People are used to seeing these have the default look of their OS or Browser. Mess with them, and while you may think YOUR design of them looks pretty, they're probably not as usable anymore.)

So I went searching for a way to revert an element back to it's default, and basically discovered that it's not possible. But the search led me to this page where the suggestion was to simply use the <button></button> tag instead of <input type="button" /> W3C says you can even (however, the validate local html through the web developer extension in Firefox is giving me errors on all the attributes, even though they are within spec of the DTD.)

Button element?? Ok, add that to the list of things I probably should have known about but didn't! :-/

Related posts:

1. swfobject – flash doesn't load in Firefox Ran into a bizarre problem today using swfobject. A lot...

Related posts brought to you by Yet Another Related Posts Plugin.

Solution: actually, I came up with two ways of doing this and both use .htaccess to pull it off.

1) I'm a gif but really I'm a php script
This one is fairly straightfoward. I put my script in a seperate directory, (that doesn't actually include any images!) and renamed it from filename.php to filename.gif (or filename.jpg) (Yes, I know it's not really an image file. Hang in there)

Then, in the htaccess file for JUST THAT FOLDER! (similar to this trick) I added this:
AddType application/x-httpd-php .php .jpg .gif

FYI – in your php file (that now looks like a .gif or .jpg) make sure you don't have any headers/text echoed, and at the end of the file add this to your php code:
header('Content-Type: image/gif');
@readfile( '/SERVERPATH/TO/A/REAL/IMAGE/spacer.gif' );

You can then include the "script" as if it were an image file, it will run the script, but only display a gif to the user.

You can even pass it variables like filename.gif?somevariable=somevalue&anotervariable=anothervalue, but there's another way to do that too without the ugly URL.

2) I'm a gif that's actually a php script super-powered with rewrite
Ok, starting from the beginning. You have your script (filename.php) in a folder, add the following to the .htaccess file in that folder:
RewriteEngine On
RewriteBase /
RewriteRule ^(.*)/(.*)/spacer.gif /YOURFOLDER/FILENAME.php?somevar=$1&anothervar=$2 [QSA]

Before we continue, I must tell you that I dont' completely understand rewrite rules. There's a LOT of holes in my knowledge. So if you have a better way, PLEASE post it in the comments. I would LOVE to be able to understand what the hell I'm doing. LOL.

OK, moving along. Now you can call your script by actually calling that "phantom" spacer.gif, with the variables in the URL as if they're directories like this:

http://www.yourdomain.com/YOURFOLDER/somevalue/anothervalue/spacer.gif

Again, make sure you have this at the end of you php code in your filename.php:
header('Content-Type: image/gif');
@readfile( '/SERVERPATH/TO/A/REAL/IMAGE/spacer.gif' );

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

First of all – Christine wants a border around her photos: first a thick white one, then a one pixel black one. She had previously been doing that with photoshop, but I've suggested to her that it would be better to just do it in CSS… On my first try, I had tried wrapping the img tag in a number of divs – which not only didn't really work quite right, it added extra html that didn't need to be there. The answer was simple. Here is the CSS I used for the border (a class I add to the img tag) :

padding: 15px;
border: 1px solid #000;
background-color: #fff;

The other thing I was struggling with was another (should have been) simple issue. I simply wanted a block of text, 600px wide – centered on the page, but with the text flush left. The key I was missing was adding margin-right:auto; and margin-left:auto;. So here's the CSS for the outer div – and the div for the text block:

#content {
text-align: center;
}
#text{
width: 600px;
margin-right:auto;
margin-left:auto;
text-align:left;
}

The only way I was able to figure that out was from looking at the examples on Max Design: CSS Page Layouts

Related posts:

1. Wordpress 2.8 Issues In case you hadn't heard (and if you're using wordpress,...

Related posts brought to you by Yet Another Related Posts Plugin.

I needed to get the current page name and redirect to a different page if it was a certain name. (ie. 1.asp or 2.asp or… up to any two-digit + .asp)

First – to get the page name I used a script I found here:

Dim strURL, aryURL, pagename, objRegExp
strURL = Request.ServerVariables("SCRIPT_NAME")
aryURL = Split(strURL, "/", -1, 1)
pagename = aryURL(ubound(aryURL))

Then I check the page against a reg exp:

set objRegExp = new RegExp
objRegExp.Pattern = "^[0-9]{1,2}\.asp"
if objRegExp.Test(pagename) then
Response.Redirect("http://www.example.com/pageToRedirectTo.asp")
end if

(FYI – I'm trying to get a better grasp of regular expressions. I know they're useful, I just can't seem to wrap my head around them. We're still at the "it makes my eyes bleed" stage – which is also pretty much how I feel about ASP)

Related posts:

1. open_basedir restriction in effect error on WordPress page This is the second time I've run into this problem....
2. Striping IMG tags from the_content in WordPress (and how to fudge page excerpts) Background: For a site I was working on, I was...

Related posts brought to you by Yet Another Related Posts Plugin.

The powerful tool.
However in spite of its visible simplicity the JavaScript, when following the DOM specifications, is quite advanced and powerful tool providing all the required facilities for the creation of the complex solutions (client side) such as menus, trees, grids. These possibilities are actually reflecting the JavaScript’s power when it comes to the layers manipulations. Not the last reason for this power is OOP structure of the JavaScript programming language which was planned and implemented as an object oriented language!

Object model.
The JavaScript object is the entity with the properties that can be either other objects or variables. For example we have ‘Country_Italy’ object. We can assign the values to the properties of this object like this:

Country_Italy.Name="Italy";
Country_Italy.Capital="Rome";
Country_Italy.Area=301000;

However the 'Country_Italy' object itself can be the property of other object:

Europe.MostBeautifulCountry= Country_Italy;

JavaScript comes with the library of the built-in objects like 'Window', 'Math', 'String' and many others. But what makes the language really flexible is the ability of creating own custom objects. There are two possible methods for making custom objects in the JavaScript. First one is using of the direct initialization. The code in this case may look like this:

Country={Name:"France",Capital:"Paris",Government:{President:"Jacques Chirac"}};

We have created the Country object with the ‘Name’, ‘Capital’ and ‘Government’ properties and the 'Government' property is the object with own list of properties. We’ve also initialized these properties with the initial values. All is done in the one single string. The following construction creates and initializes the empty object:

Country={};

Another way to create objects in the JavaScript is defining the special function constructor for the object and initialization of the object with the 'new' operator. For example:

function Country(Name,Capital,Population){
this.Name=Name;
this.Capital=Capital;
this.Population=Population;
}

The 'Country' function is the constructor function. Now to create the object using this defined constructor we use the new operator:

Country_Italy=new Country("Italy","Rome",301000);

Just like in the previous example the property can be the object itself:

function Government(President){
this.President=President;
}
function Country(Name,Capital,Government){
this.Name=Name;
this.Capital=Capital;
this.Government=Government;
}
Government_France=new Government(“Jacques Chirac”); Country_France=new Country("France","Paris",Government_France);

Another advantage of the OOP fully implemented in the JavaScript is that the object can have the methods (not only properties). The methods are the functions described within the object scope that usually operate with object’s properties. The methods are described much like the properties:

function describeCountry(){
var desc="Name: "+this.Name+" Capital: "+ this.Capital+" Population: "+this.Population;
alert(desc);
}

In the above definition this operator provides an access to the object the described method belongs to.

Country_Italy.describeCountry=describeCountry;

The construction below fully repeats the above one:

Country_Italy.describeCountry=function(){
var desc="Name: "+this.Name+" Capital: "+ this.Capital+" Population: "+this.Population;
alert(desc);
}

The construction:

Country_Italy.describeCountry();

calls the 'describeCountry' method of the 'Country_Italy' object.

Prototypes based object oriented language.
Unlike some other popular OO languages (Java, C++) whose object model is based on the classes the object model of the JavaScript is based on the prototypes. The main difference between those two approaches is that in the prototype based language there’s no difference between the class and the class instance entities – you only deal with the objects.

The prototype (can be viewed as a template that defines the way initial object's properties values are assigned) is any object declared with the prototype operator. This object can be the parent of any newly created object and this is how the JavaScript supports inheritance – important OOP language characteristic. Let’s see our Country object:

function Country(Name,Capital,Population){
this.Name=Name;
this.Capital=Capital;
this.Population=Population;
}

Now let's declare 'Cn' – the 'Country' object prototype:

Cn=Country.prototype;
Cn.describeCountry=function(){
var desc="Name: "+this.Name+" Capital: "+ this.Capital+" Population: "+this.Population;
alert(desc);
}

Now we can call the 'describeCountry' method in any 'Country' descendant with only two strings of code:

Country_Italy=new Country("Italy","Rome",301000); Country_Italy.describeCountry();

Using this approach we can define in the prototype any number of the methods and properties. Defining methods and properties in the prototype rather then defining them directly for each object gives many advantages:

- You don’t have to define all required methods or properties any time the object is created. You define all the necessary methods and properties in the prototype and then all you have to do is to create the object.
- Makes your code more secure since you can keep all object definitions in the separate file
- Makes your code easier to read

Inheritance.
JavaScript also supports the inheritance mechanism that is the corner-stone of the OOP.
To show the easiness of the JavaScript inheritance mechanism let's review two already defined objects of ours 'Country' and 'Government' and one new object 'Parliament'. Let's assume that these objects have the following object hierarchy:

Constructor functions for these objects will look like these:

function Country(Name,Capital,Population){
this.Name=Name;
this.Capital=Capital;
this.Population=Population;
}
function Government(President){
this.President=President;
}
function Parliament(Speaker){
this.Speaker=Speaker;
}

Take a look at the 'Country' object prototype.

Cn=Country.prototype;
Cn.describeCountry=function(){
var desc=”Name: ”+this.Name+” Capital: ”+ this.Capital+” Population: “+this.Population;
alert(desc);
}

The following construction defines 'Country' as 'Government' prototype ('Government' inherits the 'Country'):

Government.prototype=new Country("France","Paris",59330000);

When 'Government' object is created it inherits all the 'Country' methods and properties. In other words, although 'describeCountry()' method is not defined for 'Government' object it is available since 'Country' object is defined as 'Government' prototype.

Government_France=new Government("Jacques Chirac");
Government_France.describeCountry();

New methods can also be defined for the 'Government_France' object:

Government_France.describeGovernment=function() {
alert('President: "+this.President);
}

Let’s complete the 'Parliament' object definitions.

Parliament.prototype=new Country("France","Paris",59330000);
Pn=Parliament.prototype;
Pn.describeParliament=function(){
alert("Speaker: "+this.Speaker);
}
Parliament_France=new Parliament("Jean-Louis Debre");

As you can see prototypes can also be modified for the inherited objects.

The above examples demonstrates elegance of the JavaScript OOP model which enables this easy to learn language perform variety of the complex tasks for the real life programming.

Real life example.
This very OOP approach was used in our company when we developed the CodeThat.Com’s set of the web controls. For example the ‘CodeThatCalendar’ is nothing but an object declared as:

function CodeThatCalendar(def) {
this.def = def;
this.links = {};
this.styles = {};
this.hideifr = true;
if (typeof(this.def.img_path)!="undefined") {
if (this.def.img_path.lastIndexOf("/")!=this.def.img_path.length-1) this.def.img_path=this.def.img_path+"/";
}
if (typeof(this.def.template_path)!="undefined") {
if (this.def.template_path.lastIndexOf("/")!=this.def.template_path.length-1) this.def.template_path=this.def.template_path+"/";
if (this.def.template_path.indexOf("/")!=0)
if (typeof(this.def.img_path)!="undefined" && this.def.img_path.indexOf("/")!=0) {
s=this.def.template_path;
a=s.split("/");
a.length=a.length-1;
t="";
for (i=0; i < a.length; i++){
t=t+"../";
}
this.img_path=t+this.def.img_path;
}
}
};
var CTc = CodeThatCalendar.prototype;
CTc.hide = function()
{
…
}
CTc.create = function(d,ctl) {
…
}

Various methods of the control work with the layers giving the control fancy look and feel and enabling user perform various actions the calendar supposed to do. For example, the below function sets the value of the HTML form control to the date user have selected. This is performed each time user clicks the calendar date.

function CodeThatSetDay(c,f,d,m,y,i,ifr) {
var doc;
var w = window.opener||this.parent;
if(w&&!i)
doc = w.document;
else
doc = document;
var e = CodeThatFind(doc,c);
if(Def(e))
{
e.value=CodeThatDateFormat(f,d,m,y);
if(e.fireEvent) e.fireEvent("onchange");
else {
if(e.onchange) e.onchange();
}
}
if(w&&!i)
{
if(Def(w) && Def(ifr))
{
var iframe = CodeThatFind(doc,ifr);
if(Def(iframe))
iframe.style.visibility = 'hidden';
if(ua.opera6)
{
var d = CodeThatFind(doc,"calendar_div");
if(Def(d))
d.style.visibility='hidden';
}
}
else
{
window.close();
}
}
};

(The examples of CodeThatCalendar functions are not fully functional. They are listed here for illustrative purposes).
As you can see JavaScript is indeed powerful and user friendly programming language with many abilities which help to create really complex and interesting solutions. Since the DOM model is supported by majority of modern browsers you can be sure your solution will be accessible for the majority of users. Of course there's much more to learn in the JavaScript: events, DOM, layers, and the cross-browser portability is also not always that transparent but this is for another story or… several stories.

Author.
About the author: Sergey Zavadski is one of the core JavaScript developers at CodeThat.Com (http://www.codethat.com/) He has developed number of the scripts offered by the company and leads the customers support department.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.