|
JavaScript - Is 1140kb Too Big For An Html File?
I'm building a website, and my homepage is 1140kb. It's because I have a large image map, with approximately 10,000 different areas on it that each have onmouseover and onmouseout events (for tooltips). This image map is pivotal to my website.
This is my first time making a website. Is this too big a size? In my html file, each area is defined with code that looks like the code below: Code: <area onmouseover="tooltip.show('(Text goes here)');" onmouseout="tooltip.hide();" shape="rect" coords="0,28,43,54"/>
So, there are just about 10,000 lines like the line of code above, in my html file. Is there a way for me take this code out of my html file and put it in my external javascript (the external javascript is for the tooltips)? Similar TutorialsHi i am using javascript for the first time and i have a problem .I have 2 files html and javascript file in seperate but i donot know how to make them work .the code is down below .Thanks in advance for help. HTML <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <meta name="description" content="Instagram API - usage" /> <meta charset=utf-8 /> <title></title> </head> <body> <input id="lat_input" type="number" value="60.221374"/> <input id="lng_input" type="number" value="24.805391"/> <button id="search_location">Search</button><br/> <button id="get_popular">Get popular</button> <div id="images"></div> </body> </html> Javascript file // API DOCUMENTATION: // Instagram Developer Documentation var clientId = 'e7538f47e197479d8d32a63ae3ae4cd2'; $('#search_location').click(function () { getMediaByLocation($('#lat_input').val(), $('#lng_input').val()); }); $('#get_popular').click(function () { getPopularImages(); }); function getMediaByLocation(lat, lng) { var o = { lat: lat, lng: lng, client_id: clientId }; $.getJSON('https://api.instagram.com/v1/media/search?callback=?', o, function (response) { processImages(response.data); }); } function getPopularImages() { var o = { client_id: clientId }; $.getJSON('https://api.instagram.com/v1/media/popular?callback=?', o, function (response) { processImages(response.data); }); } function processImages(array) { $('#images').empty(); $.each(array, function (index, element) { var fs = $('<fieldset>').appendTo('#images'); $('<img>').attr('src', element.images.low_resolution.url).appendTo(fs); if (element.caption) { $('<pre>').text(element.caption.text).appendTo(fs); } $.each(element.comments.data, function (index, comment) { $('<pre>').text('Comment from ' + comment.from.full_name + ': ' + comment.text).appendTo(fs); }); }); } Does anyone know how to accomplish this? I got the html file to show but none of the text in the file will show.
I'm trying to include an HTML/CSS Navigation Bar in a JavaScript file for easy editing (instead of going from page to page changing the same thing). This is the HTML & CSS I want to include in the JavaScript file: <a style="border-left: 1px solid white; padding: 5px" class=menu href="Index.html" title="Home"> Home</a><a class=menu href="menu1.html" title="Portfolio"> Portfolio</a><a class=menu href="menu2.html" title="About Us"> About Us</a><a class=menu href="menu3.html" title="Media"> Media</a><a class=menu href="menu4.html" title="Store"> Store</a><a class=menu href="menu5.html" title="Contact Us"> Contact Us</a> -If this isn't possible to do in JavaScript, then what language can I do it in? Thank you for reading. Hi guys, On the back of my image preview issue (which is now fixed) I am having another problem. I am trying to get a file upload that will allow you to preview the html page in a popup on the click of a button. Can this be done? I have the preview button that creates the popup but at the moment it only shows the name of the file that's to be uploaded. Code below Code: <html>
<head>
<title>File Uploading Form</title>
</head>
<body>
<h3>File Upload:</h3>
Select a file to upload: <br />
<form method='post' action='upload.php' enctype="multipart/form-data" class="pure-form">
<input type="file" name="files[]" multiple="multiple" id="files">
<input type="button" value="Preview" onclick="displayHTML(this.form)">
<input type='submit' value='Submit' class="pure-button pure-button-primary"/>
</form>
</body>
</html>
<script>
function displayHTML(form) {
var inf = form.files.value;
win = window.open(", ", 'popup', 'toolbar = no, status = no');
win.document.write("" + inf + "");
}
</script>
Reply With Quote 01-24-2015, 04:56 PM #2 jmrker View Profile View Forum Posts Senior Coder Join Date Aug 2006 Location FL Posts 3,175 Thanks 39 Thanked 510 Times in 504 Posts Can you use the right-click button on your mouse and "View Source", or is this not what you are trying to do? Reply With Quote 01-24-2015, 06:58 PM #3 Foster View Profile View Forum Posts Regular Coder Join Date Nov 2011 Posts 268 Thanks 8 Thanked 4 Times in 4 Posts Not what I'm trying to do. I want to be able to click the button and the file that is waiting to be opened should pop up in a new window. Reply With Quote 01-24-2015, 09:51 PM #4 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts LOOK at your code! Code: <input type="file" name=" files[] " ...rest doesn't matter... > and var inf = form. files .value; Those are *NOT* the same name in JavaScript. Only in PHP would the be (sort of) the same (and not even quite so, there). Anyway, I don't see how you can expect an HTML file that is not yet uploaded to look the same this way as it will coming from the server. ONLY if it is restricted as follows could you get the : (a) only <img> tags that use COMPLETE URLs as their src= (that is, src="http://somesite.com/somepath/someimage.pn") (b) only href's (in any kind of tag) that use COMPLETE urls. (c) only <script> tags that use src= complete urls. (d) probably other things I didn't think of Any RELATIVE urls (e.g., <img src="/images/xxx.png"/>) will be relative TO THE CLIENT MACHINE, not to the server. And how that relative path works may vary from browser to browser. Offhand, I'd say this is not a good idea. I think you should allow the upload and then preview the uploaded file in a popup window, yes, and give the user the opportunity to delete the just-uploaded file from the server. My code works if it is in the html code itself, but when I move it to a javascript file and try to bring link it I can't get it to work at all. here is my code: lab8.js function Dice() {var number = window.prompt("How many rolls of the dice do you want?", "33"); var frequencies = new Array(13);; for (var index = 2; index <= 12; index++) { frequencies[index] = 0; } number2 = number; while(number2 > 0) { roll = Math.floor(Math.random() * 6) + 1; roll2 = Math.floor(Math.random() * 6) + 1; finalRoll = roll + roll2; number2--; var rolls = rolls + "\n" + finalRoll; frequencies[finalRoll] = frequencies[finalRoll] + 1; } totalPercent = 0; document.write("<h1>Lab8: JavaScript</h1>") document.write("<table border='1' cellpadding='1' cellspacing='1'><caption>Frequency for " + number + " rolls</caption><tr><th>Value rolled</th><th>Frequency</th><th>Percentage</th></tr>"); for(index = 2; index <13; index++) { percent = Math.round((frequencies[index] / number) * 100); document.write("<tr><th>" + index + "</th><td>" + frequencies[index] + "</td><td>" + percent + "%" + "</td></tr>"); totalPercent = totalPercent + percent; } document.write("<tr><th>Totals</th><th>" + number + "</th><th>" + totalPercent + "%" + "</th></tr><tr><td colspan = '3'>percentages are rounded</td></tr></table>") } and my html file <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <script type="text/javascript" src="lab8.js" > Dice() </script> </body> </html> I originally tried the code without including the Dice() and it not work either. I would really appreciate any help. Hi I need to access and edit html codes that belong to another file. index.html Code: <tr>
<td width="120"><a href=" pic1.html " rel="lyteframe[group]" title="" rev="width: 780px; height: 480px; scrolling: no;"><img src="images/pic1_tn.jpg" width="120" height="60" border="0"></a></td>
<td width="120"><a href="pic2.html" rel="lyteframe[group]" title="" rev="width: 780px; height: 480px; scrolling: no;"><img src="images/pic2_tn.jpg" width="120" height="60" border="0"></a></td>
</tr>
Example: For the above I want to change the pic1.html to pic6.html. I have a file Helper.html that will change this value on a click of a button. How do I go about doing that? Regards, have a look at this website. www.projectorhire.ie in the contactDetails div the number appears for a split second and then disappears.. it only happens in firefox.. Can anyone tell me what the prob could be? hello .. I want ask how can I call function located in java script file from html file . also I have many java scripts file connected to my html file . thanks.. That's right, I want to load a random html file from a list into a another div. Does anyone knows any example, please? It would be very helpful. 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. The Js code is used for lightbox picture gallery.. THe code works perfectly in IE and Firefox but not in chrome Can any body explain the js in this html file and explain how i can get it to work in chrome... Thanks PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><!-- InstanceBegin template="/Templates/new.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- InstanceBeginEditable name="doctitle" --> <title>Bouncing Castles Cork, Bouncy Castles Cork, Cork Bouncing Castle, Djs for Kids Parties in Cork</title> <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="EditRegion3" --> <meta name="Description" content="Bounce Castles Cork for Bouncy Castles in Ireland, Irish Inflatable Games, Bouncy Castle Rentals and Inflatable games for events around Ireland, entertainment and leisure industry throughout Ireland."/> <meta name="Keywords" content="Bouncing Castles Cork, Bouncy Castles Cork, Cork Bouncing Castles, Cork Bouncy Castle, Childrens entertainment adult entertainment, Cork festivals Fun fairs Fun days " /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; flashvars.settingsXML = "settings.xml"; var params = {}; params.scale = "noscale"; params.salign = "tl"; params.wmode = "transparent"; var attributes = {}; swfobject.embedSWF("dockmenu.swf", "dockmenuDiv", "600", "200", "9.0.0", false, flashvars, params, attributes); </script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script> <script src="js/lightbox++.js" type="text/javascript"></script> <script type="text/javascript"> function GroupDelegate(id) { var objLink = document.getElementById(id); Lightbox.prototype.start(objLink); } </script> <!-- InstanceEndEditable --> </head> <body> <!-- main wrap starts here --> <div id="main-wrap"> <!-- header starts here --> <div id="header"> <h1><a href="../index.html">Dream Bouncing Castles</a></h1> </div> <!-- header ends here --> <!-- menu container starts here --> <div id="menu-container"> <ul> <li><a href="../index.html">Home</a></li> <li><a href="#">Bouncing Castles</a></li> <li><a href="#">DJs for kids Parties</a></li> <li><a href="../contact.html">Contact us</a></li> </ul> </div> <!-- menu container ends here --> <div class="clear"></div> <!-- body container starts here --> <div id="body-container"> <div id="banner_boy_wrapper"> <div id="banner"></div> <div id="boy"></div> </div> <!-- InstanceBeginEditable name="EditRegion4" --> <!-- welcome container starts here --> <script type="text/javascript"> var xmlDoc; var numitor; if (window.ActiveXObject) { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); numitor=1; } else if (document.implementation.createDocument) { xmlDoc=document.implementation.createDocument("","",null); numitor=2; } else { alert('Your browser cannot handle this script'); } xmlDoc.async=false; var xmlFile = "images.xml"; xmlDoc.load(xmlFile); var x=xmlDoc.documentElement.childNodes; for (var i=0;i<x.length;i++) { if (x[i].nodeType==1) document.write("<a id='img",(i+1)/numitor,"' href='", x[i].getAttribute("bigimage"),"' rel='lightbox[img]' title='", x[i].getAttribute("lightboxInfo"), "'></a>"); } </script> <div id="welcome-container"> <h2>Our Bouncing Castles</h2> <p>Below you can see all the bouncing castles we hire out</p><br /> <div id="dockmenuDiv"> <a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a> </div> </div> <!-- welcome container ends here --> <div class="clear"></div> <!-- bouncy container starts here --> <!-- bouncy container ends here --> <!-- InstanceEndEditable --> <div class="clear"></div> </div> <!-- body container ends here --> <!-- footer starts here --> <div id="footer"> <a href="../index.html">Home</a> | <a href="#">Bouncing Castles</a> | <a href="#">Djs For Kids Parties</a> | <a href="../contact.html">Contact Us</a><br /> Copyrights 2009. All Rights Reserved </div> <!-- footer ends here --> <div class="clear"></div> </div> <!-- main wrap ends here --> </body> <!-- InstanceEnd --></html> I included a js file into my html file. Everything work well in firefox but intenet explorer does not display my js file content. please helppp Js file // JavaScript Document document.write(<div class="RightSideGallerybox"> <div class="RightBoxContext">News</div> <div class="RightBoxPictures"><img src="../image/BotanicalTreeDecoration.jpg" /></div> <div class="RightBoxPictures"><img src="../image/IMG_3304.JPG" /></div> <div class="RightBoxPictures"><img src="../image/IMG_0297.JPG" width="150" height="100" /></div> <div class="ImportantRemarks">High School Admissions</div> <div class="ListOfRemarks"> <ul> <li>A. Phillip Randolph HS</li> <li>Astor Collegiate</li> <li>Aviation High School</li> <li>Bard College HS</li> <li>Bayside High School</li> </ul> </div> </div>); html file <div class="RightSideWrap"> <div class="footertext"> <script type="text/javascript" src="gallery.js"></script> </div> <!-------------------------------middle parts - right side--------------------------> </div> </div> Hello, I'm trying to populate an HTML drop down list with data from an XML file but have failed miserably so far using examples I've found. Please help. Thanks, Richard Hi guys, I have been working on this and cant figure it out. I have an index.html as my main file and I wanted to have a pop-up window that will also open together with the index file. the pop-up window is a notepad like type, file name is clipboard.html. Addon: i started adding code to have the pop-up to stay on the right side of the screen and always on top. As of right now, all codes are very confusing and i decided to delete and start from scratch. Can you guys fill in the blanks? Hi, I have a external file for example abc.js ,in this abc.js file no functions ,it contains some scripting,i want to call the scripting file though html I use the code <script type="text/javascript src="abc.js"></script> in the header file but i want it in a href tag any clues really helpful. thankyou all. I have a javascript file and a html file. On the html file I have an action (button) and would like to use some type of attribute of the onclick to call my function to open this html file. below is the beginning of my function: requestPanel_Forwardme: function() { view.opendialog("show_me") What other attributes of action can I use? can this function in my JS file be called and if so how would I call it? <action?? I have some javascript which applies alternative row colors to a table and also gives you a highlight effect when you mouseover the rows. However, the problem I have is that it applies to every table on my page, I only want it to apply to a specific table in the html file (I'm using frontpage), not all of them How would I go about doing this? The code is below, it has a bit of styling at the top before the javascript. <style type="text/css" media="all"> table.altsrowtable { width: 90%; margin: auto; border-collapse: collapse} td { border: 1px solid black; cursorointer;text-align:center} /* row 1 */ tr td { background: #edf3fe; } tr:hover td, tr.ie td { background: #e1e1ff; } /* row 2 */ tr.bis td { background: #D9ECFF; } tr.bis:hover td, tr.bisie td { background: #e1e1ff; } /* selected row 1 */ tr.sel:hover td, tr.selie td { background: #edf3fe; } /* selected row 2 */ tr.selbis:hover td, tr.selbisie td { background: #D9ECFF; } </style> <script type="text/javascript" span="altsrowtables" div="altsrowtable" id="altsrowtable" class="altsrowtable"> var IE = false; /*@cc_on IE=true; @*/ var r; function setRows(){ r = document.getElementsByTagName('TR'); for(var i=0;i<r.length;i++) r[i].className = (i/2 != Math.round(i/2))? '':'bis'; } function selectRow(aRow,add){ var c = aRow.className; if(add) setRows(); var b = aRow.className; if(IE) aRow.className = b==''? 'selie' : b=='bis'? 'selbisie' : c=='selie'? 'ie' : c=='ie'? 'selie' : c=='bisie'? 'selbisie' : c=='selbisie'? 'bisie' : ''; else aRow.className = b==''||c==''? 'sel' : b=='bis'||c=='bis'? 'selbis' : c=='selbis'? 'bis' : ''; } // roll-over (only for IE) function roll(what) { var c = what.className; what.className = c==''? 'ie' : c=='bis'? 'bisie' : c=='bisie'? 'bis' : c=='selbis'? 'selbisie' : c=='selbisie'? 'selbis' : c=='selie'? 'sel' : c=='sel'? 'selie' : ''; } // fire on loading onload= function() { setRows(); for(var i=0;i<r.length;i++) { if(IE) { r[i].onmouseover = function(){ roll(this); } r[i].onmouseout = function(){ roll(this); } } } } </script> <style type="text/css"> table.altrowstable { font-family: calibri; font-size:11px; color:#333333; border-width: 1px; border-color: #C0C0C0; border-collapse: collapse; } table.altrowstable th { border-width: 1px; "background-image:url('QP Header.png');" border-style: solid; border-color: #C0C0C0; font-size:12px; font-style:bold; } table.altrowstable td { border-width: 1px; border-style: solid; border-color: #a9c6c9; } </style> Thanks Sean Hi people, I would like to make the following thing: Load a random file, from a xml list, into a div. I've made a scheme where I show what I was trying to make, but I don't know how to make it. I would like to load into a div a random HTML file, loaded from a XML. Does anyone knows an similar example or can tell me how's possible to do this, please? is it better to do with Javascript ? thanks for the attention guys Hi! how do I include .html files inside a document.write()? Like document.write('include top.html' "hello!" 'include bottom.html') or something. I searched for it, and found this: <!--#include file="top.html" --> But it doesn't work for me. What is wrong? I would be very happy if someone could help me |
|||||||