Marion Dorsett's FigmentThinking.com http://www.figmentthinking.com Learn how to write better code. Simple techniques to produce faster results and save you time. Thu, 25 Mar 2010 19:04:54 +0000 en hourly 1 http://wordpress.org/?v=3.0 figmentthinking/zYJHhttp://feedburner.google.com How To See Your Hidden Content In Dreamweaver http://www.figmentthinking.com/2010/03/25/how-to-see-your-hidden-content-in-dreamweaver/ http://www.figmentthinking.com/2010/03/25/how-to-see-your-hidden-content-in-dreamweaver/#comments Thu, 25 Mar 2010 19:04:16 +0000 marion http://www.figmentthinking.com/?p=292
Here’s a simple little trick to allow you to see your hidden content on your web pages from your WYSIWYG editor. Setup the file to use jQuery, and then add a little code snippet like this: 1 2 3 4 5 6 7 8 <script type="text/javascript"> // <![CDATA[ $('.displayNone').each(function(e) { $(this).attr('style', 'display:none;'); }); // ]]> [...]]]>

Here’s a simple little trick to allow you to see your hidden content on your web pages from your WYSIWYG editor.

Setup the file to use jQuery, and then add a little code snippet like this:

1
2
3
4
5
6
7
8

<script type="text/javascript">
// <![CDATA[
$('.displayNone').each(function(e)
{
    $(this).attr('style', 'display:none;');
});
// ]]>
</script>

This will then look for each element that has the class=”displayNone” and add the style attribute with `display:none` to it, accomplishing the task of hiding all the elements you want hidden on your page. WYSIWYG editor like Dreamweaver won’t render the JavaScript and you can still see the content and edit the copy as needed quite easily.

]]> http://www.figmentthinking.com/2010/03/25/how-to-see-your-hidden-content-in-dreamweaver/feed/ 1 Include JavaScript Files with JavaScript http://www.figmentthinking.com/2010/01/14/including-javascript-files-with-javascript/ http://www.figmentthinking.com/2010/01/14/including-javascript-files-with-javascript/#comments Thu, 14 Jan 2010 06:02:32 +0000 marion http://www.figmentthinking.com/?p=275
As always, I’m constantly looking for ways to speed up my coding, to keep files scalable and manageable. Here’s a tip that will let you `import` your external JavaScript files much like you would `import` your external CSS files (, but that’s different post.) No, we can’t literally import our JavaScript like CSS, but the [...]]]>

As always, I’m constantly looking for ways to speed up my coding, to keep files scalable and manageable. Here’s a tip that will let you `import` your external JavaScript files much like you would `import` your external CSS files (, but that’s different post.)

No, we can’t literally import our JavaScript like CSS, but the concept is the same. We can link to one JavaScript file and have it include additional JavaScript files for us, and here’s how we do that.

Create a file called `import.js`, and call the import.js file as your first <script> tag in the <head>. Copy the code below and paste it inside of the import.js file.

1
2
3
4
5
6
7
8
9
10
11
12

var incScripts = new Array('ft_validate.js','swfobject.js','jquery.js');
var allScripts = document.getElementsByTagName('script');
for(s=0; s<=(allScripts.length-1); s++)
{
	var scriptPath = allScripts[s]['src'];
	if(scriptPath.indexOf('import.js') >= 0)
	{
		scriptURI = scriptPath.replace(/import.js/gi, '');
		for(i=0;i<=(incScripts.length-1); i++) { document.write('<script type="text/javascript" src="' + scriptURI + incScripts[i] + '"></scr' + 'ipt>'); }
		break;
	}
}

On line 1 change the JavaScript file names to those you want to include in the web page using our new import.js file. These files are assumed to be in the same folder as import.js.

Note: If you want to include a JavaScript file in another folder just make sure you add the missing path data with the file name relative to the location of the import.js file. So if you need to include a file in the folder above your incScripts may have a value like this:

1

var incScripts = new Array('../ft_validate.js','swfobject.js','jquery.js');

