|
JavaScript - How To Contain Html & Css In A Javascript File?
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. 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.
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. 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> 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 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 HTML that I want to put in a Javascript file and reference the HTML through external Javascript file. So I have my page, example.html Code: <html> <head></head> <body> <script type="text/javascript src="../js/external.js"> </script> </body> </html> external.js Code: document.write("<p class="txt_medium style4"> example.com<br />101 Street St.<br />City, ST, ZIP</p><p class="txt_medium style4">"The Best website." </p>");
The above code is all on one line, but is not displaying on the page. PHP is out of the question too (_._) Any thoughts? Hi I'm New to javascript how to Call WCF service using Javascript or Jquery in html page.(with out using Activex Objects) Hi I have written the following code to read contents of a text file using FileReader object of HTML 5 for Google Chrome. Quote: <script> function handle_files(files) { var i; if (checkBrowser("Chrome")) { for (i = 0; i < files.length; i++) { file = files[i]; var reader = new FileReader(); ret = []; reader.onload = function (e) { console.log(e.target.result) } reader.onerror = function (stuff) { console.log("error", stuff) console.log(stuff.getMessage()) } text = reader.readAsText(file[i]); alert(text); } } } </script> ---------------------- <input type="file" multiple="multiple" onchange="handle_files(this.files)"> Unfortunately, the variable text always displays as undefined. Everything above the line text = reader.readAsText(file[0]); works fine. How can I fix it?. Or is there any other solution to read a text file using HTML5/JavaScript on Chrome? Thanks in advance. All -- I have a JavaScript config file called gameSetting.js which contains a bunch of variables which configures a particular game. I also have a shared JavaScript library which uses the variables in gameSetting.js, which I include like so: <script type="text/javascript" src="gameSetting.js" ></script> <script type="text/javascript" src="gameLibrary.js" ></script> In gameSetting.js I have: $(document).ready(function() { // call some functions / classes in gameLibrary.js } in Firefox, Safari, and Chrome, this works fine. However, in IE, when it's parsing gameSetting.js, it complains that the functions that live in gameLibrary.js aren't defined. When it gets to parsing gameLibrary.js, the variables in gameSetting.js are reported as not being defined. I've tried dynamically bootstrapping the gameLibrary file using this function in document.ready for dynamic load... $.getScript("gameLibrary.js"); However, the same problem still happens in IE, where when it parses the files individually it's not taking into context the file/variables that came before, so it's not an out of load order problem. My options a 1) collapsing all the functions in gameLibrary.js and variables in gameSetting.js into one file. However, this is not practical because this is dealing with literally hundreds of games, and having a gameLibrary.js in ONE location for ONE update is what makes most logical sense. 2) figure out a way to get this to work where variables in file1 are accessible to file2 in IE (as it seems they are in other browsers). jQuery seems to be able to have multiple plugins that all refer to the based jQuery-1.3.2.js, so I know there is a way to get this to work. Help appreciated. Nero I can get this code to take two separate sections of a file which are not beside each other and write them into another file. It always comes up as a single full line of the code instead of the sections I want. The code includes the student number first name last name and three results of assignments. I want the code to write the student number and three results of all the students into a file and then work out the average of the student results. Can you help? Code: try{
while (in.hasNextLine())
{
String line = in.nextLine();
out.println( line);
int i=0;
if(!Character.isDigit(line.charAt(i))) { i++; }
studentStringNumber = line.substring(0, i);
String stringResult = line.substring(i);
studentStringNumber = studentStringNumber.trim();
stringResults = stringResults.trim();
double stringResultsValue = Double.parseDouble(stringResults.trim());
stringResults = in.nextLine();
studentStringNumber = in.nextLine();
studentNumber = Integer.parseInt(studentStringNumber);
if(in.hasNextInt())
{
int value = in.nextInt();
}
results = Double.parseDouble(stringResults);
if(in.hasNextDouble())
{
double value = in.nextDouble();
}
Scanner lineScanner = new Scanner(line);
studentStringNumber = lineScanner.next();
while(!lineScanner.hasNextDouble())
{
studentStringNumber = studentStringNumber+ " " +lineScanner.next();
}
stringResultsValue = lineScanner.nextDouble();
}
}
favorite I'd like to modify a form on www.formsite.com (form builder app): username: testuser password: password I would like to use the nicedit.com's inline content editor's js to transform my textarea's into a richtext area. At present the nicedit editor works well in creating the richtextarea. However, the KEY point is that I would like formsite's form to pipe in the the created html and render it with the html component of formsite. Currently, the pipe function in formsite will only put out the html syntax in it's html module. action seen he http://fs8.formsite.com/testform/form1/index.html So this would be: 1. checking out my form on formsite.com 2. the script from nicedit.com is already installed in an html component. 3. changing or telling me the scripts/tags/or whatever for formsite form using formsites form builder (which allows some html/script editing). 4. changed so as to render the rich text entered on page 1 in page 2 instead of the html syntax. Any other solutions using formsite and any other richtextarea solutions would be great too! Hi, I have the following code snippet: test.html ====== <script language="javascript" type="text/javascript"> var testVariable = "test"; </script> <script language="javascript" type="text/javascript" src="test.js"> </script> test.js ===== var testVariable = window.top.testVariable; In firefox, I'm able to access testvariable defined within test.html in test.js. But in chrome, test.js couldnot get the window.top.testVariable field defined in test.html. Can any one please let me know how i can make it work in chrome?. Am i missing something here?. Hi Guys, I am new at JavaScript and start to do some tutorials.What I am trying to do here is prompting user to input a name and if the name was valid the page(document) will display with all objects like the button.But if user enter a wrong name then the button will be disabled! I create the following code but it did not work <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script language="JavaScript" type=""> function changeColor(){ document.bgColor = "Gray"; } </script> </head> <body> <script language="JavaScript" type="text/javascript"> var person = ""; person = prompt('What is Your Name:'); if (person == "Foo") { document.write("<h1 />Welcome " + person); document.bgColor = "Yellow"; } else { document.write("<h1 />Access Denied!!!!"); document.bgColor = "Red"; document.getElementById("gree").disabled = true; } </script> <div> <p/><input id="gree" type="button" value="Gray " onClick="changeColor();"> </div> </body> </html> as you can see I used the: document.getElementById("gree").disabled = true; but it did not work , could you please give an idea how I can solve this problem? Thanks 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)? Dear All I have a .js file in which i have pasted Urdu text and HTML tags like function urdutext() { innerHTML.right_column='HTML tags & urdu text';} The .js file contains about eighty lines of urdu text and some HTML tags in betweeen. But when i run this file alone in my browser it displays half of the file and the rest of the lines remain undisplayed. and when i use this file in my web page and when i click a button to display the urdu text, it dispays nothing in my web page. I know the reason but i cant solve it my self. The reason is that the .js file does not get fully uploaded and hence the file remains open and the syntax become wrong. And that is the reason it does not display anything in the web page. So i want ut help. Any one can help and would take my best wishes. Regards Sajad Bhatt 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> 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, |
|||||||