|
JavaScript - Dynamic Date Menu?
Hi,
I have 3 selects in a form for day, month and year for the user to enter his/her birthday. What I'm looking for is a piece of code / script which will dynamically change the day dropdown menu dependent on the month which is selected to display the correct number of days, and also according to if it is a leap year. Ive tried looking on google but I'm not sure what the correct term is to look for? Could anyone please help? Thanks Similar TutorialsHi 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'm new here and also new to writing JS. I was hoping someone could tell me what is wrong with the code below. I am trying to load a page, and the filename will be different depending on current month and year. If I use the code below in the body for document.write instead of window.location it correctly displays this months page as 102009.htm. Is there a better way to do this? Thanks in advance for any help. Code: <script type="text/javascript"> <!-- var months=new Array(13); months[1]="01" months[2]="02" months[3]="03" months[4]="04" months[5]="05" months[6]="06" months[7]="07" months[8]="08" months[9]="09" months[10]="10" months[11]="11" months[12]="12" var time=new Date(); var lmonth=months[time.getMonth() + 1]; var year=time.getYear(); window.location = (1month + year + ".htm") //--> </script> Javascript novice here looking to create a dynamic dropdown based on date. It's a list of preset prices that will change each month to reflect a pro-rated system. Any thoughts/examples on how I would go about setting this up using javascript would be much appreciated. Thanks. Here's what I need: In September, the dropdown will display these prices Code: <option value="100">Product 1</option> <option value="150">Product 2</option> <option value="200">Product 3</option> In October, the dropdown will display these prices <option value="50">Product 1</option> <option value="100">Product 2</option> <option value="150">Product 3</option> Hi All, i am having some difficulties to figure out how can i link get my calendar (datepicker) working with my dynamic generated textbox . I am using a Jquery file that i download form the net <!-- link calendar files --> <script language="JavaScript" src="calendar_us.js"></script> <link rel="stylesheet" href="calendar.css"> and here is my code to generate my dynamic controls which is working fine actually..i need to have : 1- option : the datepicker showing up once i click on StartDate textbox 2- in the future i ll use an img and i want to use it to populate the datepicker. below is my modest javascipt code i use to create dynamic textbox: <script type="text/javascript"> // Declare element id for different dynamic generated controls var elementid = 1; function addNew() { var elementrow = 1; // Get the main Div in which all the other divs will be added var mainContainer = document.getElementById('mainContainer'); // Create a new div for holding text and button input elements var newDiv = document.createElement('div'); var bgc ="##E2E2E2"; //"##b2d47e"; newStartDate = document.createElement( 'INPUT' ); newStartDate.id = 'id' + elementid + elementrow; newStartDate.setAttribute('id1','id'+ elementid+elementrow); newStartDate.setAttribute('name','StartDateName'+ elementid+elementrow); newStartDate.size=8; newStartDate.style.backgroundColor= bgc; // Create buttons for creating and removing inputs var newAddButton = document.createElement('input'); newAddButton.type = "button"; newAddButton.value = " + "; newAddButton.title = " Add new Project"; var newDelButton = document.createElement('input'); newDelButton.type = "button"; newDelButton.value = " - "; newDelButton.title = " Remove Project"; // Append new text input to the newDiv newDiv.appendChild(newStartDate); // Append new button inputs to the newDiv newDiv.appendChild(newAddButton); newDiv.appendChild(newDelButton); // Append newDiv input to the mainContainer div mainContainer.appendChild(newDiv); // Add a handler to button for deleting the newDiv from the mainContainer newAddButton.onclick = addNew; newDelButton.onclick = function() {mainContainer.removeChild(newDiv);}; elementid++; } </script> any help will be apprecited ! thanks Hello, I've been trying to figure this script out for awhile and I've hit a wall. Basically, what I want to do for my organization's website is to use JS to display an image containing our hours and have it change each day of the week. The hard part (for me) is that there are certain days we're closed. Ideally, I'd like a separate "We're Closed" message to overwrite the image carrying our hours on specific days (major holidays like Xmas, New Years, Vet's Day, furlough periods, etc. etc.). Here's the code I've managed to cobble together (I have a real basic understanding of JS, so I've been pulling scripts from sites offering free copy/pastecode): [CODE] <script language="javascript"> mytime=new Date(); mymonth=mytime.getMonth()+1; mydate=mytime.getDate(); myday=mytime.getDay(); arday = new Array("sunday.png", "monday.png", "tuesday.png", "wednesday.png", "thursday.png", "friday.png", "saturday.png"); document.write("<img src='" + arday[myday] + "'>"); if (mymonth==12 && mydate==24){document.write("<img src='closure.png'>"); } </script> [CODE] For the most part, this code works just fine. However, if I jump my system clock to December 24, the "closure.png" comes up appears ALONGSIDE the hours image for that day of the week. In other words, I've got two images appearing right next to each other - that's not what I want. How can I work the code in such a way that when a closure date comes up (in this case, 12/24), just the "closure.png" image shows up by itself? Thank you all so much for your time and patience. Hi I have two drop down menus I want the first one has name of the folders and when change the other dropdown has names of the sub-folders of this folder i have the top folders at the first dropdown how can i have the subfolders at the second when change first? the problem is how to open folder if i have folders aaaaa has subfolders(1111,2222,2233) bbbbb has subfolders(3333,4422,2433) ccccc has subfolders(1131,2232,2532) and each folder has subfolders how can i have name of these subfolders when change the topfolders(aaaaa, bbbbb, ccccc) I have more than 1000 top folders and eachone have 10 subfolders already i have all topfolders at first dropdown ,i want to have subfolders at second automatic , any help?? I have been searching everywhere and have found a few of articles available regarding dropdown menu.. couldnt get exactly what i wanted.. i am not really good at javascript, or even programing..am trying my best. anyway~ Here is what i want. something simple if there is more than 1 data entity (count>1) (Case 1), then execute 'select(drop down)' else (count <=1)(Case 2), then just show the data entity itself. (i dun even want the dropdown box to appear) as below screenshot or the attachment I have a script getting me the dropdown menu as below, i wanna modify this but not sure where to start... -------------------------------- <div id="abcdefg"> <form id="setLanguage" action="{$request_uri}" method="post"> <select name="selectlanguage" id="selectlanguage" onchange="setLanguage(this.value)"> {foreach from=$languages key=k item=language name="languages"} <option value="{$language.id_lang}" {if $language.iso_code == $lang_iso} selected {/if} >{$language.name} </option> {/foreach} </select> <input type="hidden" name="id_lang" id="id_lang" value=""/> </form> </div> -------------------------------- Really appreciate your help with modifying this. Please try not to give me a totally new script (i bet it will/may work better but i wouldnt be able to understand..:-( so no point...) Hi Guys, I have a multi language cms site and need to be able to resize font to fit the div its contained in so eg if I have a 300px wide navbar with 13px text: home | about | contact | services | products and in Russian its: fgfgdg |gghgfdhggghgfhgfh | gfg |gfdgfgdfgfdgffd dgfdgdg | gdfgfgdfgfgdfg I would like the font size to reduce down to fit the 300px fixed width div from say 13px to 10px or whatever fits. so it would be like: fgfgdg |gghgfdhggghgfhgfh | gfg |gfdgfgdfgfdgffd dgfdgdg | gdfgfgdfgfgdfg I was looking at http://jsfiddle.net/e8B9j/2/show/ and was hoping someone could get it to work to suit the above. So as above u'd have say 5 menu item divs nested in a navbar div Code: <div id="navbar"> <div class="menuItem">item</div> <div class="menuItem">item</div> <div class="menuItem">item</div> <div class="menuItem">item</div> <div class="menuItem">item</div> </div> ...or using ul and li's Any help greatly appreciated. Perhaps a jquery solution out there? Thanks Well i want to implement something very similar to this (youtube). My javascript knowledges are low. I think it has something to be with onload and onclick events with links. Do i have to write a function and include it on the html page? Where do i have to put the diferent contents? I would prefer to separate html content and javascript since i have some variable to display from my template engine like {$name}, {$uploaded_date}, etc. Thanks in advance Ok, I seem to be stuck on one part of my code. A quick background, this is a website to showcase various photography services. First, I will lay out what I have: The Javascript for my menu (in the head section): Code: <script type="text/javascript">
<!--
var timeout = 200;
var closetimer = 1;
var items = 0;
function dropit(id)
{
canclcls();
if(items) items.style.visibility = 'hidden';
items = document.getElementById(id);
items.style.visibility = 'visible';
}
function mclose()
{
if(items) items.style.visibility = 'hidden';
}
function mcls()
{
closetimer = window.setTimeout(mclose, timeout);
}
function canclcls()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
document.onclick = mclose;
// -->
</script>
Now, here is what I have in the body section Code: <div id="menu">
<ul id="control">
<li><a href="#" onmouseover="dropit('dropone')" onmouseout="mcls()">Wedding Portfolio</a>
<div id="dropone" onmouseover="canclcls()" onmouseout="mcls()">
<a href="jamaicawed.html">Wedding in Jamaica</a>
<a href="indianwed.html">Indian Wedding</a>
</div>
</li>
<li><a href="#" onmouseover="dropit('m2')" onmouseout="mcls()">Model Portfolio</a>
<div id="m2" onmouseover="canclcls()" onmouseout="mcls()">
<a href="emilymodel.html">Emily</a>
<a href="nicolemodel.html">Nicole</a>
</div>
</li>
<li><a href="#" onmouseover="dropit('m3')" onmouseout="mcls()">Other Works</a>
<div id="m3" onmouseover="canclcls()" onmouseout="mcls()">
<a href="catalog.html">Catalog</a>
<a href="#" onclick "alert">Boudoir</a>
<a href="product.html">Product</a>
</div>
</li>
<li><a href="#" onmouseover="dropit('m4')" onmouseout="mcls()">More</a>
<div id="m4" onmouseover="canclcls()" onmouseout="mcls()">
<a href="aboutus.html">About Us</a>
<a href="contact.html">Contact Us</a>
</div>
</li>
</ul>
</div>
Ok, so the only thing I can't figure out how to do is create an onclick event for one of the menu items (boudoir) that confirms that the user is comfortable being exposed to a specific (topless) type of image. Would someone be kind enough to help? Hello all! I hope everyone had a great Holiday I'm hoping someone can help me with a Switch Menu code. I borrowed and modded the code offered he http://www.dynamicdrive.com/dynamici...switchmenu.htm The site I'm trying to implement this menu on is: http://hardlyrhetoric.com/ste/projects.html Additional required files for this page a http://hardlyrhetoric.com/ste/tabcontent.js http://hardlyrhetoric.com/ste/tabcontent.css As you can see, the menu on the left will expand and collapse, revealing the sub-links perfectly fine. It will even display the content for each link in the first set of "Datacenters and Emergency Power" links, as it should. The problem is with each section after "Datacenters and Emergency Power" None of the links will display content in the right column the way the first set of links does. I've looked over the code for several hours... am I missing something basic??? Hi Chaps, I have a dynamic list menu: PHP Code: <?php $currentCat = ''; $first = true ;?> <ul> <?php do { if ($currentCat != $row_rsCategory['catname']) { if (!$first) { echo "\n</ul>\n</li>\n"; } $currentCat = $row_rsCategory['catname']; ?> <li><?php echo $row_rsCategory['catname']; ?> <ul> <?php }?> <li><?php echo $row_rsCategory['galleryname']; ?></li> <?php $first = false; } while ($row_rsCategory = mysql_fetch_assoc($rsCategory)); ?> </ul> </li> </ul> I've tried looking for a show/hide script, to toggle category names/gallery names, but could only find ones that have static menu options, and have failed to edit existing code to fit....any help or guidence would be appreciated! Hi All, i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one.. i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after.. For what i need that : i have my user inserting information on the level 1. let say Copagny info 2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level .. and so on... 3- those sub level ( subforms ) can also call their respective subforms.. Any idea how to design this ? thanks I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total. Here is the bit that does the calculation: Code: function advCalc(selected) {
var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ;
result = result.toFixed(2) ;
result = addCommas(result) ;
document.getElementById("total"+selected).innerHTML = result ;
}
The bit that adds a new row of fields is: Code: function addPart(divName){
var newdiv = document.createElement('div') ;
newdiv.setAttribute('id', 'partrow' + counter) ;
newdiv.setAttribute('style', 'clear:both;') ;
newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>£</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ;
document.getElementById(divName).appendChild(newdiv) ;
counter++ ;
}
The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc. It isn't working for any other fields added but I can't see what is wrong 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, I've inherited a Form which calculates a future date based on a calculation and then inserts today's date and the future date into a database. The day part of the date is formatted as a number. This is fine, but up to 9 the numbers display in single figures with no leading zeros. I want them to display leading zeros (e.g. 01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11... 30, 31) So; 1/12/2010 is NOT wanted 01/12/2010 IS wanted The inherited code originally set the Month names as "Jan", "Feb" etc, and it was easy to kludge these to 01, 02... 12, but I suspect there's a more elgant solution to this as well, this bit of the code works so it's not as vital to neaten this but my database needs dd/mm/yyyy format (it's a third party email program). Code: </script>
<script type="text/javascript">
var todaysDate = new Date();
function updateExpiryDate(){
var weeklyMileage = document.getElementById('AvWeeklyMileage').value;
var expiryDate;
var weeks = 0;
var expiryDateString = '';
if (!isNaN(parseInt(weeklyMileage))){
weeks = 700/weeklyMileage;
expiryDate = new Date(todaysDate.getTime() + (1000 * 3600 * 24 * 7 * weeks));
var expiryDateString = expiryDate.getDate() + '/' + getMonthString(expiryDate.getMonth()+1) + '/' + expiryDate.getFullYear();
document.getElementById('expiryDate').innerHTML = expiryDateString;
document.getElementById('ShoeExpiryDate').value = expiryDateString;
} else {
document.getElementById('ShoeExpiryDate').value = '';
document.getElementById('expiryDate').innerHTML = 'Please enter a valid weekly average mileage'
}
}
function getMonthString(monthNumber){
var monthString = "";
switch(monthNumber){
case 1:
monthString = "01";
break;
case 2:
monthString = "02";
break;
case 3:
monthString = "03";
break;
case 4:
monthString = "04";
break;
case 5:
monthString = "05";
break;
case 6:
monthString = "06";
break;
case 7:
monthString = "07";
break;
case 8:
monthString = "08";
break;
case 9:
monthString = "09";
break;
case 10:
monthString = "10";
break;
case 11:
monthString = "11";
break;
case 12:
monthString = "12";
break;
default:
// do nothing;
}
return monthString;
}
function setTodaysDate(){
var todaysDateString = todaysDate.getDate() + '/' + getMonthString(todaysDate.getMonth()+1) + '/' + todaysDate.getFullYear();
document.getElementById('todaysDate').innerHTML =todaysDateString;
document.getElementById('DateOfPurchase').value = todaysDateString;
}
Can someone point me in the right direction please? Hello, I really need your help with one. How can I use the following code below to save the date from my popup window datepicker back into a var and relay it back onto its parent page? I can't seem to figure this out: Code: <html>
<head>
<script>
function open_cal() {
var str_html = ""
+ "<!DOCTYPE html>\n"
+ "<html lang=\"en\">\n"
+ "<head>\n"
+ "<meta charset=\"utf-8\">\n"
+ "<title>CALENDAR</title>\n"
+ "<link href=\"jq/jquery-ui.css\" rel=\"stylesheet\" type=\"text/css\">\n"
+ "<script src=\"jq/jquery.min.js\" type=\"text/javascript\"></" + "script>\n"
+ "<script src=\"jq/jquery-ui.min.js\" type=\"text/javascript\"></" + "script>\n"
+ "<script src=\"jq/datepicker.js\" type=\"text/javascript\"></" + "script>\n"
+ "</head>\n"
+ "<body>\n"
+ "<div id=\"text\" style=\"font: bold 10pt Tahoma\">Enter Approval Date:</div>\n"
+ "<div id=\"datepicker\"></div>\n"
+ "</body>\n"
+ "</html>"
var j = window.open("","CALENDAR","width=200,height=250,status=no,resizable=yes,top=200,left=200")
j.opener = self;
j.document.write(str_html);
}
</script>
</head>
<body>
<input onclick="open_cal()" type="button" value="Open" name="B1">
</body>
</html>
Datepicker.js: Code: $(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function(dateText, inst) {
alert(dateText)
window.close()
}
})
});
Any help with this is greatly and mostly appreciated. Thanks in advance, Cheers, J Hi, I need to add days to a date in javascript, My requirement is as follows: Date is coming from a textbox. eg:- 26/07/2010 days from this statement var day1=document.getElementById('<%=HiddenDate.ClientID %>').value; an eg:- if the date is 28/01/2012 and days Needed to be added=5 the added date should be 02/02/2012. Can anybody help me? Thanks Jamuna Using Adobe Form Javascript validation, how would I do this code for Visual Basic in Javascript (non web) Code: If PurchaseDate.Value > Date Then
MsgBox ("PurchaseDate cannot be greater than Today's Date!")
Cancel = True
End If
Something along these lines but this isnt working: Code: If (PurchaseDate.Value > Date) Then
{
app.alert ("Purchase Date cannot be greater than Today's Date!");
}
Thanks |
|||||||