I tested this in MSIE, Firefox, Chrome & Safari (all windows), and didn’t have any problems w/ any of the browsers.

]]> http://www.figmentthinking.com/2010/01/14/including-javascript-files-with-javascript/feed/ 0 Walter Zorn’s ToolTip with a JQuery Twist http://www.figmentthinking.com/2009/12/08/walter-zorns-tooltip-with-a-jquery-twist/ http://www.figmentthinking.com/2009/12/08/walter-zorns-tooltip-with-a-jquery-twist/#comments Tue, 08 Dec 2009 13:33:30 +0000 marion http://www.figmentthinking.com/?p=248
If you’ve ever done a search on Google for “javascript tooltip“, you’ve probably come across Walter Zorn’s DHTML JavaScript Tooltips.  As I write this Walter’s web site comes up as the first result out of 1,490,000.  I don’t know Walter, and I doubt I’ll ever have the chance to actually meet him, but if you’re [...]]]>

If you’ve ever done a search on Google for “javascript tooltip“, you’ve probably come across Walter Zorn’s DHTML JavaScript Tooltips.  As I write this Walter’s web site comes up as the first result out of 1,490,000.  I don’t know Walter, and I doubt I’ll ever have the chance to actually meet him, but if you’re looking for a JavaScript tooltip, his script is the one to use.

Now for those of you saying, “I want one that works with JQuery!”, hold your horses.  No, Walter’s script isn’t a nifty little JQuery plugin, but that’s the best part, it doesn’t have to be.  The WZ Tooltip script can be used with or with out JQuery, and it works the same and just as good under either circumstance.   I know you’re saying stop rambling and tell me how to use it with JQuery….

Setup both JQuery and wz_tooltip according to their instructions, they’re both really clear on how to set them up, and make sure you have the tip_balloon extension to.   Save yourself some time, and confirm they’re both working properly, then take the following steps to marry JQuery with wz_tooltip.

Setup your tool tips as hidden <div>s, and give each one of them a unique ID.

<div id=”tip1″ style=”display: none;”>This is my tool tip copy.</div>

In your <a> tags that will trigger the tooltip, add the class attribute and the rel attribute:

class=”toolTip” rel=”tip1″

… the class attribute remains the same, but obviously, you’ll want to change the rel attribute to match the ID of the corresponding tooltip.

After you’ve added your tool

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script type="text/javascript">
// <![CDATA[
$(function(){
// Add wz_tooltips automatically
$(".toolTip").mouseover(function(e)
{
getTipById = $(this).attr('rel'); // Look for rel attribute first &lt;a&gt; tags only
if(!getTipById) {getTipById = $(this).attr('id').replace('_',''); } // use id attribute if it's not found any other tag, but must be prefixed with _ and match tool tip text
toolTipText = $("#" + getTipById).html(); // get html from id
if(toolTipText) { Tip(toolTipText, BALLOON, true); } // show tool tip if copy was found
});
// Untip Links automatically
$(".toolTip").mouseout(function(){ UnTip(); });
});
// ]]>
</script>

I know you’re thinking, “But I dont’ want to use this on an <a> tag!”  Then don’t.  Add the toolTip class and add an ID to the tag you want to use this with, just add an “_” underscore to the beginning of the ID, and you’re all set.

Thanks for the great script Walter.

]]> http://www.figmentthinking.com/2009/12/08/walter-zorns-tooltip-with-a-jquery-twist/feed/ 12 JQuery JavaScript Library http://www.figmentthinking.com/2009/04/02/jquery-javascript-library/ http://www.figmentthinking.com/2009/04/02/jquery-javascript-library/#comments Fri, 03 Apr 2009 04:11:27 +0000 marion http://www.figmentthinking.com/?p=245
Before I learned PHP, I used JavaScript a lot, and after learning PHP, I eased up on using JavaScript due to the amount of time it took for me to integrate the PHP output with the JavaScript.  As a result my web applications functioned, but without any flair.  Despite the dynamics added by PHP, they [...]]]>

Before I learned PHP, I used JavaScript a lot, and after learning PHP, I eased up on using JavaScript due to the amount of time it took for me to integrate the PHP output with the JavaScript.  As a result my web applications functioned, but without any flair.  Despite the dynamics added by PHP, they were still very much `static` in appearance.  JQuery however, has revived my use of JavaScript, and has lived up to it’s promise of `Write Less, Do Nore`.

My friend and colleague Andy Sowards came across the JQuery library and introduced me to it.  I’m now very much addicted to the genius behind the JQuery code libarary and I know use it on a daily basis.

