rogerio
-
Posts
116 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Everything posted by rogerio
-
justsomeguy you are a gentleman and a scholar. I did notice that <div> rejected .setAttribute for .style while <table> accepted .setAttribute; what's the reason behind this?
-
ok, that got me part way, but even though the cell is the correct size, the text overruns the cell out the bottom and holds the correct width. // create cell r2 c1 mycurrent_row = document.createElement("tr"); // creates a <tr> element r1 mycurrent_row.setAttribute("height", "277px"); // creates a <td> element mycurrent_cell = document.createElement("td"); mycurrent_cell.setAttribute("colspan", "2"); mycurrent_cell.setAttribute("top", "24px"); // appends the cell <td> into the row <tr> mycurrent_row.appendChild(mycurrent_cell); // append the <div> to the cell <td> mycurrent_cell.appendChild(mydiv); // add text to r2. newText=document.createTextNode(objText); mydiv.appendChild(newText);
-
That's my question - how do I put it all together?
-
That's my attempt with the script - set row 1 for 24 and row 2 for 277 making up 299, but it isn't working. Here is one where I added the div into the script: <script> function start(objText) { var mybody = document.getElementsByTagName("body")[0]; // get the reference for the body // create the div mydiv = document.createElement("div"); mydiv.style.width="377px"; mydiv.style.height="277px"; // append the div to the body mybody.appendChild(mydiv); mytable = document.createElement("table"); // creates a <table> element and a <tbody> element mytablebody = document.createElement("tbody"); mytable.setAttribute('cellpadding', '0') mytable.setAttribute('cellspacing', '0') mytable.setAttribute('border', '0') mytable.setAttribute('width', '380')// creating all cells // create cell r1 c1 mycurrent_row = document.createElement("tr"); // creates a <tr> element r1 // creates a <td> element mycurrent_cell = document.createElement("td"); // creates a text node mycurrent_image = document.createElement("img"); mycurrent_image.setAttribute('src',"images/x11_title.gif"); mycurrent_image.setAttribute('height', '23px'); mycurrent_image.setAttribute('width', '358px'); mycurrent_cell.appendChild(mycurrent_image); // appends the cell <td> into the row <tr> mycurrent_row.appendChild(mycurrent_cell);// create cell r1 c2 // creates a <td> element mycurrent_cell = document.createElement("td"); mycurrent_cell.setAttribute("width", "24px"); // creates a img node mycurrent_image = document.createElement("img"); mycurrent_image.setAttribute('src',"images/x11_close.gif"); mycurrent_image.setAttribute('height', '23px'); mycurrent_image.setAttribute('width', '24px'); mycurrent_cell.appendChild(mycurrent_image); // appends the cell <td> into the row <tr> mycurrent_row.appendChild(mycurrent_cell); // appends the row <tr> into <tbody> mytablebody.appendChild(mycurrent_row);// create cell r2 c1 mycurrent_row = document.createElement("tr"); // creates a <tr> element r1 // creates a <td> element mycurrent_cell = document.createElement("td"); mycurrent_cell.setAttribute("colspan", "2"); mycurrent_cell.setAttribute("top", "24px"); // add text to r2. newText=document.createTextNode(objText); mycurrent_cell.appendChild(newText); // appends the cell <td> into the row <tr> mycurrent_row.appendChild(mycurrent_cell); // appends the cell <td> into the row <tr> mycurrent_row.appendChild(mycurrent_cell); // appends the row <tr> into <tbody> mytablebody.appendChild(mycurrent_row); // appends <tbody> into <table> mytable.appendChild(mytablebody); // appends <table> into <body> mybody.appendChild(mytable); // sets the border attribute of mytable to 2; mytable.setAttribute("border", "2px");} </script>
-
I have a table with the same text that was created in HTML and it does not expand.<div id='styled_popup' name='styled_popup' style=' width: 380px; height: 300px; display:none; position: absolute; top:150px; left: 50px;'><table width='380' cellpadding='0' cellspacing='0' border='0'0' > <tr> <td><img height='23' width='358' src='images/x11_title.gif' class='dragme'></td> <td><a href='javascript:styledPopupClose();'><img height='23' width='24'src='images/x11_close.gif' border='0' class="close"></a></td> </tr> <tr><td colspan='2' style='top:24px;'> <div class="text" style="width:377px; height:277px; border-left: 2px solid gold; border-bottom: 2px solid gold; border-right: 2px solid gold;"> Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving:-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see memoving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to seeme moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title tosee me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window titleto see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my windowtitle to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag mywindow title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Dragmy window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving:-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see memoving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to seeme moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title tosee me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window titleto see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my windowtitle to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag mywindow title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Dragmy window title to see me moving :-) </div> </td> </tr></table></div><input type='submit' onMouseDown='setPos(event, document.getElementById("styled_popup"));' value=' Fire! '>
-
This table has 2 rows and I am trying to add text to the second row (see "// add text to r2.") and maintain a height of 276px but the row is expanding to the height of the text. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>create DOM table</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script> function start(objText) { var mybody = document.getElementsByTagName("body")[0]; // get the reference for the body mytable = document.createElement("table"); // creates a <table> element and a <tbody> element mytablebody = document.createElement("tbody");// creating all cells// create cell r1 c1 mycurrent_row = document.createElement("tr"); // creates a <tr> element r1 // creates a <td> element mycurrent_cell = document.createElement("td"); mycurrent_cell.setAttribute("width", "356px"); // creates a text node mycurrent_txtbox = document.createElement("img"); mycurrent_txtbox.setAttribute('src',"images/x11_title.gif"); mycurrent_cell.appendChild(mycurrent_txtbox); // appends the cell <td> into the row <tr> mycurrent_row.appendChild(mycurrent_cell); // create cell r1 c2 // creates a <td> element mycurrent_cell = document.createElement("td"); mycurrent_cell.setAttribute("width", "24px"); // creates a text node mycurrent_txtbox = document.createElement("img"); mycurrent_txtbox.setAttribute('src',"images/x11_close.gif"); mycurrent_cell.appendChild(mycurrent_txtbox); // appends the cell <td> into the row <tr> mycurrent_row.appendChild(mycurrent_cell); // appends the row <tr> into <tbody> mytablebody.appendChild(mycurrent_row); // create cell r2 c1 mycurrent_row = document.createElement("tr"); // creates a <tr> element r1 // creates a <td> element mycurrent_cell = document.createElement("td"); mycurrent_cell.setAttribute("colspan", "2px"); mycurrent_cell.setAttribute("width", "380px"); mycurrent_cell.setAttribute("height", "276px"); // add text to r2. newText=document.createTextNode(objText); mycurrent_cell.appendChild(newText); // appends the cell <td> into the row <tr> mycurrent_row.appendChild(mycurrent_cell); // appends the row <tr> into <tbody> mytablebody.appendChild(mycurrent_row); // sets the border attribute of mytable to 2; mytable.setAttribute("border", "2"); mytable.setAttribute('cellpadding', '0') mytable.setAttribute('cellspacing', '0') mytable.setAttribute('cellpadding', '0') // appends <tbody> into <table> mytable.appendChild(mytablebody); // appends <table> into <body> mybody.appendChild(mytable);}</script></head><body><div id='styled_popup' name='styled_popup' style='width:380px; height:300px; position:absolute; top:150px; left:50px;'><input type="button" onClick="start('Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)');"/></div></body>
-
thanks...
-
Tin, it's working; see the post I made previous to yours.
-
May be a misunderstanding, I was trying to say "my code is bad". What the problem is I don't know, but if this thing starts working, I will research the problem. The header works with IE but not FF; I will research this later. I chaged the code as requested and it is working. I have one more goal and that it is to make the popup draggable by placing an invisble image in it - all ideas on this one are welcome because this is going to need "overflow" for scrolling and the image to remain in place. I have a table with all this, but the table has some graphics limitations. It looks like the only way is to use an overlay.
-
I found the biggest problem to be with the header: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> I changed it to: <!DOCTYPE HTML PUBLIC> So there is some issue with the validation; this is your code with the header modified and it works. <!DOCTYPE HTML PUBLIC><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><script type="text/javascript">function ShowPop(event, popupID) /* these variables have been tested and work */{var obj=document.getElementById(popupID) x=event.clientX; y=event.clientY; obj.style.position = "absolute"; obj.style.left = x+"px"; obj.style.top = y+10+"px"; obj.style.visibility = "visible";}</script><style type="text/css">.popup{ position:absolute;/* left:0px; top:13px; */ width:300px; height:400px; border-style:solid; border-width:4px; border-color:blue; background-color:#000000; padding: 5px; font-family: Tahoma; font-size: 10pt; z-index:2; visibility:hidden; overflow:scroll; border-radius:4px; color:#fff;}</style></head><body><div class="popup" id="popup1"><p>This is pop up.</p></div><a onMouseDown="ShowPop(event,'popup1');" style="cursor:pointer;"> <u>Load popup</u></a></body></html>
-
I got the same response in IE and FF:"Load Popup" was midway and far left on startup.Clicked "Load Popup" and it jumped to the top left.The popup loaded in the place where I clicked. This will continue to reposition the top left of an image where you click. Notice the original position of the img is made with "relative" and the repositioning is with "absolute" which makes thing a little difficult. <html><head><title>Navigation List Example</title><style type="text/css">html, body{width: 100%;height: 100%;margin: 0;padding: 0}</style><script type="text/javascript">function moveIt(event, obj, oldX, oldY){if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ x=event.clientX; y=event.clientY;}else{ x=event.pageX; y=event.pageY;}obj.style.position = "absolute";obj.style.left = x;obj.style.top = y;document.form1.position.value="X coords: " + x + ", Y coords: " + y;}</script></head><body onmousedown="moveIt(event, document.getElementById('move'))" id="show"><div id="move" style="position:relative; top:0; left:0px"><img src='images/x11_title.gif' class='dragme' /></div></body></html>
-
I removed the passing of x/y several tries ago; making a lot of tests.The call: <a onMouseDown="ShowPop(event, document.getElementById('popup1'));" style="cursor:pointer;"> <u>Load popup</u></a>
-
ok, got IE, but wants to add the current x/y to the new x/y moving the location top+y and left+x relative rather than absolute; tried changing to relative and got garbage on the page. FF still does not follow with any .pageX positioning.
-
Same issue, popup does not activate. I have tried adding "px" with the table that works and get the same result; for some reason "px" is taboo.
-
Popup does not activate...
-
This is a css popup and I am trying to move the position of it with script and it is being ignored; it does work with a div/table. The "absolute" was in the css code previously as shown and worked, but after moving it to the script, the total page is destroyed. <style type="text/css">.popup{/* position:absolute; left:0px; top:13px; */ width:300px; height:400px; border-style:solid; border-width:4px; border-color:blue; background-color:#000000; padding: 5px; font-family: Tahoma; font-size: 10pt; z-index:2; visibility:hidden; overflow:scroll; border-radius:4px;}</style> <script type="text/javascript"> function ShowPop(event, obj, x, y) /* these variables have been tested and work */{ x=event.clientX; y=event.clientY; obj.style.position = "absolute"; obj.style.left = x; obj.style.top = y+10; obj.style.visibility = "visible";}</script>
-
thanks, that got things in control...
-
I had picked up on the <div> and the absolute worked, but the "relative" is elusive. I changed to: <input type="text" style="position:relative; size:50px;" id="position"> and I still get the same behaviour as with absolute with and without the <div>.
-
Ok on the body ending, but it does not show the coorinates to the left either. Nothing specific on the "13 year old browser", the code was just convient; think it would be better to move 5.5 or 6 or 7????
-
Why does this only display the coordinates that are above but not below or to the left or right? <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns:o="urn:schemas-microsoft-com:office:office"xmlns:w="urn:schemas-microsoft-com:office:word"xmlns="http://www.w3.org/TR/REC-html40"> <head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE5"><link rel='stylesheet' href='sample.css' type='text/css'> <script type="text/javascript">function show_coords(event){ x=event.clientX y=event.clientY document.getElementById('position').value="X: "+x+" Y: "+y;}</script><title></title></head><body onmousemove="show_coords(event)" id="show"><p>View coordinates in text box.</p><input type="text" style="position:absolute; left:100px; size:50px;" name="position" id="position"></body></html>
-
That's why I edit my post at the top...
-
EDIT: Found the problem. Why does this onmousedown event only fire once? thanks... <html><head><title>Navigation List Example</title><style type="text/css">ul {margin:0;padding:0 0 10px 0;width: 100px;font-family: Arial, Helvetica, sans-serif;font-size: 14px;font-weight: bolder;color: #333333;list-style: none;}ul li {margin-bottom: 2px;padding: 2px;text-align: center;}ul li a {color: #FFFFFF;display: block;background-color: #727272;border: medium solid #333333;text-decoration: none;vertical-align: middle;}ul.submenu {margin-top: 10px;}ul.submenu li a {background-color: #fff;border: 0;color: #666;font-size: 12px;height: 18px;}</style><script type="text/javascript">function moveIt(event, obj){x=event.clientX;y=event.clientY;obj.style.position = "absolute";obj.style.top = 75;obj.style.left = 100;}</script></head><body onmousedown="moveIt(event, document.getElementById('move'))" id="show"><h1>Navigation List Example</h1><ul id="move"><li><a href="index.php?menu=home_m">Home</a></li><li><a href="news.php?menu=news_m">News</a></li><li><a href="info.php?menu=info_m">Info</a></li><li><a href="services.php?menu=services_m">Services</a></li><li><a href="contact_us.php?menu=contact_us_m">Contact Us</a></li><li><a href="legal.php?menu=legal_m">Legal Links</a> <ul class="submenu"> <li><a href="legal.php?menu=legal_m&page=terms_of_use">Terms of Use</a></li> <li><a href="legal.php?menu=legal_m&page=privacy_policy">Privacy Policy</a></li> </ul></li></ul> </body></html>
-
I had to:<td><div>text</div></td>
-
One more question on this code: There are 2 images at the top (1 for dragging and the other for closing), is there a way to make the the text below the images scroll without moving those at the top? I cannot get "overflow:auto" in any position in the table without scrolling the top images out of view. to work. thanks... EDIT: Finally got it working....
-
Got it working thanks to you; just added one more parentNode. appreciate it...