When using image replacement techniques on hover, many times there will be a flicker in between state changes. I’ve found a couple workaround for this. One is to use Javascript to preload the images. Another is to fake it by adding the hover image behind the normal state image and setting it’s visibility property to hidden using CSS. This way it loads the image into memory, but doesn’t display it. Or you can use a combination of the two techniques. For instance, create a Javascript function that uses styling to load the image and set it as the element background, then call the function on page load. Here’s an example:
Add the following Javascript function at the top of an HTML file.
<script type=”text/javascript”>
function preloadImages()
{
document.getElementById(‘elementID’).style.backgroundImage = ‘url(images/image-hover.png)’;
}
</script>
Call the function in the body tag of the HTML file using the onload event.
<body onload=”preloadImages();”>
I’ve spent the last couple weeks working on a project for a local design company and was amazed at how smoothly things were going at first…of course I should have known at that point it was just the calm before the storm. The project was to simply create a homepage and sub-page template based on a Photoshop design.
So, they sent me the PSD files and when I started thinking about how to create the website, there were a few things about the design that made me really want to shy away from a table based layout and just go with CSS….or a combination of the two. Then I started actually slicing up the images and putting the layout together. As smooth and as quickly as things were going at that point, I thought well … hey… let’s just go pure CSS because that’s the “new skool” way of doing things and it would be a great learning experience. Plus I really wanted to impress the client. Mine and theirs 
As it turned out, what was supposed to be a 10 hour max project turned into a “good lawd, am I ever gonna get this done” type project. It was mostly because I had to spend a lot of time researching and learning things that now that I already know them… it wouldn’t take nearly as much time to complete the project.
This was my first pure CSS layout though, and the main reason I wanted to use CSS vs. table based was because of the use of transparent images and overlapping visual components. So, in that sense I still feel like it was a good idea but now I’m starting to wonder if in some cases it’s just quicker and easier to go with more table based layouts rather than pushing the limits with technology. This is of course all a part of the learning experience that goes into working with new technologies but at the same time, there has to be a happy medium which would obviously require some compromise.
What took the most time and caused the most headache was getting the layout to display properly across all/most popular browsers. IE6 is the worst by far! There are some definite improvements in the standards compatibility with IE7 but it’s simply amazing how you can complete a layout, view it in Firefox and have it look exactly like the design…then open it up in any other browser and it looks completely wack!!! I do believe that is the technical term!
So basically, what I had to do was create a separate CSS file for each major browser then use Javascript to detect the user’s browser and select the proper CSS file. But that means, every time I have to make a change to the layout, I have to update every single CSS file….and it seems like every single little change throws something else off and I have to spend so much time tweaking the files to get them all to look just right. I can’t afford to spend that much time on what was supposed to be a fairly simple project.
It’s just that there has to be a better way. I know there are many ways to workaround the whole browser issue but this way seemed to be the most popular and efficient. I don’t know… I’m just going to have to do more research. If anyone has any other better ideas…please fill me in!
So I’ve been playing around with AJAX and Flex quite a bit lately. Seems a lot of people I talk to are interested in these technologies and I must say, they are pretty cool. Especially the ASP.NET AJAX Extensions and Toolkit. I installed a copy of Flex Builder and went through about 16 hours worth of Flex training but it didn’t excite me near as much as watching the AJAX for ASP.NET videos.With all the hype surrounding the whole Web 2.0 craze lately, seeing so many sites with AJAX and Flex popping up, realizing sites you go to everyday are now incorporating more and more “really cool” features…it definitely feels like things are changing quickly. Although Flex is sort of considered to be an alternative to AJAX, I think knowing how to work with both is the smart way to go right now. Obviously the more you know, the more powerful you are but in this case, I can see how each would serve their own unique purpose. Similar to the way technologies like Flash and Java do.
The main thing I’m interested in right now though is getting really knee deep into the inner workings of so-called Web 2.0 applications. When writing ASP.NET applications, Visual Studio has always been great for dragging and dropping controls, auto-generating code, and of course hiding that code from you. Making complex tasks very easy, or seem very easy thus requiring less overall knowledge to accomplish. It’s no different with AJAX for ASP.NET. What requires a click and a drag within Visual Studio might seemingly take hours to code by hand in PHP. But the amount of time spent dealing with it’s quirkiness could be about the same.
I spent the last 6 or so hours fighting with a “simple ASP.NET AJAX” application. Not to be outdone, I spent about 8 hours yesterday fighting with a simple Flex application. I decided to update my MP3 database and create a data access class in C# that I could use with various other applications. For instance, I created a search page in ASP.NET with a datagrid for the results. Then I created a web service that performed the database functions and hooked the ASP.NET page up to that. Finally, I wanted to create a Flex application to connect to the web service. Ran into quite a few snags here and there mainly because I was trying to return a DataSet object from the web service method call.
Flex and Microsoft web services don’t seem to play well together just yet. Retrieving DataSet data in Flex can be a little tricky. For instance, you cannot actually send a true DataSet object. You have to return a DataTable object. Flex then reads it in as an ArrayCollection.
Then again, ASP.NET AJAX and Microsoft web services don’t seem to play that well together either. Using the same web service that I had the ASP.NET page and Flex application working with, I then AJAX enabled the ASP.NET page. This worked beautifully! I was amazed! I thought how can this be so easy?? Well, the problems arose when I decided to add the code to call the web service methods using client side javascript functions. This concept is the true essence of AJAX technology and is at the core of why AJAX is really powerful. So it definitely cannot be overlooked. But it also proves to be the most nerve racking concept! Of course!
What caused such a headache earlier was the fact that when you call a web service using javascript, you have to use a relative path that points to a local copy of the *.asmx file. This means that the web service must be local in order to access it using client side javascript calls. This pretty much defeats the purpose of a web service. Ok not entirely, but web services are essentially meant to be remotely called over the web…or over a network. So for the service to have to be local just didn’t make much sense to me.
Well, come to find out…it is possible to reference a remote *.asmx file via a URL address, but to do so you have to create a bridge between the javascript and the web service. In other words it’s the same as creating a proxy like you would with a PHP implementation. I haven’t had a chance to experiment with this yet but I plan to in the next couple days. There really isn’t a whole lot of information out there yet on this stuff because it’s still so new but I have a few books here that should help.
Ok now, back to the fun…
