|
JavaScript - Creating Child Elements
I'm a true newbie when it comes to JavaScript. To learn the language, I've set up a project for myself, a sort of board game.
As it is, I have a series of divs, each with an image (img tag). The divs ids are "Space1", "Space2", "Space3", etc. I am trying to dynamically create child divs inside the space divs as player markers. Here is the code: Code: <script type="text/javascript">
for(intA=0;intA<=10;intA++){
var NewDiv=document.createElement("div")
NewDiv.setAttribute("id","Space"+intA+"Player1")
NewDiv.style.width="20px";NewDiv.style.height="20px"
NewDiv.style.position="relative"
NewDiv.style.left="10px";NewDiv.style.top="10px"
NewDiv.innerHTML="1"
NewDiv.style.backgroundColor="#333333"
NewDiv.style.border="2px solid black"
NewDiv.style.visibility="visible"
NewDiv.style.zIndex="1000"
document.getElementById("Space"+intA).appendChild(NewDiv)
}
</script>
The assumption is that this code should make a 20x20 gray box with a "1" in it. I've tried playing with the visibility and the z-index, but nothing is showing up. What am I doing wrong here? Similar TutorialsForgive me, I come from a ColdFusion background and DOM manipulation is not one of my strongest assets. I am trying to dynamically create (and also delete) a row inside a table, which contains three cells that each have three form elements (a input box, a select drop-down box that is populated by a query to a database, and a textarea). Now all the JavaScript/jQuery examples I've seen for dynamically creating elements are very basic, nothing this complex. Could I get some help?! This is what I'm trying to dynamically create so that the user can add more options but also delete them. Would the jQuery clone() function be a good choice for this? Code: <tr> <td> <input type="text" id="rejectName" /> </td> <td> <select id="divSelectReason"> <option value="" selected="true">Enter Rejection Reason</option> <cfoutput query="queryReasonReturn"> <option>#codeAndReason#</option> </cfoutput> </select> </td> <td> <textarea id="editReason" cols="30"></textarea> </td> </tr> Now when a row is dynamically created I also have to access those values as well, so I would assume using a variable that counts each row created, and appends that iteration to the name of that particular element. (I also posted this on stackoverflow, but haven't had any replies.) I have a script that sends a POST to a php file, and gets a new integer (primary key). Then the script creates 3 new divs, with that ID included in them as an attribute. Now, I need to be able to grab the ID and give it back to PHP when the user updates it. (It's currently a div, but later it will be an editable form.) I was going to do this by creating a button in the same script that I use to create the divs, bearing the same integer and calling a function. The problem with this concept, is that I have no idea how to create a Unique variable to pass along to the function, so it knows which number to look at. Obviously, if I have only one variable that gets overwritten with each new entry - after all of the rows load, only the last row will have a variable that matches its id. Another option is to find the value of all attributes that bear the name data-integer-question and pass its number/integer to a function, when the user does something like keyup enter. However, I have no idea how to do that. obj.returnIntJson holds the integer that I've been talking about, which changes for each row. rowNumberObj.qarowcontainer is just a reference for the parent div, which doesn't get edited by the user - you can ignore it. The script gives a result like this: <div id="questioncolumn" class="questionColumnCSS" data-integer-question="701"></div> Suggestions on how to proceed? Here's the code for one of the divs, Thanks. PHP Code: qaRowQuestion = document.createElement('div'); qaRowQuestion.setAttribute('id', "questioncolumn"); qaRowQuestion.setAttribute('data-integer-question', obj.returnIntJson); qaRowQuestion.setAttribute('class',"questionColumnCSS"); qaRowQuestionParent = document.getElementById(rowNumberObj.qarowcontainer); qaRowQuestionParent.appendChild(qaRowQuestion); 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. :-) Ok, so the nth-child format is .class:nth-child(n){} Does anyone know of a way to dynamically set n? What I am trying to do is highlight the nth child element, but I need to be able to alter n based on the state. i had one window with few controls and two buttons, one button click i am opening another small window by using window.open, in this window i had one close button. on click of close button what i want is i want to click the second button which exists in the parent window, and i want to close the chield window. for that i am coding window.opener.document.getElementById('pbGo').click(); self.close(); but i am getting error, in the second button i put alert message for testing purpose. where i am doing wrong i dont know. Any help please. thanks 1) Script Title: sdmenu 2) Script URL: http://www.dynamicdrive.com/dynamicindex1/slashdot.htm 3) Describe problem: My issue is: How do I get the appropriate child menu to expand depending on the current page. Example: if you were to navigating the pages on this site via the main horizontal navigation, how do I get the side navigation to open on that page? http://www.quicksilvergroup.com.au/c...site/index.htm THANKS FOR YOU TIME! I have following JS snippet var t = document.createElement ('div'); t.id = "testDiv"; t.innerHTML = "test content"; window.top.document.getElementById ('anotherDiv').appendchild (t); 'anotherDiv' exists in the document; The statement above is not working in IE I'm seeing JS error. but it works in Firefox (i.e t element is appended to anotherDiv). Can any one please let me know how i can resolve this. I need a pop-up window when the second child button is checked. I am having problems. Can you please help? Thank You!! Code: <script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return true;
}
</script>
<script type="text/javascript">
$('input[type=checkbox]').change(function() {
// get id of the current clicked element
var id = $(this).attr('id');
// find elements with classname 'parent-<id>' and (un)check them
var children = $('.parent-' + id).attr('checked', $(this).attr('checked'));
});
</script>
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block";
} else {
elms=e.getElementsByTagName("INPUT");
for(var i=elms.length;i--;){
if(elms[i].name=="cb1" || elms[i].name=="cb2")
elms[i].checked=false;
}
e.style.display="none";
}
return true;
}
</script>
</head>
<body>
<form name='f1' action='#'>
<h2 align="center">Request Form</h2><br>
<br>
<br>
<br>
Please check what you want.<br><br>
<input id="s1" type="checkbox" onclick="return toggleMe('para1')" value="1">1
<br>
<div id="para1" style="display:none">
<input id="b1"class="parent-s1" type="checkbox" name="cb1"/>
<label for="cb1">ABC</label><br>
<input type = "checkbox" class="parent-s1" name ="cb1" id ="b1" onclick ="newPage('http://www.your-url.com/your-page.htm')"> DEF
<script type = "text/javascript">
function newPage(page) {
if (document.getElementById("cb1").checked) {
OpenWin = this.open(page,"CtrlWindow","top=80,left=100,screenX=100,screenY=80,width=550,height=460,toolbar=no,menubar=no,location=no, scrollbars=no,resizable=yes");
return false;
}
}
function closepop() {if (OpenWin != null) OpenWin.close() }
window.onunload = closepop;
</script>
<br>
</div>
<input type="checkbox" onclick="return toggleMe('para2')" value="2">2
<br>
<div id="para2" style="display:none">
<input id="b2" class="parent-s2" type="checkbox" name="cb2"/>
<label for="cb2">GHI</label><br>
<input type = "checkbox" class="parent-s1" name ="cb2" id ="b2" onclick ="newPage('http://www.your-url.com/your-page.htm')"> JKL
<script type = "text/javascript">
function newPage(page) {
if (document.getElementById("cb2").checked) {
OpenWin = this.open(page,"CtrlWindow","top=80,left=100,screenX=100,screenY=80,width=550,height=460,toolbar=no,menubar=no,location=no, scrollbars=no,resizable=yes");
return false;
}
}
function closepop() {if (OpenWin != null) OpenWin.close() }
window.onunload = closepop;
</script>
<br>
</div>
<script type='text/javascript'>
function Cb2Rb( setRef )
{
this.boxGroup = setRef;
for( var i=0, len=setRef.length; i<len; i++ )
setRef[ i ].onclick=( function(inst, idx){return function(){inst.scan(idx)}} )(this, i);
this.scan=function(index)
{
if( this.boxGroup[ index ].checked )
for(var i=0, g=this.boxGroup, len=g.length; i<len; i++)
if( i != index )
g[i].checked = false;
}
}
new Cb2Rb( document.forms.f1.cb1 );
new Cb2Rb( document.forms.f1.cb2 );
</script>
<script type='text/javascript'>
function sub_delete{
if (typeof document.checks.cb.length === 'undefined') {
/*then there is just one checkbox with the name 'cb' no array*/
if (document.checks.cb.checked == true )
{
document.checks.submit();
return 0;
}
}else{
/*then there is several checkboxs with the name 'cb' making an array*/
for(var i = 0, max = document.checks.cb.length; i < max; i++){
if (document.checks.cb[i].checked == true )
{
document.checks.submit();
return 0;
}
}
}
}//sub_delete end
</script>
<script type='text/javascript'>
$('input[class*="parent"]').change(function(){
var cls = '.' + $(this).attr('class') + ':checked';
var len = $(cls).length;
var parent_id = '#' + $(this).attr('class').split('-')[1];
// 3. Check parent if at least one child is checked
if(len) {
$(parent_id).attr('checked', true);
} else {
// 2. Uncheck parent if all childs are unchecked.
$(parent_id).attr('checked', false);
}
});
</script>
Dear Madam/Sir, I would greatly appreciate any help. I am working on this site: http://www.pathology.ubc.ca/Path_UBC...Professor.html. The list of names on the right hand side is conencted to the iframe, left hand side. By clicking on individual name the eprofile is populated in the iframe. Everything works fine but what I would like to add is some kind of extention to the url so we can externaly link directly to each these profiles. Please let me know if this is something that can be done? Many thanks, Debbie var selwindow = window.open('child1.html','_blank','resizable=yes,width='+(screen.width-500)+',height='+(screen.height-500)+''); selwindow.document.selectform.childText.value=document.getElementById('pdetails1').value; I am using this code to assign a value for textbox in the child window. It works well in Internet Explorer, but it shows an error when run in Firefox. It shows: selwindow.document.selectform is undefined. Here, "childText" is the current window textbox id, "pdetails1" is the child window text box id,"select form" is child window form id 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); } } Hi. I'm working on a usability issue on a website. I have a jquery accordion slider, each slide has a link to a category. Now what happens is that when I go to the category page by clicking on a slider, when the page loads, the sliders always opens the first slide. For example, if I click on the third slide, I would like that slide to be open when the page loads. This is similar to the :current I believe. I think to solve what I need I must trigger a click on the third slide that third slide page opens. I know I need a reference for a condition, so I have ID'd my body through this php code were it gets the page name from the url into variable $page and then into do body's ID: PHP Code: <?php $page = $_SERVER['REQUEST_URI']; $page = str_replace("/","",$page); $page = str_replace(".php","",$page); $page = str_replace("?s=","",$page); $page = $page ? $page : 'default' ?> <body id="<?php echo $page ?>"> Now I've been trying through Javascript to get the variable from php and trigger a click on the slide of the category it is opening: PHP Code: <script type="text/javascript"> var bodyid = "<? $page ?>"; if (bodyid == "energy") { $("document").ready(function() { setTimeout(function() { $("ul#accordion li:second-child).trigger('click'); },10); }); } </script> This is not working and I don't really know what's wrong and how to solve or search for help. Does anyone understand what I'm trying to do here? Thank you. I have a web page which lists and displays all the characters for which a Named Entity code exists, with coding details etc.. Some of these characters are quite obscure and the reader will only be able to see them if they have a suitable Unicode font on their own PC/browser. If not, they will just see placeholder squares. For these obscure characters, I've set up a popup window. Click on a placeholder square and a small window appears which shows a .gif of what the character should look like, and a label saying what it's called. If the user closes the window after viewing, there's no problem. The difficulty comes in if somebody wants to click on a succession of placeholders and view a succession of character .gifs, and meanwhile the initial child window has slipped to the back of the stack and is behind the webpage instead of in front. In IE, Netscape and Safari, it's easy - I just use .focus to bring the child window to the fore. In Chrome, which doesn't recognise the .focus command, I close the child window and re-open it. [There's code further up the document which identifies the browser.] However, neither .focus nor closing and re-opening the window works with Opera, which turns the child window into a tab rather than a separate window, and then shoves that tab to the back. Anybody know how I can get Opera to either move the focus to the child-tab on command, or close it on command so it can be re-opened? This is the code that generates the child window: Code:
function charDisplayer()
{
if (isIEorInnerGroup == "Yes") {codeWidth = windowWidth*.171, codeHeight = windowWidth*.239, codeInset = windowWidth*.041} else {adjust(200), codeWidth = adjust_by, adjust(280), codeHeight = adjust_by, adjust(48), codeInset = adjust_by}
if (isChrome == "Yes") {
if (window.generator) {
window.generator.close();
window.generator= null;
}
}
window.generator=window.open('', 'charwindow', 'height='+codeHeight+', width='+codeWidth+', left='+codeInset+', top='+codeInset*2+', scrollbars=yes');
window.generator.document.write('<html><head><title>Character sample</title>');
window.generator.document.write('<link rel="stylesheet" href="'+styleType+'">');
window.generator.document.write('</head><body>');
window.generator.document.write('<p style="text-align: center;"><div class=centred><table class=centred><tr><td style="text-align: center;"><div class=centred><img src="artwork/font_characters/'+charID+'.gif" border=3 alt="'+charName+'" align=bottom border=0 width='+charWidth+'></div>'+charName+'</td></tr></table></div>');
window.generator.document.write('<hr /><a href="javascript:self.close()">Close</a> the popup if you have finished viewing characters.</p>');
window.generator.document.write('</body></html>');
window.generator.document.close();
if (window.focus) {window.generator.focus()}
}
Ignore the line which begins if (isIEorInnerGroup == "Yes") - this is part of a setup which resizes all art, tables etc to maintain a constant size across all browsers and screen resolutions. "stylesheet" is passed as a variable because I have two different stylesheets on the go, to accommodate the fact that Netscape handles text-size differently from the other browsers. There's a function elsewhere which sets the value of stylesheet according to whether the browser is Netscape or not, and whether the platform is a Mac or not. "charID" is a variable which identifies the code name of the character (taken from the Named Entity code) and looks it up under that name in a list of .gifs. "charName" is a variable which passes a text-string saying what the character is called, e.g. "Not a subset of". There is an "isOpera" variable which can be used to start a specific action if the browser is Opera. I was wondering if there was any way I can give a child element, preferably the first one, a link through a parent element with an ID. An example: Code: <div id="parent"> <a href="/">Name</a> <-! start message -> <b>child element text</b> <-! end message -> </div> I want the bold tag to have the link, basically. But through javascript. After a parent checkbox has been selected and the user changes their mind and just unchecks the Parent checkbox I need to figure out how to automatically uncheck the child checkboxes as well. Code: <script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return true;
}
</script>
<script type="text/javascript">
$('input[type=checkbox]').change(function() {
// get id of the current clicked element
var id = $(this).attr('id');
// find elements with classname 'parent-<id>' and (un)check them
var children = $('.parent-' + id).attr('checked', $(this).attr('checked'));
});
</script>
<body>
<form name='f1' action='#'>
<h2 align="center">Test</h2><br>
<br>
<input id="s1" type="checkbox" onclick="return toggleMe('para1')" value="1">1
<br>
<div id="para1" style="display:none">
<input id="b"class="parent-s1" type="checkbox" name="cb1"/>
<label for="cb1">a</label><br>
<input id="b" class="parent-s1"type="checkbox" name="cb1"/>
<label for="cb1">b</label>
<br>
</div>
<input type="checkbox" onclick="return toggleMe('para2')" value="2">2
<br>
<div id="para2" style="display:none">
<input id="b"class="parent-s2" type="checkbox" name="cb2"/>
<label for="cb2">a</label><br>
<input id="b" class="parent-s2"type="checkbox" name="cb2"/>
<label for="cb2">b</label>
<br>
</div>
<script type='text/javascript'>
function Cb2Rb( setRef )
{
this.boxGroup = setRef;
for( var i=0, len=setRef.length; i<len; i++ )
setRef[ i ].onclick=( function(inst, idx){return function(){inst.scan(idx)}} )(this, i);
this.scan=function(index)
{
if( this.boxGroup[ index ].checked )
for(var i=0, g=this.boxGroup, len=g.length; i<len; i++)
if( i != index )
g[i].checked = false;
}
}
new Cb2Rb( document.forms.f1.cb1 );
new Cb2Rb( document.forms.f1.cb2 );
</script>
<script type='text/javascript'>
function sub_delete{
if (typeof document.checks.cb.length === 'undefined') {
/*then there is just one checkbox with the name 'cb' no array*/
if (document.checks.cb.checked == true )
{
document.checks.submit();
return 0;
}
}else{
/*then there is several checkboxs with the name 'cb' making an array*/
for(var i = 0, max = document.checks.cb.length; i < max; i++){
if (document.checks.cb[i].checked == true )
{
document.checks.submit();
return 0;
}
}
}
}//sub_delete end
</script>
<script type='text/javascript'>
$('input[class*="parent"]').change(function(){
var cls = '.' + $(this).attr('class') + ':checked';
var len = $(cls).length;
var parent_id = '#' + $(this).attr('class').split('-')[1];
// 3. Check parent if at least one child is checked
if(len) {
$(parent_id).attr('checked', true);
} else {
// 2. Uncheck parent if all childs are unchecked.
$(parent_id).attr('checked', false);
}
});
</script>
<br><br><br>
<input type="button" class="button" onclick="return toggleMe('para10')" value="Submit">
Hey, 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? After open a child window, I would like to keep parent window on focus. I tried self.focus(), set new window in blur() as well as setting the setInterval, none of them works in either Firefox or IE. I think this question relates to the opening window in tab rather than in new window. Actually, in Firefox, it was opened in tab and in IE it was opened in new window. Hi all, I have a HTML and I am opening another link in a separate window using window.open() . The child window is something like 'http://yahoo.com' which is out side html. I need to refresh the parent window when the child window is closed. any idea? Thanks, Mahesh Hey, I'm looking for a way to get a variable from a parent window in a child window. I'm aware that you can write the variable to a hidden field and then get the field's value in the child window, but I'm looking for a cleaner (all JS preferable) way of doing this. Something like this, but I believe this is an out-dated solution: Code: var str = window.opener.str; alert(str); Any solutions? hi, In my pop up window is a form, at the moment I am validation the formfield but I also would like to close the window and refresh the main window when the form is submitted?! I found this piece of code: Code: onsubmit="window.opener.window.location.reload(true); window.self.close() not sure where to put it as validate form is onsubmit?! here is my code: Code: <html>
<head>
<title>Add Qualification</title>
<script type="text/javascript">
function validateForm()
{
var qualification=document.forms["qualiform"]["qualification"].value
if (qualification==null || qualification=="")
{
alert("Please enter a qualification name!");
return false;
}
}
</script>
</head>
<body>
<form action="<?php echo $PHP_SELF;?>" name="qualiform" method="post" onsubmit="return validateForm();">
<table>
<tr>
<td>Qualification Name:</td>
<td><input type="text" name="qualification" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Add qualification" /></td>
</tr>
</table>
</form>
</body>
</html>
|
|||||||