JavaScript - Javascript Loading Problem
Hi guys,
I am new here and am looking for a bit of help! I am building a website for a friend and am using Javascript. When I preview the site from my computer in Chrome/Firefox then all the JS elements render correctly. I am using jCarouselLite by the way and have used HTML Boilerplate too. However, when I upload the site the Carousel does not work... Also, I seem to have a lot of scripts kicking around inside the html so I will give you a list of those, but here are my external JS files so my question before posting up all the code are 1.) what is the problem with rendering the JS elements live on t'internet, and 2.) can I reduce the amount of JS files/scripts to help page loading times? css_browser_select.js modernizr-1.7.min.js jquery-1.6.1.min.js jcarousellite.js functions.js Code: $(document).ready(function(){ // Activate the main slider $("#mainSlider").jcarousellite({ btnNext: "#sliderBtnNext", btnPrev: "#sliderBtnPrev", visible: 1 }); }); plugins.js script.js jquery.placeholder.min.js and this is the code inside my HTML: Head: Code: <!-- CSS: implied media="all" --> <link rel="stylesheet" href="css/style.css" media="screen"> <link rel="stylesheet" media="handheld" href="css/handheld.css"> <!-- CSS Browser Compatibility --> <script src="js/css_browser_select.js"></script> <!-- Mobile viewport optimized: j.mp/bplateviewport --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects --> <script src="js/libs/modernizr-1.7.min.js"></script> /Head and this is at the bottom of the Body: Code: <script src="js/libs/jquery-1.6.1.min.js"></script> <script src="js/libs/jcarousellite.js"></script> <script src="js/libs/functions.js"></script> <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script>window.jQuery || document.write("<script src='js/libs/jquery-1.6.1.min.js'>\x3C/script>")</script> <!-- scripts concatenated and minified via ant build script--> <script src="js/plugins.js"></script> <script src="js/script.js"></script> <!-- THIS MAY NEED TO BE REDONE! Placeholder for Forms --> <script src="js/libs/jquery.placeholder.min.js"></script> <script> if (!Modernizr.input.placeholder){ $('input[placeholder], textarea[placeholder]').placeholder(); } </script> <!-- Form Submit --> <script> function submitForm() { document.contactPhone.submit(); } </script> <!-- Google Analytics Script - Change UA-XXXXX-X to be your site's ID --> <script> var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]]; (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1; g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js"; s.parentNode.insertBefore(g,s)}(document,"script")); </script> <!-- Bookmark Script --> <script> function bookmark_us(url, title){ if (window.sidebar) // firefox window.sidebar.addPanel(title, url, ""); else if(window.opera && window.print){ // opera var elem = document.createElement('a'); elem.setAttribute('href',url); elem.setAttribute('title',title); elem.setAttribute('rel','sidebar'); elem.click(); } else if(document.all)// ie window.external.AddFavorite(url, title); } </script> Similar TutorialsHello everyone, I am just beginning to learn javascript, and I am trying to create a little game where when a user hovers over a picture it changes, and things like that. At the moment I have been trying to make it so that the pictures tile so they fill the whole page area, dynamically so that it changes depending on the users browser size (px). The images have many attributes so I can't just tile them with css as they need to be actual elements. The problem is the code doesn't run, and I can't work out why. I think all the lines that require it have semi colons and its all correct. Forgive me if the answer is clear but as I said I only just started learning. Anyway, on with the code: Code: <!doctype html> <html lang="en"> <head> <title>Hi, I'm a button.</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="javascript"> function mainDo() { if (document.body && document.body.offsetWidth) { winW = document.body.offsetWidth; winH = document.body.offsetHeight; } if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) { winW = document.documentElement.offsetWidth; winH = document.documentElement.offsetHeight; } if (window.innerWidth && window.innerHeight) { winW = window.innerWidth; winH = window.innerHeight; } document.write('Width = ' + winW + 'Height = ' + winH); winW=winW/127; winH=winH/128; winW=Math.round(winW); winWs=winW; winH=Math.round(winH); winHs=winH; document.write('Width = ' + winW + 'Height = ' + winH); while (winH>0) { while (winW>0) { document.write('<img onMouseover="this.src=\'img/hibutton_orange.png\'" onClick="this.src=\'img/hibutton_green.png\'" ondblClick="this.src=\'img/hibutton_blue.png\'" src="img/hibutton_blue.png">'); winW=winW-1; } document.write('\n' + '<br>'); winW=winWs; winH=winH-1; } } </script> </head> <body onload="maindo()"> </body> </html> I know this was here previously but no solution was found and I wonder if someone could help. JavaScript loads before even DOM is fully loaded but only in Chrome browser. I know I could use setTimeout function but it's now ideal in my case. I am working on a program based on Chromium and have a html page inside it. Page has 4 images that resize (useing javascript) depending on window size Here is load finction Code: window.onload = function(){ window.document.body.onload = initDocument; }; function initDocument() { stretchFit("divMy", "bg"); stretchFit("divG", "bgG"); stretchFit("divTech", "bgTech"); stretchFit("divKB", "bgKB"); } Any ideas how to load function after DOM is loaded? Hi, well i searched at google and was not exactly able to find what i was looking for, i am looking for a script the shows by logo while loading the game at back end, shows loading percentage or bar representing how game is loaded and then makes the my logo disappear once the game is loaded e-g like this site has used http://www.gamegape.com/en-2095-elemental-battles.html if some thing like this is not available can someone atleast tell me how this site has done it, so we could copy it from them ^_^ Hi, im having a problem adding a frame busting killer that counteracts a frame killer script on sites so i can load them inside my iframes.. here is the code i use <?php $result = mysql_query("SELECT ru.id, ru.username, ru.owid FROM raidbar_users ru LEFT JOIN raidbar_groups rg ON ru.groupid = rg.id WHERE rg.id = '".(int)$_REQUEST['group']."'") or die(mysql_error()); $myRaidid = raidid(); if(isset($_GET['gm'])) { echo '<FRAMESET rows="*,*,*,30" frameborder="0">' . "\n"; echo ' <FRAMESET cols="*,*" frameborder="0" scrolling="no">' . "\n"; $i = 0; while($row = mysql_fetch_array($result)) { if ($i == 2) { echo ' </FRAMESET>' . "\n"; echo ' <FRAMESET cols="*,*" frameborder="0" scrolling="no">' . "\n"; $i = 0; } echo ' <FRAME src="http://'.$server[$siteConfig['userServer']].'.***********/joinraid.php?raidid=' . $myRaidid . '&suid=' . $row['owid'] . '&serverid='.$siteConfig['userServer'].'">' . "\n"; $i++; } echo ' <FRAME src="">' . "\n"; echo ' </FRAMESET>' . "\n"; echo ' <FRAMESET frameborder="0" scrolling="no">' . "\n"; echo ' <FRAME src="http://'.$server[$siteConfig['userServer']].'.***********/raidmembers.php?raidid=' . $myRaidid . '">' . "\n"; echo ' </FRAMESET>' . "\n"; echo '</FRAMESET>' . "\n"; } else { echo '<table cellspacing=1 cellpadding=1>' . "\n"; echo '<tr>' . "\n"; $i = 0; while($row = mysql_fetch_array($result)) { if ($i == 2) { echo '</tr>' . "\n"; echo '<tr>' . "\n"; $i = 0; } echo ' <td><iframe src="./acct.php?suid=' . $row['owid'] . '" width=450 height=225 scrolling=no frameborder=0></iframe>' . "\n"; $i++; } echo '</tr>' . "\n"; echo '<tr>' . "\n"; echo ' <td><iframe src=http://'.$server[$siteConfig['userServer']].'.***********/raidmembers.php?raidid=' . raidid() . '&serverid='.$siteConfig['userServer'].' width=250 height=30 scrolling=no></iframe>' . "\n"; echo '</tr>' . "\n"; echo '</table>' . "\n"; } ?> Now im told to use the following.. <script type="text/javascript"> var prevent_bust = 0 window.onbeforeunload = function() { prevent_bust++ } setInterval(function() { if (prevent_bust > 0) { prevent_bust -= 2 window.top.location = 'http://server-which-responds-with-204.com' } }, 1) </script> or var prevent_bust = 0; // Event handler to catch execution of the busting script. window.onbeforeunload = function() { prevent_bust++ }; // Continuously monitor whether busting script has fired. setInterval(function() { if (prevent_bust > 0) { // Yes: it has fired. prevent_bust -= 2; // Avoid further action. // Get a 'No Content' status which keeps us on the same page. window.top.location = 'http://server-which-responds-with-204.com'; } }, 1); But the window.top.location i dont know how to incorporate that to work. Can anyone help? I have an external Javascript file that only works when I put: Code: <script type="text/javascript" src="external.js"></script> at the end of the HTML page. Does anyone know why it won't work in the head of the page? Thanks Hi, I'm currently working on my portfolio website and would like to have information about my movie clips be retrieved from an XML document when a thumbnail is clicked. I am building my website in HTML and would like to retrieve the Xml using JavaScript. Any help would be appreciated. My XML is valid and structured as such: <?xml version="1.0" encoding="UTF-8"?> <work> <motion> <reel> <title id="Demo Reel 2009" project="Self Promotion" client="Self"> <![CDATA[This demo reel is primaraly a collection ......]]> </title> </reel> . . . . These are my initial variable definitions and readXML function in javascript: <script language="javascript"> var xmldom, workNode, motionNode, printNode, fineartNode, displayNode, titleNode; function readXMLDocument() { xmldom=createDocument(); xmldom.async=false; if (xmldom.parseError != 0) { alert("An error occurred: \nError Code " + xmldom.parseError.errorCode + "\n" + "Line: " + xmldom.parseError.line + "\n" + "Line Pos: " + xmldom.parseError.linepos + "\n" + "Reason: " + xmldom.parseError.reason); } else { alert("Document: " + xmldom.documentElement); alert("Root: " + xmldom.documentElement.tagName); alert("Child: " + xmldom.documentElement.firstChild.tagName); alert("Xml DOM: " + xmldom.xml); } xmldom.load("workinfo.xml"); workNode=xmldom.documentElement; motionNode=workNode.firstChild; printNode=motionNode.nextSibling; fineartNode=printNode.nextSibling; } . . . . A call to function revealText is called "onClick" of a thumbnail as such: <a href="videopages/reel.html" class="vid" target="video" onClick="revealText(0)"> This is function revealText: function revealText(x) { var title, project, client, info; readXMLDocument(); displayNode=motionNode.childNode[x]; titleNode=displayNode.firstChild; title=titleNode.getAttribute("id"); project=titleNode.getAttribute("project"); client=titleNode.getAttribute("client"); info=titleNode.getNodeValue(); titleSpan.innerHTML=title; projectSpan.innerHTML=project; clientSpan.innerHTML=client; infoSpan.innerHTML=info; } </script> and these are the spans they are written to: <span id="titleSpan" class="vidinfo"> <span id="projectSpan" class="vidinfo"> <span id="clientSpan" class="vidinfo"> <p id="infoSpan" class="content"> If you have read this far, I REALLLLY appreciate it. And any ideas as to what is wrong would help alot. Hello! I have a script that loads a popup window on any page of a website, in order to temporarily cover the page's content. This popup window is supposed to load on top of page's content, acting as a sort of page blocker. So the visitor can't see what's on the page until he clicks the popup. The problem i'm having right now is when i put this script on a page that has iframe content. The iframe loads on top of this popup and not underneath as it's supposed to be. Do you guys have any advise on what should i do to make this work properly when using iframes on a page? Here is the script: Code: var blocker_originalHtmlOverflow; var blocker_originalBodyOverflow; function blocker_addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } blocker_addLoadEvent(blocker_init); function blocker_init() { if(blocker_getCookie('content_unlocked')=='1') return; blocker_originalHtmlOverflow = document.getElementsByTagName('body')[0].style.overflow; blocker_originalBodyOverflow = document.getElementsByTagName('html')[0].style.overflow; document.getElementsByTagName('body')[0].style.overflow = 'hidden'; document.getElementsByTagName('html')[0].style.overflow = 'hidden'; function pageScroll() { window.scroll(0,0); // scroll to 0 if(blocker_getCookie('content_unlocked')!='1'){ scrolldelay = setTimeout('pageScroll()',100); // scrolls every 1 second } } pageScroll(); var haze = document.createElement('div'); haze.id = 'blocker_haze'; haze.style.filter = 'alpha(opacity=50)'; haze.style.opacity = .5; haze.style.height = '2000'; haze.style.width = '2000%'; haze.style.backgroundColor = '#000'; haze.style.position = 'absolute'; haze.style.top = '0px'; haze.style.left = '0px'; haze.style.zIndex = 1000000; var centerPane = document.createElement('centerPane'); centerPane.id = 'blocker_centerPane'; centerPane.style.width = '500px'; centerPane.style.height = '361px'; centerPane.style.border = '5px solid #CCC'; centerPane.style.position = 'absolute'; centerPane.style.left = '50%'; centerPane.style.marginLeft = '-250px'; centerPane.style.top= '100px'; centerPane.style.backgroundColor = '#FFF'; centerPane.style.zIndex = 1000001; centerPane.style.backgroundImage = 'url(http://www.fasgasfga.com/sfasdfasdf.jpg)'; centerPane.style.backgroundRepeat = 'no-repeat'; centerPane.style.backgroundPosition = '20px 10px'; centerPane.style.padding = '20px'; var h1 = document.createElement('h1'); h1.style.color = '#000'; h1.style.textAlign = 'center'; h1.style.fontSize = '36px'; h1.style.margin = '0 0 10px 0'; h1.style.padding = '8px 0 0 15px'; h1.style.fontFamily = 'arial'; h1.style.lineHeight = '36px'; h1.innerHTML = blocker_headline; centerPane.appendChild(h1); var p1 = document.createElement('p'); p1.innerHTML = blocker_instructionalText; p1.style.textAlign = 'center'; p1.style.padding = '20px 0 20px 0'; p1.style.margin = '0'; p1.style.fontSize = '18px'; p1.style.lineHeight = '18px'; p1.style.color = '#000'; p1.style.fontFamily = 'arial'; centerPane.appendChild(p1); var ul = document.createElement('ul'); ul.style.textAlign = 'center'; ul.style.margin = '0 0 10px 0'; ul.style.padding = '0'; ul.style.listStyleType = 'none'; for(var i = 0;i<blocker_surveryLinks.length;i++){ var li = document.createElement('li'); var a = document.createElement('a'); a.style.display = 'block'; a.style.fontSize = '17px'; a.style.lineHeight = '380px'; a.style.color = 'Black'; a.style.fontFamily = 'arial'; a.style.textDecoration = 'underline'; a.target = '_blank'; a.href = blocker_surveryLinks[i].url; a.innerHTML = blocker_surveryLinks[i].text; a.onclick = function(){ window.setTimeout(unblockContent, 55000); } li.appendChild(a) ul.appendChild(li); } centerPane.appendChild(ul); var p2 = document.createElement('p'); p2.style.textAlign = 'center'; p2.innerHTML = blocker_footerText; p2.style.padding = '20px 0 0 0'; p2.style.margin = '0'; p2.style.color = '#F50E0E'; p2.style.fontFamily = 'arial'; p2.style.fontSize = '15px'; p2.style.lineHeight = '15px'; centerPane.appendChild(p2); document.getElementsByTagName('body')[0].appendChild(haze); document.getElementsByTagName('body')[0].appendChild(centerPane); } function unblockContent(){ document.getElementsByTagName('body')[0].style.overflow = blocker_originalBodyOverflow; document.getElementsByTagName('html')[0].style.overflow = blocker_originalHtmlOverflow; document.getElementById('blocker_haze').style.display = 'none'; document.getElementById('blocker_centerPane').style.display = 'none'; //blocker_setCookie("content_unlocked", 1, 365, '/', ''); Set_Cookie( 'content_unlocked', 1 , 365, '/', '', '' ); } function Set_Cookie( name, value, expires, path, domain, secure ) { // set time, it's in milliseconds var today = new Date(); today.setTime( today.getTime() ); /* if the expires variable is set, make the correct expires time, the current script below will set it for x number of days, to make it for hours, delete * 24, for minutes, delete * 60 * 24 */ if ( expires ) { expires = expires * 1000 * 60 * 60 * 24; } var expires_date = new Date( today.getTime() + (expires) ); document.cookie = name + "=" +escape( value ) + ( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) + ( ( path ) ? ";path=" + path : "" ) + ( ( domain ) ? ";domain=" + domain : "" ) + ( ( secure ) ? ";secure" : "" ); } function blocker_setCookie(c_name,value,expiredays){ var exdate=new Date();exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString()); } function blocker_getCookie(c_name){ if (document.cookie.length>0){ c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1){ c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; } im trying to onclick function on the button but in firebug it will say, function not defined, i even tried to do it with a internal script, but still it will not work. please help Code: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="s/i.js"> </script> </head> <body> <button id="fihkhjsdk" onclick="ff();"> dsfh </button> <php code...> </body> </html> I have a form that used php to load a random image but now i would like to use javascript instead and am sure I nearly have it. I need to have a random number between 0 -5. Here is my code Code: <script type='text/javascript'> var random = Math.floor( Math.rand() * 6); document.write("<img src='images/'"+random+"'.jpg' alt='random image' /><input name='image' type='hidden' value='"+random+"' />") </script> I have a website with all of the months of the year. The main page of the website is suppose to be the current month. How can make my index page load automatically to the correct month. So if it is April, my index page will automatically load april.html. Thank you so much! Hi, everyone. I've just finally adjusted the way that the background images is laid out. my problem is that the image seems to load in original size and then align to the screen's width. I'm using a javascript code that I got from http://stackoverflow.com/questions/1...g-aspect-ratio and it is working the way I want it to, mostly. My problem is that I'm not sure how to keep the image from exceeding 100% height of the windows without squashing the aspect ratio? I also need to figure out how to fix the visible action of the image being loaded in it's original size? If we can't get the image to load WHILE at the size I want it to be, can we at least 'hide' the image until the loading have been done? I tried to tweak the codes to include the height limitation but it did not seem to have made any differences. This is my first time actually using javascript so please be easy on me, heh My site is at http://www.lost-ear-studio.com (if you refresh the site, you will see random background images being swapped out using php). Code: <script> function resizeToMax(id){ myImage = new Image() var img = document.getElementById(id); myImage.src = img.src; if(myImage.width > myImage.height){ img.style.width = "100%"; } else { img.style.height = "100%"; } } </script> Code: <img id="bg" src="randombg.php" onload="resizeToMax(this.id)"> Code: #bg{ position:fixed; left:0px; top:0px; z-index:-1; } Greetings, I am looking for either a JavaScript or Coldfusion solution to the following problem. First, there are over 60 million product photos so downloading and resizing the photos using Coldfusion would be very tedious. I would like the display an image within a 100 x 100 pixel container. If the height or width of the image is great than 100 pixels, the image should reduce in size to fit within the 100 x 100 pixel container. I want to avoid pixelation of the images as much as possible. All images are external and not on the local server so I only have an image URL. I would like to hide all images until they are resized appropriately. Does anybody know of a piece of javascript code that can do something similar to this? Sincerely, Travis Walters Hi, I have php script that uploads a file. once i click upload it should display a animated GIF image or "Loading please wait" message with the backround transparent screen covering the whole page so that the user is not able to click anything during file upload. How can i do this? Could someone help me on this. Thanks in advance. Hi, I am an asp.net developer and I wanted to display user popup (kind of) which freezes the screen so that user won't click anything else on the screen. There are some predefined controls in asp.net, but I wanted do this using Javascript. Where can I find a sample with code? Thanks Hello, I have develop a piece of code that when the user loads the html page it will load a local image but if the image doesn't exist it will load from a remote server. The question that remains is if it's possible to make an event in case the image is load locally? 1) HTML Page is load 2) If image doesn't exist locally reload from the server 3) If the image is load locally report back to the site Is the 3) possible? Hi all, I'm new to the site just have a quick question. I'm currently working on a wordpress site, however everytime I click a page, the background only loads half way.. could it be a problem with a preload script or something of that sort? I've looked all over my codes and cannot find a valid reason.. the website is http://www.offhandmag.com/ppenny Please let me know what you guys think.. i need to figure this out today. Here is the structure I am working with as this html/script was created by the chmProcessor to produce WebHelp files... index.htm contains: Code: <iframe id="mainFrame" name="mainFrame" class="full" src= "frameset.html"> frameset.html contains: Code: <frameset cols="20%,80%"> <frame id="treeFrame" src="tree.html" name="treeFrame" /> <frame id="frameCont" src="2_Welcome.htm" name="Welcome" /> </frameset> tree.html is the navigational panel and contains: Code: <script type="text/javascript" src="tree.js"> </script> I have placed alert() calls in tree.js. When I load index.htm in Chrome, apparently tree.js is not being loaded because I do not see any alert box and the functionality within tree.js does not work. Note: The functionality does work in IE and Firefox If I open tree.html directly in Chrome, the tree.js functionality does get called. I do not know how to solve this problem or why Chrome is not loading the pages and script correctly. Thanks for your help! Hi , Pls solve it Javascript problem. I have a page called gallery.html in which we have photo albums.when u click on one of the photo albums opens up all images belongs to that album on same page ( javascript). when click on one of the images it has to open up in a popup ( including other images) which is happening but the probleem is that when u close popup and again click on same images popup is happening but images are not loading. what might be the problem ..pls solve it .......its too urgent thanks in advance nagaraja kharvi I am using this code... simplified for example Code: [ <script type="text/javascript"> function loadContent(elementSelector, sourceURL) { $(""+elementSelector+"").load(""+sourceURL+""); } </script> <a onclick="loadContent('#content', 'http://www.website.com/includes/content.php');" <div id="content"></div> Works fine if run on http://www.website.com but not on http://www.website.com/home/sitepage. I have spent a few hours and cannot figure it out. Can anyone? Thanks |