JavaScript - Need To Insert A Loading Gif Into This Script...
Hi guys! Hope you can help me out here -
I found a script for a fairly neat little image gallery recently, and have successfully inserted it into my existing web page. Only problem is, it doesn't display in the browser until every last image is loaded, so when you have 20+ images (as I've modified the gallery to have), it takes a while to load, and might cause users to think nothing is happening on slower connections. So I'm basically just wondering if anyone could advise me on how to insert some code that would perhaps bring up a 'loading.gif' in its place until the gallery is loaded? I had a bash last night, but am a bit of a newbie to coding etc. and nothing I was trying was working. The code, which I shamelessly ripped from here, is as follows - Code: <html> <head> <title>Lightweight Image Gallery</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="imagetoolbar" content="false"> <meta name="description" content=""> <meta name="keywords" content=""> <style media="screen,projection" type="text/css"> /* general styling for this example */ * { margin: 0; padding: 0; } body { padding: 20px; } /* begin gallery styling */ #jgal { list-style: none; width: 200px; } #jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; } #jgal li img { position: absolute; top: 20px; left: 220px; display: none; } #jgal li.active img { display: block; } #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ } /* styling without javascript */ #gallery { list-style: none; display: block; } #gallery li { float: left; margin: 0 10px 10px 0; } </style> <!--[if lt IE 8]> <style media="screen,projection" type="text/css"> #jgal li { filter: alpha(opacity=50); } #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); } </style> <![endif]--> <script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script> <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]--> <script type="text/javascript"> var gal = { init : function() { if (!document.getElementById || !document.createElement || !document.appendChild) return false; if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal'; var li = document.getElementById('jgal').getElementsByTagName('li'); li[0].className = 'active'; for (i=0; i<li.length; i++) { li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')'; li[i].style.backgroundRepeat = 'no-repeat'; li[i].title = li[i].getElementsByTagName('img')[0].alt; gal.addEvent(li[i],'click',function() { var im = document.getElementById('jgal').getElementsByTagName('li'); for (j=0; j<im.length; j++) { im[j].className = ''; } this.className = 'active'; }); } }, addEvent : function(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent("on"+type, obj[type+fn]); } } } gal.addEvent(window,'load', function() { gal.init(); }); </script> </head> <body> <ul id="gallery"> <li><img src="images/je_1.jpg" alt="Josef & Erika 1"></li> <li><img src="images/roland_ads_2.jpg" alt="Roland Ads"></li> <li><img src="images/cd_2.jpg" alt="CD Cover 2"></li> <li><img src="images/cd_1.jpg" alt="CD Cover 1"></li> <li><img src="images/je_3.jpg" alt="Josef & Erika 3"></li> <li><img src="images/je_2.jpg" alt="Josef & Erika 2"></li> <li><img src="images/lktrd_poster1.jpg" alt="LKTRD Poster"></li> <li><img src="images/je_4.jpg" alt="Josef & Erika 4"></li> <li><img src="images/inside_1.jpg" alt="Inside Magazine"></li> <li><img src="images/oceanen_4.jpg" alt="Oceanen"></li> </ul> </body> </html> A working example in action can be seen here. Like I say I had a bash last night, where I tried a few different google-found methods, but most resulted in the loading.gif either being visible all the time, or invisible all the time, pretty useless. So, what do you guys reckon? Do-able? Any help will be very much appreciated! Thanks! Similar TutorialsI'm admittedly green in this area [among others!], but will there be any issues with any browsers loading the url below with the scripts at the bottom of the page like I have them? http://alton.k12.mo.us/index.html FF loads them fine for me, as does IE *until* I hit the compatibility mode button, then it seems to sort of "hang"...but with IE, I'm not really ever sure of what it's doing is correct or not? Hello, I'm creating a section for a school website that will list over 9,000 book titles in four different categories (by Title, by Author, by Book Level, and by Points). The content is shown in a div and called and loaded via Ajax. Here is the test page: http://www.gilchrist.leon.k12.fl.us/ar/artest.htmlAfter you click "Go" when the drop down menu is displaying By Book Title, the content loads in the div in a few moments. Here is the content page that appears in the div after you click "Go": http://www.gilchrist.leon.k12.fl.us/...tByAuthor.html If possible, I need a "page loading..." script that will appear only after you click "Go" while the list of books is being loaded. I've been testing different ones I've found online, but can't get any to work. Of course, I'm not even sure if the script would be added to artest.html, 1112-QuistListByTitle.html, or a combination of both... Any help with this would be greatly appreciated. Thank you, Deborah Hi, I am making a widget to work on any site, that means not my site, so I have no control of what other libraries are used on the page. Thats why I am loading my own jQuery libraries dynamically and then execute my own code. An issue I have that some sites are loading fine and all is working as expected, but some sites are executing the code 2 times. I have made a page dump and put on my own server, so I can replicate the issue better. GOOD: here is a page that works OK: (see the button that says: send these contact details and map to your mobile.) Code: http://test.plustest.info/suffolk/contact.html BAD: here is the page that shows the button I am trying to load 2 times: Code: http://test.plustest.info/cream.html As you can see the button appears 2 times, which is wrong... Even it shows 2 times, the popup appears just ok when you click on the button. Would anyone be able to check what can be wrong here? the code is in the: Code: <div id="now_send_it_wrapper"> so its easier to find. Any help would be much appreciated. Thanks, Vladas I'm no coder, as you will soon discover. The web work I do is from a purely novice, even hobby standpoint and the sites I create and host are nothing more than favors for friends and acquaintances who have needed but have not had a presence on the web. This being explained, I am asking those with coding skills to please take a look at the site I've just completed for a little diner down the road. (They're just starting out and can't afford to pay a professional web designer and, unfortunately, are stuck with me.) The site is http://d-n-ddiner.com I'm the first to say that the mouseover sound would drive me crazy, but the guys who own the diner are enthusiastic and want it left as is. I have had to combine scripts in order to have the "black-and-white to color" image effect work simultaneously with sound. The sound script depends on uploaded files: soundmanager.js, soundcontroller.swf and sound-config.xml and its tags are found incorporated with each involved image, within the body. The image effects are just the result of playing around with bits and pieces I've seen, mucking about the Internet. Its script is found within the head and also within the body, in each involved image's area, in mouseover, mouseout and, of course when specifying "name=" (such as Img_1). I opted for providing the sound in this manner because I am able to use an .mp3 file, rather than having to weigh through the pros and cons of .au versus .wav, etc., and the fickle nature of different browsers and plug-in crashes. After having many test the site (friends with varying operating systems and browsers) it appears that this mp3 solution makes the mouseover sound available to a broader range of users. Success has been achieved with Firefox, Safari, Netscape, Omniweb and Chrome. However, Internet Explorer and Opera seem to be the holdouts for both Mac and PC users. All this brings me to two requests: Would someone take a look at the site (particularly with Firefox) to determine if something might be done to help the page load more smoothly? Secondly, is there some sleight-of-hand that might be incorporated into the script to help IE and Opera detect the mouseover sound or do you consider these two browsers essentially not worth the bother? I am attaching a zip of the sound files I mentioned. The mp3 is not included but any mp3 snippet would do for testing, provided the sound config file is edited to reflect its file name. My primary concern is smooth page-loading; the IE and Opera issue is of less importance. Thank you for your patience and for any assistance you would offer. I have written this code but when i include code for pop calender in a row, then button was disabled, So please help me i just struck in this problem from last one week Thanking you, L.Rajesh rajboy13@gmail.com my code is Code: function addRow() { var tbl = document.getElementById('tblMed'); var lastRow = tbl.rows.length; var iteration = lastRow; var row = tbl.insertRow(lastRow); var cellLeft = row.insertCell(0); var sl = document.createElement('input'); sl.type = 'text'; sl.name = 'sln' ; sl.id = 'sln' + iteration; sl.value = iteration; sl.size = 3; sl.readOnly = true; cellLeft.appendChild(sl); var cellRights= row.insertCell(1); var elm= document.createElement('input'); elm.type = 'text'; elm.name = 'txtMdesc' ; elm.id = 'Mdesc' + iteration; elm.size = 20; cellRights.appendChild(elm); var cellRightt= row.insertCell(2); var elmn= document.createElement('input'); elmn.type = 'text'; elmn.name = 'txtMqty' ; elmn.onclick = "cal1xx.select(document.forms[0].sdate,'anchor1xx','dd-MM-yy'); elmn.id = 'Mqty' + iteration; elmn.size = 20; cellRightt.appendChild(elmn)"; var cellRightu= row.insertCell(3); var elmno= document.createElement('input'); elmno.type = 'text'; elmno.name = 'txtMbill' ; elmno.id = 'Mbill' + iteration; elmno.size = 20; cellRightu.appendChild(elmno); } the button code is : Code: </br> <fieldset style="width:60%;" align="center"> <legend> <SCRIPT LANGUAGE="JavaScript"> function deleteRow(b){ document.getElementById('table_formcontainer').deleteRow(b) } function CompareDates1() { var str1 = document.getElementById("start").value; var str2 = document.getElementById("edate").value; var dt1 = parseInt(str1.substring(0,2),10); var mon1 = parseInt(str1.substring(3,5),10); var yr1 = parseInt(str1.substring(6,10),10); var dt2 = parseInt(str2.substring(0,2),10); var mon2 = parseInt(str2.substring(3,5),10); var yr2 = parseInt(str2.substring(6,10),10); var date1 = new Date(yr1, mon1, dt1); var date2 = new Date(yr2, mon2, dt2); if(date2 < date1) { alert("To date cannot be greater than from date"); return false; } else { alert("Submitting ..."); document.form1.submit(); } return true; } function addRow() { var tbl = document.getElementById('tblMed'); var lastRow = tbl.rows.length; var iteration = lastRow; var row = tbl.insertRow(lastRow); var cellLeft = row.insertCell(0); var sl = document.createElement('input'); sl.type = 'text'; sl.name = 'sln' ; sl.id = 'sln' + iteration; sl.value = iteration; sl.size = 3; sl.readOnly = true; cellLeft.appendChild(sl); var cellRights= row.insertCell(1); var elm= document.createElement('input'); elm.type = 'text'; elm.name = 'txtMdesc' ; elm.id = 'Mdesc' + iteration; elm.size = 20; cellRights.appendChild(elm); var cellRightt= row.insertCell(2); var elmn= document.createElement('input'); elmn.type = 'text'; elmn.name = 'txtMqty' ; elmn.onclick = "cal1xx.select(document.forms[0].sdate,'anchor1xx','dd-MM-yy'); elmn.id = 'Mqty' + iteration; elmn.size = 20; cellRightt.appendChild(elmn)"; var cellRightu= row.insertCell(3); var elmno= document.createElement('input'); elmno.type = 'text'; elmno.name = 'txtMbill' ; elmno.id = 'Mbill' + iteration; elmno.size = 20; cellRightu.appendChild(elmno); } function delRow1(c) { document.getElementById('tblMed').deleteRow(c) } function validate() { var tbl = document.getElementById('tblMed'); var lastRow= tbl.rows.length-1; var a; for (a=1; a<=lastRow; a++) { var def = document.getElementById('sln'+ a); var ghi = document.getElementById('Mdesc'+ a); var jkl = document.getElementById('Mqty'+ a); var jkl1 = document.getElementById('Mqty'+ a).value; var abc = document.getElementById('Mbill'+ a); var gpexpdt2 = document.getElementById('tblMed').value; var str11 = document.getElementById("sdate").value; var str12 = document.getElementById("edate").value; var tranday = jkl1.substring(0,2); var tranmon = jkl1.substring(3,5); var tranyear = jkl1.substring(6,10); var trandate = new Date(tranyear,tranmon,tranday); var tranday2 = str11.substring(0,2); var tranmon2 = str11.substring(3,5); var tranyear2 = str11.substring(6,10); var trandate2 = new Date(tranyear2,tranmon2,tranday2); var tranday3 = str12.substring(0,2); var tranmon3 = str12.substring(3,5); var tranyear3 = str12.substring(6,10); if ((document.getElementById("AC").value == "")) { alert ( "Please enter Amount Claimed." ); document.form5.AC.focus(); return false; } else if((document.getElementById("Amb").value == "")) { alert ( "Please enter Relationship" ); document.form5.Amb.focus(); return false; } if ( document.form5.Treat.selectedIndex == "") { alert ( "Please select Treatment Type" ); document.form5.Treat.focus(); return false; } else if((document.getElementById("C10").value == "")) { alert ( "Please enter Total " ); document.form5.C10.focus(); return false; } else if((document.getElementById("C11").value == "")) { alert ( "Please enter Place " ); document.form5.C11.focus(); return false; } else if((document.getElementById("start").value == "")) { alert ( "Please enter from date" ); document.form5.start.focus(); return false; } else if((document.getElementById("edate").value == "")) { alert ( "Please enter to date" ); document.form5.edate.focus(); return false; } if (ghi.value.length == "") { alert('Please enter Bill No'); ghi.focus(); return false; } if (jkl.value.length == "") { alert('Please enter Date'); jkl.focus(); return false; } var trandate3 = new Date(tranyear3,tranmon3,tranday3); if (tranmon > 12|| tranmon < 1) { alert('Invalid Month In Date Field .Enter as dd-mm-yy'); jkl.focus(); return false; } if (tranday > 31|| tranday < 1) { alert('Invalid Date In Date Field Enter as dd-mm-yy'); jkl.focus(); return false; } if(trandate2.getTime() > trandate.getTime()) { alert("Bill date should be less than From date"); jkl.focus(); return false; } if(trandate3.getTime() < trandate.getTime()) { alert("Bill date should not be greater than End date"); jkl.focus(); return false; } if (abc.value.length == "") { alert('Please enter Amount'); abc.focus(); return false; } var str3 = document.getElementById("AC").value; var str4 = document.getElementById("Amb").value; if(parseInt(str3) > parseInt(str4)) { alert('Amount Claimed must be less than Amount Balance'); document.form5.AC.focus(); return false; } var alertsay = ""; if (form5.Treat.value > 4) { alert("Sorry You Can Not This Employee Data In Database.........."); form5.Treat.focus(); return (false); } var checkOK = "0123456789"; var checkStr = abc.value; var allValid = true; var allNum = ""; for (e = 0; e < checkStr.length; e++) { ch = checkStr.charAt(e); for (f = 0; f < checkOK.length; f++) if (ch == checkOK.charAt(f)) break; if (f == checkOK.length) { allValid = false; break; } if (ch != ",") allNum += ch; } if (!allValid) { alert("Invalid Data Please enter only digits'"); abc.focus(); return (false); } } return true; } var count =0; function Check() { if (!validate()) return true; addRow() } function removeRow1() { var tbl = document.getElementById('tblMed'); var lastRow = tbl.rows.length; if (lastRow > 1) tbl.deleteRow(lastRow - 1); } function deleteRow(node) { if (rowNum > 1) { var td = node.parentNode; while (td.tblMed.toLowerCase() != "tr") td = td.parentNode; td.parentNode.removeChild(td); rowNum = rowNum - 1; document.form1.count.value = rowNum; } else { alert ("You cannot delete the last remaining row"); } } </script> <b><font color="#153E7E"border="1">Bill Details</b></legend><br> <table id="tblMed" width="75%"> <tr> <th>Sl.No.</th> <th align="left">Bill No</th> <th align="left" onClick="cal1xx.select(document.forms[0].edate,'anchor1xx','dd-MM-yy'); return false;" NAME="anchor1xx" ID="anchor1xx" onFocus="self.status='Select Treatment Start Date';return true; " onBlur="self.status='';return true;">Bill Date(DD-MON-YY)</th> <th>Bill Amount( <span class="WebRupee">Rs.</span> )</th> </tr> </table> <tr><br/>     <input name="button" type="button" value="Add Bill" onClick="Check()"/> ................................................................................................ i want popup calender in 3rd row of the table please help and if any one got solution then please please mail it to my gmail id : rajboy13@gmail.com Hello all, I have the following code to load a new html page into the 'new content' div once the user scrolls to the bottom of the page. It all works fine. No problems, except I would like it to pause for a moment whilst it is loading, and show a loading box div at the bottom of the screen as it loads the new content, just to give some positive feedback for the user. So the new div would sit in a fixed position at 'bottom:0px;' and have a loading image inside it. Is this easy to do? I am new to javascript so bear with me Code: alreadyloading = false; nextpage = 2; $(window).scroll(function() { if($(window).scrollTop() + $(window).height() == $(document).height()) { if (alreadyloading == false) { var url = "page"+nextpage+".html"; alreadyloading = true; $.post(url, function(data) { $('#newcontent').children().last().after(data); alreadyloading = false; nextpage++; }); } } }); The 'new content' is a div which is at the bottom of the page and is where the new content loads to! Thank you very much Hi everyone, I am having trouble getting a loading bar to appear from my javascript. I have the following code in place Code: $(document).ready(function(){ $(window).scroll(function(){ var h = $('#footer').height(); var y = $(window).scrollTop(); if( y > (h*0) && y < (h*1.0) ){ $('#loading').fadeIn("slow"); $('#loading').delay(10000).fadeOut(); $("#portfolios").delay(1000).fadeIn("slow"); } }); }) I have it so when the user reacher the 'footer' div of the page, new posts appear which are contained in the 'portfolios' container div. They appear fine but no loading bar appears... The loading bar 'gif' is in the 'loading div id'. There is a 'display:none;' in the css on the loading div and the portfolios div. Any reason why the 'loading' div doesn't display but the portfolios does? I want the loading gif to show whilst the 'portfolios' is loading basically when the user hits the bottom of the page. Any help would be appreciated! Thank you! Hi there, Firstly my title may be a bit misleading as I don't i'm not sure how to do it. My situation is that I have a small piece of javascript that 'cycles' through a bunch of URL's (the URL's are reports produced by SSRS). The problem is that each time the javascript loads a new URL it has to generate the report, so I have a few seconds where the screen says 'Generating Report'. What I would like is a system that never displays the Generating Report, instead I would like to maybe pre-load the next report so it is ready to show instantly. Does anyone have any idea how to do this? Any help would be greatly appreciated. Cheers, Tom. I have an entirely javascript page that once it is done it still looks like it is loading. This is more of an annoyance than anything harmful. The page can be viewed at http://mikedombrowski.com/mRNA.html Thank you for your help in advance. Is there a way to tell Javascript to load data or a php file the re-direct to that page? Right now i have a script that will re-direct when a user comes to the page. It waits about 5 seconds to give it time. I wanted to know if there was a way to load it with JS or AJAX. Thanks for any help. for some reason I can't get this code to load... Code: <script type="text/javascript"> alert("test"); windowBody = document.getElementById("windowBody"); windowBody.style.height = (frameHeight - 250) + "px"; </script> that should load when it loads the file foot.php foot.php should be included onto the bottom of all of my labs (and it is) my labs are opened up with Ajax... but the script its not loading at all... someone help =[ the web site is http://opentech.durhamcollege.ca/~in...rittains/labs/ sorry for the poor description I'm having a hard time describing this error lol Is there a way to load up an external JS file outside of the head tag? I've got an "AJAX" web app that's loading several pages simply by changing the innerHTML property of a single div. The JS source is getting to be rather large, so I'd like to split it up into manageable, organized portions. Is there some way to, using javascript or PHP, load another javascript into the browser dynamically?
Right, I've been searching for a few days now and i'm looking for a AJAX/JQuery script where i can load external content in to a div. I've seen a few site's that have it, and im after it so when i click the page link it loads it in the address bar like this http://www.google.co.uk/#content/index.php or what ever. Thanks. Can someone please show me a working example of how to load a WebPage from an existing WebPage using Javascript! I have tried googling the syntax and not having any luck. Thanks, Blake The Website: http://hudson.zzl.org The CSS: http://hudson.zzl.org/galleria.classic.css The JavaScript: http://hudson.zzl.org/galleria.js The problem: a. first load = nothing shows up b. upon refresh everything loads very quickly and is fine. Ill explain my other loading problems once I can figure out how to fix this problem. Help please! is there a way to after thye page load add an image. So maby loading it in the background and just showing it when you click a button?
Hey guys, I currently have a flash header .swf file as the header in my webpage. Problem is, it's 300 KB so it loads after everything else has already loaded, leaving a huge blank space where the .swf is suppossed to be until it finishes downloading. Is there a way I can tell my page to pre-load the .swf before everything else so that all elements in my page look like they load at the same? For example, with images I can do something like this: function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } then: <body onload="MM_preloadImages('images/search.jpg','images/contact.jpg','images/home.jpg')"> Is there something like this for .swf? I have nearly successfully implemented a gallery using Backbox: http://www.javascriptkit.com/script/...ox/index.shtml However, when I test it in IE (7 & 8), it looks like it's invoking the javascripts and loading the large image from the thumbnail link, but then it just hangs up on the loading waiting to get the image. Does anyone know how to fix this? Thanks. I'm not sure where to put this question. I'mworking with something called OSClass which is a classified section php program. It has a plugin to make payments to paypal. but I need it to work in a new window, and the link won't do so. Don't suppose anybody sees an issue here? It seems to me that just adding target=_new to this would work. but it doesn't. Still opens the page in the same window. Code: <div class="buttons"> <div class="right"><a id="button-confirm" class="button" onclick="$('#payment_<?php echo $r; ?>').submit();" target="_new"><span><img src='<?php echo paypal_path(); ?>paypal.gif' border='0' /></span></a></div> </div> hello, I'm trying to load the ads on my site dynamically and have ran into an issue and was hoping for some help. First - I can get the ads to load using vanilla javascript with the code below. Code: var ifrm = document.createElement("iframe"); ifrm.setAttribute("src", OAS_url + "adstream_sx.ads/" +sitePage + "/" + uniqid() + "@" + pos); var ifrmId = "ifrm_" + uniqid(); ifrm.setAttribute("id", ifrmId); ifrm.setAttribute("marginwidth", 0); ifrm.setAttribute("marginheight", 0); ifrm.setAttribute("frameborder", 0); ifrm.setAttribute("scrolling", 0); ifrm.setAttribute("height", container.scrollHeight + (container.offsetHeight - container.clientHeight)); ifrm.setAttribute("width", container.scrollWidth + (container.offsetWidth - container.clientWidth)); container.appendChild(ifrm); But since the site is using jquery I wanted to develop it out that way. So I have the following code, Code: iRandom = oas.uniqid(); sAdURL = opt.url + 'adstream_mjx.ads/' + opt.sitepage + '/1' + iRandom + '@' + sPos + '?' + opt.query; $('<iframe />', { src: sAdURL, id: sPos }).appendTo(thisAd); I figured the reason this isn't working is the difference between appendChild and appendTo and the fact that things are jquery objects. So again the top code block renders the ads and the lower code block just shows the javascript code from the ad provider. Any help to get this to work in jquery would be grateful. Thanks |