JavaScript - Page Load "loading..." Text
i need a javascript that will show LOADING in the top left or top right corner of the page until the entire page is completely loaded because the page is VERY VERY VERY long.... and it takes a while on 56kbps because it has so much text.... like in Google's GMAIL, it has the red and white Loading text in the top right until the page loads... can someone refer me to such a script?
Similar TutorialsWhen my page loads, it automatically jumps down as if it were jumping to a named anchor. It's more apparent on longer pages (doesn't replicate if page fills screen). Happening in Win FF/IE/Chrome Disabling stylish-select.js (from http://www.prismstudio.co.uk/2009/05...x-replacement/ where he used to allow comments but not anymore) fixes it, but I don't know enough Javascript to debug, would really appreciate if somebody could have a look. Good example at http://studiohodson.com/projects/Bea...restaurant.php Script is at http://studiohodson.com/projects/Bea...lish-select.js Thank you thank you! Hello , here is my code(which is not working on my problem) i want to remove anchor tag(href="a") will u please help.... Code: <html> <head><title>Welcome to DevForum</title></head> <script language="javascript" type="text/javascript"> function Remove() { var anchor = document.getElementsByTagName("a"); var i; for(i=0;i<anchor.length;i++) { var anc=anchor.item(i); var href=anc.attributes.getNamedItem("href"); if (href.value == "a") { anchor.item(i).attributes.getNamedItem("href").value = ""; } } } </script> <body onload="Remove()"> <h1>Welcome</h1> <a href="b">b</a> <a href="a">a</a> </body> </html> Thanks in Advance.... Hello, I have been looking for a code which loads my content and images as well as my javascript and style before my visitor enters my site. I have been on a website before (I cannot remember the link) and it has: Quote: Please wait til we take our own sweet time to load this page with the content behind it, but slightly 'dimmed'. I think that this would be great for my site. If anyone would help me with this I will greatly appreciate it! Thanks. I need to do an input text validation which include opening parenthesis and closing parenthesis, what I need to validate is the opening parenthesis match with closing parenthesis. Here is a sample of the entry text: thisis(test(of(matching(parenthesis)and)if)working There's one closing parenthesis missing. I would like to warn the user to correct it before submit, but not quite sure how to do it with javascript. Please advice. Thanks JT Hi, I was working on my web page and noticed that depending on the width of the screen, the Iframe I created would not display correctly. Because of that I needed to come up with a piece of code that would detect the screens horizontal resolution and pick the right Iframe to be loaded. Below are the scenarios that specify which one should be loaded. I am very bad with javascript so could someone help me come up with a piece of code that would load the right frame? Thanks. The web address where the code will go is www.jumbledfun.com/nasa.html. If the horizontal resolution of the screen is less then 1600 I would like this Iframe to be loaded: (It Would Go Under The If Part) Code: <iframe src="http://www.jumbledfun.com/nasaframes/nasalivelr.html" width= "55%" height= "580%" scrolling="no" frameborder="0"/> </iframe> If the horizontal resolution of the screen is 1600 or more I would like this Iframe to be loaded: (It Would Go Under The Else Part) Code: <iframe src="http://www.jumbledfun.com/nasaframes/nasalive.html" width= "100%" height= "300%" scrolling="no" frameborder="0"/> </iframe> This is the format that I would want it in: Code: <script type="text/javascript"> if (condition) { code to be executed if condition is true } else { code to be executed if condition is not true } </script> Hi guys, right now I'm trying to write a comet application, that communicates with a server by iframe streaming. The problem is, that in my applications the browser does the "loading thing" (loading bar, loading cursor). I have seen many applications, where iframe streaming is used, without any loading signs in the browser. For example: http://www.stream-hub.com/demo/StockDemo/index.html http://orbited.org/wiki/LiveHelp http://lib1.freeliberator.com/exampl...e-example.html (some examples use XHR streaming) Could somebody tell me how to do it without the loading stuff? Thanks and best regards, Markus Hi I am trying to load html stream directly into webbrowser in delphi. The html contains java script. It loads xml and xsl files and display the xml content in the web browser. I got an error, says access denied for the command xmlDoc.load(fname); If I save the html into a file, test.html, and double click it, it is fine, no problem. The code is actually copied from w3schools.com. the html code as followed: <html> <head> <script> function loadXMLDoc(fname){var xmlDoc; if (window.ActiveXObject) { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); } else { alert('Your browser cannot handle this script'); } xmlDoc.async=false; xmlDoc.load(fname); return(xmlDoc); } function displayResult() { xml=loadXMLDoc("catalog.xml"); xsl=loadXMLDoc("catalog.xsl"); if (window.ActiveXObject) { ex=xml.transformNode(xsl); document.getElementById("example").innerHTML=ex; } } </script> </head> <body id="example" onLoad="displayResult()"> </body> </html> The delphi code is procedure TForm1.WBLoadHTML(WebBrowser: TWebBrowser; HTMLCode: string) ; var v: OleVariant; HTMLDocument: IHTMLDocument2; begin memo1.Lines.LoadFromFile('d:\test\htmltxtold.html'); HTMLCode := memo1.Text; WebBrowser1.Navigate('about:blank') ; HTMLDocument := WebBrowser.Document as IHTMLDocument2; v := VarArrayCreate([0, 0], varVariant); v[0] := HTMLCode; HTMLDocument.Write(PSafeArray(TVarData(v).VArray)); HTMLDocument.Close; end; Thanks a lot I am trying to decide whether using a JavaScript-flatfile or a PHP-MySQL setup is the fastest for my application. The PHP-MySQL setup is really basic, just a very simple MySQL 5 database with only 3 columns or so. However, the JavaScript-flatfile is a solution I thought of that could work surprisingly well. Let's say I want to make a Google Suggest like application, but one that only works for single words, and only displays the most likely result and not the 10 most likely. If the user has partially enter the word "banana", by only typing "ban", the Javascipt will do some parsing, and send the user to a filesystem that has the destination "b/a/n/finish.txt". The finish.txt file would be in every one of these directories, and would contain the most likely ending, in this case "ana". Would this be fast, or does having all these directories slow the server down quite a bit? Would there be a faster way, or a more simple way? Thanks! Hello everyone. I was hoping i could get some help from a php or a javascript pro. At the moment my site has been set up to load more posts in the same page instead of browsing 1,2,3..20 but there is a bit of a problem. After a few seconds of browsing a number pops up on my feed and shows the number of posts i have chosen to load in text format. Then all posts get reset back to 90 and i get scrolled back up to the top automatically. Could you please take a look at this php and javascript code and tell me what the problem is? $D->num_results = 0; $D->start_from = 0; $D->posts_html = ''; if( $q1!='' && $q2!='' ) { $D->num_results = $db2->fetch_field($q1); $D->start_from = $this->param('start_from') ? intval($this->param('start_from')) : 0; $D->start_from = max($D->start_from, 0); $D->start_from = min($D->start_from, $D->num_results); $res = $db2->query($q2.'LIMIT '.$D->start_from.', '.$C->PAGING_NUM_POSTS); $D->posts_number = 0; ob_start(); while($obj = $db2->fetch_object($res)) { $D->p = new post($obj->type, FALSE, $obj); if( $D->p->error ) { continue; } $D->posts_number ++; $D->p->list_index = $D->posts_number; $this->load_template('single_post.php'); } unset($D->p); $D->posts_html = ob_get_contents(); ob_end_clean(); } if( $this->param('from') == 'ajax' ) { echo 'OK:'.$D->posts_number.':'; $display echo $D->posts_html; die(); } if( $show=='all' || $show=='@me' || $show=='private' || $show=='commented' || $show=='feeds' ) { $this->network->reset_dashboard_tabstate($this->user->id, $show); } and my javascript function my_scroll_page_to(h) { if( document.body.scrollTop === undefined ) { w.scroll(0, h); return; } var start_scroll = parseInt( typeof(w.pageYOffset)=='number' ? w.pageYOffset : document.body.scrollTop, 10); if( isNaN( start_scroll ) ) { w.scroll(0, h); return; } if( start_scroll == h ) { return; } var step = start_scroll>h ? -12 : 12; var breakf = false; var func = function() { start_scroll += step; w.scroll(0, start_scroll); if( start_scroll == h ) { return; } if( step > 0 && start_scroll > h ) { return; } if( step < 0 && start_scroll < h ) { return; } if( breakf ) { return; } setTimeout( func, 1 ); } func(); document.body.addEventListener("orientationchange" , function(){ breakf = true; }, false); } function load_more_results(div_id, current_results, all_results) { current_results = parseInt(current_results, 10); all_results = parseInt(all_results, 10); var url = w.location.href.toString(); if( ! url ) { return; } if( url.substr(0, siteurl.length) == siteurl ) { url = url.substr(siteurl.length); if( url.indexOf("#") != -1 ) { url = url.substr(0, url.indexOf("#")); } url = siteurl+url+"/from:ajax/start_from:"+(current_results+1)+"/r:"+Math.round(Math.random()*1000); } else { url = url.replace(/^http(s)?\:\/\//, ""); url = url.substr(url.indexOf("/")); if( url.indexOf("#") != -1 ) { url = url.substr(0, url.indexOf("#")); } url = siteurl+url+"/from:ajax/r:"+Math.round(Math.random()*1000); } var req = ajax_init(false); if( ! req ) { return false; } req.onreadystatechange = function() { if( req.readyState != 4 ) { return; } var txt = trim(req.responseText); var num = txt.match(/^OK\[0-9]+)\:/g); if( ! num ) { return; } num = num.toString().match(/([0-9]+)/); num = parseInt(num, 10); if( ! num ) { return; } txt = txt.replace(/^OK\[0-9]+)\:/, ""); txt = trim(txt); var dv = document.createElement("DIV"); dv.innerHTML = txt; document.getElementById(div_id).appendChild(dv); setTimeout( function() { my_scroll_page_to(dv.offsetTop-30); }, 5); if( current_results+num+1 >= all_results ) { document.getElementById("loadmore").style.display = "block"; } document.getElementById("loadmorelink").onclick = function() { load_more_results(div_id, current_results+num+1, all_results); }; document.getElementById("loadmoreloader").style.di splay = "none"; } req.open("GET", url, true); req.send(""); document.getElementById("loadmoreloader").style.di splay = "block"; document.getElementById("loadmorelink").blur(); } I would really appreciate any with this issue as it makes my site look really ugly and we have a lot of members. Kind Regards Chan Is there an easy was to handle loading? I have an image/text gallery and want to display "Loading..." when the JavaScript is loading the next object. Code: var currentMain = 0; var currentMainT = 0; var current_position=0; var all_links=""; function init(){ all_links=document.getElementById('gallery').getElementsByTagName('a'); all_links[0].style.color="#7d3d3d"; ShowMain(current_position); } function color_me(element,color){ element.style.color=color; } function Prev(){ color_me(all_links[current_position],'#000000'); if((current_position-1)>-1){ current_position=current_position-1; } else{ current_position=(all_links.length-1); } ShowMain(current_position); // ShowMainT(current_position); color_me(all_links[current_position],'#7d3d3d'); } function direct_selection(number){ all_links[current_position].style.color="#000000"; current_position=number; ShowMain(current_position); all_links[current_position].style.color="#7d3d3d"; } function Next() { color_me(all_links[current_position],'#000000'); if((current_position+1)<all_links.length){ current_position++; } else{ current_position=0; } ShowMain(current_position); // ShowMainT(current_position); color_me(all_links[current_position],'#7d3d3d'); } function ShowMain(which){ currentMain = which; currentMainT = which; if ( currentMain < 0 ) currentMain = 0; if ( currentMainT < 0 ) currentMainT = 0; if ( currentMain > imgList.length-1) currentMain = imgList.length-1; if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1; document.getElementById('mainImg').src = imgList[currentMain]; document.getElementById('mainText').innerHTML = clientData[currentMainT]; var PD = document.getElementById('Pg'); var PD2 = document.getElementById('Pg2'); document.getElementById("mainText").style.display = 'inline'; // return false; } onload = function() { ShowMain(0); } onload = function() { ShowMainT(0); } //--> I am trying to manipulate a an image gallery that functions well. Now, I have the ability to pull information from a user's preference pannel and need to place it in the an href="" // And other information in each of the "src" | "url" | "alt". Any ideas would be truly helpful. This is what I am working with at the moment and it doesn't work (obviously because it is adding code inside a span). Here is what I am starting from: [CODE] var title01Span = document.getElementById('title01Span'), //Finds the id that I want prefs = new gadgets.Prefs(), // Pulls from the user's preferences yourtitle01 = prefs.getString("title01"); // Pulls the correct string from those preferences title01Span.innerHTML = yourtitle01; // replaces the span.id with that text but I need to be able to do this in the src / href / url / etc. [CODE] Thank you so much! I seriously could use as much help as possible! well title says it all i have a search form, and the default value is "enter text here" when the user click the submit button, i would like to check if the value of my text input is "enter text here" and if it is, then don't submit the form (popup a warning or something) how can i do that? thanks a lot! Hello, recently I have been to many government websites where I have noticed that the programmer has used window.open() method in JavaScript to link to different pages instead of using <a> tags! I was just getting curious to know whether it is normal or has it been used due to security concerns(if any, I don't know)? Any comments? Hi all, I'm having a bit of a problem.. I need to disable the submit button on body onload, and i need to re-enable it when "i agree" is checked. the problem is, it wont do this.. it literally stays disabled, even after check mark.. code: Code: <html> <head><title>Metal Detecting</title></head> <body onload="disable()" oncontextmenu="return false;"> <script> function disable(){ if(document.forms.test.agree.checked == false){ document.forms.test.s1.disabled = true; } } function enable(){ if(document.forms.test.agree.checked == true){ document.forms.test.s1.disabled = false; } } function checkCheckBox(f) { if (f.agree.checked == false) { alert('You MUST agree to the terms by checking the box above.'); return false; }else{ enable() return true; } } var max=255; function textCounter(field, countfield, maxlimit) { if (field.value.length > maxlimit){ // if too long...trim it! field.value = field.value.substring(0, maxlimit); // otherwise, update 'characters left' counter }else{ countfield.value = maxlimit - field.value.length; } } function submitonce(theform){ //if IE 4+ or NS 6+ if (document.all||document.getElementById){ //screen thru every element in the form, and hunt down "submit" and "reset" for (i=0;i<theform.length;i++){ var tempobj=theform.elements[i] if(tempobj.type.toLowerCase()=="submit"||tempobj.type.toLowerCase()=="reset") //disable em tempobj.disabled=true } } } function checkdata(which) { var pass=true; var t1 = document.forms.test; for (i=0;i<which.length;i++) { var tempobj=which.elements[i]; if (tempobj.name.substring(0,8)=="required") { if (((tempobj.type=="text"||tempobj.type=="textarea")&& tempobj.value=='')||(tempobj.type.toString().charAt(0)=="s"&& tempobj.selectedIndex==0)) { pass=false; break; } } } if (!pass) { shortFieldName=tempobj.name.substring(8,30).toUpperCase(); alert("The "+shortFieldName+" field is a required field."); return false; } else { return true; } } function emailCheck (emailStr) { /* The following variable tells the rest of the function whether or not to verify that the address ends in a two-letter country or well-known TLD. 1 means check it, 0 means don't. */ var checkTLD=1; /* The following is the list of known TLDs that an e-mail address must end with. */ var knownDomsPat=/^(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|coop|info|pro|museum)$/; /* The following pattern is used to check if the entered e-mail address fits the user@domain format. It also is used to separate the username from the domain. */ var emailPat=/^(.+)@(.+)$/; /* The following string represents the pattern for matching all special characters. We don't want to allow special characters in the address. These characters include ( ) < > @ , ; : \ " . [ ] */ var specialChars="\\(\\)><@,;:\\\\\\\"\\.\\[\\]"; /* The following string represents the range of characters allowed in a username or domainname. It really states which chars aren't allowed.*/ var validChars="\[^\\s" + specialChars + "\]"; /* The following pattern applies if the "user" is a quoted string (in which case, there are no rules about which characters are allowed and which aren't; anything goes). E.g. "jiminy cricket"@disney.com is a legal e-mail address. */ var quotedUser="(\"[^\"]*\")"; /* The following pattern applies for domains that are IP addresses, rather than symbolic names. E.g. joe@[123.124.233.4] is a legal e-mail address. NOTE: The square brackets are required. */ var ipDomainPat=/^\[(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\]$/; /* The following string represents an atom (basically a series of non-special characters.) */ var atom=validChars + '+'; /* The following string represents one word in the typical username. For example, in john.doe@somewhere.com, john and doe are words. Basically, a word is either an atom or quoted string. */ var word="(" + atom + "|" + quotedUser + ")"; // The following pattern describes the structure of the user var userPat=new RegExp("^" + word + "(\\." + word + ")*$"); /* The following pattern describes the structure of a normal symbolic domain, as opposed to ipDomainPat, shown above. */ var domainPat=new RegExp("^" + atom + "(\\." + atom +")*$"); /* Finally, let's start trying to figure out if the supplied address is valid. */ /* Begin with the coarse pattern to simply break up user@domain into different pieces that are easy to analyze. */ var matchArray=emailStr.match(emailPat); if (matchArray==null) { /* Too many/few @'s or something; basically, this address doesn't even fit the general mould of a valid e-mail address. */ alert("Email address seems incorrect (don't forget to add an @ and a . to your email address!)"); return false; } var user=matchArray[1]; var domain=matchArray[2]; // Start by checking that only basic ASCII characters are in the strings (0-127). for (i=0; i<user.length; i++) { if (user.charCodeAt(i)>127) { alert("Ths username contains invalid characters."); return false; } } for (i=0; i<domain.length; i++) { if (domain.charCodeAt(i)>127) { alert("Ths domain name contains invalid characters."); return false; } } // See if "user" is valid if (user.match(userPat)==null) { // user is not valid alert("The username doesn't seem to be valid."); return false; } /* if the e-mail address is at an IP address (as opposed to a symbolic host name) make sure the IP address is valid. */ var IPArray=domain.match(ipDomainPat); if (IPArray!=null) { // this is an IP address for (var i=1;i<=4;i++) { if (IPArray[i]>255) { alert("Destination IP address is invalid!"); return false; } } return true; } // Domain is symbolic name. Check if it's valid. var atomPat=new RegExp("^" + atom + "$"); var domArr=domain.split("."); var len=domArr.length; for (i=0;i<len;i++) { if (domArr[i].search(atomPat)==-1) { alert("The domain name does not seem to be valid."); return false; } } /* domain name seems valid, but now make sure that it ends in a known top-level domain (like com, edu, gov) or a two-letter word, representing country (uk, nl), and that there's a hostname preceding the domain or country. */ if (checkTLD && domArr[domArr.length-1].length!=2 && domArr[domArr.length-1].search(knownDomsPat)==-1) { alert("The address must end in a well-known domain or two letter " + "country."); return false; } // Make sure there's a host name preceding the domain. if (len<2) { alert("This address is missing a hostname!"); return false; } // If we've gotten this far, everything's valid! return true; } </script> Please contact us!<br><br> *Please note you can submit the form ONLY once. Any double form submissions will be deleted.<br> <form name="test" id="test" method="POST" onsubmit="return checkdata(this), emailCheck(this.email.value), checkCheckBox(this)" action="send.php"> <div id = "div01" style="width: 100; height: 25;"> Firstname: <input name="requiredfirstname" id="firstname" type="text" /> Lastname: <input name="requiredlastname" id="lastname" type="text" /> Email: <input name="requiredemail" id="email" type="text" /><br /><br /> </div> <H4>Your statement: </H4> <textarea onKeyDown="textCounter(this.form.statement,this.form.counter,max);" onKeyUp="textCounter(this.form.statement,this.form.counter,max);" name="requiredstatement" id="statement" rows="15" cols="40"></textarea><br /> Characters left: <input readonly="readonly" value="255" size=3 maxlength=3 type="text" name="counter" id="counter"><br/><br /> <textarea name="license" cols="40" rows="15" id="license">Blah!</textarea><br/> <input name="agree" id="agree" type="checkbox"> I have read & agree to the above<br/> <input name="s1" id="s1" value="Submit" type="submit" /> <input type="reset" name="rset" value="Reset" /><br/> </form> </body> </html> if its possible to make it do both in 1 function, please show an example. if you have to use 2 functions, then also show me an example. ANY help is GREATLY appreciated! Hello, I run a online gaming website, and I'm having problems with certain websites iframing our games. Actually I'm ok with iframing, as long as they include the banner ad located just beneath our games. But often times unscrupulous webmasters will iframe only the game, preventing us from generating any revenue from the banner ad (and costing us additional bandwidth charges). I'm hoping to find a way to detect the dimensions of the iframe, so that I may dynamically resize the game, in order to include the banner ad within the iframe. Does anybody know how to extract the "height" and "width" attribute values from an <iframe> tag sitting on a different site? Regards, Steve I need to change input type="text" to input type="password" via JavaScript Code: <form id="login" action="#" method="post"> <input id="username-field" type="text" name="username" title="Username" onmousedown="javascript:this.value=''; javascript:this.focus();" value="Username" tabindex="1" /> <input id="password-field" type="text" name="password" title="Password" onmousedown="javascript:this.value=''; javascript:this.type='password'; javascript:this.focus();" value="Password" tabindex="2" /> <input type="submit" name="submit" value="sign in" tabindex="3" /> </form> This works in Firefox and Safari but not IE So then I tried this code Code: <script type="text/javascript"> function passit(ip){ var np=ip.cloneNode(true); np.type='password'; if(np.value!=ip.value) np.value=ip.value; ip.parentNode.replaceChild(np,ip); } </script> <form id="login" action="#" method="post"> <input id="username-field" type="text" name="username" title="Username" onmousedown="javascript:this.value=''; javascript:this.focus();" value="Username" tabindex="1" /> <input id="password-field" type="text" name="password" title="Password" onmousedown="javascript:this.value=''; passit(this.form[0]); javascript:this.focus();" value="Password" tabindex="2" /> <input type="submit" name="submit" value="sign in" tabindex="3" /> </form> This does what I need but turns the username type to password field not the password box Please can somone help! well the jquery is working fine for twitter and other stuff but its not working for facebook, when i highlight the text and select fb to share at then the facebook share just show the meta description of site and not the selected area. I am not able to understand where am i going wrong, any assistance provided is highly appreciated. Go to this link http://www.blobh.com/2011/09/testing-1.html there select some text then a tooltip kind of thing will appear first share at twitter then at facebook you will understand the matter. the script i am using is this Code: <script type='text/javascript'> $('.demo1').selectedTextSharer({ lists:"Twitter,http://twitter.com/home?status=%ts ,favicon|Facebook,http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.blobh.com%2F&t=%s,favicon|Wikipedia (en),http://en.wikipedia.org/w/index.php?title=Special:Search&search=%s,favicon|Google Maps,http://maps.google.com/?q=%s,favicon", extraClass: 'dark', title: 'Share this text ...', borderColor: '#7F241C', background : '#4F663A', titleColor : '#7F241C', textColor : '#FFFFFF', hoverColor: '#7F241C' }); </script> and the other script is this one http://bloghuts.googlecode.com/files...-sharer.min.js and the html is like this Code: <!-- Just wrap a text with a div and add a class, thats all ! --> <div class="demo1"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</div> <textarea class="demo4"></textarea> <input class="demo4" type="text" /> suggestions welcome !!
|