Labs

Control Global Volume in Flash
Posted by Rob CornishJune 18, 2009
Control the global sound in flash (AS2).

globalSound = new Sound( ); // Doesn't have a target, sets sound to main stage
globalSound .setVolume(0); // Used to control volume…

One I keep forgetting about!

Tags: actionscript 2, as2, control, flash, global, setVolume, sound | Comments (0)
Quick IE Hack
Posted by Rob CornishMay 21, 2009
Simple hack that works across all IE's!

This little niffty css hack I came across was similar to the underscore IE hack I.E. _height:100px;

Using two backslashes (//) instead of the underscore works across all IE's.
IE ignores the two backslashes as where all other browsers see this as comments. Genius!!

Example:
body { //margin-top:10px; margin-top:5px; }

Tags: bug, comments, css, hack, html, ie, internet explorer, xhtml | Comments (0)
Firefox centered background on the body problem
Posted by Rob CornishOctober 3, 2008
Today at work we ran into a problem with Firefox using a background on the body.
The setup was a background on the body tag to be centered with the browser window to fit behind a centered div.
Using a min-width on the body alone done nothing. IE6 and 7 with width:1024px; on the div stopped the background from moving but not in Firefox.

To fix this in Firefox we had to add the html element into the css tag.
```
html, body { min-width:1024px; background:url(image.jpg) no-repeat center 0; }
div { width:1024px; margin:0 auto; }
```
Note: You don't need to include the background here, this can just go normally on the body tag.
Tags: background, body, center, css, div, firefox, html, ie6 | Comments (0)
Lightbox blackout css javascript technique IE6
Posted by Rob CornishSeptember 30, 2008
A mate at work was running into problems with IE6 100% height.
The lightbox background height would only span the height of the current window. When you scrolled down the lightbox background just ended. Alexey Kasaev found a css javascript work around for ie6.
```
height:expression(eval(document.body.clientHeight) + "px");
```
Tags: background, css, height 100%, ie6, javascript, lightbox | Comments (0)
New IE6 PNG Fix
Posted by Rob CornishAugust 26, 2008
Came across an update of the IE6 PNG fix at Unit Interactive.
This code is simple to integrate, works like a charm and very quick!
To get started you need the unitpngfix.js.

Add the following code into the head of your document. Change the folder structure to your desired path.
```

```
On running this I ran into a couple of problems…
1 - My images had the missing image graphic over the top
2 - Links on images made some images disappear
3 - Disappearing Divs!

Looking into these problems I came up with a few solutions.

1 - Missing graphic overlaying image

For the missing images graphic over the top of my transparent image was a problem with the updated unitpngfix.js, the update stated on 08.26.08 where there was no need for the clear.gif any more didn't quite work on my IE6 browser. I changed the unitpngfix.js to have the following:
```
el.src="/media/images/clear.gif";
```
Instead of:
```
el.src="javascript:'#define x_width 1\\n#define x_height 1\\nstatic char x_bits[]={0x00}'";
```
This cleared up the missing graphic over the top of my transparent images. The clear.gif is a simple 1px x 1px blank gif sat in my images folder.
I get the missing graphic icon on their website using IE6 too! Please fix this unit interactive!!

2 - Disappearing images when using links

The next issue being links on my png images, this worked on some but not others. I solved this by adding:
```
img { display:block; }
```
The only problem with this is that you may not want all your images to be displayed like this…

3 - Disappearing div's

For the disappearing div's was an odd one. My webpage was setup with a footer div that had no css styling just normal text and an image inside. The div wouldn't display! Removing the javascript displayed the div… tad confused!
Playing with this I managed to get the div back by using:
```
#selector { display:block; position:relative; height:50px; }
```
The div almost acted similar to a floated object, by putting a height on this forced it to display.

Hope all this helps
Tags: css, hacks, html, ie6, images, javascript, png, transparency, unitpngfix.js | Comments (3)
Min-Height Fast Hack
Posted by Rob CornishAugust 7, 2008
A genius IE6 min-height fix.
```
#selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}
```
Source: Dustdindiaz

Reviewing this code, there's a simpler way of doing it. Here's the other way:
```
#selector {
  min-height:500px;
  _height:500px;
}
```
IE6 should read the _height property where as all other browsers will ignore.
Tags: css, hack, ie6, min-height | Comments (0)
IE6 min-widths and min-heights
Posted by Rob CornishMay 7, 2008
Using the following code you can get IE6 to work with min-width and min-height.
```
* html #wrapper
{
     width:expression((d = document.compatMode == "CSS1Compat" ? document.documentElement : document.body) && (d.clientWidth > 1280 ? "1280px" : d.clientWidth < 1024 ? "1024px" : "auto"));
}
```
Note: Place this within an if IE 6 condition.
Tags: css, expression, hack, ie6, min-height, min-width | Comments (2)
Asp contact form with javascript validation
Posted by Rob CornishMarch 24, 2008
Firstly setup the html file with your form, set the name and id of this as "enquiryform". The form action needs to point to emailprocess.asp. Edit the values to suit the form.

To validate the form, use the onsubmit syntax:
```
<form onsubmit="return checkform(this);">
```
This calls in the validate.js javascript file, edit the fields within the javascript to check for a value.

Once submitted the emailprocess.asp takes all the data and sends it to the email provided in the .asp file.
Tags: asp, contact, email, enquiry, form, html, javascript, validation | Comments (0)
IE6 PNG support
Posted by Rob Cornish
Using Angus Turnbull's iepngfix.htc you can add png support to IE6.

In order to make this work, you also need the blank.gif image.
Open up the iepngfix.htc in your favourite text editor and make sure the path to blank.gif is correct.

Within the css document add the following behavior:
```
img, div { behavior:url(iepngfix.htc); }
```
On using this, I've noticed that you need to add a width and height on the image for it to display correctly.

Playing with links, I ran into a few problems…
The main one being a background png called in via the css with links on top. The links were there but unclickable, I found out that the background cannot use positioning. By placing this in a containing div with the positioning on solved this problem.

On looking into the linking situation further I came across a simpler solution.
Simply by adding:
```
a { position:relative; z-index:1000; }
```
This forced the links in front of the PNG graphics.

Using the PNG as a background comes with a few issues, in IE6 you cannot use background-position or background-repeat. The attached PNG fix allows you to stretch the PNG graphic for repeating backgrounds. As long as you specify a width to this element it will work. The positioning has no work around, IE6 will completely ignore any input from this style. A work around I have used is that you place the PNG image within a div, positioned absolute behind the content div.

Please let me know if you find better ways on using this!
Tags: behavior, css, html, ie6, iepngfix.htc, png | Comments (4)
Random text onload using javascript
Posted by Rob Cornish
Use the random.js javascript file in the body of your document.
```
<script language="Javascript" type="text/javascript" src="random.js"></script>
```
This will load a random line of text within the random.js file each time you visit/refresh the page.
Tags: html, javascript, random, refresh, text | Comments (1)

« Previous Entries

dlnqntdesign was our cure