Silfuos Thoughts

Got myself browsing through a bunch of recently finished sites from our team when I discovered a new banner image in one of them. Cool i thought , nice one . A professionaly looking banner always gives a great look on your site .

While i am used in using Mozilla Firefox , i opened an IE 8 to get the feeling on the same jobs .
Number 1 ok , number 2 , ok , number 3 ?? where the heck is the banner .????!!!!!

Checked html source , the paths where ok . Why should a picture show in firefox and not IE ??? .
A little googling revealed a nice article . CMYK images are not rendered in older versions ( pre 9 ) of Internet explorer . OK opened the image in Gimp , changed color mode , uploaded , and there it is .

Have a look at the source article here  , and try it out .

Hint Mode On.

There is a fine tool checking browser compatibility for  IE .You can find it here

Hint mode Off.

As i was dealing with a legacy site built on a mix of plain html and classic asp framework , i found out that we where nearly out of space on the ISP due to thousand of images uploaded through the years serving a function where the user can select a specific date and that dates image is served .

The solution was obvious . We have to move all or part of the images to another location .

That was the easy part . OK .  I can easily change the tag’s value img src depending on the users selection .

The hard part was that when the image served was locally it appeared with no delay . When it was away ( on another location , another ISP , another domain ) we had a delay opening it .

OK let’s do some tricks . For start find a nice image to show right away to the user while loading  ( here )

Find a way to hide it when the requested  image loads

<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”></script>
<script language=”javascript” type=”text/javascript”>
$(window).load(function() {
$(‘#loading’).hide();
});
</script>

Place an image to a respective  div

<div id=”loading”>
<img id=”loading-image” src=”loadanimation.gif” alt=”Loading…” width=”80″ height=”80″ />
</div>

Response.write the canonical image as soon as you know what you have to serve

and finally the magic word .

Response.flush !!!!!!!!!!!!

( According to w3schools the Flush method sends buffered HTML output immediately.)

Works smoothly and fast . Guest see the loading animation until the requested image is ready to be served .

Am i missing something . Yeap a little inline css i used

<style>
#loading {
width: 100%;
height: 100%;
top: 150px;
left: 0px;
margin:auto;
position: fixed;
display: block;
opacity: 0.7;
background-color: transparent;
z-index: 99;
text-align: center;
}
</style>

Yesterday I came across a very interesting problem . We had to enable an href to a flash object which was not built in to it .

A small survey showed that we had no luck on that effort without building the flash from the  beginning and enable the url link with actionscript’s GetUrl() .

While reading many forum posts i came across an interesting solution ( or at least the path to an interesting solution ) to try with .

First of all we have to us to divs , one inside another .

The first on has to have a z-indez greater the the second one, and we have to declare the onclick event on it .

The second one , holds nothing but the flash object itself , with an interesting parameter . Wmode = Opaque . ( or transparent )( here is a link to the adobe’s knowledge base )

This make the object rendered in the same window with the html by the browser .

Bellow is the full code . Hope it would be of any use ,

<div style=”z-index: 1;” onClick=”window.open(‘http://www.yourlink.com’,’_blank’);”>

<div style=”z-index: -6;”   >
<object        width=”520″ height=”70″ border=”0″ codebase=”http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0″ classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″>
<param value=”/yourflashmovie.swf” name=”movie” >
<PARAM name=”quality” value=”high”>
<embed   wmode=”opaque” width=”520″ height=”70″ type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/get/flashplayer” loop=”false”
src=”yourflashmovie.swf”>
</object>
</div>
</div>