Need some graphics to show that something is loading or processing? I was in need of some to show that an AJAX script was running, and I found a site called AjaxLoad.info (http://ajaxload.info). It is incredibly simple to use, lets you choose from a number of different moving graphics, and lets you change the background and foreground colors. What a useful website!
(2 votes, average: 5 out of 5)
Loading ...I’ve been getting into a bit of ActionScript 3 (AS3) recently for a project at work, and I found that my Flash file was getting steadily bigger and bigger. The first thing I did was use Flash CS4’s built-in ability to compress jpeg’s. That decreased my SWF file size by almost 10MB, in and of itself! But I still found that I needed to show visitors that the SWF was loading, instead of showing nothing. After searching for quite awhile, I found this tutorial:
http://www.republicofcode.com/tutorials/flash/as3preloader/
Incredibly simple. All you need to do is add it as the first frame in your .fla project, and the rest of your content in the second frame and beyond. And at the end of the preloader, I used “gotoAndStop(2)” instead of “play()” since I wanted to go to the second frame only, not just play. But wow, it only took me like 10 minutes to implement this preloader! Awesome!
(No Ratings Yet) Loading ...I needed to find a free HTML color picker (a window that opens up to reveal a bunch of colors the user can choose from) that wasn’t overly complicated, so I began to Google. I almost immediately came upon one called jscolor. You can visit their website here:
Incredibly simple to use! All you do is include one .js file in the head of your page(s), set the class attribute of the text input to ”color” , and you’re done! Wow, this is amazing, and I am thoroughly impressed. Way to go, Honza! Thanks for a great script!
(1 votes, average: 5 out of 5) Loading ...I occasionally use Javascript to dynamically create elements, so you don’t have to reload the page to view new content. On this occasion, I was creating multiple DIV’s (a child DIV that would go inside a parent DIV), and I needed to assign CSS classes to each DIV. I was using something similar to this:
var main_div = document.createElement('div');
main_div.setAttribute('class', 'a_box');
main_div.setAttribute('id', 'the_main_box');
var child_div = document.createElement('div');
child_div.setAttribute('class', 'a_child_box');
child_div.setAttribute('id', 'the_child_box');
child_div.innerHTML = 'I am a child.';
main_div.appendChild(child_div);
Well, I tried it in Firefox 3.5, and it worked great. I celebrated by watching a clip of fireworks on Youtube. But lo and behold, I tried it on IE8, and wah wah wahhhh [gameshow-like sound of IE failing miserably]. IE8 showed the content of the child_div, but it didn’t assign the CSS styles associated with the “a_child_box” class to that DIV. Sigh. So after doing a bit of Googling (my go-to solution for problems), I found that you have to assign the Javascript attribute of “className” instead of “class.” So here is the correct way to make all browsers render the corresponding CSS class styles:
main_div.setAttribute('className', 'a_box');
child_div.setAttribute('className', 'a_child_box');
Why does IE have to differ on so many things??
(No Ratings Yet) Loading ...If you’ve noticed a gif image not animating properly in IE, then you are subject to another Internet Explorer bug. Surprise, surprise.
I was trying to use a loader animated gif in a form to show that a file was uploading. I put the image in a div with display: none in the style attribute. Then, when the user clicked the Submit button, it would change the div’s display to block. But in IE, when the div would appear with the gif image inside, the animated image would not play…it would simply be frozen in place. Here’s a sample of the code I was using:
<form method="post" action="" enctype="multipart/form-data">
<input type="file" name="myfile" />
<div id="loader_box" style="display: none;">
<img id="loader" src="images/loader.gif" />
</div>
<input type="submit" name="save" value="Add File" onclick="document.getElementById('loader_box').style.display='block';" />
</form>
I did my normal routine of Googling for the answer and finally found it. IE seems to get overwhelmed when it starts sending information, so it doesn’t allow the animation to play. But if you reload the image’s source after a setTimeout(), it restarts the animation and allows it to play.
Here’s how I fixed the problem:
<form method="post" action="" enctype="multipart/form-data">
<input type="file" name="myfile" />
<div id="loader_box" style="display: none;">
<img id="loader" src="images/loader.gif" />
</div>
<input type="submit" name="save" value="Add File" onclick="document.getElementById('loader_box').style.display='block'; setTimeout('document.getElementById(\'loader\').src=\'images/loader.gif\'', 500)" />
</form>
This fixed the problem! Why, oh why, dost thou torture our souls, oh great IE gods??
(No Ratings Yet) Loading ...The PHP application I work on is built to function on all major browsers (IE7+, Firefox 3+, Safari 4, etc.), but I realize there are still a few users using IE6 for whatever reason. I am not going to go back and check my site for IE6 compatibility, since it is so buggy and incompatible with CSS, so I wanted to display a message for IE6 users when they land on my login page.
After doing a bit of searching, I found this blog entry:
http://www.htmltimes.com/detecting-ie6.php
Boaz does a great job of thoroughly covering the methods to detect IE6. You don’t have to use all of his code if you don’t want to. I just used it as a guide to get what I wanted.
In the end, I used the following code to display a warning to users displaying our website with IE6:
if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6.0') !== false) {
echo 'You are currently using Internet Explorer 6.0.';
}
Very simple and effective. You can put any code you want in place of the echo. You could forward the user to a different page, set a cookie, etc. If you need to see a list of user agent strings, go to http://www.useragentstring.com/pages/useragentstring.php . Hope this helps you!
(No Ratings Yet) Loading ...
Recent Comments