|
JavaScript - Page Loader Progress Bar Without Flash
I'm in the process of building a blog that will be using some pretty neat jQuery effects to spotlight its content.
One thing I've been looking at doing is trying to lessen the amount of different pages the visitor has to load by using things like sliders and accordions to hide and display content. Overall I'm not concerned that the pages will take more than 3-4 seconds on any decent connection to load, however I was thinking about visitors who are potentially running slower connections. To avoid losing those slower-connected users I've been looking for a way to display a page loader, much like what you see on flash websites, except completely without flash. I was hoping there might be some AJAX algorithm or jQuery function I wasn't aware of that might help me accomplish this. If anyone could point me in the direction of a tutorial, I'd really appreciate it! Thanks in advance. Similar Tutorialshttp://colorschemedesigner.com/ If you're on fast internet, you might not even see it, but I don't know how they do two things upon entrance. 1.) Allow the content to load (and function as a preloader) 2.) Get everything to fade in after loader completes. Is it just a div overlapping everything where opacity turns from 1 to 0 or what? I know this loader must be javascript, but this is all I can find when viewing the source, so I don't know if there is php involved but I'm guessing there is. Code: <div id="csd3-jscheck"> <h1>Color Scheme Designer 3</h1> <div id="csd3-load"> <h4>You need Javascript & CSS to run this application.</h4> <p>You may also try <a href="/previous">previous versions</a>.</p> <hr> </div> </div> Code: <script type="text/javascript">
<!--
var elm = document.getElementById('csd3-load');
if (elm) elm.innerHTML = '<p>Wait please. Loading...<'+'/p>';
//-->
</script>
Code: #csd3-jscheck {
margin: 20%;
padding: 2em 4em;
border: 1px dotted #666;
text-align: center;
}
#csd3-jscheck hr {
display: none;
}
Hey all, I have a small function that replaces an image with that of a clicked thumbnail (and updates some text). Is it possible to display a loader whilst the new image is being downloaded? The code that I currently have is below. Thanks. Code: <script type="text/javascript">
//<![CDATA[
/** Sets the correct image in the central image container */
function getImage(src, title, content, width, height){
document.getElementById("post-attachment-title").innerHTML = title;
if(content !== ''){
document.getElementById("post-content").style.display="inline";
document.getElementById("post-attachment-content").innerHTML = content;
} else {
document.getElementById("post-content").style.display="none";
}
document.getElementById("post-attachment-image").src = src;
document.getElementById("post-attachment-image").width = width;
document.getElementById("post-attachment-image").height = height;
}
//]]>
</script>
Hello fellas, First problem I want to initialize class php-like PHP Code: $i = 1; $name = 'myClass' . $i; $h = new $name(); How to do it in javascript ? Second If I'm adding a <script> to <head>, and in this new script there's a class named npcscript. How come right after adding the element, I can't initialize the class? Thanks for your time, nico Ok, im stuck. Ive tryed about 10 solutions from Google. None are working. Ok, I made a site in Flash, and a second site in HTML. I want to automatically redirect people from my flash site (indexhigh.html) to my html site (indexlow.html) if they can't see my flash movie. Here's the flash page URL: http://testnewsite.netau.net/indexhigh.html . Restrictions: This redirect MUST be done using javascript or without having me to download another swfobject file. Please paste completed code. Heres my current code: Code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Website</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
</head>
<body bgcolor="#ffffff">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
'width', '940',
'height', '940',
'src', 'Website',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'Website',
'bgcolor', '#ffffff',
'name', 'Website',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'Website',
'salign', ''
); //end AC code
}
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="940" height="940" id="Website" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="Website.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="Website.swf" quality="high" bgcolor="#ffffff" width="940" height="940" name="Website" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</noscript>
<table width="889" border="2" cellspacing="0" cellpadding="0">
<tr>
<td width="91" bgcolor="#FFFFFF">Site created by:</td>
<td width="232"><a href="http://www.christoff.tk"><img src="my_Logo.png" width="197" height="169"></a></td>
<td width="242"><a href="http://www.fcw.comoj.com"><img src="logo3.JPG" width="205" height="62"><br>
Free Charity Websites
</a></td>
<td width="112">And by the</td>
<td width="198"><p><img src="untitled.png" width="77" height="86"><br>
Fort Myers High School <br>
Web Design 2 Students from<br>
1st Period<br>
Team leader: Chris Christoff
</p></td>
</tr>
</table>
</body>
</html>
Chris Hello, can this upload progress windowsbar be made to close or stop at 100%? In the upload page the javascript code: Code: <script language="JavaScript">
function input(ok)
{
var M1=ok.upload_author.value;
if (M1=="") {
alert("Author is empty!");
return false;
}
M1=ok.upload_title.value;
if (M1=="") {
//alert("File Description is empty!");
//return false;
}
if (ok.UploadedFile.value=="") {
alert("File is empty!");
return false;
}
var sCheckType="%checktype";
if(sCheckType=="1")
{
M1=ok.UploadedFile.value.toLowerCase();
var pos=M1.lastIndexOf('.',M1.length);
var sExt;
if(pos>-1)
sExt=M1.substr(pos+1);
var sType="%filetype";
pos=sType.indexOf(sExt);
if(pos>-1)
{
alert("This type of file cannot be uploaded!");
return false;
}
}
ok.uploadid.value=Math.round(Math.random()*100000000);
return true;
}
function onstopupload() {
if(document.post.uploadid.value=="") return;
window.("uploadstop.ghp?uploadid="+document.post.uploadid.value+"&vfolder="+document.tempform.vfoldername.value) ;
}
function onshowprogress() {
if(document.post.uploadid.value=="") return;
window("showprogress.ghp?uploadid="+document.post.uploadid.value+"&vfolder="+document.tempform.vfoldername.value) ;
}
</script>
Then the "Show progress" button which on clik opens in a new window. Code: <input name="Upload" type="submit" class=button value="Upload">
</font>
<input name="stopupload" type="button" class=button id="stopupload" value="Stop" onClick="onstopupload()">
<input name="showprogress" type="button" class=button id="showprogress" value="Show upload progress" onClick="onshowprogress()">
And here;s the code from the Progress window. Code: <strong>Incarcare %filename...
<br>
%progress%
<br>
<table width="50%" border=1 align="center" cellpadding=0 cellspacing=0>
<tr>
<td bgcolor="#FF0000" width="%used%" height=15 style="border:0"> </td>
<td bgcolor=white width="%left%" height=15 style="border:0"> </td>
</tr>
</table>
<br>
<a href="showprogress.ghp?uploadid=%uploadid&vfolder=%vfolder">Actualizeaza</a>
<a href="uploadstop.ghp?uploadid=%uploadid&vfolder=%vfolder">Stop</a>
Plese if anyone knows how to resolve this to pop-up in a window and when it reachis 100% to stop redirecting, or to close it self or by user. Thanks in advance. Cira Marius Ok ..... let's see if I can explain this so someone else can understand it! I have a menu created with AllWebMenus and after battling with it for some time to get it to show up on the pages !!!! i am now facing another problem..... I have a flash movie on the home page that it does not start unless i click the home button. I've tested locally without the menu and it works, so has to be the menu that is conflicting with it. the site is www.teiafirme.com I could just drop the menu and create another one, thing is I like those darn buttons... Anyone here have any experience with this kind of problem? if needed i can post the menu and flash code... Hey guys! I have a progress bar written in javascript. Its pretty simple, consisting of a couple divs, where the inside one grows with the given percentage. Anyways, the problem we are having is that sometimes the percentage that is dynamically calculated is over 100% (we are using it as an job completion progress bar, so if more hours are spent than estimated the bar will be over 100%. I guess thats fine, except the inside div goes right off the container and keeps growing. Can we make the inside div max out at 100% somehow? Hoping someone can help me out with this, im not sure how this can be done! I should add that the original script with example I found he alpinemeadow.com/stitchery/weblog/HTML-morsels.html Here is the original code: Code: <script language="javascript">
function drawPercentBar(width, percent, color, background)
{var pixels = width * (percent / 100);
if (!background) { background = "none"; }
document.write("<div style=\"position: relative; line-height: 1em; background-color: "
+ background + "; border: 1px solid #979797; width: "
+ width + "px\">");
document.write("<div style=\"height: 1.5em; width: " + pixels + "px; background-color: "
+ color + ";\"></div>");
document.write("<div style=\"position: absolute; text-align: center; padding-top: .25em; width: "
+ width + "px; top: 0; left: 0\">" + percent + "%</div>");
document.write("</div>"); }
</script>
Called for he Code: <script language="javascript">drawPercentBar(171, <%=totaltotal/EstHours*100%>, '#aadba2', '#F2F2F2'); </script> All, Say I have a four part process to add something to my website. I'd like to have a bar at the top of my page (if you need an example, something simliar to FedEx to show where you package is along the way) that will get updated upon each page move so the user knows how far along they are in the process and how much farther they have to go? Any type of tutorials or ideas (whether it's PHP and jQuery or any other combination) I'd greatly appreciate them. Thanks in advance for any guidance. Thanks. Hi! I use the :: Form field Progress Bar from DynamicDrive: Form field Progress Bar Now I trided to change the text when the textarea is full "Limit:100%" to "Your max. characters is reached" I trided it but with no luck. This is the main code.. Code: <script type="text/JavaScript">
function textCounter1(field,counter,maxlimit,linecounter) {
// text width//
var fieldWidth = 137;
var charcnt = field.value.length;
// trim the extra text
if (charcnt > maxlimit) {
field.value = field.value.substring(0, maxlimit);
}
else {
// progress bar percentage
var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;
document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px";
document.getElementById(counter).innerHTML="Limiet: "+percentage+"%"
// color correction on style from CCFFF -> CC0000
setcolor(document.getElementById(counter),percentage,"background-color");
}
}
function setcolor(obj,percentage,prop){
obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}
</script>
This is the place where the text is set. Code: ((fieldWidth*percentage)/100)+"px"; document.getElementById(counter).innerHTML="Limiet: "+percentage+"%" Help would be highly appreciated ! greetings Jardin hi guys, i was wondering if anyone could help me. Ive been looking into the above and want to implement it on my site. I have created no flash pages and flash pages, but instead of creating a portal at the front of the site that leads you to a flash site and a no flash site id like to do it so the page detects flash or not, and redirects to whichever URL. Is this possible, or do multiple browsers cause problems ? cheers Hi, I have searched the web for many tools to upload a file and shows it progress, but they all seem to use, flash, codebehindfiles, php etc. I was looking for one that used pure Javascript was wondering if anyone could help? Thanks Marcel. I want to update the variables in the progress bar HTML5 has to offer. Here is the function I have so far (It has been modified and shortened for the means of this post): Code: function calcProgress()
{
var num1 = Number(document.form.num1.value);
var num2 = Number(document.form.num2.value);
Number(document.form.progress.value) = num1
Number(document.form.progress.max) = num2;
}
This is the form: Code: <form name="form"> <input name="num1" onChange="calcProgress()" type="text" value="0" /> / <input name="num2" type="text" value="0" onChange="calcProgress()" size="1"> <br> <progress name="progress" id="progress" min="0" value="0" max=""></progress> </form> Hello, I have a tool in my app where a user can perform a search, and it will use AJAX to deliver the results into a small box, in JSON format. When a user submits a search, a spinning gif will appear as the query is running. A javascript function is then meant to remove the gif and display the results once ready. In IE, however, this fails to happen, and the gif is locked in place, preventing the results from being displayed. I have no experience with javascript and am a bit unsure what to do. Tried to use IE's script debugger, but got totally confused. The script is much longer than this, but I think this is the problematic area: Code: 'beforeSend': function(r) {
ul.find('li').remove();
ul.html('<li class="center"><img src="/images/ajax-loader.gif" /></li>');
},
'success': function(r) {
ul.find('li').remove();
h = ''
$(r).each(function(k,r0){
h = h + '<li data-id="'+r0.value+'" data-icon_url="'+r0.icon_url+'">'+r0.label+'</li>';
});
For some reason, in IE only, it will clear the contents and display the gif upon submitting a search. But then it won't clear the gif and display the results. Any ideas? I would be so appreciative. Thank you. Greg Hi all.. I have a modal window I'm working on, but the flash below it comes over the top of the modal window. I'm assuming it's a z-index issue. I'm using Tinybox2 for the modal window, and it's CSS styles use 800 and 900 for z-index. Code: .tbox {position:absolute; display:none; padding:14px 17px; z-index:900}
.tinner {padding:15px; -moz-border-radius:5px; border-radius:5px; background:#fff url(images/preload.gif) no-repeat 50% 50%; border-right:1px solid #333; border-bottom:1px solid #333}
.tmask {position:absolute; display:none; top:0px; left:0px; height:100%; width:100%; background:#000; z-index:800}
.tclose {position:absolute; top:0px; right:0px; width:30px; height:30px; cursor:pointer; background:url(images/close.png) no-repeat}
.tclose:hover {background-position:0 -30px}
The flash itself isn't in a div but in a table. Is there a way to give it a lower z-index? Thanks in advance! carrie Hi there, I'm working on a presentation and I'm going to store each page into a ".html" So in example, I have... "1.html" "2.html" "3.html" Each number goes to each slide accordingly. The way I was working the presentation out was having users load a webpage via mobile phone which contains an iframe. I'll change the src of the iframe to the desired slide; and the META refresh will handle displaying it to the user. Now, here's the problem. It flashes on some browsers, like Blackberries. I'd like for the content being refreshed to not flash, but appear naturally. That way, the user doesn't have to attempt to read flashing text (which gets -REALLY annoying) ------------------------------------ TLDR; I need some code to refresh a page/div without flashing the content on ALL if not MOST browsers. Thanks. ------------------------------------ I think I know how I'd solve this issue; but I'm not too sure how to "integrate it" Perhaps, have a Javascript code keep the current "look" of the page static until "X" seconds. So, this would happen. Page refresh -> Javascript holds page for 5 seconds -> Page finishes loading -> Original page revealed It'd act kind of like a cover-up. How to learn Flash Scripting
Hi Guys & Girls, I am looking for help with a technical issue, which my programmer can't find the answer to. My website has a demonstration facility which allows a client to enter their website which then in turn creates a video transparency overlaying their own website. The problem is some sites with Flash, overlay my transparency video so that you cant see my demo video. Any ideas please. Thanks Maximillion i saw some website, they embed flash ,but while i right click the flash , the menu wasnt the menu of flash ,it is the html menu , it seems that the flash file was a picture . how to do this. Hi there, A client of mine has asked me to change a flash component on his website to something that will work on the ipad/iphone etc. So my guess is that a javascript created slideshow would do the trick. Check out what I am meaning on this page: http://www.it-world.com.au/ It's the flash with "Our Services" "Our Products" "Contact" in it. Can anyone suggest a very easy javascript that I could manipulate to give this same scrolling effect on the click of a link. It needs to be very easy to make changes to as I have no js skills whatsoever other than copying, pasting and making minor changes to obvious pieces of script. hope someone can help! Thanks, Ross http://www.silverbackmusic.net/home Please skip the intro. I'm talking about the navigation of this site. The way there is one huge background and clicking on each page moves the background to a certain part. Is there a way I can pull this off using some form of javascript? |
|||||||