JavaScript Forms Validation

Posted by Stefan on Dec 9, 2008 in Javascript

Ok I found this great web example on forms validation and just had to post it for later reference. That’s what blogs are for, right?

http://www.webcredible.co.uk/user-friendly-resources/dom-scripting/validate-forms-javascript.shtml

SilverStripe TinyMCE Media / Embed Movies How-to

Posted by Stefan on Dec 3, 2008 in Silverstripe CMS

Phew! I’ve just spent the best part of 3 hours figuring out how to add in media support for TinyMCE and SilverStripe CMS. I hope the following code helps others and if there’s any questions i’ll do my best to help.

Firstly we need to add the button to the TinyMCE. SilverStripe is setup to do this by linking in from a seperate file.

Edit /saphire/forms/HtmlEditorField.php
new HtmlEditorField_button(”mceMedia”,”media:media”,_t(’HtmlEditorField.MEDIA’, “Insert media”)),

Next we need to enable the backend TinyMCE code itself.

Edit /cms/javascript/tinymce.template.js
mode : “textareas”,
plugins : “contextmenu,table,emotions,media,paste”,

Now go to /admin/?flush=1 to flush the cache.

That’s it, you should have a media button on your TinyMCE toolbar which pops up and gives option to add in Flash, Quicktime, WMV etc.

Display background behind a floating element

Posted by Stefan on Nov 19, 2008 in CSS

Ok… so you setup a page with a blue background and float an object left, for example. You now see that the background colour on the float is white! Ruining the look of your page.

<div id=”contentBody”>
<div style=”float: left;”>Floated Content</div>
</div>

So how do we do it? Use the following hack:

#contentBody:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; } * html #contentBody { height: 1%;}

Using JQuery with Other Libraries

Posted by Stefan on Nov 19, 2008 in Javascript

I’ve just learend something very cool today. How to use JQuery with other libraries, in my case prototype.js.

The issue is where other libraries are using $ as the same shortcut, for example JQuery uses “$” as a shortcut for “JQuery”.

Here’s the workaround:

 <html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     jQuery.noConflict();

     // Put all your code in your document ready area
     jQuery(document).ready(function($){
       // Do jQuery stuff using $
       $("div").hide();
     });

     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>
 <body></body>
 </html>

For a full demo and explanation see: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Javascript Image Rotator

Posted by Stefan on Oct 4, 2008 in Javascript

Ever wanted to rotate through a bunch of images easily without having to use *cough* Flash? Well now you can by using the few lines of code below and a bit of JS (Javascript) trickery.

First we need to include the javascript files in to our webpage by putting the following 2 lines in to the <head>

function initRotator() {
dw_Rotator.setup(rotator1);
}

addLoadEvent(initRotator);

</script>
</head>

dw_event.js - The events to trigger the automatic scroller.
dw_rotator.js - The code which does the js image trickery.
var rotator1 - The image path, id (of the <img> coming next), rotate speed, and lastly the image array.

You can add as many images into the array as you want, just be aware of loading times on slower browsers.

Next we add the image into our web site. I prefer to wrap the image into a <div> to make it easier to move around and manage. As you can see the ID is “rotateImg” as specified in var rotator1. This means you could have for example var rotator2… name the id rotateImg2 and set the id of your next image to rotateImg2, thus giving you another rotating image block without too much hassle.

Download dw_rotator.js (Thanks to Sharon Paine & Dynamic Drive)
Download dw_event.js
View demo

Anti-Spam Mailto: Link

Posted by Stefan on Oct 2, 2008 in Javascript

Over the years the number of spammers has increased tremendously. By using the Javascript below you are able to use the equivelant of “<a href=”mailto:”>email</a>” without the worry of being spammed by the millions of spam bots cruising the inter-tweb.
<script type=”text/javascript”>
<!-
emailE=(’cont’ + ‘act’ + ‘@’ + ‘faith’ + ‘inme’ + ‘.co’ + ‘.uk’)
document.write(’<a href=”mailto:’ + emailE + ‘”>’ + emailE + ‘</a>’)
//->
</script>

Do you know of ways to fight the spam bots? Share it in the comments.

Javascript Image Rollover

Posted by Stefan on Sep 26, 2008 in Javascript

Put this code in the <head> to preload images.

loadImage2 = new Image();
loadImage2.src = “east1.gif”;
staticImage2 = new Image();
staticImage2.src = “east.gif”;

loadImage3 = new Image();
loadImage3.src = “south1.gif”;
staticImage3 = new Image();
staticImage3.src = “south.gif”;

loadImage4 = new Image();
loadImage4.src = “west1.gif”;
staticImage4 = new Image();
staticImage4.src = “west.gif”;

// End –>
</script>

Then use this code in the <body> to display the mouseovers.

Thumbs up for EditPlus

Posted by Stefan on Sep 20, 2008 in Utilities

www.editplus.com - PC HTML/CSS/PHP/ASP/XML Editing Software.

In the many years of web design and development I haven’t found a better HTML, CSS, etc, coding program for the PC. The inbuilt remote FTP features mean that I can work remotely on code without having to mess around re-uploading code after editing, which speeds up my work very much. EditPlus is a mere $35 for licensing, but if you want you can evaluate the software forever just by clicking the evaluate button on load.

The only fault I have found is that the remote FTP will sometimes give a timeout. I thought it was an issue with my servers to begin with but have since found that it is a common issue.

CSS Starting Template

Posted by Stefan on Sep 20, 2008 in CSS

As with the HTML, I have created a CSS template which may be of use. The idea is to clear everything back to default across all browsers by removing padding, margins and setting the fonts up properly.

* { margin:0; padding:0; }
body { font-family: "Trebuchet MS", Verdana, Helvetica, sans-serif; font-size: 100%; }
.access { display: none; }
.clear { clear: both; }
a { color: #000; }

/** Structure **/
#container { width: 790px; margin: 0 auto; }

HTML Starter Template

Posted by Stefan on Sep 20, 2008 in HTML

After becoming a freelance web designer I found that I was repeating tasks over and over. Here is the semantically correct, HTML Strict Valid template which I use each time I start web development on a new site. Feel free to use it as you wish…

Got comments on my structures, things to add or remove?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="Author" content="Freelance graphic design in Bracknell Berkshire UK - www.faithinme.com">

<link rel="stylesheet" type="text/css" media="screen" href="/css/screen.css">
<!--[if lt IE 7]>
<style type="text/css">@import url("/css/screen_ie.css");</style>
<style type="text/css">@import url("/css/screen_ieold.css");</style>
<![endif]-->
<!--[if gte IE 7]>
<style type="text/css">@import url("/css/screen_ie.css");</style>
<![endif]-->

<link rel="shortcut icon" href="/favicon.ico">

</head>
<body>

<ul class="access">
<li><a href="#nav">Skip to Navigation</a></li>
<li><a href="#content">Skip to Content</a></li>
</ul>

<div id="container">

<div id="header">
<h1><a href="/">Title</a></h1>
<span id="tagline">TagLine</span>
</div><!--// End Header -->

</div><!--// End Container -->
</body>
</html>

Blogosphere