Can’t get image width or height using javascript in IE 7 and 8

Came across this one whilst working with an TinyMCE plugin.

I had some additional css on the image i was trying to get the height and width of – display:none;

That’s the problem. Just use visibility:hidden; in your CSS and all will be fine in the world.

Oh just in case you are using the incorrect javascript as well.

alert(document.getElementById(‘imageId’).width);

Enjoy!

Forms won’t submit in IE when pressing enter

Hi All

I’ve come across this issue yet again. Realised I’d forgotten to post it the first time.

Instance 1 – Form has 1 text field, when pressing enter the form doesn’t submit correctly, either won’t submit, or won’t send submit button value through to php.

Solution –

if ($noOfTextFields == 1)
{
//fix IE bug where if there is only 1 text field you can't press enter to submit form (it doesn't send submit button name value pair)
$output .= "<input name='" . time() . "' style='display: none;' type='text' / >";
}

That should fix that instance

Instance 2 – Only seems to be happening in IE8 – When a form is either being hidden (using CSS display or visibility tags) or being creating dynamically when you press enter nothing will happen

Solution – add the following code to your form tag – Special thanks to Chris from chrisbegg.com for providing me with an example he used to solve the ajax problem

onkeypress=" var keycode; if (window.event) keycode = window.event.keyCode; else if (e) keycode = e.which; else return true; if (keycode == 13) {this.submit()}else {return true;}"

Make sure that it’s all on one line you know how javascript dislikes multiple lines.

Good luck to you all. If you find any other occurrences of this problem that aren’t covered here let me know

Image Caching – Specifically for Firefox

Ok so it’s Friday and it’s 2:45pm. So close to the weekend and i just spent an hour or so figuring out how to get my image caching to work on my thumbnails. Against all odds i have managed to get firefox to cache images properly – well maybe how i want it is a better term

So let me explain my thumbnail creator – Thumbercules, as i have named it (in reference to Gumbercules, a line said my Zoidberg on Futurama (Gumbercules, in reference to someone having the flexibility of Gumbi and the strength of Hercules)), dynamically created thumbnails at a certain height and width specified in the Url that i call eg http://www.domain.com/webimages/x/756/y/160/src/slideshows/images/4a288b1905e1b.jpg. It will check my thumb folder for an already created copy. If it finds one it will return the image from the folder. If not it creates the file then returns it.

What was happening with my previous caching method was that Firefox would download the image, if i pressed reload it would use the cached version it had. But if i pressed reload again it would download it again and start the process over again. It wasn’t recreating the image, only clearing the cache.

So numerous tests were performed until i was able to come up with the following:

function returnImageFile($fileName, $imageType)
{
$expires = 10800;
header("Expires: " . gmdate("D, d M Y H:i:s", strtotime( "+$expires seconds")) . " GMT");
header("Cache-Control: public, max-age=$expires, pre-check=$expires");
header("Pragma: cache", true);
if(isset($_SERVER['HTTP_IF_MODIFIED_SINCE']))
{
// if the browser has a cached version of this image, send 304
header("Last-Modified: " . gmdate('D, d M Y H:i:s', filemtime($fileName)).' GMT');
header("HTTP/1.1 304 Not Modified");
die;
}else if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) && (strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) == filemtime($fileName)))
{
// option 2, if you have a file to base your mod date off:
// send the last mod time of the file back
header('Last-Modified: '.gmdate('D, d M Y H:i:s', filemtime($fileName)).' GMT',
true, 304);
header("HTTP/1.1 304 Not Modified");
die;
}else
{
header("Last-Modified: " . gmdate('D, d M Y H:i:s', filemtime($fileName)).' GMT');
}
switch ($imageType)
{
case '1':
case 'gif':
header("Content-type: image/gif");
ob_start();
readfile($fileName);
$ImageData = ob_get_contents();
$ImageDataLength = ob_get_length();
ob_end_clean();
header("Content-Length: ".$ImageDataLength);
echo $ImageData;
break;
case '2':
case 'jpg':
case 'jpeg':
header("Content-type: image/jpeg");
ob_start();
readfile($fileName);
$ImageData = ob_get_contents();
$ImageDataLength = ob_get_length();
ob_end_clean();
header("Content-Length: ".$ImageDataLength);
echo $ImageData;
break;
case '3':
case 'png':
header("Content-type: image/png");
ob_start();
readfile($fileName);
$ImageData = ob_get_contents();
$ImageDataLength = ob_get_length();
ob_end_clean();
header("Content-Length: ".$ImageDataLength);
echo $ImageData;
break;
}
die;

This script returns the file with the size value as well as the correct headers to cache the file. If you don’t want to cache the image then you should change the approach slightly, i can’t see many times where you would require thumbnails to not be cached. But for other dynamically created images refer to my other post about creating non cached images. Firefox Caches Images when it Shouldn’t

If anyone has any points to make please do make them, i haven’t had a chance to test this well on IE or Safari. As they don’t have an easy to use plugin like firebug, which tells you when something is being returned from cache or not.

As always good luck with your programming, hopefully this saves someone some of the hassle, or at least saves someone more time then it took me to write this

‘Length’ is null or not an object error in FCKEditor

So i’m back after a lengthy absence in posting fixes. No that’s not because i haven’t had any frustrating bugs that i’ve worked long and hard to solve. Simply i’ve been too busy. Came across this problem in IE where it throws a length is null or not an object error.

After lengthy google searching and tinkering I found the problem to be an extra comma at the end of one of my custom toolbar sets in the fckconfig.js file

/editor/fckconfig.js is the default file path.

Hope this helps anyone in trouble.

Cheers

file_exists doesn’t work for me

