The web stuff journal /blog Sat, 15 Aug 2009 19:20:35 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 IE 5.5 6 7 8 Browser Testing /blog/ie-5-5-6-7-8-browser-testing/2009/08/15/ /blog/ie-5-5-6-7-8-browser-testing/2009/08/15/#comments Sat, 15 Aug 2009 19:19:10 +0000 Stefan /blog/ie-5-5-6-7-8-browser-testing/2009/08/15/ Need to check if your fancy CSS will work in IE 5.5 6 7 or 8? The IETester program makes it easy.

Check out http://www.my-debugbar.com/wiki/IETester/HomePage

]]> /blog/ie-5-5-6-7-8-browser-testing/2009/08/15/feed/ 0 Force IE8 to compatability mode IE7 /blog/force-ie8-to-compatability-mode-ie7/2009/08/15/ /blog/force-ie8-to-compatability-mode-ie7/2009/08/15/#comments Sat, 15 Aug 2009 16:26:19 +0000 Stefan /blog/force-ie8-to-compatability-mode-ie7/2009/08/15/ If you found this post then Microsoft Internet Explorer 8 has probably broken your website. All that nice CSS work has been ruined.

A solution is to force IE8 to run in compatability mode of IE7.

<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />

]]> /blog/force-ie8-to-compatability-mode-ie7/2009/08/15/feed/ 0 JavaScript Forms Validation /blog/javascript-forms-validation/2008/12/09/ /blog/javascript-forms-validation/2008/12/09/#comments Tue, 09 Dec 2008 11:16:28 +0000 Stefan /blog/javascript-forms-validation/2008/12/09/ 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

]]> /blog/javascript-forms-validation/2008/12/09/feed/ 0 SilverStripe TinyMCE Media / Embed Movies How-to /blog/silverstripe-tinymce-media-embed-movies-how-to/2008/12/03/ /blog/silverstripe-tinymce-media-embed-movies-how-to/2008/12/03/#comments Wed, 03 Dec 2008 16:06:37 +0000 Stefan /blog/?p=67 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.

]]> /blog/silverstripe-tinymce-media-embed-movies-how-to/2008/12/03/feed/ 2 Display background behind a floating element /blog/display-background-behind-a-floating-element/2008/11/19/ /blog/display-background-behind-a-floating-element/2008/11/19/#comments Wed, 19 Nov 2008 17:21:11 +0000 Stefan /blog/?p=63 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%;}

]]> /blog/display-background-behind-a-floating-element/2008/11/19/feed/ 0 Using JQuery with Other Libraries /blog/using-jquery-with-other-libraries/2008/11/19/ /blog/using-jquery-with-other-libraries/2008/11/19/#comments Wed, 19 Nov 2008 15:29:44 +0000 Stefan /blog/?p=58 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
]]> /blog/using-jquery-with-other-libraries/2008/11/19/feed/ 0 Javascript Image Rotator /blog/javascript-image-rotator/2008/10/04/ /blog/javascript-image-rotator/2008/10/04/#comments Sat, 04 Oct 2008 23:38:51 +0000 Stefan /blog/?p=34 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>

<script src=”js/dw_rotator.js” type=”text/javascript”></script>
<script src=”js/dw_event.js” type=”text/javascript”></script>

<script type=”text/javascript”>
// Add rollover events
var rotator1 = {
path:   ‘badges/’,
id:   ‘rotateImg’,
speed:  3000,
images: ["audi.jpg", "bmw.jpg", "ford.jpg", "logo.gif", "honda.gif", "landrover.jpg", "mazda.jpg", "mercedes.jpg", "logo.gif", "mini.jpg", "peugeot.jpg", "renault.jpg", "saab.jpg", "logo.gif", "skoda.jpg", "vauxhall.jpg", "vw.jpg"],
bTrans: true // ie win filter
}

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.

<div id=”div-1″><img id=”rotateImg” src=”img/logo.gif” alt=”Logo”></div>

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

]]> /blog/javascript-image-rotator/2008/10/04/feed/ 0 Anti-Spam Mailto: Link /blog/anti-spam-mailto-link/2008/10/02/ /blog/anti-spam-mailto-link/2008/10/02/#comments Thu, 02 Oct 2008 09:31:15 +0000 Stefan /blog/?p=40 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.

]]> /blog/anti-spam-mailto-link/2008/10/02/feed/ 0 Javascript Image Rollover /blog/simple-javascript-image-rollover/2008/09/26/ /blog/simple-javascript-image-rollover/2008/09/26/#comments Fri, 26 Sep 2008 20:40:48 +0000 Stefan /blog/?p=28 Put this code in the <head> to preload images.

<script language=”text/javascript”>
<!– Begin
loadImage1 = new Image();
loadImage1.src = “north1.gif”;
staticImage1 = new Image();
staticImage1.src = “north.gif”;

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.

<span onmouseover=”image1.src=loadImage1.src;” onmouseout=”image1.src=staticImage1.src;”>
<img name=”image1″ src=”north.gif” border=0></span>

<span onmouseover=”image2.src=loadImage2.src;” onmouseout=”image2.src=staticImage2.src;”>
<img name=”image2″ src=”east.gif” border=0></span>

<span onmouseover=”image3.src=loadImage3.src;” onmouseout=”image3.src=staticImage3.src;”>
<img name=”image3″ src=”south.gif” border=0></span>

<span onmouseover=”image4.src=loadImage4.src;” onmouseout=”image4.src=staticImage4.src;”>
<img name=”image4″ src=”west.gif” border=0></span>

]]> /blog/simple-javascript-image-rollover/2008/09/26/feed/ 0 Thumbs up for EditPlus /blog/thumbs-up-for-editplus/2008/09/20/ /blog/thumbs-up-for-editplus/2008/09/20/#comments Sat, 20 Sep 2008 14:36:22 +0000 Stefan /blog/?p=16 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.

]]> /blog/thumbs-up-for-editplus/2008/09/20/feed/ 3