Marion Dorsett's FigmentThinking.com » JavaScript 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 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 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