Ok i’ve run across this problem a few times in my programming life, where file_exists always returns false. I don’t think i’ve ever properly fixed it. Generally I make some crappy work around, which ends up causing more harm than good.

So here’s a small checklist to solve the problem.

  1. Check the file path you are actually sending the function. eg file_exists(BASE_DIR . “/images/image1.jpg”);
    • I always like to do a print_r on whatever is in between the brackets just to make sure i’m not completely inept.
    • For this example i have too many ‘/’ that could be causing me dilemmas.
  2. Check that the folders/files you are accessing don’t have any safe mode restrictions.
  3. If those 2 solutions didn’t work and you have ensured you have passed the correct file path then put a call to the function “clearstatcache()” before the file_exists function.

If you still have problems even after that, then send me a comment and I’ll help you debug it.

Happy Coding

FCKEditor shows current website instead of editor area

FCKEditor can sometime display a website in it’s iframe instead of the editor panel. This is especially common when using .htaccess rewrite engine.

A friend of mine encountered this issue for a second time, we both always seem to forget the solution, so he suggested I write a blog about it.

When using FCKEditor and our cms we use htaccess redirects, but because they cascade through the sub folders FCKEditor also follows these Redirects.

To make FCKEditor work properly simple add…

RewriteEngine off

…to the .htaccess file in the editor directory.  This will keep FCKEditor using it default settings and not trying to use your parent folder redirects.

Enjoy!

Firefox Losing Session Variables on Redirect

So I’ve been attempting to deal with an issue on a CMS I made for quite sometime. When People logged into the CMS they would be redirected to the Homepage from the Login page. They would get a first glimpse of the homepage then once they clicked a link they would be redirected back to the login page as the SESSION variables would disappear.

The problem was firefox feels that http://www.mysite.com is a totally separate site to http://mysite.com so it resets the SESSION variables.

I changed my links which i had prepended the domain to for some unknown reason (I’m sure there was a logical reason when i wrote it), so I changed it to /pageNames.html and all was well in the world again.

While researching this bug I found some other solutions

  • Call session_write_close() before using a header redirect in PHP
  • The worst possible solution would be to pass the SESSION Id (SID) in the url (not recommended) but nevertheless if worse comes to worse it is a solution.

Hope this helps someone. Until next bug.. keep up the good work.

Function for dealing with quotes in input fields in HTML/PHP

Anyone who has coded html has come across this issue, you have an input field in your form but oh no! someone has entered a single or double quote into the value and they are now trying to edit it, and all you see in the input box is John\ instead of John\’s. It is one of those reoccuring issues which I face from time to time, but not anymore.

Every now and then i stumble across a new issue which my current method doesn’t solve. Talk about frustration, going through old code just to make sure you aren’t using that incorrect method. Heres something I whipped up tonight which I thought I should post asap.

function form_encode($string)
{
/*make sure you remove the spaces in the first variable of the str_replace function, Word press doesn't seem to like to print out the htmlentity of the ampersand which is understandable*/
return str_replace("& amp ;", "&", (htmlentities(stripslashes($string), ENT_QUOTES)));
}
I’m pleased with this solution, i’m hoping it’s not too computational intensive as it uses str_replace only once.

This function is especially effective when the data is being pulled from a database, but i found i needed a solution that can not only use data from a database and encode it properly but also if you are reusing $_POST variables, my forms if they fail reuse the same values, and i was getting alot of “John\ ” errors but using the stripslashes then the htmlentities fixed it up really nice.

The reason for the str_replace is the htmlentities function will change the ampersand at the start of some special characters into the htmlentity & amp ; which is what the function is supposed to do.. funny that. But a simple str_replace returns any double encoded htmlentites back into their original format, which means perfect display for us and easier forms from now on.

This has been tested on Firefox for Mac, Safara (Mac), will test on PC later. Thought I’d get this up asap for everyone. Will be interested to see if anyone finds it though.

FireFox Caches Images When It Shouldn’t

I’ve recently come across a small annoyance in the firefox browser. I was creating a website that allows you to modify images so they can be printed. I had a caching issue when users would press back then change a setting and go forward again. A refresh would fix the issue. So FireFox was using the cache when I didn’t want to.

As usual first attempt was use some php code to specifiy the caching paramaters.

header(‘expires: Mon, 26 Jul 1997 05:00:00 GMT’);
header(‘cache-control: no-store, no-cache, must-revalidate’);
header(‘cache-control: post-check=0, pre-check=0′, FALSE);
header(‘pragma: no-cache’);

But to no avail, although IE responds extremely well Firefox didn’t. But i found that if the filename is the same as something in cache FireFox looks at the binary code and determines if anything has changed if it has it will reload the same image changing the cache.

This leads me to the solution, if you are writing PHP code then simply add this line to the end of the source attribute
<img src="image.jpg?t=<?php echo uniqid();?>" />

You can also achieve a similar process using javascript by utilising Math.rand() .

This tells firefox that the image is different when in reality it isn’t.

Remember Image Caching is a good thing except in instances such as this. Don’t restrict caching too much or you will find your bandwidth usage could jump quite a bit.

FireFox and IE Ignore Hosts File

Thought i’d share this with everyone, I recently ran into some trouble on my machine where my browsers began ignoring my Hosts file. After much annoying testing and what not I eventually found that the reason they were ignoring my hosts file was because it was going through a proxy.

I’ve never set a proxy up on my computer, but recently I installed Google Web Accelerator. Bingo they set up a proxy to speed up the sites you view.

So uninstall that if you have it and Bob’s your uncle. A normal Add/Remove Programs on XP does the trick.

If it doesn’t help check if you are using a proxy to connect, if not check your spelling in your hosts file.