Iarkalwen
May 5 2005, 10:37 PM
| | I've been looking for a tutorial for an image preloader!
Thanks!  |
Reply
SystemWisdom
May 6 2005, 12:27 AM
Glad to hear you guys like it, thanks! I finally have a web host again, Trap17! So I have posted a working sample of this script on my site. The sample is just a rough copy sample, once I get my site integrated with Trap17 the sample will be a part of my actual site. View the Sample Progress Bar Here!Enjoy!
Reply
Kai
May 28 2005, 03:46 PM
QUOTE(SystemWisdom @ May 5 2005, 05:27 PM) Glad to hear you guys like it, thanks!
View the Sample Progress Bar Here! Hi, Very nice tutorial; much appreciated. In particular I like the CSS progress bar. One minor problem though. The sample link works just fine in Firefox and IE, but doesn' seem to be working properly in Safari (Mac). According to the browser status bar, it it is pre-loading the images, although no visual progress is shown in the progress-bar. After pre-loading is done, it just stays on the pre-loading page. The only way to advance is by clicking the "Skip Intro" link. Any ideas? Kai
Reply
rvalkass
May 29 2005, 11:38 AM
Thanks very much for this tutorial. I have seen others but thay have not worked as well or look as good as this script. I am astounded you are willing to provide this script for free, as I have seen others on the Internet costing upwards of $10. Thank you very much and good luck with any more coding you do! 
Reply
SystemWisdom
May 29 2005, 02:42 PM
QUOTE(Kai @ May 28 2005, 11:46 AM) One minor problem though. The sample link works just fine in Firefox and IE, but doesn' seem to be working properly in Safari (Mac). According to the browser status bar, it it is pre-loading the images, although no visual progress is shown in the progress-bar. After pre-loading is done, it just stays on the pre-loading page. The only way to advance is by clicking the "Skip Intro" link.
Any ideas?
Thx for the input and I'm glad you liked it for the most part, but I have never had the opportunity to test or even view this script on a Mac. I am guessing Safari handles the DOM differently than other browsers... Now that I know there is a problem with Mac's Safari browser processing my script I will look into resolving the issue (and here I thought it worked perfectly! lol). I am glad you pointed out the actual problems for me, which makes fixing it one step easier! I will reply as soon as I figure out a solution. Hopefully you can test it out again for me on your Mac Safari!! QUOTE(rvalkass @ May 29 2005, 07:38 AM) Thanks very much for this tutorial. I have seen others but thay have not worked as well or look as good as this script. I am astounded you are willing to provide this script for free, as I have seen others on the Internet costing upwards of $10. Thank you very much and good luck with any more coding you do! I couldn't imagine charging people money for my tutorials (they probably wouldn't get read!), I mainly write them so that I can add them to my Resume/portfolio, maybe they will help land me a job! I'm especially glad to see such positive feedback from this tutorial (makes me want to write more)!
Reply
Kai
Jun 10 2005, 06:30 AM
QUOTE(SystemWisdom @ May 29 2005, 07:42 AM) I am glad you pointed out the actual problems for me, which makes fixing it one step easier! I will reply as soon as I figure out a solution. Hopefully you can test it out again for me on your Mac Safari!! :D Just let me know if you would like me to do any further testing, or provide additional info if needed to make your job easier to find a fix. ~ Kai
Reply
SystemWisdom
Jun 13 2005, 12:42 AM
I haven't figured it out yet  Mac confuses me  Do you know any Javascript at all? It sounds like a few javascript functions are not being recognized by Safari, amd I am having alot of trouble finding out which ones.. Theoretically, it should work fine, unless Safari browsers haven't followed basic standards for DHTML.. Maybe it has to do with it being on a Mac? Did you test it with IE and Firefox from Mac too, or was that on Windows? I am almost at the point of resolving to detect the Safari browser on Mac and just skip preloading altogether, so it doesn't cause problems... Well, ima keep looking for an answer, wish me luck!
Reply
nonon
Jun 16 2005, 04:05 PM
Well i will check this out  ...processing on the client side free's up the server and this script can come quite handy on slower connections  ... Thanks m8, if it works wrong i will came back to you for help  Best Regards Nuno
Reply
Riton
May 15 2007, 10:02 PM
Hi In fact, the problem is that Safari seems to not support self-reference in javascript class. The two last variables in ImagePreload.prototype.OnLoad are marked as "undefined". For those who wants to debug in Safari with MacOS, type "defaults write com.apple.Safari IncludeDebugMenu 1" on a terminal and then restart Safari. A "debug" menu will be present on the top of the screen. I think it's a safari bug, but it should exists a workaround. Regards, Riton QUOTE(SystemWisdom @ Jun 13 2005, 02:42 AM)  I haven't figured it out yet Mac confuses me Do you know any Javascript at all? It sounds like a few javascript functions are not being recognized by Safari, amd I am having alot of trouble finding out which ones.. Theoretically, it should work fine, unless Safari browsers haven't followed basic standards for DHTML.. Maybe it has to do with it being on a Mac? Did you test it with IE and Firefox from Mac too, or was that on Windows? I am almost at the point of resolving to detect the Safari browser on Mac and just skip preloading altogether, so it doesn't cause problems... Well, ima keep looking for an answer, wish me luck! Reply
Sprnknwn
May 16 2007, 10:02 AM
Oh, this is a very interesting code, yet really long I'll try to give it a look patiently this weekend and see if I can follow all the steps. Thank you for sharing it.
Reply
Recent Queries:--
progress bar and loading image - 0.31 hr back. (1)
-
progress bar gif image gallery - 0.94 hr back. (1)
-
progress bar image gallery - 1.04 hr back. (1)
-
load image progress bar javascript - 4.49 hr back. (1)
-
free animated gif image progress bar online generator - 8.10 hr back. (1)
-
preloading percent object with javascript - 8.28 hr back. (1)
-
image preloader in js file - 9.91 hr back. (1)
-
javascript preload percent - 11.06 hr back. (1)
-
php progress bar while page loads - 13.60 hr back. (1)
-
preload process images - 16.10 hr back. (1)
-
javascript preloader with percent counter - 17.72 hr back. (1)
-
image preloader script - 18.52 hr back. (1)
-
javascript loading bar - 19.35 hr back. (1)
-
php preloader image - 23.20 hr back. (1)
Similar Topics
Keywords : image, preloader, progress, bar, status, pure, client, side, javascript, tested, 4, browsers
- Lesser Known Useful Javascript Features
(2)
Make A Moderately-secure Password System Using Javascript
using file redirection to hide the password. (4) JavaScript is very handy at making forms, allowing for much more customization and easier ways to
send data. So making Login forms using JavaScript may seem to many to be a very feasable idea.
However, JavaScript is very bad at protecting Passwords, as since the passwords are not encypted and
the whole JavaScript code is in the page, a person could just view the Page Source and find out
everything. Even if you use an external JavaScript, it would still be poor as the file name for the
external JavaScript would still be revealed. But I have an answer! There is a rela....
Simple Javascript And Password System
How to protect your pages with password (6) The quickest way to get a password protection system up and running is to use a Prompt box in
JavaScript that has a title like "Enter your Email Address". Only you and the relevant users know
what the password should be, could even be one each, that can be sorted out at the next page then
pass the "input" directly through the url by changing the .href, like
http://www.iSource.net.nz/users/?leTmeIn= The page that then processes this should also check for
the referring page, and three fails from an IP if you like the php (the next page): CODE
<?php // processdo....
Ftp In Visual Basic 6.0
Start making your FTP client using VB6 (0) Recently, I had a need to make a FTP client, since our webhosting FTP server was kind of exotic, and
very restrictive, and most of uploads, even though they reach 100% would crash... File would be
uploaded to a server, but FTP clients just froze upon completion, waiting for the 226 (OK) from FTP
server... So, I had to make my own, one who would not wait for 226, but instead, watch the file
pload progress... This tutorial is not fuly complete, in the sense that it does not offer COMPLETE
FTP client functionality (for example, I ddn't write the code for FTP download, ....
Create A Simple Html Editor With Php And Javascript
(3) Ok, I will teach you how to create a simple HTML editor that runs online with buttons that add HTML
tags. Before we start: You should have basic knowledge of these languages. HTML/XHTML
Javascript PHP You will need Ability to use filesystem functions. Chmodding abilities
Features of Editor Online PHP safe Full HTML support A Few Bad Features Can only create new
documents or overwrite Fairly unsafe Now we are ready to begin. The PHP Script This will be
our PHP script that we will use to make the file. Make a file called save.php Here is the....
Background Image Swap Script
Change a Background Image based on clock time (15) Background Image Changer Script To swap the background image from your CSS file according to the
Server Clock Time. 1.) In your CSS file, add the following rule: CODE body {
background: url(time.png); } 2.) Create a "folder" named time.png. 3.) Into the
folder, place three images named morning.png, day.png, night.png. 4.) Also, in the same folder,
create an index.php file and copy/paste the following script. CODE <?php $hour =
date('H'); if ($hour < 12 ) { $image =
"morning.png"; } ....
Image Rotator Script (another One)
easy to implement (0) In case you haven't noticed, I have a different Avatar display on the Forum each time the page
is refreshed. /biggrin.gif" style="vertical-align:middle" emoid=":D" border="0" alt="biggrin.gif"
/> For those of you who might want the script to do that, here is the one I am using: HTML
$filesp = glob('*.png'); if(empty($filesp)){ echo
'no images found...die br >'; die(); } else{ foreach ($filesp as
$file) { $img_array[] = trim($file); }....
Mootools - My Favourite Javascript Library
(3) It kind of amazes me that there's not even a mention of the Mootools javascript library
throughout this whole forum. So here I'll do a brief introduction and a tutorial on how to
produce the famous accordion effect. MooTools is a compact, modular, Object-Oriented javascript
framework designed to make writing extensible and compatible code easier and faster. MooTools lets
you get the job done efficiently and effectively. It is slightly based on the powerful Prototype
javascript framework , of which Scriptaculous runs on. (But frankly, I dislike Scriptaculou....
Rename The Ms Windows Recycle Bin
(Tested on Windows XP). (9) I realize there is another topic in this section about the recycle bin, but it doesn't mention
how to rename the recycle bin. Like most other tasks of this nature, accomplishing this will require
modifying the windows registry. First, open the registry editing tool "regedit" by clicking on
Start, Run then typing in "regedit" before pressing OK. Screenshot:
http://img525.imageshack.us/img525/8230/01ay6.jpg In the regedit program you will see a simple
looking program with a tree structure control in the left side (displays the setting categories) and
a panel at the....
Javascript Scroll Bar
A scroll bar for your webpage using javascript (13) In this tutorial I will show you how to create two buttons in the bottom left of the screen that,
when hovered over, will scroll the page. Now to start with, we must create a our buttons, the first
line will create a div element, or block. Using blocks you can position items anywhere on a page.
We use the ID property just to let us know what the block is used for, as for the first block, its
obvious that it contains the vertical buttons and the second two blocks contains the horizontal
buttons. The style property of the div tag tells the browser how to draw it, in the....
Math Captcha Image Validation
(1) This tutorial will show you how to make a basic math CAPTCHA validtion form. This requires that you
have the GD library for PHP installed to work. This tutorial requires 2 files, login.php and
action.php. The first step is to create a sub-folder to store the temporary images, for the
purposes of this tutorial,this folder should be called images. Now upload a image in there called
verify.php and chmod just that image(not the folder) to 777 so that image can change as our
functions generate new images. Ok, after you've done that, we can get to the code: in login.p....
A Simple Php Captcha - Image Validation
(21) OK, I recently had the need to create a PHP CAPTCHA system for a friend, and I am sharing this as a
tutorial with the good people here at Trap17. I am sure you have all seen a CAPTCHA before (although
you may not have known what it was called). They are the little codes you often have to enter when
you register with a site, to make sure you are a person and not an automated script. Some common
examples look something like this: My system doesn't really do anything as fancy, but I
think that it is slightly more readable that some of those that get generated. Every....
How To Build A Pure Css Using Online Tools Tutorial (part 4)
Vertical Nav Menu (0) Step 4 Vertical Nav Menu The next step is to add in a basic rollover menu so I bring you to the
following online tool: Menu Generator Now with this online tool you can not only create
vertical but also horizontal rollover menus. Since we will be doing a Verticle menu we will keep it
on that option. Now the next part is deciding if we want it fixed, relative, or absolute. If we
have learned anything it is insane trying to make a absolute or fixed position work perfectly for
all three browsers (IE, FF, Opera). So to keep our minds sane we will use relative,....
Simple Scripts In Html And Javascript
Things like BackgroundColorChanger and so (7) like in the topic, here is a description how to change the Backgroundcolor "On The Fly", by klicking
on a button or radio-box first, we ned the html-and body-tags, create a new html-file on your
desktop and write the following: QUOTE <script language = "JAVASCRIPT">
browser interpretation: html - tag means "hey, browser, here comes HTML" in the body-tag you define
the looking of your site. you can add things like "bgcolor" for the background, "text" for the
textcolor and link / alink / hlink / vlink to define the linkcolor ( ) the scripttag i....
How To Build A Pure Css Using Online Tools Tutorial (part 2)
Part 2-Header (3) The next step will be to set up our header with a tab menu a search box and a header image. With
these three parts you will be able to be make a somewhat dynamic header, so it can be seen more and
not blended within the website and be lost or hard to find within the website. You have to remember
the website is for other people and not for you, so you have to make it as user friendly as
possible. Now with the Text with in the image you could say that this could use be used for
important updates, or a slogan or two, with this your actual images will be a bit smaller in ....
How To Build A Pure Css Using Online Tools Tutorial (part 1)
Part 1-Core Design (7) The use of Online tools to design a complete website Tutorial By Saint-Michael AKA Mike A. On a
side note will provide all the files for the complete site from each of the parts just in case you
have problems With this tutorial I will show you how to use specific online tools to create a
fully functioning website in pure css with little to no JavaScript to be used. Also their will be
some moderate editing to make everything fit and of course to make sure everything is working like
it should. The links that you will need to either book mark or save to a file, w....
Image Gallery Tutorial Using Hoverbox
A php solution to coding the Hoverbox Image Gallery (14) As reported in another posting , there is an Image Gallery named Hoverbox from the Sonspring site
which is a pretty cool display method using CSS to have Thumbnail pictures double their size by
hovering over them. I liked the css included in the original Tutorial as found on the Sonspring
site , but I knew there was more than one use for the Hoverbox and took it upon myself to explore
the use of the Hoverbox on a site I webmaster. One thing that wasn't right was having to
hardcode the image tags, so the first version I wrote used php to fill the Hoverbox by rea....
How To Control Popups In Ie And Other Browsers.
(2) If you really hate popups - who doesn't - then there is a very easy way to disallow them - no
need to download anything at all. Let me show you how to control your popups, and not let your
popups control you. Internet Explorer Users: 1. Under the tools menu, go to popup blocker popup
menu and turn on IE's popup blocker if it isn't already 2. Again, go to the same menu, but
go to popup blocker settings 3. Under the filters frame, change the level to high. 4. You will now
have a popup free browsing experience. If you need to open up a popup on a place such as....
How To Make Image To Highlight When It`s Mouseovered
(8) Place this code between and tags. CODE <script
language="JavaScript1.2"> <!-- function makevisible(cur,which){
strength=(which==0)? 1 : 0.2 if (cur.style.MozOpacity)
cur.style.MozOpacity=strength else if (cur.filters) cur.filters.alpha.opacity=strength*100 }
// --> </SCRIPT> Place the following code within all of the image tags you'd
like the effect to be applied. CODE
style="filter:alpha(opacity=20);-moz-opacity:0.2"
onMouseover="makevisible(....
Checking For Open Ports From Php
If you want to check the status of a server at a specific port you can (3) Some days ago, i needed to check ports of a server from a webpage, for advising of its status. I
simply used a great php code that's fsockopen . I'll explain it in the following example:
(Imagine a file called 'checkports.php', containing the next) CODE <? $address
=" trap17.com"; //Here you can specify the address you want to check ports $port =
"80"; //Here you can specify the port you want to check from $address $checkport =
fsockopen($address, $port, $errnum, $errstr, 2); //The ....
Javascript Framework - A Shortcut Javascript
a shortcut javascript (3) hi, today im going to give you small tutorial how to use `Prototype JavaScript Framework`
1st you have to download `Prototype JavaScript Framework`library from
http://prototype.conio.net/ prototype makes easy to using Javascript, ex : when you want to point
(get) the element from HTML usually we use : CODE
document.getElementById('elementId') with prototype we use CODE
$('elementId') , yeah...world getting small..with prototype. example
we`re going to get value from an element of CODE &#....
Using A Secure File Transfer Client
A discussion of FTP, FTPS, SCP, and SFTP (0) Using a Secure File Transfer Client Almost everyone who creates a web site is faced with
the problem of getting their files from their local computer to their web server. There are a few
different protocols (methods) through which to accomplish this, and some have definite advantages
over others. Here are the major ones, listed loosely in order of increasing security. Note: All
of the programs recommended in this tutorial are for Windows only. Command line alternatives are
accessible via the terminal for both Linux and OS X. FTP First a note on using ....
Image Shack Mod
For Invision Power Board (2) Image Shack Mod For Invision Power Board ''These instructions will help you to install
'ImageShack on your Site' into the reply, quick-reply, and post-new-thread sections of your
Invision Power Board, thus giving your visitors the ability to upload images directly. After upload,
they may paste the images directly into their post box.'' CODE These instructions will
help you to install 'ImageShack on your Site' into the reply, quick-reply, and
post-new-thread sections of your Invision Power Board, thus giving your visitors the ability ....
Creating A Simple Image Viewer
Using Visual Basic 2005 Express Edition (3) I downloaded Microsoft's Visual Studio Express suite a few months ago, but only recently got
around to installing it. I have been practising with Visual Basic and making some rather basic
programs and utilities, but they contain most of the basic concepts. This tutorial will explain how
to create a basic image viewer, and I will try to explain each step from beginning to end as clear
as I can. To start you will need: Microsoft Visual Studio About 10-20 minutes free time OK,
first open up the Visual Basic part of the Studio. I am using the 2005 Express version, so....
Tool Tips Using Only Css To Pop Up The Tool Tip
No javascript involved! (8) Tool Tip Tutorial Example Found Here . Please review before continuing. Nice. And no
javascript at all to be found. The colours I have used are for demonstration purposes only to show
you that they are adjustable to suit the background or to contrast against them. Your choice. That
is a styling issue. It is your site, you decide. The original author's idea was to add
position:relative to the link, in order to allow the span element inside to position absolutely
in respect to the parent link. This code has been tested in Ie5.5, IE6, Opera7.11 and M....
How To Stop Image Hot Linking
for a selected directory. (17) Those of you that don't know what is meant by 'hotlinking', it is when someone directly
links to an image on your site so it will display on their site. This is what is called
'bandwidth theft' and being as accounts here have a limit on bandwidth, your bandwidth limit
could be exceeded by someone else hotlinking to your images. As most users of cPanel will know,
there is an option to disable hotlinking of images in the "Site Management Tools" section.
However, this disables hotlinking to all directories, what if you only want to disable hotlinki....
Image Rollovers In Javascript
A Write-Once, Use-Anywhere Approach (11) Tutorial: Image Rollovers w/ Javascript, by Rob J. Secord, B.Sc. (SystemWisdom) See a
working Sample of this Script! Download a ZIP containing all working files in this
tutorial! Note: If you are not interested in reading this entire tutorial and/or have a basic
understanding of the underlying concepts, you may safely skip to the Implementation section to get
the code! Description : A Dynamic Image Rollover Script tested to work in 4 major internet
browsers: MSIE, FireFox, Netscape and Opera. Using only Javascript combined with regular HT....
Css And Javascript Combined For Dynamic Layout
use of different CSS files at same site (9) This tutorial is meant for people that are dealing with problems while coding their site at 100% of
width. Important notice: Some people has JavaScript disabled, so they will not be able to load CSS
file (take this in account when creating your website). How this script works. In the HEAD of your
HTML document will apply this command, so variable.js file will be load at start: CODE
<script type="text/javascript" src="variable.js"></script> In
browser JavaScript file variable.js is loaded. This Javascript file consist of this para....
Server Status
MAke Your own server status in PHP (12) My Friend and i made an mmorpg we decided to make a code so the users could tell when the game
server was running this codoe has many other uses to like monitor a website or w/e you want to do.
CODE <? $ip = "youriphere"; $port = "yourporthere"; if
(! $sock = @fsockopen($ip, $port, $num, $error, 5))
echo '<B><FONT COLOR=red>Offline</b></FONT>'; else{ echo
'<B><FONT COLOR=lime>Online</b></FONT>'; fclose(....
A Little Introduction To 3d Studio Max
How to make a simple abstract image (9) This tutorial will teach you the basics of making abstract images in 3D studio max. In this example,
I used a simple sphere, and applied the “Noise” modifier. Then, I applied a transparent, blue,
plastic-like material to spice up the whole thing. Let’s start. First, make a sphere by selecting
the “Sphere” button in the “Standard Primitives” section, and draw somewhere in the center of the
perspective view. We will set the size of the sphere later on. The sphere I made looks like this,
yours can be different in size and color, but the only thing that is important is to....
Looking for image, preloader, progress, bar, status, pure, client, side, javascript, tested, 4, browsers
|
|
Searching Video's for image, preloader, progress, bar, status, pure, client, side, javascript, tested, 4, browsers
|
advertisement
|
|
Jul 20, 2008