The core JQuery code is adequate by itself, however, much like WordPress, JQuery’s real power lies is due to the plugins that are available for it.  If you need a JavaScript to perform a specific task for you, then chances are that someone has written a JQuery plugin for it, or it can be accomplished by using the core JQuery code itself.

Don’t take my word for it, take a look at JQuery for yourself, and see just how much more you can accomplish, and how much less you have to write to make it happen.

JQuery – Write Less, Do More

]]> http://www.figmentthinking.com/2009/04/02/jquery-javascript-library/feed/ 0 Process Your PHP Form POSTs Faster. http://www.figmentthinking.com/2008/04/23/process-your-php-form-posts-faster/ http://www.figmentthinking.com/2008/04/23/process-your-php-form-posts-faster/#comments Thu, 24 Apr 2008 03:33:39 +0000 marion http://www.figmentthinking.com/?p=43
The Scenario: You setup a contact form for people to send you email.  When the form is submitted, you want to assign each of the POST, GET or REQUEST values to a variable with the same name as the key. (You could do this for a number of reasons, but that’s a different topic.) The [...]]]>

The Scenario:

You setup a contact form for people to send you email.  When the form is submitted, you want to assign each of the POST, GET or REQUEST values to a variable with the same name as the key. (You could do this for a number of reasons, but that’s a different topic.)

The Problem:

Ugh! Doing this can be really time consuming, especially if you have a really long form.  Presonally, I would just use the array element vs. setting creating a new variable, but if you must, I suggest using a foreach() loop to create the variables for you.

The Solution:
Sample form:

1
2
3
4

<form>Email:
<input name="email" type="text" />
<input type="submit" />
</form>

When the form is submitted, use a loop and a variable variable to do the job for you.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php
if(is_array($_POST))
{
    foreach($_POST as $key => $value)
    {
        $$key = $value; // create variable name from key  
 
        /*
        Assuming `email` was the key, the above would
        create a new variable called $email
        */
    } // end foreach
} // end if
# Process your code here calling each new var
echo $email;
?>
]]> http://www.figmentthinking.com/2008/04/23/process-your-php-form-posts-faster/feed/ 5 The Power of CSS For Design http://www.figmentthinking.com/2007/12/20/the-power-of-css-for-design/ http://www.figmentthinking.com/2007/12/20/the-power-of-css-for-design/#comments Fri, 21 Dec 2007 04:51:59 +0000 marion http://www.figmentthinking.com/web-development/the-power-of-css-for-design/
By trade I’m not a designer, I’m a programmer. There is a definite dichotomy between programming and design, however, the design layout still needs to be coded in a logical manner to make it scalable for easier maintenance in the future. Simply put, the more complex the design, the more time and care needs to [...]]]>

By trade I’m not a designer, I’m a programmer. There is a definite dichotomy between programming and design, however, the design layout still needs to be coded in a logical manner to make it scalable for easier maintenance in the future. Simply put, the more complex the design, the more time and care needs to be put into the planning of the design, but it doesn’t mean that the code has to be more complicated.

For those of you who may be eager to “think” ahead and think I’m about to rant on using pure CSS for page layout and tell you to stop using tables, you’re wrong. If you want to use tables, or CSS to layout your pages, then by all means do so, but what ever method you choose to layout your page designs, keep in mind that CSS if very powerful and to overlook it can be costly, especially if you’re trading time for money.

Let’s take a simple concept I want to make a web site, but it will have 3 distinct sections, we’ll call them Alpha, Beta and Cappa. I want a cohesive look and feel for each section, but I want each section to be unique and easily identifiable when viewing the different pages. Alpha will be red, Beta will be blue and Cappa, green.

What I’ve experienced is that the design adept will set out to build 3 templates based on the same code, but each will define the color base for the 3 sections of the site. AHHHHH! Why? Just in case you don’t understand the question, I’ll make it more wordy… Why would you want to build 3 templates instead of building 1 template and 3 style sheets?

