Posted on : 15-08-2009 | By : Stefan | In : Utilities
Need to check if your fancy CSS will work in IE 5.5 6 7 or 8? The IETester program makes it easy.
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″ />
Posted on : 09-12-2008 | By : Stefan | 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
Posted on : 03-12-2008 | By : Stefan | 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.
Posted on : 19-11-2008 | By : Stefan | 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%;}
Posted on : 19-11-2008 | By : Stefan | 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”.
<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
Posted on : 04-10-2008 | By : Stefan | 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>
<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
Posted on : 02-10-2008 | By : Stefan | 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.
Posted on : 26-09-2008 | By : Stefan | In : Javascript
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>
Posted on : 20-09-2008 | By : Stefan | 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.
0