|
JavaScript - Interesting Problem - Maybe Needs A Javascript Guru Help?
Hello guys I am very much a novice with javascript, but I have a problem with which I think one of the JS gurus in here might be able to help with.
I have about 10,000 keywords on a single web page. There is a checkbox next to every keyword. Some of these keywords are 2 to 3 word phrases. I can type a word in a browser like Firefox and highlight all the instances that a particular keyword is found. Unfortunately there is no firefox extension that would automatically check a box next to the highlighted/found keyword. Instead of manually checking the checkbox next to every keyword highlighted in the browser here is what I would ideally like to accomplish (with the help of javascript). - Have a text field on top of the page and be able to type in a word and hit submit - if a word is found among the keywords/phrases on the page, then the checkbox next to that keyword/phrase is automatically checked. All i need is the checkboxes checked for every instance the searched keyword is found. I don't care if the above procedure is used. If someone can suggest a better route i'm open for it. I don't see why it wouldn't be possible with javascript code. Any help would be greatly appreciated. Similar TutorialsHi, i have a complete validation code here which seems not working properly.When i filled the full name filed and i click submit, the form get submitted but when i filled the full name and filled email too and click on submit the third or fourth like country alert or helpmessage pop up. Now i am trying to fish out why it is doing that but i am not getting it now. please i know its a long code but please try to help me on where i am wrong. I will thank you for using blue thank Please i will suggest copy the code i see what i mean.Here is it Code: <html>
<head>
<title>Final form validation</title>
<script type="text/javascript">
function formvalidator()
{
var Fullname=document.getElementById("Fullname");
var email=document.getElementById("email");
var addr=document.getElementById("addr");
var country=document.getElementById("country");
var zip=document.getElementById("zip");
var phone=document.getElementById("phone");
var educa=document.getElementById("educa");
var job=document.getElementById("job");
var hours=document.getElementById("hours");
if(Checkfullname(Fullname,"Please enter your full name.")){
if(Checkemail(email,"Please enter a valid email.")){
if(Checkaddr(addr,"Please enter your address for better contact.")){
if(Checkcountry(country,"Please select a country.")){
if(Checkzip(zip,"Please enter your area zip code of 5 digits.")){
if(Checkph(phone,"Please enter your phone number for better contact of 14 digits.")){
if(Checkeduca(educa,"Please select your education status.")){
if(Checkjob(job,"Please select job.")){
if(Checkhours(hours,"Please select the number of hours you want to work." )){
return true;
}}}}}}}}}
return false;
}
function Checkfullname(elem,helpmg)
{
var eval=elem.value;
eval=eval.replace(/[^a-z\s\-\.\']/gi,"");
eval=eval.replace(/^\s+|\s+$/g,"");
eval=eval.replace(/\s{2,}/g," ");
eval=eval.toLowerCase().replace(/\b[a-z]/g,function(w){return w.toUpperCase()});
document.getElementById("Fullname").value=eval;
if(eval.length>=5 && eval.length<=50){
return true;
}
else{
alert(helpmg);
elem.focus();
return false;
}}
function Checkemail(elem,help)
{
var eReExp=/^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(eReExp)){
return true;
}
else{
alert(helpmg);
elem.focus();
return false;
}}
function Checkaddr(elem,helpmg)
{
var eval=elem.value;
eval=eval.replace(/^\s+|\s+$/g,"");
eval=eval.replace(/\s{2,}/g," ");
document.getElementById("addr").value=eval;
if(elem.value.replace(elem.value)){
return true;
}
else{
alert(helpmg);
elem.focus();
return false;
}}
function Checkcountry(elem,helpmg)
{
if(elem.value=="Please select country"){
alert(helpmg);
elem.focus();
return false;
}
return true;
}
function Checkzip(elem,helpmg)
{
var zReExp=/^\d{5}$/;
if(elem.value.match(zReExp)){
return true;
}
else{
alert(helpmg);
elem.focus();
return false;
}}
function Checkph(elem,helpmg)
{
var pReExp=/^\d{14}$/;
if(elem.value.match(pReExp)){
return true;
}
else{
alert(helpmg);
elem.focus();
return false;
}}
function Checkeduca(elem,helpmg)
{
if(elem.value=="Please choose"){
alert(helpmg);
elem.focus();
return false;
}
return true;
}
function Checkjob(elem,helpmg)
{
if(elem.value=="Please select job"){
alert(helpmg);
elem.focus();
return false;
}
return true;
}
function Checkhours(elem,helpmg)
{
if(elem.value=="Please select hours"){
alert(helpmg);
elem.focus();
return false;
}
return true;
}
</script>
<style type="text/css">
#fullpage{width:100%;background-color:#f3f3f3; border:1px solid #336699;}
#firstbar{
width:100%;
background-color:#336699;
text-align:left;
font-color:white;
}
#field{
margin-right:70%;text-align:right;}
</style>
</head>
<body>
<h2><font color=#336699>Form validation..The power of javascript<font></h2>
<p><font clor=#336699>Please note:all the field marked asteric is required and must be field.<br/>For help on filling the form just contact as at support@jobs.com.<font></p>
<hr width="100%" color="#336699" size="2">
<div id="fullpage">
<form onsubmit="return formvalidator()"/>
<div id="firstbar"><p><font color="white">Personal Details</font></p></div>
<div id="field">
<p><font color=red>*</font>Full Name<input type="text" id="Fullname"/></p>
<p><font color=red>*</font>Email<input type="text" id="email"/></p>
<p><font color=red>*</font>Contact Address<input type="text" id="addr"/></p>
<p><font color=red>*</font>Country<select id="country"/>
<option>Please select country</option>
<option>Ghana</option>
<option>United States</option>
<option>India</option>
<option>Germany</option>
<option>Italy</option>
<option>Nigeria</option>
<option>South Africa</option>
<option>United kingdom</option>
<option>Malasia</option>
<option>Egypt</option>
<option>France</option>
<option>China</option>
</select></p>
<p><font color=red>*</font>Zip Code<input type="text" id="zip"/></p>
<p><font color=red>*</font>Phone Number<input type="text" id="phone"/></p>
<p>Fax Number<input type="text" name="fax"/></p>
</div>
<div id="firstbar"><p><font color="white">Educational Details & Job</font></p></div>
<div id="field">
<p><font color=red>*</font>Education Status<select id="educa"/>
<option>Please choose</option>
<option>High School</option>
<option>Diploma</option>
<option>Degree</option>
<option>Certified We Developer</option>
<option>Certified We Designer</option>
<option>others</option>
</select></p>
<p>Experience(Details if any)<input type="text" name="exp"/></p>
<p><font color=red>*</font>Job Type<select id="job"/>
<option>Please select job</option>
<option>We Developer</option>
<option>Web Designer</option>
<option>Softwar Developer</option>
<option>IT Consultancy</option>
<option>Stock Trader</option>
<option>Marketing Position</option>
</select></p>
<p><font color=red>*</font>Working Hours<select id="hours"/>
<option>Please select hours</option>
<option>1 to 5hurs</option>
<option>1 to 8hurs</option>
<option>1 to 10hurs</option>
<option>1 to 12hurs</option>
<option>1 to 13hurs</option>
<option>1 to 15hurs</option>
<option>1 to 20hurs</option>
</select><p/>
<p>Salary Demanded<input type="text" name="sala"/></p>
<p>Comment(if any)<textarea name="text" rows="3" cols="40" wrap="virtual"/></textarea></p>
<input type="submit" value="Submit Form"/>
<input type="reset" value="Reset Form"/>
</div></div>
</form>
</body>
</html>
Thanks.Clement Osei. Hi Guys, I need to amend the below so that if any version of IE is detected it calls window.resizeTo(300,400); otherwise no event or a window.moveTo(0,0); event (either one). Firefox is having problems with resizeto THANKS! <SCRIPT LANGUAGE="JavaScript"> if "any version of internet explorer" window.resizeTo(300,400); else window.moveTo(0,0); </SCRIPT> OR <SCRIPT LANGUAGE="JavaScript"> if "any version of internet explorer" window.resizeTo(300,400); else "do nothing" </SCRIPT> Right - here's an interesting one! I have coded up a system which has an admin section which uses sessions and keeps timing out (server settings). I have tried by locally changing the ini settings for the scripts, but this still doesn't work. Now, I can't change the server settings, but what I was thinking was to have a little bit of AJAX (probably jQuery) that every five minutes submits a simple query to keep them signed in and the remaining time until timeout refreshed. Now, the question comes - how would I go about this!! Any ideas? Thanks in advance! I set out to do a little exercise in creating draggable divs that look like app windows in pure javascript, with very little html. Problem is my mouseup event isn't always triggering and will never drop the div in the new spot. I have a global variable to determine whether or not the div is being dragged. This is toggled on the mouseup and mousedown events on the titlebar div. I have a mouesmove event on the body so that it can determine if the global dragging variable is true or false. If true then it moves the div to the x/y coordinates of the mouse Same thing with the mouseup event. It should move the div to the x/y coordinates of the mouse Sometimes it works, sometimes it doesnt. Most of the time it acts like it just wants to select text while I'm dragging (which i thought my selectstart event would take care of) Code: <html>
<head>
<title>testjs</title>
<script>
var dragging = false;
function Window(title,top,left,width,height)
{
this.title = (typeof title == 'undefined')?'New Window':title;
this.x = (typeof top == 'undefined')?0:top;
this.y = (typeof left == 'undefined')?0:left;
this.width = (typeof width == 'undefined')?600:width;
this.height = (typeof width == 'undefined')?400:height;
this.borderStyle = 'solid';
this.windowPanel = null;
this.Open =
function()
{
var windowPanel = document.createElement('div');
windowPanel.setAttribute('id','windowPanel');
windowPanel.setAttribute('z-index', '2');
windowPanel.style.position='absolute';
windowPanel.style.left = this.x+'px';
windowPanel.style.top = this.y+'px';
windowPanel.style.width = this.width + 'px';
windowPanel.style.height = this.height + 'px';
windowPanel.style.border = 'thin solid black';
var titleBar = document.createElement('div');
titleBar.setAttribute('id','titleBar');
titleBar.setAttribute('z-index', '4');
titleBar.style.position = 'absolute';
titleBar.style.left = '0px';
titleBar.style.top = '0px';
titleBar.style.width = this.width + 'px';
titleBar.style.height = '22px';
titleBar.style.borderBottom = 'thin solid black';
titleBar.innerHTML = "<span style=position:absolute;>"+this.title+"</span>";
titleBar.addEventListener('mousedown', function(e){MouseDown(e,this)}, false);
titleBar.addEventListener('mouseup', function(e){MouseUp(e,this)}, false);
titleBar.addEventListener('selectstart', function(e){return false}, false);
var closeButton = document.createElement('div');
closeButton.style.position = 'absolute';
closeButton.style.left = this.width - 30 + 'px';
var cbimg = document.createElement('img');
cbimg.setAttribute('src', 'close_button_red.png');
cbimg.setAttribute('width', '16');
cbimg.setAttribute('height', '16');
closeButton.appendChild(cbimg);
closeButton.addEventListener('click', function(event){CloseWindow('windowPanel')}, false);
document.body.addEventListener('mousemove', Mover, false);
titleBar.appendChild(closeButton);
windowPanel.appendChild(titleBar);
document.body.appendChild(windowPanel);
}
}
function Mover(e)
{
if(dragging == true) {
console.log(e.pageX);
document.body.style.cursor = 'move';
document.getElementById('windowPanel').style.x = e.pageX + 'px';
document.getElementById('windowPanel').style.y = e.pageY + 'px';
}
else
document.body.style.cursor = 'auto';
}
function MouseUp(e,ele)
{
dragging = false;
ele.parentNode.style.top = e.pageY + 'px';
ele.parentNode.style.left = e.pageX + 'px';
}
function MouseDown(e,ele)
{
dragging = true;
}
function CloseWindow(wnd)
{
document.body.removeChild(document.getElementById(wnd));
}
function init()
{
wnd = new Window('A new approach', 100, 150, 1024, 768);
wnd.Open();
}
</script>
</head>
<body onLoad='javascript:init()'>
<a href="#" onClick="javascript:init();">Open</a>
</body>
</html>
Not sure if this is a CSS or Javascript fix I need. I think it will be a javascript issue/solution. Browser=Firefox 6.0.2 website page: [suspicious link removed] I am attempting to use CSS for Alert Box background. I created a class: Code: <style type="text/css">
.alert {
background-color:#5f9ebe;
}
</style>
But I have tried so many ways to use .alert and none of them work. Code: function btn1(x)
{
if (x.anyText.value == "")
alert("Type Something")
else
alert("You typed: " + x.anyText.value)
x.anyText.value = ""
}
Perhaps my question really is: How do I make class="alert" change Alert Box Background. I am very new to Javascript but learning everyday. I would prefer code help not be jquery. Thanks so much. codeFLY Hi Guys, I am a novice at javascript. I possibly need an alternative to document.write to output specifically the value contained in Code: {exp:lg_ml:translate key="phrase[i]"}
This syntax is cms specific and carries a value like horse or a translated version of it like Pferd in German. The below code outputs: {exp:lg_ml:translate key="cat"}{exp:lg_ml:translate key="dog"}{exp:lg_ml:translate key="horse"} but I want it to output in the source code of my template so it can execute correctly with predetermined values and not just on screen as the syntax instead of the actual value it holds, if you know what I mean. Anyway after hours of trying and 5 cups of cheap Nescafe coffee I need to achieve exactly the below with an alternative possibly to document.write? I also need to keep the loop. Thanks Code: <html>
<body>
<script type="text/javascript">
var i;
var phrase = new Array();
phrase[0] = "cat";
phrase[1] = "dog";
phrase[2] = "horse";
for (i=0;i<phrase.length;i++)
{
document.write("{exp:lg_ml:translate key=\""+phrase[i] +"\"}");
}
</script>
</body>
</html>
Hi All, i have a really annoying problem, i have a js autosuggest file which sends/outputs suggestions to the user as they type which is working fine on its own, i have a contact form on one of my pages and it was working fine until my host upgraded to php 5.3 now everything has gone a bit haywire the contact form is interfering with the auto suggest function and when i remove the autosuggest function i get lots of errors on my contact form??? which is odd because it shouldnt have anything to do with it. here is the troublesome page and if you try and submit the form with js enabled the little loading icon next to the store search shows? which it shouldn't. the errors on the page dont effect the form from working because i have it working on another page with those errors but not with my js files for the auto suggest included. not sure if there are two ids the same somewhere which is causing the confusion between the js not sure where to start with this? do you want the files for the autosuggest or the contact form? thanks for any help really need it! Luke I got an index.php Code:
<html>
<form action="bacakomik.php" method='post'>
<select name="kodekomik">
<option value='../komik1/|23'>Judul Komik1</option>
<option value="../komik2/|20">Judul Komik2</option>
<option value="../komik3/|10">Juduk Komik3</option>
<option value="../komik4/|20">Judul Komik4</option>
</select>
<input type="submit" />
</form>
<?php
echo ('<select>');
echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>');
echo ('</select>');
?>
</html>
As you can see, each of the option brings specific value "../komik1/|23" komik1 is a directory | is a delimiter 23 is the pages in one chapter and can be considered also as how many images are there on a specific directory This is my bacakomik.php Code: <?php
$dirkomik = $_POST['kodekomik'];
$exploded = explode("|", $dirkomik);
echo ($exploded[0]); //picture directory
echo ("<br>");
echo ($exploded[1]); //total page in the comic
$pagecount = (int)$exploded[1];
//Take last posted value, process it right away
echo ('<FORM name="guideform"> ');
echo ('<select name="guidelinks">');
$i=1;
do {
echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>');
$i= $i+1;
}while($i <= $pagecount); //Printing option and select
echo ("</select>");
?>
<input type="button" name="go" value="Go!" onClick="document.getElementById('im').src=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value+'.png';"> </FORM>
<img src="img0.jpg" id="im">
With the current code on bacakomik.php, I only can change the img src of id "im" in the same directory only. What I want is that the Javascript could "add" the "$exploded[0]" variable so that the picture can be loaded from different directory. Anyone can do this? I believe that the fix should be somewhere on input tag inside OnClick, or do you know where? Anyway, I found this on the net http://p2p.wrox.com/php-faqs/11606-q...avascript.html Please help me to those who can... Hello, I have two arrays sd[16][16] and gd[16][16] in javascript. I need to compare the values of the arrays. Code: Code: var score=0;
document.write("<table>");
for(c1=0; c1<16; c1++)
{ document.write("<tr>");
for(c2=0; c2<16; c2++)
document.write("<td onClick='changeColor(this);'>" + gd[c1][c2] + "</td>");
document.write("</tr>");
}
document.write("</table>");
function changeColor(tdd)
{
if(tdd.bgColor=='white')
{
tdd.bgColor='red';
if (gd[c1][c2] == sd[c1][c2])
score+=5;
else
score-=2;
}
else
{
tdd.bgColor='white';
}
}
function scc()
{
document.getElementById('scf').innerHTML = score;
}
</script>
<br><br><center><button type='button' onclick='scc()'> Click to see current score</button> <p id="scf">0</p> </center>
<br><br> <center><input type="submit" value="Get Solution"/></center>
When I try to display score by clicking the "Click to see current score" button, the score is not displayed. Could someone please tell me the problem. PHP Code: ?><script type="text/javascript"> var answer=confirm("Do you want to update your email?"); if(answer==true) { <?php mysql_query("update user set u_email ='$email' where u_user='$username'"); ?> alert ("You choose update your email."); } if(answer==false) { alert ("You had rejected to update your email."); //answer=0; } </script> <? i put this javascript within my php, it should perform update when i click ok, and perform nothing when i click cancel, but the problem is, it will still perform update although i click cancel. someone can solve this for me pls..? When I run the following code in IE9 it will not display the warning text but it will change the input box color any suggestions to get this to work would be helpful. Code: <style>
input.valid { background: #afa; }
input.invalid { background: #faa; }
.show {visibility: visible; color: #FF0000;}
.disappear {visibility: hidden;}
</style>
Code: <SCRIPT type="text/JavaScript">
<!-- // hide from older browsers
function confirm_password() {
if (document.userinfo.password.value == document.userinfo.passwordconf.value) {
document.userinfo.passwordconf.className = "valid"; //Greenish background color
document.getElementById('span1').className = "disappear";
} else {
document.userinfo.passwordconf.className = "invalid"; //Reddish background color
document.getElementById('span1').className = "show";
}
}
// -->
</SCRIPT>
Code: <form name="userinfo" method="POST" action="#"> Email: <input type="text" name="email"><br> Password: <input type="password" name="password"><br> Confirm Password: <input type="password" name="passwordconf" onClick="confirm_password()" onFocus="confirm_password()" onChange="confirm_password()" onKeyUp="confirm_password()" onBlur="confirm_password()"><span id="span1" class="disappear">Warning Passwords to not match!</span><br> <input type="submit" name="submit" value="submit"> </form> Hi all, I have a Javascript problem that only seems to happen in IE... it works fine in Firefox as I've tested! I have this function: Code: function show_video1(){
document.getElementById('video1').style.display="block";
document.getElementById('video2').style.display="none";
document.getElementById('video3').style.display="none";
}
function show_video2(){
document.getElementById('video1').style.display="none";
document.getElementById('video2').style.display="block";
document.getElementById('video3').style.display="none";
}
function show_video3(){
document.getElementById('video1').style.display="none";
document.getElementById('video2').style.display="none";
document.getElementById('video3').style.display="block";
}
etc... what it does is basically switch videos, when a link is click. The problem in IE is that the video continues to play when switched... meaning that videos play 'over the top of each other'. Can anyone advise on this, as I say seems to be fine in Firefox! Many thanks, Greens85 Hi Guys, I cant seem to get my piece of code to with IE8, I have created a drop down box which gets counties from a database. I have attached the code below. Can someone please point me in the right direction. Code: <script language="JavaScript" type="text/javascript">
var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
}
var http2 = false;
if(navigator.appName == "Microsoft Internet Explorer") {
http2 = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http2 = new XMLHttpRequest();
}
function sndReq() {
if (document.getElementById('country').value == '0' ) {
document.getElementById('state').disabled = true;
document.getElementById('state').value = '0';
} else {
document.getElementById('state').disabled = false;
}
if (document.getElementById('state').value !== null) {
http.open('GET','{TPL_VAR_SITEURL}ecom/index.php?action=ecom.changepostage&countryid='+document.getElementById('country').value+'&stateid='+document.getElementById('state').value);
} else {
http.open('GET','{TPL_VAR_SITEURL}ecom/index.php?action=ecom.changepostage&countryid='+document.getElementById('country').value);
}
http.onreadystatechange = changepostage;
http.send(null);
}
function changepostage(){
if(http.readyState == 4){
var response = http.responseText;
var update = new Array();
if(response.indexOf('*' != -1)) {
update = response.split('*');
document.getElementById(update[1]).innerHTML= update[0];
document.getElementById(update[3]).innerHTML= update[2];
document.getElementById(update[5]).innerHTML= update[4];
document.getElementById(update[7]).innerHTML= update[6];
}
}
}
function sndCountry() {
http2.open('GET','{TPL_VAR_SITEURL}ecom/index.php?action=ecom.changecountry&countryid='+document.getElementById('country').value);
http2.onreadystatechange = changestate;
http2.send(null);
}
function changestate(){
if(http2.readyState == 4){
var response = http2.responseText;
document.getElementById('state').innerHTML= response;
}
}
</script>
The error from IE8 is document.getElementById(....) is null or not an object. Line 172 which is This Code: document.getElementById(update[5]).innerHTML= update[4]; Thanks, Jordan hi all i m having the following problem and i m a newbie in javascript. i have 6 .html pages and 1 .js page and those 6 html pages make use of .js page for functions. each html page contains yes or no button. i have problem in validation 1) As soon as the user click 3 yes's he should b directed to the result.html page .plzz reply its urgent. Thanks.. Hi All, I am desperately pulling my hair out... can you help me understand how I can resolve the below errors: SCRIPT1028: Expected identifier, string or number calender.js, line 318 character 17 SCRIPT1006: Expected ')' blenheim-palace-lunch-cotswolds-p-170.html, line 88 character 35 SCRIPT5007: The value of the property 'getStartDate' is null or undefined, not a Function object blenheim-palace-lunch-cotswolds-p-170.html, line 643 character 7 For this web address... http://tinyurl.com/79msxqm What can I change to fix the issue? The site is working properly in all other browsers but not IE9. Hope you can help. Thanks. Hi and hope someone can help. I'm trying to put together some code within a form that tests whether someone has supplied an email address or a telephone number when the Submit button is pressed. Neither of these fields are require mandatory input. Trouble is my current code always supplies a true result even if no data is put in these fields i.e. the 1st IF statement returns true. What am I doing wrong? Here's my code. Thanks R _____ Code: <script type="text/javascript">
function check_id() {
if (document.feedback.email !="" || document.feedback.tel !="") {
alert("Thank you. You will be entered into our free prize draw. Good luck!");
} else if (document.feedback.email =="" && document.feedback.tel =="") {
confirm("You will not be entered in our free prize draw unless you supply your email address or telephone number. Is that O.K?");
}
}
function clear (){
var email="";
var tel="";
}
</script>
<form action="" method="get" name="feedback" enctype="application/x-www-form-urlencoded" onSubmit="check_id();" onReset="confirm('This will clear all your entries, is that O.K?'); clear();">
<div>
<label for="email">Your email address:</label>
<input name="email" type="text" id="email" size="50" value="" />
</div>
<div>
<label for="tel">Your telephone number:</label>
<input name="tel" type="text" id="tel" size="50" value="" />
</div>
<div>
<input type="reset" name="reset" id="reset" value="Reset" />
<input type="submit" name="submit" id="submit" value="Submit" />
</div>
</form>
I'm having a problem with a javascript code I put together. For all of the PHP, CSS, HTML that I know, well it doesn't carry over to JavaScript, so my attempt at trying this is probably a very bad attempt. Anyways, what I'm trying to accomplish with this code is to get the height of one table and set the padding-bottom to another table, to keep page dimensions even. Code: <script type="text/javascript">
var divArray = document.getElementById('tablecontent').offsetheight;
//Subtracting 442 because that's the height of the table. I'm just trying to add onto the bottom.
var subtraction = divarray - 442;
var tablesidebar = document.getElementById('tablesidebar');
tablesidebar.style.paddingbottom = subtraction + 'px';
</script>
Any help to get this working is well appreciated. Thanks, Jeremy Hi there, I only just learning JavaScript and have a question about a bit of script I am playing with. I am basically trying to access XML elements (RSS feed) through a bit of PHP. Everything is working fine when trying to access the <title> and <link>, but when I get to <description> everything breaks down... If I comment out this line var theDescription = descriptions[j].childNodes[0].nodeValue; and <p>' + theDescription + '</p>' then the script works fine and displays the titles and the links of the feed, but with those lines in it all goes to pot. Can anyone tell me what I am doing wrong here? (By the way, don't worry about my method of getting the feed in, using GET etc. This script is part of an AJAX tutorial and I am just messing with it, trying to make it display the title, link, and description from the rss feed) Here is my html/JavaScript: Code:
<html><head><title>AJAX XML Example</title>
</head><body>
<h2>Loading XML content into a DIV</h2>
<div id='info'>This sentence will be replaced</div>
<script>
nocache = "&nocache=" + Math.random() * 1000000
url = "rss.news.yahoo.com/rss/topstories"
request = new ajaxRequest()
request.open("GET", "xmlget.php?url=" + url + nocache, true)
out = "";
request.onreadystatechange = function()
{
if (this.readyState == 4)
{
if (this.status == 200)
{
if (this.responseXML != null)
{
titles = this.responseXML.getElementsByTagName('title')
links = this.responseXML.getElementsByTagName('link')
descriptions = this.responseXML.getElementsByTagName('description');
for (j = 0 ; j < titles.length ; ++j)
{
var theTitle = titles[j].childNodes[0].nodeValue;
var theLink = links[j].childNodes[0].nodeValue;
var theDescription = descriptions[j].childNodes[0].nodeValue;
out += '<p><strong>' + theTitle + '</strong><br /><a href="' + theLink + '">' + theLink + '</a></p><p>' + theDescription + '</p>' ;
}
document.getElementById('info').innerHTML = out
}
else alert("Ajax error: No data received")
}
else alert( "Ajax error: " + this.statusText)
}
}
request.send(null)
function ajaxRequest()
{
try
{
var request = new XMLHttpRequest()
}
catch(e1)
{
try
{
request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch(e2)
{
try
{
request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch(e3)
{
request = false
}
}
}
return request
}
</script></body></html>
Here is the PHP: Code: <?php // xmlget.php
if (isset($_GET['url'])) {
header('Content-Type: text/xml');
echo file_get_contents("http://".sanitizeString($_GET['url']));
}
function sanitizeString($var) {
$var = strip_tags($var);
$var = htmlentities($var);
return stripslashes($var);
}
?>
|
|||||||