JavaScript - How Do You Position A Javascript Date In A Html Table?
So I've now made the layout of my website and I need to know how to position a javascript date I made, in a html table. This is the basic "var d=new date();" code I'm trying to implement in the menu section of my website. Also, I need to know how to do this using an external javascript file.
Similar TutorialsHello, I am new to JavaScript. I have stuck up at a point. I have generated a table of given dimensions (say 5x5) using JavaScript. Using Mouse events, I want to add a functionality which would display the position of the cell in that table whenever mouse pointer hovers over a particular cell. Here's what I have done. Code: <html> <body> <h1 align="center"><u>ITA Tutorial</u></h1> <h3>Problem Statement</h3> <p>Prepare the table of 5 X 5. On the cursor movement over the table, display the table cell no with row X column value.</p> <br><br> <table border="1" align="center" cellpadding="2"> <script type="text/JavaScript"> var i, j for (i=1;i<6;i++) { document.write("<TR>") for(j=1;j<6;j++) document.write("<TD> </TD>") document.write("</TR>") } </script> </table> </body> </html> I tried adding onMouseover event in the <TD> tag but somehow the whole table disappears when I do that. Please help. Hi I got this code for my coutdown: Code: <script language="JavaScript"> TargetDate = "12/31/2020 5:00 AM"; BackColor = "palegreen"; ForeColor = "navy"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds."; FinishMessage = "It is finally here!"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script> But i don't know how to place it where I want on my html page Normaly I use the CSS value position:absolute I'm new to javascript and am not sure why this works in firefox and not chrome. I am trying to create a script that keeps an object fixed horizontally while bing positioned absolute vertically. if I replace the toPP variable in document.getElementById('fire').style.top = toPP; with say '50px' it will move the element down 50 pxs, but how I have it currently it doesn't do anything in chrome Code: <script type="text/javascript" > window.onscroll = function() { if( window.XMLHttpRequest ) { var x = 0 -document.documentElement.scrollTop; var toP = String(x); var toPP = toP + "px"; document.getElementById('fire').style.position = 'fixed'; document.getElementById('fire').style.top = toPP; } } </script> Hi, I have a problem. please help me in this regard. I have a combobox which contain numeric values from 1-7. i want to generate a table with 2 rows and 4 columns through javascript. Means when a user select numeric value like '3' from a combo box then a page generates '3' tables without refreshing a page. And if a user selects '4' from a combobox then a script generates 4 tables with 2 rows and 4 columns and so on. kindly guide me that how can i mkae this javascript. plz help I have some javascript which applies alternative row colors to a table and also gives you a highlight effect when you mouseover the rows. However, the problem I have is that it applies to every table on my page, I only want it to apply to a specific table in the html file (I'm using frontpage), not all of them How would I go about doing this? The code is below, it has a bit of styling at the top before the javascript. <style type="text/css" media="all"> table.altsrowtable { width: 90%; margin: auto; border-collapse: collapse} td { border: 1px solid black; cursorointer;text-align:center} /* row 1 */ tr td { background: #edf3fe; } tr:hover td, tr.ie td { background: #e1e1ff; } /* row 2 */ tr.bis td { background: #D9ECFF; } tr.bis:hover td, tr.bisie td { background: #e1e1ff; } /* selected row 1 */ tr.sel:hover td, tr.selie td { background: #edf3fe; } /* selected row 2 */ tr.selbis:hover td, tr.selbisie td { background: #D9ECFF; } </style> <script type="text/javascript" span="altsrowtables" div="altsrowtable" id="altsrowtable" class="altsrowtable"> var IE = false; /*@cc_on IE=true; @*/ var r; function setRows(){ r = document.getElementsByTagName('TR'); for(var i=0;i<r.length;i++) r[i].className = (i/2 != Math.round(i/2))? '':'bis'; } function selectRow(aRow,add){ var c = aRow.className; if(add) setRows(); var b = aRow.className; if(IE) aRow.className = b==''? 'selie' : b=='bis'? 'selbisie' : c=='selie'? 'ie' : c=='ie'? 'selie' : c=='bisie'? 'selbisie' : c=='selbisie'? 'bisie' : ''; else aRow.className = b==''||c==''? 'sel' : b=='bis'||c=='bis'? 'selbis' : c=='selbis'? 'bis' : ''; } // roll-over (only for IE) function roll(what) { var c = what.className; what.className = c==''? 'ie' : c=='bis'? 'bisie' : c=='bisie'? 'bis' : c=='selbis'? 'selbisie' : c=='selbisie'? 'selbis' : c=='selie'? 'sel' : c=='sel'? 'selie' : ''; } // fire on loading onload= function() { setRows(); for(var i=0;i<r.length;i++) { if(IE) { r[i].onmouseover = function(){ roll(this); } r[i].onmouseout = function(){ roll(this); } } } } </script> <style type="text/css"> table.altrowstable { font-family: calibri; font-size:11px; color:#333333; border-width: 1px; border-color: #C0C0C0; border-collapse: collapse; } table.altrowstable th { border-width: 1px; "background-image:url('QP Header.png');" border-style: solid; border-color: #C0C0C0; font-size:12px; font-style:bold; } table.altrowstable td { border-width: 1px; border-style: solid; border-color: #a9c6c9; } </style> Thanks Sean Hi, I am new to javascript, Please help me with the issue below. My javascript code below should actually fetch the data from html table on button click. function displaymessage() { alert ("button pressed"); var table_cells = new Array(); var table7 = document.getElementById('Auth'); for (i=0,n=table7.rows.length; i < n ; i++) { var Rowdata = table7.rows[i]; table_cells[i] = new Array(); for(j=0,cols = Rowdata.cells.length; j < cols; j++) { table_cells[i,j] = Rowdata.cells[j].innerHTML; alert (table_cells[i,j]); } } alert (table_cells[1,1]); alert (table_cells[2,1]); alert (table_cells[3,1]); alert (table_cells[4,1]); alert (table_cells[5,1]); alert (table_cells[6,1]); alert (table_cells[7,1]); alert (table_cells[8,1]); } The problem with my code above is that the statement "alert (table_cells[i,j]);" executes properly and shows the correct value. But the other alert statements shows only the value of the last row of the table. i.e., my table has 9 rows. and all the alert statements shows 9th row's 2nd column's value outside the for loop. But inside the for loop it executes fine. I tried it in IE7. I seem to miss something. Could someone please help me out with this? Thanks in advance. Not sure if this is possible in javascript: I'm looking for two different dates (bill date and due date) on an invoice that are captured by OCR. If one of them exists, but the other does not, I want the empty field to be 14 days before (or after) the other. For example: if the bill date is 7/27/2010 and the due date was not captured, I want to set the due date as 8/10/2010 (14 days after the bill date). If the due date was captured as 8/10/2010, but the due date is blank, I want to assign the bill date as 7/27/2010 (14 days before the due date). if both dates have values, do nothing. Thanks. Hi folks, i am trying to generate a dynamic datefield with date mask "mm/dd/yyyy" and trying to insert it into Oracle db ...i still got the error ORA invalid month ehich means the date filed is not recognized as date: below is what i am doing : newStartDate = document.createElement( 'INPUT' ); newStartDate.setAttribute('type','Date'); newStartDate.setAttribute('id1','id'+ elementid+elementrow); newStartDate.setAttribute('name','StartDateName'+ elementid+elementrow); newStartDate.size=8; newStartDate.style.backgroundColor= bgc; any help thanks ?? Also i want to add a datepicke to this textbox..how it is posible / other option is to use Jquery datepicker but could not know how to impement it thanks again Hello I am hoping to position some JavaScript on a Web page. Would I use something like this: CSS Code: #diagram { margin-left: 200px; margin-top: 100px; } HTML <script>JavaScript code here</script> <div id="diagram" </div> Thanks for any advice. A menu is not hovered will be like this: some errors are found 1. Sub-menus are displayed under the menu I want to display All sub-menus on the right and next to menu border Eg: The result I want it to be looked like this: How can I fix the code like that ? 2. Sub menu does have the same size of length. When sub-menu of Pyjamas and Sub-menu of Silk Ties are called, The submenu of Pyjama are longer than the submenu of Silk Ties. How can fix the problem so that All submenu will be the same size of length when they are called ? My code is for leftMenu.php Code: <div id="leftmenu"> <ul> <li><a href="index.php?page=dress">Fashion Dress</a></li> <li><a href="index.php?page=handbag">Hand Bags</a></li> <li><a href="index.php?page=scraves">Scraves</a></li> <li><a href="index.php?page=watch">Bracelet Watches</a></li> <li><a href="#" rel="dropmenu1">Silk Ties</a></li> <li><a href="#" rel="dropmenu2">Pyjamas</a> </li> </ul> </div> <!-- SILK TIES drop down menu --> <div id="dropmenu1" class="dropmenudiv"> <a href="index.php?page=plain">Plain Style</a> <a href="index.php?page=woven">Woven Style</a> </div> <!-- PYJAMAS drop down menu --> <div id="dropmenu2" class="dropmenudiv" style="width: 150px;"> <a href="index.php?page=wonen">For Women</a> <a href="index.php?page=men">For Men</a> </div> <script type="text/javascript"> cssdropdown.startchrome("leftmenu") </script> My code is for leftmenu.css Code: #leftmenu ul{ font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; margin-top: .1em; } ul#leftmenu li { display: block; position: relative; float:left; } #leftmenu li a { display: block; text-decoration: none; background-image:url(images/leftNormal.gif); width: 218px; height: 30px; margin-top: .1em; } #leftmenu li a:hover { display: block; text-decoration: none; background-image:url(images/leftHover.gif); width: 218px; height: 30px; white-space: 1em; color:#FFF; } /* ######### Style for Drop Down Menu ######### */ .dropmenudiv{ position:absolute; top: 0; border: 1px solid #BBB; /*THEME CHANGE HERE*/ border-bottom-width: 0; font:normal 12px Verdana; line-height:18px; z-index:100; background-color: white; width: 200px; visibility: hidden; } .dropmenudiv a{ width: auto; display: block; text-indent: 3px; background-image:url(images/leftmenu.gif); padding: 2px 0; text-decoration: none; font-weight: bold; color: black; } * html .dropmenudiv a{ /*IE only @hắc*/ width: 100%; } .dropmenudiv a:hover{ /*THEME CHANGE HERE*/ background-image:url(images/lefthover.gif); width: auto; display: block; text-indent: 3px; padding: 2px 0; text-decoration: none; font-weight: bold; color:#FFF; } Javascript code in the page of leftmenu.js Code: var cssdropdown={ disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout //dropdownindicator: '<img src="" border="0" />', //specify full HTML to add to end of each menu item with a drop down menu enablereveal: [true, 8], //enable swipe effect? [true/false, steps (Number of animation steps. Integer between 1-20. Smaller=faster)] enableiframeshim: 1, //enable "iframe shim" in IE5.5 to IE7? (1=yes, 0=no) //No need to edit beyond here//////////////////////// dropmenuobj: null, asscmenuitem: null, domsupport: document.all || document.getElementById, standardbody: null, iframeshimadded: false, revealtimers: {}, getposOffset:function(what, offsettype){ var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; var parentEl=what.offsetParent; while (parentEl!=null){ totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; parentEl=parentEl.offsetParent; } return totaloffset; }, 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" && !needle.test(el.className)) el.className+=" "+targetclass }, showmenu:function(dropmenu, e){ if (this.enablereveal[0]){ if (!dropmenu._trueheight || dropmenu._trueheight<10) dropmenu._trueheight=dropmenu.offsetHeight clearTimeout(this.revealtimers[dropmenu.id]) dropmenu.style.height=dropmenu._curheight=0 dropmenu.style.overflow="hidden" dropmenu.style.visibility="visible" this.revealtimers[dropmenu.id]=setInterval(function(){cssdropdown.revealmenu(dropmenu)}, 10) } else{ dropmenu.style.visibility="visible" } this.css(this.asscmenuitem, "selected", "add") }, revealmenu:function(dropmenu, dir){ var curH=dropmenu._curheight, maxH=dropmenu._trueheight, steps=this.enablereveal[1] if (curH<maxH){ var newH=Math.min(curH, maxH) dropmenu.style.height=newH+"px" dropmenu._curheight= newH + Math.round((maxH-newH)/steps) + 1 } else{ //if done revealing menu dropmenu.style.height="auto" dropmenu.style.overflow="hidden" clearInterval(this.revealtimers[dropmenu.id]) } }, clearbrowseredge:function(obj, whichedge){ var edgeoffset=0 if (whichedge=="rightedge"){ var windowedge=document.all && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15 var dropmenuW=this.dropmenuobj.offsetWidth if (windowedge-this.dropmenuobj.x < dropmenuW) //move menu to the left? edgeoffset=dropmenuW-obj.offsetWidth } else{ var topedge=document.all && !window.opera? this.standardbody.scrollTop : window.pageYOffset var windowedge=document.all && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18 var dropmenuH=this.dropmenuobj._trueheight if (windowedge-this.dropmenuobj.y < dropmenuH){ //move up? edgeoffset=dropmenuH+obj.offsetHeight if ((this.dropmenuobj.y-topedge)<dropmenuH) //up no good either? edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge } } return edgeoffset }, dropit:function(obj, e, dropmenuID){ if (this.dropmenuobj!=null) //hide previous menu this.hidemenu() //hide menu this.clearhidemenu() this.dropmenuobj=document.getElementById(dropmenuID) //reference drop down menu this.asscmenuitem=obj //reference associated menu item this.showmenu(this.dropmenuobj, e) this.dropmenuobj.x=this.getposOffset(obj, "left") this.dropmenuobj.y=this.getposOffset(obj, "top") this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px" this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px" this.positionshim() //call iframe shim function }, positionshim:function(){ //display iframe shim function if (this.iframeshimadded){ if (this.dropmenuobj.style.visibility=="visible"){ this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px" this.shimobject.style.height=this.dropmenuobj._trueheight+"px" this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px" this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px" this.shimobject.style.display="block" } } }, hideshim:function(){ if (this.iframeshimadded) this.shimobject.style.display='none' }, isContained:function(m, e){ var e=window.event || e var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement) while (c && c!=m)try {c=c.parentNode} catch(e){c=m} if (c==m) return true else return false }, dynamichide:function(m, e){ if (!this.isContained(m, e)){ this.delayhidemenu() } }, delayhidemenu:function(){ this.delayhide=setTimeout("cssdropdown.hidemenu()", this.disappeardelay) //hide menu }, hidemenu:function(){ this.css(this.asscmenuitem, "selected", "remove") this.dropmenuobj.style.visibility='hidden' this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px" this.hideshim() }, clearhidemenu:function(){ if (this.delayhide!="undefined") clearTimeout(this.delayhide) }, addEvent:function(target, functionref, tasktype){ if (target.addEventListener) target.addEventListener(tasktype, functionref, false); else if (target.attachEvent) target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)}); }, startchrome:function(){ if (!this.domsupport) return this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body for (var ids=0; ids<arguments.length; ids++){ var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a") for (var i=0; i<menuitems.length; i++){ if (menuitems[i].getAttribute("rel")){ var relvalue=menuitems[i].getAttribute("rel") var asscdropdownmenu=document.getElementById(relvalue) this.addEvent(asscdropdownmenu, function(){cssdropdown.clearhidemenu()}, "mouseover") this.addEvent(asscdropdownmenu, function(e){cssdropdown.dynamichide(this, e)}, "mouseout") this.addEvent(asscdropdownmenu, function(){cssdropdown.delayhidemenu()}, "click") try{ menuitems[i].innerHTML=menuitems[i].innerHTML+" " }catch(e){} this.addEvent(menuitems[i], function(e){ //show drop down menu when main menu items are mouse over-ed if (!cssdropdown.isContained(this, e)){ var evtobj=window.event || e cssdropdown.dropit(this, evtobj, this.getAttribute("rel")) } }, "mouseover") this.addEvent(menuitems[i], function(e){cssdropdown.dynamichide(this, e)}, "mouseout") //hide drop down menu when main menu items are mouse out this.addEvent(menuitems[i], function(){cssdropdown.delayhidemenu()}, "click") //hide drop down menu when main menu items are clicked on } } //end inner for } //end outer for if (this.enableiframeshim && document.all && !window.XDomainRequest && !this.iframeshimadded){ //enable iframe shim in IE5.5 thru IE7? document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>') this.shimobject=document.getElementById("iframeshim") //reference iframe object this.shimobject.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)' this.iframeshimadded=true } } //end startchrome } I am very appreciated if you help me figure out where I am wrong and let me know how I can fix them clearly. Thanks Hello Everyone, First of all i'd like to thank you for this wonderful forum, you people have helped me.. Now, i'm back here because i have this problem...i have a website built with drupal, www.plus-demo.info/drupal If you see the second menu, when you hover there is a submenu which pops out...what i want for this popup menu is to display in a fixed position...it shouldn't get out of the borders of the website...there is the code which has to do with it... Please help me... function muchomenu_display() { if (hoverParent) { hoverParent.addClass('hovering'); hoverBin = hoverParent.find('.muchomenu-bin'); /* display position */ //hoverBin.css('top', 'auto'); /* display position end */ animateIn(hoverBin); } } function muchomenu_close(){ if (hoverParent) { oldParentIdx = $('.muchomenu-parent').index(hoverParent); } for ( var i=0 ; i < megaParents.length ; i++ ) { megaParents.eq(i).removeClass('hovering'); } animateOut(hoverBin); } function checkHorizontalPosition(item) { var parentOffset = item.parents('.muchomenu-parent').offset(); var screenWidth = $(document).width(); var itemPosition = item.position(); var padding = 30; var p = item.width() + itemPosition.left + parentOffset.left + padding; if (p > screenWidth) { var newOffset = screenWidth - p; item.css('left', newOffset + 'px'); } } so basically I have a div that contains the image of a circle and I need to check if the mouse is touching the circle. what approach should I take to this? I need to call another function when the mouse leaves the circle (which will be a square speaking physically) I would assume it has to do with radius, but I am not really sure how to do this with a circle shape. thanks a ton! What I am trying to do is make a little box that when you hover over it, it will move to a random position. What I am having trouble with is the JavaScript. I have made the code for everything, EXCEPT to move it to a random position. Here is my code so far: Code: <style type='text/css'> #circle1 { background:#007fff; height:20px; margin:0px; position:absolute; width:20px; left:5px; top:5px; -webkit-transition:left 2s linear, top 2s linear; } #circle1:hover { left:25px; top:25px; -webkit-transition:left 0s linear, top 0s linear; } </style> <div id='circle1'></div> I would like the left: and top: in the #circle1:hover to be a random number, to make it go to a random position. I have no clue how to do that though... how can I get 1 tenth of a second for my clock? (bad typo for clock. I had to edit it. I'm saying that for the admin because I know you're not suppose to edit excessively)
favorite I'd like to modify a form on www.formsite.com (form builder app): username: testuser password: password I would like to use the nicedit.com's inline content editor's js to transform my textarea's into a richtext area. At present the nicedit editor works well in creating the richtextarea. However, the KEY point is that I would like formsite's form to pipe in the the created html and render it with the html component of formsite. Currently, the pipe function in formsite will only put out the html syntax in it's html module. action seen he http://fs8.formsite.com/testform/form1/index.html So this would be: 1. checking out my form on formsite.com 2. the script from nicedit.com is already installed in an html component. 3. changing or telling me the scripts/tags/or whatever for formsite form using formsites form builder (which allows some html/script editing). 4. changed so as to render the rich text entered on page 1 in page 2 instead of the html syntax. Any other solutions using formsite and any other richtextarea solutions would be great too! My issue is that I have a javascript function applied on page load via an addLoadEvent function call in the head to every row (dynamic number of records retrieved) on a table. On every row of the table I also have an element (image or button) that performs a different function that is assigned on the element itself. Unfortunately, when I click the element it also performs the function that was applied to the row in the page load. Is there any way to not call this function on element click? I know usually you include code, but due to the nature of the work I am limited in that respect. Basically its: Code: <script type="text/javascript"> addLoadEvent(function() { function1(1); }) //function1 makes the table rows do something appearance wise. </script> <tr> <td></td> <td></td> <td> <img src="pics/delete.png" alt="Delete" onclick="function2();"> </td> </tr> I apologize if my post doesn't conform to the general guidelines of proper posting on this board. I'm new on this site. In my JSP page i have start date and End date fields are there. The format for these two fields has Date and Time . But my requirement is if i change the date in start date field it should change the same date in End Date field also automatically. Here is my code Code: <div id=apptTimeEditOD style="display:<%=appt.allday()?"none":"block" %>; padding: 4px 4px 4px 4px; position: absolute; width: 90; height: 22; left: 85; top: 2; text-align: left;"> <%=_r.drawDatePicker( _ahsPage, "startDate", appt.getApptDate() ) %> <select name="startHour" id=startHour class="selInputSmall" onChange="odRefreshApptEndTime();"> <%= OptionMenu.render( _ahsPage, "CAL_TIME_HOUR", appt.getStartTime().substring(0,2), false, true ) %> </select> <select name="startMin" id=startMin class="selInputSmall" onChange="odRefreshApptEndTime();"> <%=OptionMenu.render( _ahsPage, "CAL_TIME_MINUTE", appt.getStartTime().substring(3,5), false )%> </select> </div> <div class="formPrompt" style="position: absolute; width: 90; height: 22; left: 20; top: 2; text-align: left;"><%=_pCal.get("end_time")%>:</div> <div id=apptTimeEditEnD style="display:<%=appt.allday()?"none":"block" %>; padding: 4px 4px 4px 4px; position: absolute; width: 90; height: 22; left: 85; top: 2; text-align: left;"> <%=_r.drawDatePicker( _ahsPage, "startDate", appt.getApptDate() )%> <div id=apptODEndTime style="position: absolute; width: 90; height: 22; left: 140; top: 2; text-align: left;" > </div> </div> Please give me an idea on this one ? How do i change the End Date automatically when i change the start date. Hi, My JS Date validation was failing for a date which as per business is a valid date (01/01/0001) - MM/DD/YYYY It seems that the constructor for Date object is doing something funny.. var dayobj = new Date(yearfield, monthfield-1, dayfield) wasn't working for this case whereas teh one mentioned below seems to be working fine : var dayobj = new Date() dayobj.setFullYear(yearfield,monthfield-1,dayfield) What's the trick here ?? |