Let’s have a quick review of what CSS is and how it works. “Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.’,as quoted by the W3C [http://www.w3.org/Style/CSS/] Notice in the W3C’s example the second thing they mention is color.

Logical thought no. 1: Create a different style sheet for each color. Sticking with our example we can create a style sheet for red, blue and green.

Will will also need to address the styles for fonts, spacing and etc, also mentioned in the W3C’s statement of CSS. In the vein of “Work smarter not harder.”, we need to determine which section of our website will have the most pages. Because I’m writing the article, I say Alpha will have the most pages, and so we’ll declare that red will be our default color scheme.

Logical thought no. 2: To ensure that all pages will have the proper design, style and format, our default style sheet will assume that every page is going to be red. All pages in Beta will have the blue style sheet added to it, and all in Cappa will have the green style sheet applied to it.

From here on out, the logic starts to become design specific, and you’ll simply have to do your best. Whether you decide to go with tables or a pure CSS layout, what ever you decide, don’t stop thinking about how you can improve and reduce your work load.

This is where we separate the “Ah-Ha!”‘s from the “huh”‘s. If you understand CSS, and I’ve conveyed my thoughts clearly, you should be able to understand exactly what needs to happen. You may not fully understand or know how, but you should be able to see the bigger picture and the power of CSS. If you’re completely lost and clueless, either I’ve done a horrible job of conveying my thoughts or you simply don’t understand the power of css.

Here’s the example site that I just laid out above:

http://www.figmentthinking.com/the-power-of-css/

Watch what happens when you switch between the different links, and remember that this each page has the exact same code, just different style sheets.

]]> http://www.figmentthinking.com/2007/12/20/the-power-of-css-for-design/feed/ 0 Script.aculo.us and TinyMCE Incompatibility Solution http://www.figmentthinking.com/2007/06/21/scriptaclous-and-tinymce-incompatibility-solution/ http://www.figmentthinking.com/2007/06/21/scriptaclous-and-tinymce-incompatibility-solution/#comments Thu, 21 Jun 2007 16:12:52 +0000 marion http://www.figmentthinking.com/scriptaclous-and-tinymce-incompatibility-solution/
I found that when I tried to use Script.aculo.us and TinyMCE together, that I lost 1 functionality of one of the two scripts on Firefox. The solution I found was to place the Script.aculo.us <script> tags directly below the <body> tag. 1 2 3 4 5 6 7 ... <script type="text/javascript"><!--mce:0--></script> <script type="text/javascript"><!--mce:1--></script>   <script [...]]]>

I found that when I tried to use Script.aculo.us and TinyMCE together, that I lost 1 functionality of one of the two scripts on Firefox. The solution I found was to place the Script.aculo.us <script> tags directly below the <body> tag.

1
2
3
4
5
6
7

...
<script type="text/javascript"><!--mce:0--></script>
<script type="text/javascript"><!--mce:1--></script>
 
<script src="scripts/prototype.js" type="text/javascript"><!--mce:2--></script>
<script src="scripts/scriptaculous.js" type="text/javascript"><!--mce:3--></script>
...
]]> http://www.figmentthinking.com/2007/06/21/scriptaclous-and-tinymce-incompatibility-solution/feed/ 2 Working With A PHP Configuration File http://www.figmentthinking.com/2007/03/18/working-with-a-php-configuration-file/ http://www.figmentthinking.com/2007/03/18/working-with-a-php-configuration-file/#comments Mon, 19 Mar 2007 04:36:17 +0000 marion http://www.figmentthinking.com/working-with-a-php-configuration-file/
TRUE or FALSE: “It’s easier to update one file or 10 files.” This statement is True. The concept of a configuration file is that it stores data in one location that any other file on the web site can access. The data that is stored in a configuration file can be unlimited, but usually contains [...]]]>

TRUE or FALSE: “It’s easier to update one file or 10 files.” This statement is True.

The concept of a configuration file is that it stores data in one location that any other file on the web site can access. The data that is stored in a configuration file can be unlimited, but usually contains data such as by not limited to the following:

  • MySQL Database, Username and Password
  • Document Root Folder
  • To use Cookies or Sessions
  • Set time limit for Sessions
  • Custom variables for web applications
  • and etc.

Too many times I’ve assumed responsibility for a web site where the previous developer didn’t make use of a PHP configuration file. Often the most common things I find is that the MySQL information is on every single page, and in the even that we have to change the password, I have to either setup a config file, or change every file that’s using that information.

I opt for changing each page to use the configuration file and set the MySQL information in just one location. This makes my work a lot easier in the future. I can now set other information in this config file as well based on the site and it’s purpose.

