|
JavaScript - Change Inner Content Of The Second Child Node
I'm beginner, and there is a task in exam to change inner content of the second child node. Can't get, please help or maybe link to an article how to do it, because I can't find anything in my study book;
edit: is this correct? function SetUpTranslation() { var phrases = document.getElementsByTagName('p'); for (var i=0; i < p.attributes.length; i++){ phrases.secondNode.innerHTML=french[i]; element.onclick=swapFE(phrases.secondNode); element.onmouseup=swapFE(phrases.secondNode); } } Similar TutorialsHey, guys, my first post here on the forums, I hope this is the right place. This technically uses Javascript + PHP + XML, but the problem is more based on Javascript than the other two. That, and there are 380 people viewing Javascript and 8 people viewing XML, I decided to take the path of lesser resistance. Also, the code I used, I'm sure there are a million shortcuts that could be used. So if you can give me suggestions, I would Love to hear them because I'm still learning Javascript + PHP + XML and would be very grateful to learn how I could be more efficient What I'm creating is a Form that takes variables from an XML for users to fill out. Users can choose between products, and then when the product is clicked, it loads the options from an Array within the XML so... The question is Products Load from an Array Options Load from the chosen Products? I'm thinking this can be done two ways. Maybe a separate XML can be used for Options but then how would I link each one for each product? Or, can I load the Options in the same XML for each Product and load an array for each Product's Options? --- Later on, I need to figure out how to create a new element for each form the User fills out. IE They finish filling out the options and volume for 20 GI JOES. So it should save those Variables and the User Filled Variables. And then allow you to fill out a new product. Appending to the last form filled out IE 20 GI JOES [Color Red] [Eating Pizza] [Wearing Cowsuits] 12 BARBIES [Color Blue] [Eating Sushi] [Wearing Bearsuits] But I'll do my own reearch for that before I start asking here on how to do that --- This is my Code so far, some of you will recognize it from W3 Schools --- Code: JS
oldTextAry = new Array();
var xmlDoc;
if (window.XMLHttpRequest) {
xmlDoc=new window.XMLHttpRequest();
xmlDoc.open("GET","data.xml",false);
xmlDoc.send("");
xmlDoc=xmlDoc.responseXML;
}
else if (ActiveXObject("Microsoft.XMLDOM")) {
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false; xmlDoc.load("data.xml");
}
var x=xmlDoc.getElementsByTagName("PR");i=0;
var y=xmlDoc.getElementsByTagName("OPTION");j=0;
var z=xmlDoc.getElementsByTagName("OPT");k=0;
var enl;
Above Code, calls on data.xml in the same folder. It then creates an array from the XML for <PR> <OPTION> and <OPT>. In the XML. It's... Code: XML <PRODUCT> <PR> <TITLE>Title goes here</TITLE> <IMG>jpg html for image goes here</IMG> <ENL>jpg html for high res image goes here</ENL> <LINK>a link if needed</LINK> <INFO>more info if needed</INFO> <OPTION> <OPT>hearts</OPT> <OPT>stars</OPT> <OPT>horseshoes</OPT> <OPT>clovers</OPT> <OPT>balloons</OPT> </OPTION> </PR> <PR> <TITLE>Title goes here</TITLE> <IMG>jpg html for image goes here</IMG> <ENL>jpg html for high res image goes here</ENL> <LINK>a link if needed</LINK> <INFO>more info if needed</INFO> <OPTION> <OPT>hearts</OPT> <OPT>stars</OPT> <OPT>horseshoes</OPT> <OPT>clovers</OPT> <OPT>balloons</OPT> </OPTION> </PR></PRODUCT> The OPT is what I want to load as an array. How could I do that? So continuing with the JS code... Code: function productnext(){if (i<x.length-5) { i++; productline();return false; }}
function productprevious(){if (i>0) { i--; productline();return false; }}
function productline(){
ttl1=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
ttl2=(x[i+1].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
ttl3=(x[i+2].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
ttl4=(x[i+3].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
ttl5=(x[i+4].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
img1=(x[i].getElementsByTagName("IMG")[0].childNodes[0].nodeValue);
img2=(x[i+1].getElementsByTagName("IMG")[0].childNodes[0].nodeValue);
img3=(x[i+2].getElementsByTagName("IMG")[0].childNodes[0].nodeValue);
img4=(x[i+3].getElementsByTagName("IMG")[0].childNodes[0].nodeValue);
img5=(x[i+4].getElementsByTagName("IMG")[0].childNodes[0].nodeValue);
lnk1=(x[i].getElementsByTagName("LINK")[0].childNodes[0].nodeValue);
lnk2=(x[i+1].getElementsByTagName("LINK")[0].childNodes[0].nodeValue);
lnk3=(x[i+2].getElementsByTagName("LINK")[0].childNodes[0].nodeValue);
lnk4=(x[i+3].getElementsByTagName("LINK")[0].childNodes[0].nodeValue);
lnk5=(x[i+4].getElementsByTagName("LINK")[0].childNodes[0].nodeValue);
inf1=(x[i].getElementsByTagName("INFO")[0].childNodes[0].nodeValue);
inf2=(x[i+1].getElementsByTagName("INFO")[0].childNodes[0].nodeValue);
inf3=(x[i+2].getElementsByTagName("INFO")[0].childNodes[0].nodeValue);
inf4=(x[i+3].getElementsByTagName("INFO")[0].childNodes[0].nodeValue);
inf5=(x[i+4].getElementsByTagName("INFO")[0].childNodes[0].nodeValue);
opt1=(y[j].getElementsByTagName("OPT")[0].childNodes[0].nodeValue);
opt2=(y[j+1].getElementsByTagName("OPT")[1].childNodes[0].nodeValue);
opt3=(y[j+2].getElementsByTagName("OPT")[2].childNodes[0].nodeValue);
opt4=(y[j+3].getElementsByTagName("OPT")[3].childNodes[0].nodeValue);
opt5=(y[j+4].getElementsByTagName("OPT")[4].childNodes[0].nodeValue);
enl1=(x[i].getElementsByTagName("ENL")[0].childNodes[0].nodeValue);
enl2=(x[i+1].getElementsByTagName("ENL")[0].childNodes[0].nodeValue);
enl3=(x[i+2].getElementsByTagName("ENL")[0].childNodes[0].nodeValue);
enl4=(x[i+3].getElementsByTagName("ENL")[0].childNodes[0].nodeValue);
enl5=(x[i+4].getElementsByTagName("ENL")[0].childNodes[0].nodeValue);
The first two functions are for a list in the PHP. The rest of the code gives the first five products into respective variables for the PHP to use. Code: PHP
<td width="25" rowspan="3"><a title="<b>Previous Product</b><br><br>Click to Scroll the product list left" onclick="productprevious();" style="cursor:pointer"><img src='prodprev.jpg' width="25" height="170"></a></td>
<td> </td>
<td width="120" height="120" valign="top"><div id='PR1'></div></td>
<td> </td>
<td width="120" height="120" valign="top"><div id='PR2'></div></td>
<td> </td>
<td width="120" height="120" valign="top"><div id='PR3'></div></td>
<td> </td>
<td width="120" height="120" valign="top"><div id='PR4'></div></td>
<td> </td>
<td width="120" height="120" valign="top"><div id='PR5'></div></td>
<td> </td>
<td width="25" rowspan="3"><a title="<b>Next Product</b><br><br>Click to Scroll the product list right" onclick="productnext();" style="cursor:pointer"><img src='prodnext.jpg' width="25" height="170"></a></td>
It's a line for five products. When people hit the Next button, it moves the Array one product over. And previous button does vice versa. Code: JS
document.getElementById("PR1").innerHTML="<a href='javascript:void();' onClick='picture1();'><img src='"+img1+"' height=120 width=120></a>";
document.getElementById("PR2").innerHTML="<a href='javascript:void();' onClick='picture2();'><img src='"+img2+"' height=120 width=120></a>";
document.getElementById("PR3").innerHTML="<a href='javascript:void();' onClick='picture3();'><img src='"+img3+"' height=120 width=120></a>";
document.getElementById("PR4").innerHTML="<a href='javascript:void();' onClick='picture4();'><img src='"+img4+"' height=120 width=120></a>";
document.getElementById("PR5").innerHTML="<a href='javascript:void();' onClick='picture5();'><img src='"+img5+"' height=120 width=120></a>";
document.getElementById("PT1").innerHTML="<a href='javascript:void();' onClick='picture1();'>"+ttl1+"</a>";
document.getElementById("PT2").innerHTML="<a href='javascript:void();' onClick='picture2();'>"+ttl2+"</a>";
document.getElementById("PT3").innerHTML="<a href='javascript:void();' onClick='picture3();'>"+ttl3+"</a>";
document.getElementById("PT4").innerHTML="<a href='javascript:void();' onClick='picture4();'>"+ttl4+"</a>";
document.getElementById("PT5").innerHTML="<a href='javascript:void();' onClick='picture5();'>"+ttl5+"</a>";
return false;}
This code places the products into the respective list. PR1 gets IMG1. This is also where I wonder if it could be more efficient, because I'm copying things five times in a row. There's got to be a better way to do that. Whenever it's clicked it operates a function called picture#() corresponding to the button. Once again... Must be a more efficient way. Code: function picture1() {document.getElementById('PI').innerHTML="<img src="+img1+" height=170 width=170>";document.getElementById('PTT').innerHTML=ttl1;
/*test area, delete when done*/enl=enl1;document.getElementById("E").innerHTML=enl;}
function picture2() {document.getElementById('PI').innerHTML="<img src="+img2+" height=170 width=170>";document.getElementById('PTT').innerHTML=ttl2;
/*test area, delete when done*/enl=enl2;document.getElementById("E").innerHTML=enl;}
function picture3() {document.getElementById('PI').innerHTML="<img src="+img3+" height=170 width=170>";document.getElementById('PTT').innerHTML=ttl3;
/*test area, delete when done*/enl=enl3;document.getElementById("E").innerHTML=enl;}
function picture4() {document.getElementById('PI').innerHTML="<img src="+img4+" height=170 width=170>";document.getElementById('PTT').innerHTML=ttl4;
/*test area, delete when done*/enl=enl4;document.getElementById("E").innerHTML=enl;}
function picture5() {document.getElementById('PI').innerHTML="<img src="+img5+" height=170 width=170>";document.getElementById('PTT').innerHTML=ttl5;
/*test area, delete when done*/enl=enl5;document.getElementById("E").innerHTML=enl;}
Above, places that picture into "PI" and gets the title and places it into "PTT" --- I was hoping to create another list. EXACTLY like I have here. Where the User can hit Next and Previous, using Options Loaded from an Array within the Array of Products. Is making a new XML with options the only way to do this? If that's the case, how do I associate each product with their options? For a widget I made, I have a dropdown select menu. It is constrained to a very small width and IE does not auto expand on click. I wrote a simple javascript to handle this but I run into two problems. The onmouseout function is fired when I click into a child node, and the onmousedown of the <option> tags doesn't work in IE. The code works fine in all other browsers. var wid; var campaign_i = 0; function campaignWidget_capture(myID){ wid=document.getElementById(myID).style.width; campaign_i++; } function campaignWidget_SubDes(myID,state){ if(state==0){ if(campaign_i==0) campaignWidget_capture(myID); document.getElementById(myID).style.width="auto"; }else document.getElementById(myID).style.width=wid; } onmouseout="campaignWidget_SubDes(id,1)" This is in the select tag. onmousedown="campaignWidget_SubDes(id,0)" This is in the select tag onmousedown="campaignWidget_SubDes('campaignWidget_Sub_Designation',1)" This is in the option tag. I want a code that changes text (of maybe a div) after 10 seconds. So like i could have some text and a link on my page then after 10 seconds it will change to something else and i can make it change to as many things as i want. Then when it goes threw them all it starts over. THANKS I have a div that changes background on click. Example: <script type="text/javascript"> function changeBackground(strURL) { document.getElementById('about').style.backgroundImage="url("+strURL+")"; } </script> <body> <div id="about"> <a href="#about" onClick="changeBackground('mainbackground.jpg');">text</a> <a href="#about" onClick="changeBackground('background2.jpg');">text</a> </div> This part works just fine so no issues. However, I have content on the mainbackground.jpg that is getting transferred over to the other backgrounds as well. I would like each background to have its own paragraph content. I do not want to embed the info into the images for SEO reasons. Any ideas on how to do this? Thanks! I am trying to get a div's content to change using javascript but for some reason it is not working and i get no errors looking at the error console. the code that is waiting for the content... Code: <div style="font-weight: bold;">count = <div id="desc" style="float: left;"></div> descriptions to do.</div><br clear="all" /> the code that should change the content.... Code: <? echo("<script type=\"text/javascript\">
document.getElementById('desc').value='" . $count . "';
</script>");
?>
when i view the source code the javascript lines show like so... Code: <script type="text/javascript">
document.getElementById('desc').value='373';
</script>
do i have the javascript correct ? Hi all I'm rather new to java scripting and trying to get this done for over a week now. I'm building a complete new site (not online yet) which is done for 99,9% The site consists of: Index - No frames - Just an entrance of the site with links main menu Section1 - 1 iframe ("iframe1") - default src=iframe1defaultsection1content main menu submenu section1 Section2 - 2 iframes ("iframe1","iframe2") - default src = iframe1defaultsection2content - frame2 contains images that change main menu submenu section2 Section3 - 1 iframe ("iframe1") - default src=iframe1defaultsection3content main menu submenu section3 Section4 - 1 iframe ("iframe1") - default src=iframe1defaultsection4content main menu submenu section4 Contact - 1 iframe ("iframe1") - default src=iframe1defaultcontactcontent main menu submenu contact The main menu is plain html that is on every page I use javascripts to make a loadIframeFunction load content into the iframes Code: <head>
<script type="text/javascript>
var iframeids=["iFrame1"]
var iframehide="yes"
function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}
</script>
</head>
<body>
<iframe id="iframe1" src="iframesection1start.html" width="644px" height="385px" style="position:absolute; left:505px; top:275px; z-index:73 scrolling="yes" marginwidth="0" marginheight="0" frameborder="0"></iframe>
<a href="javascript:loadintoIframe('iframe1', 'iframecontent.html')" title="content">Content</a>
</body>
Everything works, but 1 thing. i can't get the links in the index page link to the specific section page AND change the default src content can anybody assist me pls? I have a div that changes background on click. Example: <script type="text/javascript"> function changeBackground(strURL) { document.getElementById('about').style.backgroundImage="url("+strURL+")"; } </script> <body> <div id="about"> <a href="#about" onClick="changeBackground('mainbackground.jpg');">text</a> <a href="#about" onClick="changeBackground('background2.jpg');">text</a> </div> This part works just fine so no issues. However, I have content on the mainbackground.jpg that is getting transferred over to the other backgrounds as well. I would like each background to have its own paragraph content. I do not want to embed the info into the images for SEO reasons. Any ideas on how to do this? Thanks! HI every one I want to change a div content in my page via javascript , the problem is the index.php file is coded and I can't read it , but I could execute some JavaScript codes from somewhere else . The problem is that the <div> is in the lowest side of the page and my javascript code is above it , so The javascript code runs first and It couldn't find the div because it's not loaded yet . my javascript code is something like this : <script> document.getElementById("test").innerHTML= "ddd"; </script> <div id="test">dude</div> in the example above , it's not working But if I insert the JavaScript below the <div> it's working . How can I run it in this example ? If the javascript code is above the <div> , how can I change the div's content ? Thanks hi all, I really need help with this topic. I have to use onMouseOver to change the content of an iframe. I'm trying to use an array but I'm confused and I'm not really sure if what I'm doing is correct and it doesnt work. I will appreciate your help and understanding. Thanks a lot! here is part of my code.. var frame=new Array(6); frame[0]="page1.html"; frame[1]="page2.html"; frame[2]="page3.html"; frame[3]="page4.html"; frame[4]="page5.html"; frame[5]="page6.html"; var j=0; function nextFrame() { if (j < 5) { j++; document.getElementById(frame).contentDocument=frame[j]; } return; } <span onMouseOver="nextFrame()" > <img name="upperImage" src="something.jpg" width=350 height=250 /></span> <iframe id="frame1" name="frame1" src="" width=350 height=250 frameborder="0"> </iframe> Please let me know if at least I'm in the right track. Thanks Hi , I am new to javascript and have coded an invoice page through help from some available content on web. here is my requirement My form contains inputs "item ,rate quantity,price" in a tabular form where one can dynamically add or delete rows.And the requirement is that when Quantity is entered the Price should change to Price=Quantity*Rate on tab out So I have used a Javascript onchange() and this works fine for the first displayed row. but for dynamically added rows this does not happen, I am not able change the price value for dynamically added rows. Code is as below direct_invoice.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script type="text/javascript" src="js/direct_invoice_table.js">
</script>
<html>
<head>
<title>Direct Invoice</title>
</head>
<body leftmargin="0" topmargin="0">
<p align = "center" font='30'><input type="text" name="company_name" size="20" maxsize="20" />
<b> Invoice</b></p>
<table id="Client_Details">
<tr>
<th>Client Name:</th>
<td><input type="text" name="client_name" size="20" maxsize="20" /></td>
</tr>
<tr>
<th>Client Address:</th>
<td><input type="text" name="address_line1" size="20" maxsize="40" /></td>
</tr>
<tr>
<td></td>
<td><input type="text" name="address_line2" size="20" maxsize="40" /></td>
</tr>
<tr>
<th>Pin Code:</th>
<td><input type="text" name="client_pin" size="7" maxsize="7" /></td>
</tr>
<tr>
<th>City/State/Country:</th>
<td><input type="text" id="client_city" size="10" maxsize="30" /></td><td>/</td>
<td><input type="text" id="client_state" size="10" maxsize="20" /></td><td>/</td>
<td><input type="text" id="client_country" size="10" maxsize="20" /></td>
</tr>
<tr>
<th>Email Address:</th>
<td><input type="text" name="client_city" size="10" maxsize="30" /></td>
</tr>
<tr>
<th>TIN/PAN:</th>
<td><input type="text" name="tin_or_pan" size="10" maxsize="20 " /></td>
</tr>
</table>
<table align="center" width = "75%">
<tr>
<td align = "center">
<!--- very imporant to give the table an id --->
<!--- otherwise it won't know where to edit --->
<table border="1" id="mySampleTable">
<tr>
<th>Item No</th>
<th>Item Name</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
<th> <font color="RED">Delete</font></th>
</tr>
<tr>
<td>1</td>
<td><input type="text" name="itemname[]" size="40" "maxsize="100"/></td>
<td><input type="text" name="description[]" size="20" " maxsize="100" /></td>
<td><input type="text" id = "unitcost[]" name="unitcost[]" size="10" maxsize="100" /></td>
<td><input type="text" id = "quantity[]" name="quantity[]" onchange="dynamic_onc();" size="4" maxsize="100" /></td>
<td><input type="text" id = "price[]" name="price[]" size="10" maxsize="100" /></td>
</tr>
</table>
<table id="totaltbl" align="right">
<tr>
<td></td>
</tr>
<tr>
<th>Vat %</th>
<td><input type="text" name="total" size="3" maxsize="3" /></td>
</tr>
<tr>
<th>Total</th>
<td><input type="text" id = "total" name="total" size="20" maxsize="100" /></td>
</tr>
</table>
</td>
</tr>
</table>
<form action="save_entry.php" name="eval_edit" method="post" format="html">
<p>
<input type="button" value="Add Row" onclick="addRow();" />
<input type="button" value="Calculate Total Amount" onclick="Totalcal();" />
<input type="button" value="Print" />
</p>
</form>
<p align = "left" font='100'> <b>Company Name: </b> <input type="text" name="company_address_line1" size="20" maxsize="20" />
</p>
<p align = "left" font='100'> <b>Company address line: </b> <input type="text" name="company_address_line2" size="20" maxsize="20" /></p>
<p align = "left" font='100'> <b>Company Location: </b><input type="text" name="company_address_location" size="20" maxsize="20" /></p>
</body>
</html>
*************** The below is the javascript function that i wrote Code:
function addRow()
{
// grab the element, i.e. the table your editing, in this we're calling it
// 'mySampleTable' and it is reffered to in the table further down on the page
// with a unique of id of you guessed it, 'mySampleTable'
var tbl = document.getElementById('mySampleTable');
// grab how many rows are in the table
var lastRow = tbl.rows.length;
// if there's no header row in the table (there should be, code at least one
//manually!), then iteration = lastRow + 1
var iteration = lastRow;
// creates a new row
var row = tbl.insertRow(lastRow);
// left cell
// insert a cell
var cellLeft = row.insertCell(0);
// here we're just using numbering the cell, like anything else you don't
// have to use this, but i've kinda noticed users tend to like them
var textNode = document.createTextNode(iteration);
// takes what we did (create the plain text number) and appends it the cell
// we created in the row we created. NEAT!
cellLeft.appendChild(textNode);
// right cell
// another cell!
var cellRight1 = row.insertCell(1);
// creating an element this time, specifically an input
var el = document.createElement('input');
// a data type of text
el.type = 'text';
// the name of the element itemname, and because this is dynamic we also
// append the row number to it, so for example if this is the eigth row
// being created the text box will have the name of itemname8. super fantastic.
// the exact same thing with a unique id
el.id = 'itemname[]'+ iteration;
// set it to size of 40. setting sizes is good.
el.size = 40;
// same thing as earlier, append our element to our freshly and clean cell
cellRight1.appendChild(el);
var cellRight2 = row.insertCell(2);
var e2 = document.createElement('input');
e2.type = 'text';
e2.id = 'description[]' + iteration;
e2.size = 20;
e2.maxsize = 100;
cellRight2.appendChild(e2);
var cellRight3 = row.insertCell(3);
var e3 = document.createElement('input');
e3.type = 'text';
e3.id = 'unitcost[]' + iteration;
e3.size = 10;
e3.maxsize = 100;
cellRight3.appendChild(e3);
var cellRight4 = row.insertCell(4);
var e4 = document.createElement('input');
e4.type = 'text';
e4.id = 'quantity[]'+ iteration;
e4.size = 4;
e4.maxsize = 100;
cellRight4.appendChild(e4);
var cellRight5 = row.insertCell(5);
var e5 = document.createElement('input');
e5.type = 'text';
e5.id = 'price[]'+ iteration;
e5.size = 10;
e5.maxsize = 100;
cellRight5.appendChild(e5);
// var cellRight7 = row.insertCell(7);
// var e7 = document.createElement('input');
// e7.type = 'CHECKBOX';
// e7.id = 'cancel[]';
// cellRight7.appendChild(e7);
var cellRight6 = row.insertCell(6);
cellRight6.innerHTML = " <input type='button' value='Delete' size='6' onclick='removeRow(this);'/>";
e4.onclick = dynamic_onc();
}
function removeRow(src)
{
/* src refers to the input button that was clicked.
to get a reference to the containing <tr> element,
get the parent of the parent (in this case case <tr>)
*/
var oRow = src.parentElement.parentElement;
//once the row reference is obtained, delete it passing in its rowIndex
document.all("mySampleTable").deleteRow(oRow.rowIndex);
}
function countRow()
{
var Rowcount = document.getElementById('mySampleTable').rows.length;
document.eval_edit.count.value = Rowcount-1;
}
function CalculatePrice()
{
var Rowcount = document.getElementById('mySampleTable').rows.length;
document.eval_edit.count.value = Rowcount-1;
}
function onc() {
var a= document.getElementById('unitcost[]');
var b= document.getElementById('quantity[]');
var c = Math.ceil(a.value*b.value);
alert(b);
document.getElementById('price[]').value =c;
}
function dynamic_onc()
{
alert('Jay' );
e5.value =7;
}
function Totalcal() {
var a= document.getElementById('unitcost[]');
var b= document.getElementById('quantity[]');
var c = Math.ceil(a.value*b.value);
alert(b.value);
document.getElementById('price[]').value =c;
}
Is there a Javascript code to change multiple affilate link/content daily?
Hi guys, The code in question is www.spectral.og.uk/test5/work2.htm I am trying to change the main 'SPECTRAL' video content mid-right when I click on the 'Change Movie' at the bottom. Eventually I want to be able to do this from the thumbnails but Im just running a simple test first. So I defined the function 'ChangeMOVIE' on line 14 using document.getElementById & innerHTML, etc, to replicate the flash player script contents that are incidentally ID'd as "BIGCHANGE" (ie, part of the main flash player on line 249) but simply replacing a different name for the video when it reaches the Flashvars "&file=Splash.flv" to something else to effect the change of video content I'm after, 'Olay.flv' I think. I have tried so hard to research into this but it just doesn't work. Is the problem to do with that :- 1) You can't ID something within <script>, ie BIGCHANGE in this instance. 2) innerHTML is only really for text replacement, not the amount of script I've stuck into it to replace within the whole <TD> cell with ID 'VID' (ie the main flash player) even though I've used delimiters and everything within the innerHTML data to try and not confuse it with apostrophes within speach marks, etc Any thoughts where I'm going wrong? Maybe Im barking up the wrong tree on this! Thanks so much guys for any headsup on a solution to this as I've been up all night for about a week on this! Dom The project I am working on involves a flash piece that communicates with a iframe. Currently the flash piece just calls on javascript functions. I want the buttons in the flash piece to be able to change the src of the iframe. PHP Code: <script type="text/javascript"> document.getElementById('video').setAttribute('src',address2); function closeVideo() { document.getElementById('video').style.height='0px'; return false; document.getElementById('video').setAttribute('src', address2); } function openVideo() { document.getElementById('video').style.height='391px'; return false; document.getElementById('video').setAttribute('src', address); } </script> So the way the code works now is when the page loads it sets the iframe with the id of 'video' to the variable address2 which it pulls from an XML file. In the flash piece when a button is hit, it calls openVideo() which "opens" the iframe and I want it to change the contents to address. This does not work though. It opens the frame but will not change the src. I've tried a bunch of different things now such as make the flash target the iframe using navigateToURL(request1, 'video'); but in Firefox and IE is opens it stills as if I had _blank in there. It does strangely work in Safari. Any ideas how to get this to work? I'm new to javascript so it could be something basic I'm overlooking hey guys i downloaded the 'Content Slider v2.4', and this has a feature which will save a cookie used to remember and recall the last content viewed by the user when they return to the page. (click here for more information on the script.) the only thing is that this is made for pages with URLs such as: Quote: www.mysite.com/gallery_album_1/content.php but my URLS are set out like: Quote: www.mysite.com/content.php?gallery_album_1 is there a way to make to so the cookie remembers the page via the "php?gallery_album_1" part instead of the "content.php" part. i need it to be like this simply because i have multiple galleries coming from the oe page, eg: Quote: www.mysite.com/content.php?gallery_album_1 www.mysite.com/content.php?gallery_album_2 www.mysite.com/content.php?gallery_album_3 the main code of the js is as follows: Code: //** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** May 2nd, 08'- Script rewritten and updated to 2.0.
//** June 12th, 08'- Script updated to v 2.3, which adds the following features:
//1) Changed behavior of script to actually collapse the previous content when the active one is shown, instead of just tucking it underneath the later.
//2) Added setting to reveal a content either via "click" or "mouseover" of pagination links (default is former).
//3) Added public function for jumping to a particular slide within a Featured Content instance using an arbitrary link, for example.
//** July 11th, 08'- Script updated to v 2.4:
//1) Added ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4 to select 4th slide in "myslider")
//2) Fixed bug where the first slide disappears when the mouse clicks or mouses over it when page first loads.
var featuredcontentslider={
//3 variables below you can customize if desired:
ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="../images/loading.gif" /> Fetching slider Contents. Please wait...</div>',
bustajaxcache: true, //bust caching of external ajax page after 1st request?
enablepersist: true, //persist to last content viewed when returning to page?
settingcaches: {}, //object to cache "setting" object of each script instance
jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.
this.turnpage(this.settingcaches[fcsid], pagenumber)
},
ajaxconnect:function(setting){
var page_request = false
if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else
return false
var pageurl=setting.contentsource[1]
page_request.onreadystatechange=function(){
featuredcontentslider.ajaxpopulate(page_request, setting)
}
document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg
var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', pageurl+bustcache, true)
page_request.send(null)
},
ajaxpopulate:function(page_request, setting){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(setting.id).innerHTML=page_request.responseText
this.buildpaginate(setting)
}
},
buildcontentdivs:function(setting){
var alldivs=document.getElementById(setting.id).getElementsByTagName("div")
for (var i=0; i<alldivs.length; i++){
if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv"
setting.contentdivs.push(alldivs[i])
alldivs[i].style.display="none" //collapse all content DIVs to begin with
}
}
},
buildpaginate:function(setting){
this.buildcontentdivs(setting)
var sliderdiv=document.getElementById(setting.id)
var pdiv=document.getElementById("paginate-"+setting.id)
var phtml=""
var toc=setting.toc
var nextprev=setting.nextprev
if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){
for (var i=1; i<=setting.contentdivs.length; i++){
phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '
}
phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '')
pdiv.innerHTML=phtml
}
var pdivlinks=pdiv.getElementsByTagName("a")
var toclinkscount=0 //var to keep track of actual # of toc links
for (var i=0; i<pdivlinks.length; i++){
if (this.css(pdivlinks[i], "toc", "check")){
if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents)
pdivlinks[i].style.display="none" //hide this toc link
continue
}
pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link
pdivlinks[i][setting.revealtype]=function(){
featuredcontentslider.turnpage(setting, this.getAttribute("rel"))
return false
}
setting.toclinks.push(pdivlinks[i])
}
else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next"
pdivlinks[i].onclick=function(){
featuredcontentslider.turnpage(setting, this.className)
return false
}
}
}
this.turnpage(setting, setting.currentpage, true)
if (setting.autorotate[0]){ //if auto rotate enabled
pdiv[setting.revealtype]=function(){
featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on
featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation
this.autorotate(setting)
}
},
urlparamselect:function(fcsid){
var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL
return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
},
turnpage:function(setting, thepage, autocall){
var currentpage=setting.currentpage //current page # before change
var totalpages=setting.contentdivs.length
var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)
turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust
if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly
return
setting.currentpage=turntopage
setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex
this.cleartimer(setting, window["fcsfade"+setting.id])
setting.cacheprevpage=setting.prevpage
if (setting.enablefade[0]==true){
setting.curopacity=0
this.fadeup(setting)
}
if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)
setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.prevpage, setting.currentpage)
}
setting.contentdivs[turntopage-1].style.visibility="visible"
setting.contentdivs[turntopage-1].style.display="block"
if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")
if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[turntopage-1], "selected", "add")
setting.prevpage=turntopage
if (this.enablepersist)
this.setCookie("fcspersist"+setting.id, turntopage)
},
setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
var targetobject=setting.contentdivs[setting.currentpage-1]
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
targetobject.filters[0].opacity=value*100
else //IE 5.5
targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
targetobject.style.MozOpacity=value
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
targetobject.style.opacity=value
setting.curopacity=value
},
fadeup:function(setting){
if (setting.curopacity<1){
this.setopacity(setting, setting.curopacity+setting.enablefade[1])
window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50)
}
else{ //when fade is complete
if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run)
setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.cacheprevpage, setting.currentpage)
}
},
cleartimer:function(setting, timervar){
if (typeof timervar!="undefined"){
clearTimeout(timervar)
clearInterval(timervar)
if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div
setting.contentdivs[setting.cacheprevpage-1].style.display="none"
}
}
},
css:function(el, targetclass, action){
var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
if (action=="check")
return needle.test(el.className)
else if (action=="remove")
el.className=el.className.replace(needle, "")
else if (action=="add")
el.className+=" "+targetclass
},
autorotate:function(setting){
window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1])
},
getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},
setCookie:function(name, value){
document.cookie = name+"="+value
},
init:function(setting){
var persistedpage=this.getCookie("fcspersist"+setting.id) || 1
var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index
this.settingcaches[setting.id]=setting //cache "setting" object
setting.contentdivs=[]
setting.toclinks=[]
setting.topzindex=0
setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)
setting.prevpage=setting.currentpage
setting.revealtype="on"+(setting.revealtype || "click")
setting.curopacity=0
setting.onChange=setting.onChange || function(){}
if (setting.contentsource[0]=="inline")
this.buildpaginate(setting)
if (setting.contentsource[0]=="ajax")
this.ajaxconnect(setting)
}
}
as far as i can see, the parts of the code which are about the cookies are labeled "enablepersist" thanks guys Hi Coders, I was wondering if anyone knows how you would create a link when clicked will change the width of the content. I have a feeling this will use jQuery? E.g. A link saying 'expand' will change the width of the body to 1000px and change the link to 'contract'. When the link 'contract' is clicked it will change the width back to 800px and change the link to 'expand' Thanks in advance! Haydn. Code is triggered on the following page when mouse position leaves a profile link while logged in: http://www.veinsfetiche.com/forums/ Code: <script type="text/javascript">
// <![CDATA[
// show the popup
function show_popup(UserID) {
if(http_getuser) {
//get user data and show popup
sendRequest(UserID);
}
}
// hide the popup
function close_popup() {
document.getElementById('popup').style.display='none';
}
// Make the request
function createRequestObject() {
if(window.XMLHttpRequest){
ro = new XMLHttpRequest();
} else if(window.ActiveXObject) {
ro = new ActiveXObject("Msxml2.XMLHTTP");
if(!ro) {
ro = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return ro;
}
//Create Request Variables
var http_getuser = createRequestObject();
//Send Request for user info
function sendRequest(UserID) {
var userinfo_url = '{AJAX_USERINFO_PATH}';
http_getuser.open('get', userinfo_url.replace('USERID', UserID));
http_getuser.onreadystatechange = handleResponse;
http_getuser.send(null);
}
// fill in the response
function handleResponse() {
if(http_getuser.readyState == 4 ){
var xmlDoc = http_getuser.responseXML;
if(xmlDoc.hasChildNodes()) {
document.getElementById('ajax_username').innerHTML = xmlDoc.getElementsByTagName('username')[0].firstChild.nodeValue;
document.getElementById('ajax_registert').innerHTML = xmlDoc.getElementsByTagName('regdate')[0].firstChild.nodeValue;
document.getElementById('ajax_posts').innerHTML = xmlDoc.getElementsByTagName('posts')[0].firstChild.nodeValue;
document.getElementById('ajax_website').innerHTML = xmlDoc.getElementsByTagName('website')[0].firstChild.nodeValue;
document.getElementById('ajax_from').innerHTML = xmlDoc.getElementsByTagName('from')[0].firstChild.nodeValue;
document.getElementById('ajax_last_visit').innerHTML = xmlDoc.getElementsByTagName('lastvisit')[0].firstChild.nodeValue;
document.getElementById('ajax_rank').innerHTML = xmlDoc.getElementsByTagName('rank')[0].firstChild.nodeValue;
document.getElementById('ajax_avatar').innerHTML = xmlDoc.getElementsByTagName('avatar')[0].firstChild.nodeValue; //document.getElementById('ajax_add').innerHTML = xmlDoc.getElementsByTagName('add')[0].firstChild.nodeValue;
//Apply style which makes profile info visible
document.getElementById('popup').style.display='block';
//Get height of popup
var getRefById = function() {return null;};
if(document.getElementById) {
getRefById = function(i) {return document.getElementById(i);};
} else if(document.all) {
getRefById = function(i) {return document.all[i] || null;};
}
var d = getRefById('popup'), h = '0px', o;
if(d) {
if((o = document.defaultView) && o.getComputedStyle) {
h = o.getComputedStyle(d, null).height;
} else if('number' == typeof d.offsetHeight) {
h = d.offsetHeight + 'px';
}
}
// 'h' should now contain the height of 'myDiv', or 0px
//alert(h);
//make room for popup
document.getElementById('test').style.height= h;
}
}
}
// set popup to mouse possition
function set_div_to_mouse(e) {
//Make x and y cord vars
var docX, docY;
//get page info
if(e) {
if(typeof(e.pageX) == 'number') { docX = e.pageX; docY = e.pageY;}
else {docX = e.clientX; docY = e.clientY;}
//vert
} else {
e = window.event;
docX = e.clientX; docY = e.clientY;
if(document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
docX += document.documentElement.scrollLeft; docY += document.documentElement.scrollTop;
}
else if(document.body && (document.body.scrollTop || document.body.scrollLeft)) {
docX += document.body.scrollLeft; docY += document.body.scrollTop;
}
}
//hor
if (docX > document.body.offsetWidth - 400) {
document.getElementById('popup').style.left = (docX - 350) + "px";
} else {
document.getElementById('popup').style.left = (docX - 5) + "px";
}
document.getElementById('popup').style.top = (docY + 30) + "px";
}
//document.onmousemove = set_div_to_mouse;
// ]]>
</script>
<div id="test">
<div class="forabg" id="popup" style="width: 90%;">
<div class="inner">
<span class="corners-top"><span></span></span>
<ul class="topiclist fullwidth">
<li class="header"><dl><dt>{L_READ_PROFILE}</dt></dl></li>
</ul>
<ul class="topiclist forums">
<li><dl>
<dd style="width:100%">
<table> <tr> <td><div id="ajax_avatar"></div></td> <td><strong>{L_USERNAME}:</strong> <span id="ajax_username"></span><br /> <strong>{L_TOTAL_POSTS}:</strong> <span id="ajax_posts"></span><br /> <strong>{L_SORT_RANK}:</strong> <span id="ajax_rank"></span><br /> <strong>{L_JOINED}:</strong> <span id="ajax_registert"></span><br /> <strong>{L_LAST_VISIT}:</strong> <span id="ajax_last_visit"></span><br /> <strong>{L_LOCATION}:</strong> <span id="ajax_from"></span><br /> <strong>{L_WEBSITE}:</strong> <span id="ajax_website"></span><br/> <span id="ajax_add"></span> </tr> </table>
<br/ style="clear: both;">
</dd>
</dl></li>
</ul>
<span class="corners-bottom"><span></span></span>
</div>
</div>
</div>
When my code hits line 80, the height of a div tag is increased to make room for expanding content, so that the new content does not overlap already existing content. When the div tag's height increases, this increases the overall page height. When the page height increases, then the scroll bar stays in the same place, but the page position changes in the browser. Is there anyway to prevent the viewer's position from changing when room is made for the expanding content? I am current building an information database for the company I work at...basically just a place for employees to get information and answers from. It is all hosted on a local server and I can only use javascript, html, and css. Ive got everything made there is just one thing i want to add to it. basically an "alerts and updates" page that only some people can edit without having to know html so if im not there they can post important updates. no computers have access to the internet so I did try some rich text editors but none of them worked. the lay out I'm going for is kind of like this. ------------------------------------ Alerts and Updates Click on links to show updates: update 1 * update 2 * update 3 * update 4 stuff goes in the update [edit button] ------------------------------------- you click edit it prompts you to login, bring up something to edit the text in that specific update you hit submit and it changes the info that was on there. The update links are linked to a script i wrote that just display the info below so when the page loads you see whats in update 1 then you click update and it changes the content to the next one. i dont know if there is any way to do this in javascript and html. any help or a good direction to start would be great...thanks. Hi, I'm kinda hoping this is possible but haven't found any reference to it... I have a parent page that opens a popup on click that launches a sidebar navigation on the right of the screen and resizes the parent page. What I am wanting to do is create a second popup (approx 250px high) that opens below the navigation (which is only around 600px high) but I have noticed that even when you have no status bar in the popup windows, they can still end up overlapping because of additional tools or plugins that the viewer has in their browser. Is there any way to get the popups to butt up against each other instead of overlapping? More like a relative popup? Any assistance would be appreciated. :-) I just really needed to know something about the whitespace between nodes in a tree structure. I know that Firefox's, Safari's, Chrome's and Opera's DOM treat the whitespace as a node. I am wondering what nodeType whitespace would return? Thank you all for any help + sugestions. |
|||||||