|
JavaScript - Why Should I Keep Html, Js & Css Separate?
Hi,
I have read (and been told) that the current standard/fashion is to have separate files for html, css and javascript but nobody has ever said why that is... it would seem to me to be easier to keep everything in one file, but there must be advantages to separating them out. Does anybody feel like breaking them down for me? thanks in advance. Similar TutorialsI want to make separate js and html files from my toggle.htm file: Code: <html>
<head>
<script type="text/javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
</head>
<body>
<a id="displayText" href="javascript:toggle();">show</a> <== click Here
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>
</body>
</html>
My togglejs.js file looks like this: Code: function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
My togglehtm.htm file looks like this: Code: <html> <head> <script type="text/javascript" src="toggle.js"></script> </head> <body> <a id="displayText" href="javascript:toggle();">show</a> <== click Here <div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div> </body> </html> What changes should I make. Please help. Hey all, So basically, what I effectively want is a dropdown menu, but without it dropping down. Let me put it a different way, I have my top links, and a space underneath them. What I want is for if you move your mouse over one of the links a new set of links relative to that one will appear in the box below and will remain there until the mouse is moved over another main link. Is this possible? Thanks Hi, I'm fairly new to javascript & am trying to learn it using best methods. I have been using various books & some video tutorials, such as lynda.com. I've noticed when I do google searches for example tutorials, 9 times out 10, the javascript has been coded into the html file. As a newbie I find it takes a very long time to redo the coding into the separate .js file. And if the coding is relatively complex (and most of it appears that way to someone new to this) I can't get it too work using a separate file for the javascript. I wanted to ask anyone very familiar with this, their suggestions regarding good places for tutorials where the .js file is separated. Apparently there are advantages to having it separate and it's considered best practices from what I've come to understand. Also most of the results from google searches pulls up out-dated coding and/or tutorials that suggest you should already understand what is being referred too. I'm trying to avoid learning it the wrong way. I'm willing to put in the effort, however I don't want to pick up bad habits. Any help is very appreciated. If this was not as clear as I intended it to be, please ask any specifics and I'll try my best to answer. -Todd Hello. I am opening a new small window through javascript. Here is the code: Code: <script type="text/javascript">
function openwindow(id) {
var left = (screen.width/2)-350;
var top = (screen.height/2)-240;
var mywindow = window.open(" map.asp ?location="+id,"mywindow","menubar=0,resizable=0,width=700,height=400,left="+left+",top="+top+"");}
</script>
But on the same page I have another link for a new window which is essentially the same code: Code: <script type="text/javascript">
function openwindow(id) {
var left = (screen.width/2)-350;
var top = (screen.height/2)-240;
var mywindow = window.open(" pofull.asp ?poid="+id,"mywindow","menubar=0,resizable=0,width=700,height=400,left="+left+",top="+top+"");}
</script>
As you can see in the red text, one link should open map.asp and the other should open pofull.asp... but they BOTH open in pofull. So I have tried to change the function name for one of them but then it doesnt work at all. I am quite confused here. I have tried everything to separate the two scripts but nothing has worked. Can someone help? Hi On my web page I have 3 seperate catorgories with 2 drop down lists in each, the first dropdown list in each catergory is for "county" here is a snippet of the code Code: function fillCategory(){
addOption(document.drop_list.Category, "bedfordshire", "Bedfordshire", "");
addOption(document.drop_list.Category, "berkshire", "Berkshire", "");
addOption(document.drop_list.Category, "buckinghamshire", "Buckinghamshire", "");
addOption(document.drop_list.Category, "cambridgeshire", "Cambridgeshire", "");
I wanted to know if it is possible to use "list.js" to populate all 3 county dropdown lists or would I need "list.js" "list1.js" etc etc Hi, I'm writing a page scraper in javascript which involves loading a page to scrape, detecting when the page has loaded successfully and then scraping the data. I can get the 'page loading detection' to work if I load the page in a sub-frame. But this is no good as some sites include frame-buster code which breaks my scraper and I cant get any of the framebuster-buster solutions to work. So instead I decided to look at loading the page in a separate tab. Does anyone know how to reliably detect when a page has finished loading in a tab please? I am using Firefox only and I dont mind if the solution requires some extension or greasemonkey script (I have already added the configuration/commands to allow access to pages from different domains). The code below shows an attempt. It sometimes detects when the initial page has loaded but when I press 'submit' it doesnt detect the second loading. Thanks. Code: <html>
<head>
<script type="text/javascript">
currentPageObj = window.open("http://www.bbc.co.uk", "currentPage");
currentPageObj.addEventListener("load", function(){alert("loaded")}, false);
</script>
</head>
<body>
<form action="http://www.example.com" rel="nofollow" target="currentPage">
<input type="submit">
</form>
</body>
</html>
Hello, I am currently trying to create a simple form based web-page (uploaded here) that creates a query for a WMS (Web Map Service). Seeing as how I am still new to programming, I was hoping that you could help me . The page consists of about 10 different forms, which are all put together in a (string) variable named "compiledQuery" in a function named "compileRequest" which is activated via a button. I would like to print out this variable on the page so that the users can see the query for themselves. After doing some research I came to the conclusion that the best way to do this would be via an iframe (I do not want to use a pop-up). The function I use to do this is: Code: function printRequest()
{
var query_frame = document.getElementById('frame_compiled');
query_frame.document.write(compiledQuery);
}
"frame_compiled" is the name of my iframe: Code: <iframe name="frame_compiled" width="400" height="125"> </iframe> I know that "compiledQuery" has been assigned a value (I used an alert with the value). Hence, I also know that the "prinRequest"-function works on principle... However, it seems as if I am having problem with retrieving the name of the iframe to the function (I tried doing an alert with the value, it was returned as null). So, I suppose my question is this: How do I properly retrieve the value of the iframe, and am I on the right way using document.write to show the value of "compiledQuery" to the users? Or should I use another way of doing this completely? I think I have looked through a hundred different tutorials and guides online, I just can't seem to find any hints to this problem... Any help would be greatly appreciated so, I can pass a value from a select list to another function which then decides which function to call, but I want to cut out the middleman, and make the values the function calls, and call them directly on the onchange... I imagine something like this: Code: <select id="select" onchange="this.value">
<option selected value="function1()">Funtion 1</option>
<option value="function2()">Function 2</option>
<option value="function3()">Function 3</option>
</select>
is it possible? HTML5&JS-Game-1 Large JS Into Separate JS Files? Hi, I am a C++ game programmer who attempted to make an HTML5/JS game. Game turned out great (except for some performance issues on old computers). Although the game is good, I am terribly embarrassed about the source. Source is HTML5/JavaScript and its one giant, ugly, and confusing HTML file. I've been researching on Google how to split the 1 large HTML file into smaller separate *.js files but can not get it working. Here is the URL link to the game's folder on my web site: http://16bitsoft.com/T-Crisis3AI--HTML5/ I've tried to split the one HTML file into smaller separate *.js files. Had a "Logic.js" file with all logic global variables and functions in it and I loaded the "Logic.js" file (I think) into main HTML file but the main HTML file can't locate the logic variables and functions??? If your a Jedi Master Ninja Assassin HTML5/JavaScript coder then please try to help! Thanks! JeZ+Lee 16BitSoft Video Game Design Studio www.16BitSoft.com Here is screenshots of the game: Hi, I was working on this problem that asks me to return an array of scores for each string (only for its content part, not URL) in the global variable, which is an array. For example, alert a score of 0 if the string z is not found, 1 if found once, and 2 for twice. My problem is that I can get the code to alert if it has found the word (ex. "the"), but I cannot manage to : a) Assign separate scores for each string. b) Make the search case insensitive i.e. "the" will appear in 0,1, but not in 2, where it is capitalized I would appreciate any help! [CODE] var c = ["[www.facebook.com] Facebook is the best social networking site to coccent with your friends. ", "[www.google.co.uk] Google is the worldwide search engine. ", "[www.bbc.co.uk] The best news source for starting your day. "]; function findScore(z) { for (var i=0; i<c.length; i++) { var a = c[i].toString(); var b = a.search(z); if(b>-1) { alert (z + " found in array " + i); } } } findScore("the"); [CODE] Sorry for not being able to wrap the code! Hello everyone, I'm very new to Javascript, and I'm trying to build a simple webpage with frames with navigation links that open in other frames. I have three frames in the main part of my webpage, A, B, and C. Frame A is the header, Frame B is where I keep the links, and Frame C is where I want the links to display. I'm trying to get the links in Frame B to work both as text links and as radio button links. So far, I have managed to get the text links to open in Frame C as I wanted to, but when it comes to the radio buttons, I encounter a problem. The radio buttons do open as links... Except, they open in the frame they're contained, Frame B, rather than in Frame C like I want them to. Does anyone know how I might fix this problem? Is the coding completely wrong or is it just a simple mistake I've overlooked? Here is the relevant code: This is the code for the main page with the frames: Code: <html> <frameset rows="100,*"> <frame src="Hello.htm" NAME="A"/> <frameset cols="25%,75%"> <frame src="Linklist.htm" NAME="B"/> <frame src="Start.htm" NAME="C"/> </frameset> </frameset> </html> And this is the code for my links: Code: <html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function go(loc) {
window.location.href = loc;
}
</script>
</head>
<BODY BGCOLOR="#000000" TEXT="#green">
<p><center><h4>Links</h4></center></p>
<form name="form">
<input type="radio" name="loc" onClick="go('http://www.wikipedia.org/');" TARGET="C"> <A HREF="http://www.wikipedia.org/" TARGET="C">Wikipedia</A><br>
<input type="radio" name="loc" onClick="go('http://dictionary.reference.com/'); TARGET="C""> <A HREF="http://dictionary.reference.com/" TARGET="C">Dictionary.com</A><br>
</form>
</html>
Any and all help would be much appreciated. This has me really stumped. Thank you for your time! Hey everyone. I'm looking for a tutorial or open source script to accomplish the following tasks: 1 - Accordion style vertical list that expands element (Film # and description) when "+more" link is clicked, and closes the previous open film and description. 2 - Activation of "+ more" shows a photo in separate div, and hides the previous photo that was visible in this separate div. I've attached a mockup photo of the idea I need to execute. Seems like a simple idea, but I have not been able to find a similar example/tutorial online. If anyone can point me in the right direction, that would be greatly appreciated. Thanks. I have a form where users will be making a selection in a drop down box. I need, essentially, to store two values: the first value is the actual value assigned with each drop down item (their label, basically), and the second value being a completely separate value that will change based on what they chose from the drop down box to begin with. Example: Drop down box contains selections A, B, C, D. User selects A, I need to keep the original dropdown box's A value in tact for the dropdown box's value, and then store a 1 in a hidden textbox. User selects B, a 2 is stored, etc. Both of these values will be e-mailed, hence the reason I chose a hidden textbox to store the second value. Additionally, I don't want the user to see the second value on the form itself. If there's a better way to accomplish this, please let me know. -edit - nevermind. mods plz delete.
Hey guys, Lookin' for a little help, not sure if it can even be done? hopefully someone has the answer. I'm trying to design myself an online portfolio; here's what I got so far... http://www.gregorymstevens.com/testsite/site.html As you can see my navigation is represented by each bird on the tree (every bird is a link), when you rollver one of the green birds they turn white, however, I am looking to not only have the green bird rollver to white but ALSO have the "choose a" image on the bottom right change to the corresponding page. For instance, when the mouse rolls over a bird-- this image: will turn into this image: while maintaining the original "white bird" rollover. Hopefully I'm explaining this correctly -- Any help greatly appreciated! Hi, Sorry to ask this while others have too, but the answers for them didn't work for me and I really know nothing when it comes to JS. I have a portfolio page that had an onload so that the first image of the thumbnails would automatically load with the page. Worked fine. I added some bells and whistles and now it doesn't work. The bells and whistles being a NiftyCorner JS and an expandable menu. The menu works, but the other two, both with the onload command won't work. I've tried a semicolon between them in all the possible configurations that I can think of and yet no luck. Here's the code...let me know if you need this to be live and I'll push it. Thanks in advance!!! Code: <style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="css/design.css" />
<script language="JavaScript" type="text/JavaScript"></script>
<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript"> window.onload=function(){Nifty("div#p7TMM_1","big" );}</script>
<link href="p7tmm/p7TMM10.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="p7tmm/p7TMMscripts.js"></script>
<script language="JavaScript" type="text/JavaScript">
<!--
//This is the script to take querystrings from the URL and convert them into
//a Javascript array. "?search=whatever" becomes querystring["search"]
//this loads the portion of the url containing the querystring, and also
//decodes any special character codes
var que = unescape(location.search);
//gets value of querystring
var que = que.substring(que.lastIndexOf("=") + 1);
var layer = 'Div' + que
//toggle between layers - on/off
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
var obj = document.layers ? document.layers[szDivID] :
document.getElementById ? document.getElementById(szDivID).style :
document.all[szDivID].style;
obj.visibility = document.layers ? (iState ? "show" : "hide") :
(iState ? "visible" : "hidden");
}
//-->
</script>
</head>
<body onload="javascript: toggleBox(layer,1);">
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! If I have a javascript var in a webpage(html form textarea VALUE - yui) that contains html code, and want to appear it, in confirmformpage.php, then how to transfer it...? is it really needed go via PHP ...? and ofcourse use innerHTML to write it....yes I usually use an intermitened processform.php script. http://developer.yahoo.com/yui/editor I have this function: Code: function thirdLevelElements()
{
var name=prompt("Name of XML file you wish to load","")
var xmlDoc=loadXML(name)
x=xmlDoc.documentElement.firstChild.nextSibling.childNodes;
for (i=0;i<x.length;i++)
{
if (x[i].nodeType==1)
{
document.write(x[i].nodeName);
}
}
document.getElementById("display").innerHTML=x
}
Designed to cycle through an XML file and list all the third level elements, the problem being that instead of linking to a new page, I want to insert it in inner HTML, which is something I don't use a lot. Anyway, anyone know how you fit the loop that prints the xml node names into the innerHTML statement correctly, I'm getting a bit frustrated with this, like I said I never really use innerHTML. Thanks. Help with JavaScript in HTML? Okay, I have done everything that I can to try and figure this one out...I am stumped. I need to display the flag of the specific country when the radio button of that flag is clicked. The book states: Create a Web Page that contains a table with two columns in a single row. In the first column, create a list of radio buttons that contains the name of each of the 10 countries. In the second column, display the flag of the selected country in an anchor element. Use onclick even handlers to display the flag image for each selected country. When the page first loads, the image should be blank. Here is my code: Code: <!DOCTYPE HTML> <!--My Name--> <!--Chapter 8 Page 478--> <!--October 28, 2011--> <html> <head> <title>Country Flags</title> <script type="text/javascript"> /* <![CDATA[ */ var argentina = "argentina.jpg" var australia = "australia.jpg" var bolivia = "bolivia.jpg" var cuba = "cuba.jpg" var finland = "finland.jpg" var france = "france.jpg" var italy = "italy.jpg" var peru = "peru.jpg" var syria = "syria.jpg" var tunisia = "tunisia.jpg" /* ]] */ </script> </head> <body> <form name="flags" action=" " method="get"> <table style="border: 1; width: 100%"> <tr valign="top"> <td> <input type="radio" name="flags" onclick= "document.argentina.jpg" /> Argentina <input type="radio" name="flags" onclick= "document.flags.country.value=austra… /> Australia <input type="radio" name="flags" onclick= "document.flags.country.value=bolivi… /> Bolivia <input type="radio" name="flags" onclick= "document.flags.country.value=cuba" /> Cuba <input type="radio" name="flags" onclick= "document.flags.country.value=finlan… /> Finland <input type="radio" name="flags" onclick= "document.flags.country.value=france… /> France <input type="radio" name="flags" onclick= "document.flags.country.value=italy" /> Italy <input type="radio" name="flags" onclick= "document.flags.country.value=peru" /> Peru <input type="radio" name="flags" onclick= "document.flags.country.value=syria" /> Syria <input type="radio" name="flags" onclick= "document.flags.country.value=tunisi… /> Tunisia </td> </p> <td> <textarea name="country" cols="75" rows="20" style="background-color: Transparent; border: none; overflow: hidden"></textarea> </td> </tr> </table> </form> </p> </body> </html> Can someone please help me out here. Thanks |
|||||||