The problem with having to change the same data in multiple files takes additional time and presents a larger margin for human error, where with a config file change can be made once, and human error can be corrected much quicker and easier.

]]> http://www.figmentthinking.com/2007/03/18/working-with-a-php-configuration-file/feed/ 0 Use As Many PHP Files As You Need http://www.figmentthinking.com/2007/03/12/use-as-many-php-files-as-you-need/ http://www.figmentthinking.com/2007/03/12/use-as-many-php-files-as-you-need/#comments Tue, 13 Mar 2007 00:52:01 +0000 marion http://www.figmentthinking.com/use-as-many-php-files-as-you-need/
I’m working with a friend – helping him with some dynamic coding – on a web site. The web site was put together by a different webmaster and it functions. The clients needs have changed over time, and changes are need to the site to comply with a few legal things (it deals with housing.) [...]]]>

I’m working with a friend – helping him with some dynamic coding – on a web site. The web site was put together by a different webmaster and it functions. The clients needs have changed over time, and changes are need to the site to comply with a few legal things (it deals with housing.) As I begin looking at the PHP code, I can tell the person who programmed it was very intelligent, but fell prey to some of the things that irritate me, and create problems when trying to update the code as I’m doing now.

First, they didn’t comment any of their PHP code, second they did make use of arrays, but did a poor job of it, and they posted all of the forms back to themselves, which brings me to the point of this post. Use more than one file if you have to, and don’t be afraid to do so. Here’s the problem with posting a form back to itself.

In this case we have a form that is sending the accumulated form data via email to the client for review. That data is also saved to a database so that it can be edited and tracked in the event that the user becomes a tenant. The problem is that since the form post to itself, the client receives and email, and the database gets a new row added every time the page is refreshed after the user fills it out.

When I saw this I recommended to my friend that over time we fix this. It turns out that there are revisions that need to be made to the form anyway, so as we fix the form, we’ll setup additional pages to process the form data, and redirect to the next part of the form ( there are 3 parts to the form.) This way when the user clicks the final submit button, the information will be emailed, collected in to the database and then the user will be taken to a thank you page. This process will keep the redundant & superfluous rows out of the clients inbox and database.

In this example, just by processing the form data with another, you reduce the irritation to the client and to yourself because they won’t keep asking… “Why do I get two or three emails for some people, and why do they show up that many times in the database?”

]]> http://www.figmentthinking.com/2007/03/12/use-as-many-php-files-as-you-need/feed/ 0 Commenting Your PHP Code http://www.figmentthinking.com/2007/03/12/commenting-your-php-code/ http://www.figmentthinking.com/2007/03/12/commenting-your-php-code/#comments Tue, 13 Mar 2007 00:21:41 +0000 marion http://www.figmentthinking.com/commenting-your-php-code/
About two years ago I started working for a local web firm. It was small, at that time there we’re only 3 of us, and I was the only PHP developer on staff. We had one client who used our services, combined with another web vendor. Normally we just spit out regular static HTML pages [...]]]>

About two years ago I started working for a local web firm. It was small, at that time there we’re only 3 of us, and I was the only PHP developer on staff. We had one client who used our services, combined with another web vendor. Normally we just spit out regular static HTML pages for them, until one day something happened, and we were passed a job that required editing some PHP code from the other vendor.

I honestly don’t remember who the client was, or what the PHP that I was editing was used for, all I remember is that it was the worst code I had ever come into contact with. Nothing made sense, the coding method was random, nothing was optimized, and I wanted to re-write the whole thing and start over. Time did not permit a total re-write, so I was stuck editing the nasty code that was before me. So as I made my edits, I started commenting the code, it went something like this…

1
2
3
4

# I don't know what these moron's where thinking here, but it should work like this...
{some php code}
# Were they smoking crack when they tried to set this up?
{some php code}

I fixed the PHP coding problems, uploaded the files and everything worked as the client requested. I thought nothing else about the project until my boss was on the phone with the other web vendor, trying to explain how I had fixed their code.

What I realized was that my boss was on the phone with the `morons` – as I had called them in my PHP comments – who wrote the horrible PHP code that frustrated me. My boss got off the phone and I asked him… so how mad were they? He didn’t know what I meant. I confessed to my having adding some rude comments in the code as I fixed it. He laughed, and said they never said a word about it.

The moral to this story is that if you comment your code, whether your a moron, or really smoking crack when you write it, chances are someone will better understand what you were thinking when you wrote it and have an easier time maintaining your code.

]]> http://www.figmentthinking.com/2007/03/12/commenting-your-php-code/feed/ 0