JavaScript - Show Div Based On Today's Date
I have this script that I got from some site. When you click on a link tied to a div it hides all other divs and displays just that one. Well, that works, but I want it to display one of the divs on page load based on today's date.
For example, it will display the "summer" div if today's date is anywhere between June 1 and August 31. When links to other divs are clicked that div will disappear and other ones will appear in its place. Anyway, here's the code, and I don't know anything about javascript so I have no idea where to even start editing it. Please help Code: <script type="text/javascript"> <!-- Layer Show/Hide Script last="" function changeDiv(the_div,the_change) { var the_style = getStyleObject(the_div); if (the_style != false) { the_style.display = "block" if(last!="") { last.display = "none" } } last=the_style } function getStyleObject(objectId) { if (document.getElementById && document.getElementById(objectId)) { return document.getElementById(objectId).style; } else if (document.all && document.all(objectId)) { return document.all(objectId).style; } else { return false; } } //--> </script> Similar TutorialsI have been using the following script for some time and it has only just been made known to me that it fails on todays date ! not sure if this is the case for other days but the days of the week are all messed up and do not show correctly for a date in June 2011. Code: var ds_i_date = new Date(); ds_c_month = ds_i_date.getMonth() + 1; ds_c_year = ds_i_date.getFullYear(); // Get Element By Id function ds_getel(id) { return document.getElementById(id); } // Get the left and the top of the element. function ds_getleft(el) { var tmp = el.offsetLeft; el = el.offsetParent while(el) { tmp += el.offsetLeft; el = el.offsetParent; } return tmp; } function ds_gettop(el) { var tmp = el.offsetTop; el = el.offsetParent while(el) { tmp += el.offsetTop; el = el.offsetParent; } return tmp; } // Output Element var ds_oe = ds_getel('ds_calclass'); // Container var ds_ce = ds_getel('ds_conclass'); // Output Buffering var ds_ob = ''; function ds_ob_clean() { ds_ob = ''; } function ds_ob_flush() { ds_oe.innerHTML = ds_ob; ds_ob_clean(); } function ds_echo(t) { ds_ob += t; } var ds_element; // Text Element... var ds_monthnames = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]; // You can translate it for your language. var ds_daynames = [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ]; // You can translate it for your language. // Calendar template function ds_template_main_above(t) { return '<table cellpadding="3" cellspacing="1" class="ds_tbl">' + '<tr>' + '<td class="ds_head" style="cursor: pointer" onclick="ds_py();"><<</td>' + '<td class="ds_head" style="cursor: pointer" onclick="ds_pm();"><</td>' + '<td class="ds_head" style="cursor: pointer" onclick="ds_hi();" colspan="3">[Close]</td>' + '<td class="ds_head" style="cursor: pointer" onclick="ds_nm();">></td>' + '<td class="ds_head" style="cursor: pointer" onclick="ds_ny();">>></td>' + '</tr>' + '<tr>' + '<td colspan="7" class="ds_head">' + t + '</td>' + '</tr>' + '<tr>'; } function ds_template_day_row(t) { return '<td class="ds_subhead">' + t + '</td>'; // Define width in CSS, XHTML 1.0 Strict doesn't have width property for it. } function ds_template_new_week() { return '</tr><tr>'; } function ds_template_blank_cell(colspan) { return '<td colspan="' + colspan + '"></td>' } function ds_template_day(d, m, y) { return '<td class="ds_cell" onMouseout="this.style.background=\'#EEE\';" onMouseover="this.style.background=\'#999\';" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>'; // Define width the day row. } function ds_template_main_below() { return '</tr>' + '</table>'; } // This one draws calendar... function ds_draw_calendar(m, y) { // First clean the output buffer. ds_ob_clean(); // Here we go, do the header ds_echo (ds_template_main_above(ds_monthnames[m - 1] + ' ' + y)); for (i = 0; i < 7; i ++) { ds_echo (ds_template_day_row(ds_daynames[i])); } // Make a date object. var ds_dc_date = new Date(); ds_dc_date.setMonth(m - 1); ds_dc_date.setFullYear(y); ds_dc_date.setDate(1); if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) { days = 31; } else if (m == 4 || m == 6 || m == 9 || m == 11) { days = 30; } else { days = (y % 4 == 0) ? 29 : 28; } var first_day = ds_dc_date.getDay(); var first_loop = 1; // Start the first week ds_echo (ds_template_new_week()); // If sunday is not the first day of the month, make a blank cell... if (first_day != 0) { ds_echo (ds_template_blank_cell(first_day)); } var j = first_day; for (i = 0; i < days; i ++) { // Today is sunday, make a new week. // If this sunday is the first day of the month, // we've made a new row for you already. if (j == 0 && !first_loop) { // New week!! ds_echo (ds_template_new_week()); } // Make a row of that day! ds_echo (ds_template_day(i + 1, m, y)); // This is not first loop anymore... first_loop = 0; // What is the next day? j ++; j %= 7; } // Do the footer ds_echo (ds_template_main_below()); // And let's display.. ds_ob_flush(); // Scroll it into view. //ds_ce.scrollIntoView(); } // A function to show the calendar. // When user click on the date, it will set the content of t. function ds_sh(t) { // Set the element to set... ds_element = t; // Make a new date, and set the current month and year. var ds_sh_date = new Date(); ds_c_month = ds_sh_date.getMonth() + 1; ds_c_year = ds_sh_date.getFullYear(); // Draw the calendar ds_draw_calendar(ds_c_month, ds_c_year); // To change the position properly, we must show it first. ds_ce.style.display = ''; // Move the calendar container! the_left = ds_getleft(t); the_top = ds_gettop(t) + t.offsetHeight; ds_ce.style.left = the_left + 'px'; ds_ce.style.top = the_top + 'px'; // Scroll it into view. //ds_ce.scrollIntoView(); } // Hide the calendar. function ds_hi() { ds_ce.style.display = 'none'; } // Moves to the next month... function ds_nm() { // Increase the current month. ds_c_month ++; // We have passed December, let's go to the next year. // Increase the current year, and set the current month to January. if (ds_c_month > 12) { ds_c_month = 1; ds_c_year++; } // Redraw the calendar. ds_draw_calendar(ds_c_month, ds_c_year); } // Moves to the previous month... function ds_pm() { ds_c_month = ds_c_month - 1; // Can't use dash-dash here, it will make the page invalid. // We have passed January, let's go back to the previous year. // Decrease the current year, and set the current month to December. if (ds_c_month < 1) { ds_c_month = 12; ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid. } // Redraw the calendar. ds_draw_calendar(ds_c_month, ds_c_year); } // Moves to the next year... function ds_ny() { // Increase the current year. ds_c_year++; // Redraw the calendar. ds_draw_calendar(ds_c_month, ds_c_year); } // Moves to the previous year... function ds_py() { // Decrease the current year. ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid. // Redraw the calendar. ds_draw_calendar(ds_c_month, ds_c_year); } // Format the date to output. function ds_format_date(d, m, y) { // 2 digits month. m2 = '00' + m; m2 = m2.substr(m2.length - 2); // 2 digits day. d2 = '00' + d; d2 = d2.substr(d2.length - 2); // YYYY-MM-DD return d2 + '-' + m2 + '-' + y; } // When the user clicks the day. function ds_onclick(d, m, y) { // Hide the calendar. ds_hi(); // Set the value of it, if we can. if (typeof(ds_element.value) != 'undefined') { ds_element.value = ds_format_date(d, m, y); // this part is a personal bit of code to allow my page to update correctly and in time. if("fireEvent" in ds_element) ds_element.fireEvent("onChange"); else { var evt = document.createEvent("HTMLEvents"); evt.initEvent("change", false, true); ds_element.dispatchEvent(evt); } // // Maybe we want to set the HTML in it. } else if (typeof(ds_element.innerHTML) != 'undefined') { ds_element.innerHTML = ds_format_date(d, m, y); // I don't know how should we display it, just alert it to user. } else { alert (ds_format_date(d, m, y)); } } 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 Hello, I am arranging a validation form checking a start date (DepartureDate) against today's date to verify that it must be later than today's date, I am a newbie on javascript and I have tried various ways, unfortunately I have hit the wall and I need help. [CODE] <SCRIPT LANGUAGE="JAVASCRIPT" SCRIPT TYPE="TEXT/JAVASCRIPT"> function checkForm() { DepartureDate= /^(0[1-9]|[12][0-9]|3[01])[\/](0[1-9]|1[012])[\/](20)\d\d$/ //check if DepartueDate is valid entry var depdate=myform.DepartureDate.value; // get date from keyed text box var prsDepdate= Date.parse(depdate); // convert to date parse var currentDate = new Date();// today's date var now=Date.parse(currentDate);//parsed todays date if (!DepartureDate.test(depdate)) { alert("Departure Date must be entered in numbers in the following format dd/mm/yyyy with the first two year digits being 20yy"); return false; } //validation if departure Date is entered correctly if (prsDepdate<=currentDate) { alert("Departure Date must be later than Today's date!")//comparison if Departure Date is less than today return false; } } </SCRIPT> [CODE] Thanks a lot I have a drop down menu where people can select a month, day and year. Based on their selection, I want to show them an image. If their selection is >= July 26, 2010 but <= July 25, 2011, show the red image; If their selection is >= July 26, 2011 but <= July 25, 2012, show the white image; If their selection is >= July 26, 2012 but <= July 25, 2013, show the blue image; If their selection is >= July 26, 2013 but <= July 25, 2014, show the yellow image; I don't know how to compare a selected date to a range of dates like this. Probably a simple question but it's got me stumped, this post on codingforums didn't really help me either. I have 5 divs, and I want to have each of them visible seperately on a certain weekday. In pseudo-code: Code: if today=monday, show div "bla1" if today=tuesday, show div "bla2" etc. "bla2" should not be visible if it's monday, etc. I've struggled with trying to bend existing scripts to this purpose but I can't get it working. Please help! hi, the following function shows a list of Counties populates by a PHP page: Code: $.getJSON('http://www.mypubspace.com/dashtest/countyjson.php', function(data){ var myhtml = '<ul>'; for(i=0; i<data.length; i++) { myhtml += '<li>' + data[i].County + '</li>'; } myhtml += '</ul>'; $("#countyshow").html(myhtml); }); I would like to now, when a user clicks on a County, they are shown a list of pubs based on that County (so, I'll create a new PHP page WHERE County = 'County' or something?!) at the moment, when a user clicks on a County this function is passed: Code: function gopublist(event) { var stackLayout = document.getElementById('stackLayout').object; // Replace with id of StackLayout stackLayout.setCurrentView('view4'); } So, passing a value through so I can modify the SQL in the PHP page to filter the counties?! Please help? Hello all, I need some help! I am trying to finish a script that shows a particular div based on the last 2 chars in the cookie value. I have the cookie part done. I just need a little help with the show hide part. Can anyone help! Thanks in advance! Code: <HTML> <HEAD> <TITLE>cookie set, delete, get value and create</TITLE> <SCRIPT LANUAGE="JavaScript"> /** * Sets a Cookie with the given name and value. * * name Name of the cookie * value Value of the cookie * [expires] Expiration date of the cookie (default: end of current session) * [path] Path where the cookie is valid (default: path of calling document) * [domain] Domain where the cookie is valid * (default: domain of calling document) * [secure] Boolean value indicating if the cookie transmission requires a * secure transmission */ function setCookie(name, value, expires, path, domain, secure) { document.cookie= name + "=" + escape(value) + ((expires) ? "; expires=" + expires.toGMTString() : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : ""); } /** * Gets the value of the specified cookie. * * name Name of the desired cookie. * * Returns a string containing value of specified cookie, * or null if cookie does not exist. */ function getCookie(name) { var dc = document.cookie; var prefix = name + "="; var begin = dc.indexOf("; " + prefix); if (begin == -1) { begin = dc.indexOf(prefix); if (begin != 0) return null; } else { begin += 2; } var end = document.cookie.indexOf(";", begin); if (end == -1) { end = dc.length; } return unescape(dc.substring(begin + prefix.length, end)); } </SCRIPT> </HEAD> <BODY> <input type="button" value="Set Cookie" onclick='setCookie("location", prompt("Enter your location:\n Enter \"Baltimore, MD\" in the text box below."))' /> <br> <br> <script> var state = getCookie("location").slice(-2); if (state=='MD' || state=='NC'){ alert("location stripped to" + " - " + state); //Show hide code here... } </script> Refresh page after setting the cookie to "Baltimore, MD"<br> <br> <div id="image1">Image1</div> <div id="image2">Image2</div> <div id="image3">Image3</div> </BODY> </HTML> can any guys help me to fine the jquery based slide show right to left with next previous and auto facilities on div not on ul li based?
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 guys. I am kind of new to javascript, and was hoping that someone here could help out on a problem I have been having. What I am trying to do is to make a page which will redirect to three diffrent sites, based on date. I want it to change to diffrent sites during the time before summer to summer, the time before xmas till xmas and from before easter till easter. A bit more spesific this would be: From 29. march --> 22. july (summer) From 22. august --> 24. december (xmas) From 3. january --> 22. march (easter) Could you help me out? I have tried lots of diffrent ways to do this with javascripts if...else statements, but I havent yet found a way to make it work properly. Really thankful for answers! Hello all. I have created a 2 frame site where I want the top frame (header) to redirect the other frame (main) to a different page depending on the date, time, and second. For example, on 12 FEB at 07:00:00, I would like the header frame to redirect the main frames page to EmmasBday.html; in which I would be alerted of my little sisters Birthday. This is for personal use and isn't going to be hosted online so I will just use JavaScript, it's basically a simple system to remind me of crucial events at certain times and dates so I don't forget them. The same events will apply every year, so there is no need to programme in specific years although having the option could prove useful. I am aware of other alternatives to achieve this, but would very much like to work with JavaScript; as I can expand it. As I state, this is for personal use and therefore won't be hosting it; I will use JavaScript throughout and cannot use anything else like PHP, Perl, etc. I am aware JavaScript takes the time & date from the computer hosting it (unlike PHP), which is fine. So, for example; at 14:30:00 I will be informed to get dinner; and at 15:00:45 I'll be informed to study. The knowledge you guys have presented so far is phenomenal, and I couldn't think of anybody better to ask for assistance. Anyway, I hope you can resolve my problem and I'm looking forward to a response! Thanks for your concern, you brain Gods you! AHa. Ok so I have a select box where the value must be passed via the form. If the users selects choice B or Choice C then I want a specific div to show. If they choose choice A then I want the div to hide or remain hidden. It should be hidden on page load. Code: <select name="Event_Type_ID"> <option value="1">Choice A</option> <option value="2">Choice B</option> <option value="3">Choice C</option> </select> <div id="showme"> Content to show if EITHER Choice B or C is chosen. Otherwise this div should be hidden. </div> Can anyone lead me in the right direction? Thanks! Hello, I have very little knowledge of javascript, other than modifying existing scripts, and I can't find anything about this particular problem. I need some help on creating a simple script that will display a div ONLY if the user comes from a certain page within the same site. Not sure if that was clear, but let me try with specifics. There is a link to a page called 'Clients' on the 'About Us' page. If a user goes directly to 'Clients', they should have a normal experience. If, however, they come via the 'About Us' page, I want to display a div at the bottom of the page that will take them back to the 'About Us' page. I know how to get a referrer, and I know how to show/hide divs. I just don't know how to combine the two. Can anyone help? I'm new to coding and recently undertook the position as my school district's webmaster. We use a six day schedule where the days are labeled A-F. I want to be able to display the Today is...A graphic based on the date. I tried some scripts from other forums, but it does not appear to be working. Any suggestions? TY <code> <script language="javascript"> <!-- var picture=''; mytime=new Date(); mymonth=mytime.getMonth()+1; mydate=mytime.getDate(); if (mymonth==9 && mydate==13){picture="<img src=/images/d.gif>"; } if (mymonth==9 && mydate==14){picture="<img src=/images/e.gif width=150 height=150 alt=E>"; } if (mymonth==9 && mydate==15){picture="<img src=/images/f.gif width=150 height=150 alt=F>"; } if (mymonth==9 && mydate==16){picture="<img src=/images/A.gif width=150 height=150 alt=A>"; } if (mymonth==9 && mydate==19){picture="<img src=/images/B.gif width=150 height=150 alt=B>"; } if (mymonth==9 && mydate==20){picture="<img src=/images/c.gif width=150 height=150 alt=C>"; } //--> </script></code> So I am trying to make a form that will eventually take the user to a specified link. It is a form that uses drop down menus. I based this off of someone elses code (with permission ), but it shows everything <= user input. I cannot for the life of me figure out how to make it only show only one of the next options. here is the JS code: Code: <script language="JavaScript"> function ShowMenu(num, menu, max) { for(i = 1999; i <= num; i++){ var menu2 = menu + i; document.getElementById(menu2).style.display = 'block'; } var num2 = num; num2++; while(num2 = max){ var menu3 = menu + num2; document.getElementById(menu3).style.display = 'none'; num2=num2+1; } } </script> This is only the JS code. I didn't want to waste space with the rest of the code. If you want to see it let me know and I can include that. I am sure this is rather basic, but my JS knowledge is less than that...It has been some time since undergrad computer science class. Thanks in advance for any help! Hi ya all, how can I show / hide the content of sub divs based on whether the input is != or = and be able to repeat this. I tried to hide the sub divs using , onclick if bla bla = '' ; Code: document.getElementById('hideme').innerHTML = ''; which works, but once I try to enter a new input, then nothing happens, even if the content of the sub divs is = input thx 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 All, I have a form that captures member registration details. In the admin section .. I would like to change the Status field of a record/s from NEW to PAYMENT DUE after 14 days from the data of submission. The status change should automatically trigger on the 15th day. So when the admin checks the list page he/she should be able to view the updated status field. Any pointers how to accomplish this? Thanks in advance. Vinny Hey all, I'm trying to get the two followup questions underneath the checkbox to show up only if someone places a check there, but for some reason the way I've got it set up now it's simply hiding the area I want to show up altogether, and the checkbox has no effect on it. Rather than waste tons of space pasting it here, here's the pastebin: http://pastebin.ca/1822165 alternatively here is the live version: http://soniajacobwedding.com/site/rsvptest.html I'd prefer to have the form collapse when the additional questions are hidden, though if i can get this working at all I'd be pretty happy. |