|
JavaScript - Collect Dom Elements From External Html Documents
I am trying to write a report-generator to collect user-comments from a list of external HTML files. User-comments are wrapped in < span> elements.
Can this be done using JavaScript? The files are all available locally and I am using file:// protocol for the access. Here's my attempt: Code: function generateCommentReport()
{
var files = document.querySelectorAll('td a'); //Files to scan are links in an HTML table
var outputWindow = window.open(); //Output browser window for report
for(var i = 0; i<files.length; i++){
//Open each file in a browser window
win = window.open();
win.location.href = files[i].href;
//Scan opened window for 'comment's
comments = win.document.querySelectorAll('.comment');
for(var j=0;j<comments.length;j++){
//Add to output report
outputWindow.document.write(comment[i].innerHTML);
}
}
}
Similar TutorialsHi guys I d like to know that is it possible to submit data to the server or to an email from the client using JAVAScript? I know that javascript is clientside,but if you work with Facebook, when you chat, just view its source, u ll see that is using Javascript? I d like to know,how is it possible? Is there a way onclick to load external html into a DIV tag, but without iFrame usage?
Hello, I am trying to get all the div tags in my page into an array but only the tags with the ID "image**". Below is what I came up with but this doesn't seem to work, even after googling a bit I couldn't find any solution. I don't think this should be so hard but I'm very new to JavaScript (tbh programming in general) and can't seem to come up with a solution. Any help or pointers would be greatly appreciated. Code: function divs() {
var divs = document.getElementsByTagName('div');
var ImageTags = [];
for (i=0; document.getElementsByTagName('div').length; i++) {
var div = divs[i];
if (/image[0-9]*/.test(div)) {
imageTags.push(div);
}
}
}
Hello, I'm a newbie... Have a teensy bit of Javascript skills from school. I have two questions about a popup window I've installed on my website to collect subscriptions. The code below is working on my website here http://ruthysrides.com.au/cycling-accessories.php, and is programmed to appear once per user every 30 days. Questions a 1. I want to know how I can make the popup open centred on the screen. (I've looked at a few examples of code but can't see where to insert the instruction) 2. Ideally I want to insert the popup on every page and set it to appear after the user has been browsing for 60 seconds, but I couldn't get example codes working so settled for this one. I initially installed it on 3 different pages, but it only recognised the cookie from one page and so when the user clicks on another page with the script installed, the subscription prompt pops up again. Annoying for customers, so I've only got the script running on the one page at the moment. <script language="javascript"> var expDays = 30; // number of days the cookie should last var page = "http://www.ruthysrides.com.au/subscribe.php"; var windowprops = "width=340,height=300,location=no,toolbar=no,menubar=no,scrollbars=no,resizable=yes"; function GetCookie (name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (document.cookie.substring(i, j) == arg) return getCookieVal (j); i = document.cookie.indexOf(" ", i) + 1; if (i == 0) break; } return null; } function SetCookie (name, value) { var argv = SetCookie.arguments; var argc = SetCookie.arguments.length; var expires = (argc > 2) ? argv[2] : null; var path = (argc > 3) ? argv[3] : null; var domain = (argc > 4) ? argv[4] : null; var secure = (argc > 5) ? argv[5] : false; document.cookie = name + "=" + escape (value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : ""); } function DeleteCookie (name) { var exp = new Date(); exp.setTime (exp.getTime() - 1); var cval = GetCookie (name); document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString(); } var exp = new Date(); exp.setTime(exp.getTime() + (expDays*24*60*60*1000)); function amt(){ var count = GetCookie('count') if(count == null) { SetCookie('count','1') return 1 } else { var newcount = parseInt(count) + 1; DeleteCookie('count') SetCookie('count',newcount,exp) return count } } function getCookieVal(offset) { var endstr = document.cookie.indexOf (";", offset); if (endstr == -1) endstr = document.cookie.length; return unescape(document.cookie.substring(offset, endstr)); } function checkCount() { var count = GetCookie('count'); if (count == null) { count=1; SetCookie('count', count, exp); window.open(page, "", windowprops); } else { count++; SetCookie('count', count, exp); } } window.onload=checkCount; </script> Help anyone? Big thank you in advance!!! Hi, I am new to indesign javascript. I need to collect all the style information from an indesign file and i have to display as combo box and the user should seelct the style name. The selected style names i have to list in a seperate text box and when i select okay i have to search some text and replace in the document where this selected style name paragraphs only. This is my requirement. Can anybody help me to do this? Thanks in advance Anil Hello, I am in situation where I need a code to redirect a HTML page to new location (Static HTML/Dynamic Web page) however the challenge is that I can not use usual JavaScript Redirect code due to restriction that we can't execute any code/script under body tag. I found that this can be done using an external JS file however I am not able to achieve this. I need the code to be generic so we can apply the same JS file to any page. However, I want the new window to open over the previous one versus opening a second new window. Can someone help me out in this? 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 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 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. Hi I need to develop a simple keyword search in external html files(having traversing in directories ability). Is this possible? (in this case php can be used) Please guide me Thanks Hello, I actually use a counter on a webpage (It works) To do it, I use an inline javascript but I would like to unify the entire page and call that counter directly in the external Javascript that manages the whole site. Here's the actual code... Code: HTML
<body onLoad=gen_hits()>
...
<span id='hits'></span><SCRIPT language="JavaScript" SRC="http://www.mycompany.com/cgi-bin/counterdir/gcount.pl?NUMBER=../../otherdir/counter"></SCRIPT>
...
</body>
EXTERNAL JAVASCRIPT (ini.js)
var hits="HITS ";
function gen_hits() {
document.getElementById("hits").innerHTML=hits;
}
and here a "view" of my request... Code: HTML
<body onLoad=gen_hits()>
...
<span id='hits'></span>
...
</body>
EXTERNAL JAVASCRIPT
var hits="HITS " + <SCRIPT language="JavaScript" SRC="http://www.mycompany.com/cgi-bin/counterdir/gcount.pl?NUMBER=../../otherdir/counter"> </SCRIPT> ;
function gen_hits() {
document.getElementById("hits").innerHTML=hits;
}
Any idea how to modify it ? Thank you very much Gino Hi guys, I am new around here so ... greetings! I've lately stepped up a little problem with one of my personal projects that i am working. I'm writing an aspx webpage, which includes web user controls inside it. The webuser controls are within a web form (id=form1 runat=server) which resides in the main.aspx page. 1. First of all, is there a way to find a SPECIFIC control inside the webuser control (ascx) using Javascript in the main.aspx? 2. If not (which i think it is), which is the best way to do it? The snippet i tried was this: '---------------------------------------------------- function FindControl(elem_type,elem_id) { var elem = document.form1.elements; for(var i = 0; i < elem.length; i++) { if ((elem[i].type==elem_type) && (elem[i].id.indexOf(elem_id)!=-1)) { alert(elem[i].id); } } } '---------------------------------------------------- The problem is that the alerted id of the control isn't the exact id that i've written in the webuser control, but a string that seems to concatenate all the parent html controls of the control that i am searching for, ex. if the control that i'm searching for is <asp:Textbox id="txtName" runat="server"/> and it is nested inside a groupbox <groupbox:Group id="grp_1" runat="server"/> then the alerted id isn't TXTNAME but GRP_1_TXTNAME etc. Two questions then: 1. Is the search in the "for statement" hierarchicly ordered? I mean, if i have another <asp:textbox id="txtName2" runat="server"/> inside the groupbox, will the first only be rendered if i put a break after the "if statement"? 2. Is there a way to get the exact id name of the controls without the "indexOf"? Thanks in advance! Years ago I created HTML that employs checkboxes and textboxes. I am now writing JS with the intention of adding flexibility and limiting redundancy. I am not sure I truly understand how to correctly interact the two though. For example, one of my scripts have arrays that contain the names of the checkboxes and textboxes, with a 'for' loop to document.write() them to references within the HTML code. This does not seem to be working for me though. Here is what I have thus far (in short): Code: <script language="javascript">
var teamNames = new Array(3);
teamNames[0]="South Africa";
teamNames[1]="Mexico";
teamNames[2]="Uruguay";
for (i=0; i<=31; i++) {
document.write("<p>" + teamNames[i] + "<\/p>");
}
</script>
</head>
<body>
<tr><td>Jun 11</td><td><input type="checkbox"
name="teamNames[0]" value="teamAbbr[0]"></td>
</body>
I've left out a lot of the code (to include the teamAbbr array, but you get the points. I've tried moving the JS within the HTML body and playing with the reference syntax, but nothing so far. Any help would be great! Code: <script type="text/javascript">
function validate(form) {
// Checking if at least one period button is selected. Or not.
if (!document.form1.sex[0].checked && !document.form1.sex[1].checked){
alert("Please Select Sex"); return false;}
var total=""
for(var i=0; i < document.form1.scripts.length; i++){
if(document.form1.scripts[i].checked)
total +=document.form1.scripts[i].value + "\n"
}
if(total=="")
alert("select scripts") else
alert (total)
return false;
} </script>
<table border='0' width='50%' cellspacing='0' cellpadding='0' ><form name=form1 method=post action=action_page.php onsubmit='return validate(this)'><input type=hidden name=todo value=post>
<tr bgcolor='#ffffff'><td align=center ><font face='verdana' size='2'><b>Sex</b><input type=radio name=sex value='male'>Male </font><input type=radio name=sex value='female'><font face='verdana' size='2'>Female</font></td></tr>
<tr><td align=center bgcolor='#f1f1f1'><font face='verdana' size='2'><b>Scripts You know</b><input type=checkbox name=scripts value='JavaScript'>JavaScript <input type=checkbox name=scripts value='PHP'>PHP <input type=checkbox name=scripts value='HTML'>HTML </td></tr>
<tr bgcolor='#ffffff'><td align=center ><input type=submit value=Submit> <input type=reset value=Reset></td></tr>
</table></form>
In this code a checkbox is accessed as "document.form1.scripts[i].checked" If we see the tree view of this document, it is "table/form1/tr/td/scripts[i].checked" SO are we not required to add table elements in the path to the checkbox ? I guess its not required. But why ? Because cell, row and table are the parent elements in HTML tree, then why are they not required ? Hi, this is my first post on the forum. I was just wondering whether there is a way to hide an element on another page after clicking on a button? Basically, I have a login page, and for testing purposes, I want it so when you click a button, it runs some javascript in a file called ajax.util.js, and I have a jQuery file attached to the HTML file as well (http://ajax.googleapis.com/ajax/libs.../jquery.min.js), and I am using Google App Engine, which im not sure whether thats relevant. I tried using the show and hide functions provided by the jQuery file, but no luck, i want to hide an element which is a link with ID admintools. I have also tried getting the element by ID and changing the display style to none and hidden but still no luck. Im not sure whether its only possible to hide elements in the login.html page. What I want it to do basically is click on the submit button in the login page, it will then run a javascript function which redirects you to index.html (which i am doing using window.location), and then hides an element in the index.html page (id=admintools). Any help would be great, Thanks in advance I am working within phpZend CMS and have a page where you can download pdf's after checking the box agreeing to the rules & regulations. For some reason, while I can get the message requiring the box be checked to appear for all of the documents, once the box is checked I can only get the first document to download. Below is the code I am trying to use. <?php echo $this->partial('partials/_left-nav.phtml', $this->leftnav_data); ?> <script language="JavaScript" type="text/JavaScript"> function legal() { if (document.getElementById('chk1').checked) { document.getElementById('subm').onclick = function(){ window.open('http://dev.joico-hair.com/lounge_docs/care/care_colorEndure_Guide.pdf'); } } else { alert("Please read the terms and legal statement and check the box to download the pdf"); } } function legaltwo() { if (document.getElementById('chk1').checked=='submtwo') { document.getElementById('submtwo').onclick = function(){ window.open('http://dev.joico-hair.com/lounge_docs/care/care_colorEndure_Sheet_Violet.pdf'); } } else { alert("irving"); } } function legalthree() { if (document.getElementById('chk1').checked=='submthree') { document.getElementById('submthree').onclick = function(){ window.open('http://dev.joico-hair.com/lounge_docs/care/care_downloadAll_colorEndure.pdf'); } } else { alert("fred"); } } </script> <link href="/css/lounge.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features); } </script> <style type="text/css"> #inner_details { background-image: url(/images/Lounge/messageBox_colorEndureCare.png); height:510px; width:450px; } #inner_text { height:400px; width:375px; margin-top:80px; margin-bottom:15px; margin-left:30px; padding-right:10px; color:#ffffff; overflow:auto; } .download { margin-top:20px; } .thumbs { width:50px; height:63px; display: inline; vertical-align: top; margin-right: 10px; } </style> <title>download vero</title> <div id="detail_content"> <div id="inner_details"> <div id="inner_text"> The brand designed to promote the tonal integrity and color longevity, use these ads so your clients know to use Color Endure to preserve their haircolor. <br /><br /> <strong>NOTE:</strong> To download the pdf's you MUST first read and agree to the <a style="color:#cf993f;"href="#" onclick="MM_openBrWindow('http://www.joico.com/stile_legal','','width=500,height=500')">Joico S.T.I.L.E. Bylines</a>. <br /><br /> <form action="#" id="form1" > <input type="checkbox" id="chk1" onclick="legal()" /> By checking here I confirm that I have read and agree to the above bylines as stated.</form> <div class="download"> <a href='' id="subm" onclick="legal()"><img src="/images/Lounge/care/thumb_care_colorEndure_Guide.jpg" border="0" class="thumbs"/></a>Color Endure Guide </div> <div class="download"> <a href='' id="submtwo" onclick="legaltwo()"><img src="/images/Lounge/care/thumb_care_colorEndure_Sheet_Violet.jpg" border="0" class="thumbs"/></a>Color Endure Violet Sell Sheet </div> <div class="download"> <a href='' id="submthree" onclick="legalthree()"><img src="/images/Lounge/downloadAll.jpg" border="0" class="thumbs"/></a>Download all Color Endure Materials here </div> </div> </div> </div> Hey guys, This is my first time ever posting in a programming forum so please be nice! :) I'll admit right away that this is for a homework assignment, but I really did try to solve it myself before I decided to post here. The instructions are to have a confirm box pop up when links with the HTML class value "external" are clicked. If the user clicks "OK" they should be directed to the linked page. If they click "Cancel" they should not be directed anywhere. Here's my code: Code: function checkClass() {
var links = document.getElementsByTagName("a");
for ( var i = 0 ; i < links.length ; i++ ) {
var link = links[i];
if (link.className == "external") {
link.onclick = clickHandler();
}
}
}
window.onload = checkClass;
function clickHandler() {
if (confirm("You clicked an external link. Do you really want to leave this site?")) {
return true;
}
return false;
}
The problem is that the confirm box is triggered on page load and not on link click. I know I wrote Code: window.onload = checkClass; but how else should I call the function? I thought Code: if (link.className == "external") would keep it from going as far as to the confirm box until an external link was clicked. Thanks for pointing me in the right direction, Johanna Hi, I hav linked external js (ext1.js) to my app.html page. Now in the ext1.js, I have a function like [CODE] function onwindowload(){ //Access HTML element and append external js 2 (ext2.js) here }[CODE] //Access HTML element and append external js 2 (ext2.js) here--->I donno how to add external JS here. Even if i add the external JS here, the JS uses document.write fn. which replaces entire page. Please suggest a solution <body> <script type="text/javascript" src="/khk.php?klub=khk&user=w"></script> This script works fine, but I get a error: line: 2 character: 1 error: character illegal code: 0 url .... Can anybody help?? I've been playing with this workarouns for literally years, but I'm getting fed up with it. Can anyone here suggest a better way of dealing with the following conundrum - or at least clarify why it occurs? When I have an external stylesheet I can't access the properties assigned therein. I'll give an example - HTML/CSS/JS are all inseperate files - but everything is called into the HTML as you can see. HTML: Code: <head> <script type="text/javascript" src="js.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="box" onclick="showWidth()"></div> <body> CSS (style.css) Code: #box {
width: 200px;
}
Javascript (js.js) Code: function showWidth(){
var box = document.getElementById('box');
alert(box.style.width);
}
Now the alert fired by showWidth() is empty - meaning that javascript can't see the width of the div element 'box' Now, if I assign width as part of the style attribute of the div javascript thus: HTML: Code: <head> <script type="text/javascript" src="js.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="box" onclick="showWidth()" style="width: 200px;"></div> <body> javascript can see this and the alert fired by showWidth() shows '200px'. So, I have two questions: 1. Why? 2. Is there a way of accessing these external style elements without having to define styles inline all the time? Cheers! Mike |
|||||||