|
JavaScript - Help With Adding Function Number By Date
I am working on an HTML project that displays a field with a number in the field by each day. What it does is start at 0 on day one. Each day it adds a 1 to the field. Day 2, the field would say 1, then day 3 would say 2, and so on. I am not sure how to approach this. This is also displayed in an HTML format. I want to to be automatic and change as the date changes. I will also need a way to reset it back to zero if possible.
Similar TutorialsI am delving into the coding world and while I understand the basic principle of cookies, conditional statements, arrays, etc... I am still learning how to properly implement them. Any asistance with the following situation would be greatly appreciated and help with my learning as I try to reverse engineer the logic. I have looked around the web and this forum with little success. If the situation below is too complicated, I would really appreciate even a shove in the right direction regarding the logic. ----------------- How could I show a preset counter which counts up from a preset, beginning number toward a preset, end number? I imagine the increment and speed is set be the difference between the two numbers and a timeframe. Assumptions: I would rather not set the increment but edit the end number to show a steady increase. As I update that number, the increment adapts dynamically. I would want the number/script to be useful, so it should not refresh to the beginning number on each page load (i.e. num=0). When a visitor comes to the page, it must seem like the counter has been steadily been increasing in their absence. Coke or Pesi did something similar one time regarding cans sold to date (doubt it was plugged into a DB somewhere but rather based on a steady sales figure) and it was pretty cool. All the best! I'm not too sure how to approach this but I have a date input that uses a jQuery pop-up for a calendar, and enters the date in a format d MMM yy (1 Jan 11). Not everyone wants to be clicking and choosing the date from the calendar but to be entering it just as a number such as 0101, 010111 or 01012011 which can be faster. This would then need to be converted to the d MMM yy format as per the jQuery pop-up when they exit the input box. So really only if it's a number format it needs to look at the number of digits... and does the conversion. Has anyone done something like this before? Or is there a link to how I could go about achieving this? Many thanks David Hi! I'm trying to toggle a class and one works and the other does not and I don't know why. I'm just getting my feet wet with jquery and javascript and I figured this was a pretty easy task to take on! Maybe. Link to the page: Franklin Township Soccer Club - Change Field Status My sad, sorry attempt =| Code: $( "li.open" ).click(function() {
$( this ).toggleClass( "closed" );
});
$( "li.closed" ).click(function() {
$( this ).toggleClass( "open" );
});
The first function works with open, so I figured I'd just use opposite on closed! Ha! I don't think so! In the end within those function there is an element in a form on that page it's hidden. I'd like to change the value from a 0 to 1 for vice versa. That' will be my next step. If you could give me a little nudge in the right direction I'd appreciate it! But first understanding why one works and the other does not, that is the primary mission! I do appreciate any help given! Dave I'm just trying to add X days to a given date object. However, it's not the right answer (did it in PHP to check, and my PHP version works). dateObj = new Date (month + '/' + day + '/' + year); // Grab the object for a given date datestamp = dateObj.getTime(); // Get millisecond timestamp newDate = new Date (datestamp + (1000 * 60 * 60 * 24 * parseInt (daysToAdd))); // Add "daysToAdd" days to the date alert (newDate); It's not daysToAdd days away... Any help is greatly appreciated. I wrote a version not using the Date () object, but rather an array of the days in each month, and then subtracting each month until "day" was below 31, etc. It's a lot less efficient than this method though :P Hello, I have a textbox with a date formatted 'dd/mm/yyyy'. I want to be able to add days to the date so that the month ticks over if the days exceed the days in the month and the year also if the month value passes 12. Currently I have the below. This adds to the days but will not tick over the month. Any help please. Thanks Code: <html>
<head>
<script type="text/javascript">
function calDate() {
var dateArr = document.getElementById('testinput').value;
var myDate = new Date();
var day;
var month;
var year;
day = dateArr.substring(0,2);
month = dateArr.substring(3,5);
year = dateArr.substring(6,10);
if (day.charAt(0) == '0')
{
day = day.charAt(1);
}
if (month.charAt(0) == '0')
{
month = month.charAt(1);
}
myDate.setDate(day);
myDate.setMonth(month); // January = 0
myDate.setFullYear(year);
alert((myDate.getDate()+28)+ "/" + (myDate.getMonth()) + "/" + myDate.getFullYear());
}
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="calDate();"> click</a><input type="text" id="days" value="0"/>
</body>
</html>
Hi Guys, Is it possible to add a certain number of days (determined by a select box option) to a date in the format of Thursday, 26 January, 2012 ?? Thanks Please help I am a newbie and need some assistant. I'm trying to get a full date. In this script I want the user to be able to enter a date and get a 1000 day result a full (date) mm/dd/yyy. So far this give me the year only. I've tried so many ways. <script language="javascript"> var reply = prompt("Please enter the date you and your love begin dating (mm/dd/yyyy)", " "); var newstring = new String(reply); var arrTemp = new Array(); arrTemp = newstring.split("/"); var year = parseInt(arrTemp[arrTemp.length-1]); year += 3; alert("You begin dating your love in " + parseInt(arrTemp[arrTemp.length-1]) + "\nYou should be married before or in the year of " + year); </script> Hello I'm using simpleCart() javascript shopping machine for my page. The script accepts values in a specific syntax: Code: onclick="simpleCart.add('name=Some name','price=23.4','quantity=1');"
But because the price of the product is not always the same but comes up after previously made calculations, i want to parse the values in simpleCart() through another function. I have made the following one which gets the price from a textbox (resultAlmires) of a form (Almires), then converts it to american format (. instead of ,) makes it have one decimal only and finally parse it to simpleCart() with the use of a variable. However it doesn't seem to work: Code: function addAlmiri() {
var timi = document.Almires.resultAlmires.value;
timi = timi.replace(/\,/,".");
timi = timi.toFixed(1);
simpleCart.add( 'name = Some name' , 'price = timi' , 'quantity = 1' );
}
Any help? Heres a link to the code in question http://www.scccs.ca/~W0049698/JavaTe...erlocktxt.htm# when the leftPos variable is used in the moveSlide() it somehow turns into Nan. Cant figure out why and have been racking my brain over this for a long time now.. Any help would be greatly appreciated the problem is at the end of the code(scroll to the bottom) ======================================================= Code: window.onload = makeMenus;
var currentSlide = null;
var timeID = null;
function makeMenus(){
var slideMenus = new Array();
var allElems = document.getElementsByTagName("*");
for(var i=0 ; i < allElems.length ; i++){
if(allElems[i].className == "slideMenu") slideMenus.push(allElems[i])
}
for(var i=0 ; i < slideMenus.length ; i++){
// alert(slideMenus.length)
slideMenus[i].onclick = showSlide;
slideMenus[i].getElementsByTagName("ul")[0].style.left = "0px";
}
document.getElementById("head").onClick = closeSlide;
document.getElementById("main").onClick = closeSlide;
}
function showSlide(){
slideList = this.getElementsByTagName("ul")[0];
if(currentSlide && currentSlide.id == slideList.id)
{closeSlide()}
else{
closeSlide();
currentSlide = slideList;
currentSlide.style.display = "block";
timeID = setInterval("moveSlide()", 1);
}
}
function closeSlide(){
if(currentSlide){
clearInterval(timeID);
currentSlide.style.left="0px";
currentSlide.style.display="none";
currenSlide = null;
}
}
Code:
Hi all, I have what I hope will be a simple question for someone to help me with. I simply want to add a timeout to the folowing code: Code: $(function(){
$('#slides').slides({
effect: 'fade',
crossfade: true,
preload: true,
preloadImage: '<?php bloginfo('template_directory'); ?>/img/loading.gif',
play: 4500,
pause: 500,
hoverPause: false,
animationStart: function(current){
$('.caption').animate({
bottom:-35,
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
As you can see this is a slideshow code. All I want to do is delay the first slide sliding in when the slideshow loads. I have tried wrapping the whole function in a settimeout but to no avail. Thanks in advance Dan Hey guys, I'm using a couple of JQuery plugins: Quicksand - Shuffle/re-order PrettyPhoto - standard lightbox type image viewer I'm using Quicksand to filter my images, like a gallery, sorted into categories for my work; illustration, website, applications etc. This is working fine. I'm using PrettyPhoto to allow the user to click these images and see them in a larger size. This works fine when 'all' is selected from the quicksand menubar. However, if I filter the list to any other option, PrettyPhoto doesn't work and clicking the image results in it opening in a new page. Essentially, I need to re-call or re-load PrettyPhoto after the animation for filtering ends. But I don't know how. You can see my galllery at: http://www.gurugroup.net/#3 You can view the PrettyPhoto and Quicksand Javascript files he http://www.sim-modding.com/stuff/javascripts/ I assume the re-call line would go somewhere around he Code: // Gets called when any animation is finished Thankyou in advance. Ste. I want to get a digital time clock updated every second in 12 Hrs format but the following code i wrote is not meeting my objective. What can be wrong with the code below- Code: <html>
<head>
<style>
#v{
background-color:navy;
height:auto;
width:auto;
font-size:22pt;
color:white;
font-weight:bold;
padding:20px;
text-align:center;
marquee-style:alternate;
}
</style>
</head>
<body>
<div id="v"></div>
<script>
function showTime()
{
var dt=new Date();
var h=dt.getHours();
var m=dt.getMinutes();
var s=dt.getSeconds();
//var chr=h;
if (m< 10) {
m= "0" + m;
}
if (s < 10) {
s = "0" + s;
}
if (h > 12) {
h=h - 12;
add = " p.m.";
} else {
h=h;
add = " a.m.";
}
if (h == 12) {
add = " p.m.";
}
if (h==0) {
h="12";
}
time=((hour<=10) ? "0" + h : h) + ":" + m + ":" + s + add;
document.getElementById("v").innerHTML=time;
setTimeout("showTime()",100);
}
showTime();
</script>
</body>
</html>
Hi there, I'm looking for some help with modifying an existing function which controls the highlighted states of a multi level js accordion menu. I have had to use javascript due to certain css elements not working in safari browsers. My problem is due to the multi level aspect as when a sub link is clicked, the parent link above it then deselects. I need the parent link to stay active when its sub links are clicked and only deselects when a link outside of that list is clicked upon. I understand the theory of adding a conditional statement but simply don't know how to apply it correctly within the function...any help would be very much appreciated. Here is the existing function which tells a link to be active or selected: Code: var Lst;
function CngClass(obj){
if (Lst) Lst.className='.topnav';
obj.className='selected';
Lst=obj;
}
and here is the menu code: Code: <ul class="topnav"> <li><a href="#">Home</a></li> <li><a onclick="CngClass(this);" href="#">Top Link 2</a> <ul> <li><a onclick="CngClass(this);" href="#">Cookies</a></li> <li><a onclick="CngClass(this);" href="#">Events</a></li> <li><a onclick="CngClass(this);" href="#">Forms</a></li> <li><a onclick="CngClass(this);" href="#">Games</a></li> <li><a onclick="CngClass(this);" href="#">Images</a></li> <li><a onclick="CngClass(this);" href="#">Navigations</a> <ul> <li><a onclick="CngClass(this);" href="#">CSS</a></li> <li><a onclick="CngClass(this);" href="#">JavaScript</a></li> <li><a onclick="CngClass(this);" href="#">JQuery</a></li> </ul> </li> <li><a onclick="CngClass(this);" href="#">Tabs</a></li> </ul> </li> <li><a onclick="CngClass(this);" href="#">Tutorials</a> <ul> <li><a onclick="CngClass(this);" href="#">HTML</a></li> <li><a onclick="CngClass(this);" href="#">CSS</a></li> <li><a onclick="CngClass(this);" href="#">JavaScript</a></li> <li><a onclick="CngClass(this);" href="#">Java</a> <ul> <li><a onclick="CngClass(this);" href="#">JSP</a></li> <li><a onclick="CngClass(this);" href="#">JSF</a></li> <li><a onclick="CngClass(this);" href="#">JPA</a></li> <li><a onclick="CngClass(this);" href="#">Contact</a></li> </ul> </li> <li><a onclick="CngClass(this);" href="#">Tabs</a></li> </ul> </li> <li><a onclick="CngClass(this);" href="#">Contact</a></li> <li><a onclick="CngClass(this);" href="#">Upload script</a></li> </ul> Thanks for any help or advice. Heya guys I'm looking for someone with a vast knowledge of Javascript... by any chance someone over here has some time to help a newby out? (I think 10 minutes should be enough) <INPUT TYPE="button" NAME="addToArray " VALUE=" ATA " OnClick="addToArray() "> <!--Add To Array --> <INPUT TYPE="button" NAME="clearArray" VALUE=" CA " OnClick="clearArray()"> <!--Clear Array --> <INPUT TYPE="button" NAME="showArray" VALUE=" SA " OnClick="showArray() "> <!--Show Array --> These are my buttons. What I want them to do is simply add something to an array, clear the array and show them on my screen. Hi all, Basically I'm having trouble writing a date function to return this data: [CODE] // Get Date d=new Date(); a=d.getUTCFullYear(); b=d.getUTCMonth() + 1; c=d.getUTCDate(); e=d.getUTCHours() - 1; f=d.getUTCMinutes(); [CODE] I need it so I can run setinterval on the date function. I'm quite new to javascript (obviously!) so any help will be much appreciated. Thanks I'm trying to verify todays date against my input date, using a check value function, but for some reason when it comes to a day over 9 like 12/10/2009 or 12/20/2009 looks like is only recognizing the first number 12/1/2009 and 12/2/2009 and getting my alert back as to choose a future date, this is my code, any help would be greatly appreciated: var currentTime = new Date() var month = currentTime.getMonth() + 1 var day = currentTime.getDate() var year = currentTime.getFullYear() function checkValues() { if (owt8.dayr.value <=month+'/'+day+'/'+year ) { alert("Please enter a future date!"); return false; } owt8.submit(); alert("Your request has been submited") window.close() } Hi, firstly I apologise if the title of this thread isn't quite accurate. I'm sure you've all heard it before but I am a complete newbie to Javascript so again: apologies if this is boring and tiresome to even read, let alone help with! I have been asked to make some changes to a form that uses Javascript for the form validation. There is a 'function' that contains the variables of the various form fields and then further code to raise 'alerts' if one of the fields on the form hasn't been filled in. My problem is that for some reason I am unable to add an extra variable to this code after the field of 'County' (this will hopefully make sense when you see the code / link...) and I am stumped as to why. I am able to add variables for all of the other required fields except for 'Postcode' after 'County'. This is the case for both forms. The link is he http://samdelara.co.uk/previews/banq...ation-form.htm and the code I am trying edit is below: function checkAvailibility() { // re-calculate... calculate (); if ( isName() && isAddress1() && isTown() && isCounty() && isPostcode() && isYourEmail() && isFuncDate() && somethingToQuoteFor() && isYourEmailValid() ) { document.ordersummary.emailQuote.value = "No"; setValue(); return true; } else { return false; } } function isName() { if (document.ordersummary.Name.value=="") { alert ("\n Please Enter Your Name") document.ordersummary.Name.focus(); return false; } return true; } function isAddress1() { if (document.ordersummary.Address1.value=="") { alert ("\n Please Enter Your Address") document.ordersummary.Address1.focus(); return false; } return true; } function isTown() { if (document.ordersummary.Town.value=="") { alert ("\n Please Enter Your Town") document.ordersummary.Town.focus(); return false; } return true; } function isCounty() { if (document.ordersummary.County.value=="") { alert ("\n Please Enter Your County") document.ordersummary.County.focus(); return false; } return true; } function isPostcode() { if (document.ordersummary.Postcode.value=="") { alert ("\n Please Enter Your Postcode") document.ordersummary.Postcode.focus(); return false; } return true; } function isYourEmail() { if (document.ordersummary.YourEmail.value=="") { alert ("\n Please Enter Your Email") document.ordersummary.YourEmail.focus(); return false; } return true; } function isFuncDate() { if (document.ordersummary.FuncDate.value=="") { alert ("\n Please Enter Your Function Date") document.ordersummary.FuncDate.focus(); return false; } return true; } function isemailonly() { if (document.ordersummary.emailonly.value=="") { alert ("\n Please Enter Your Email Address") document.ordersummary.emailonly.focus(); return false; } return true; } Any help with this would be very much appreciated and once again, I apologise for my distinct lack of knowledge in this area! Sam Hello, all. I have a script that toggles an element's style between display block and display none based on an onclick event. It's being implemented in a content management system (WordPress) so it has some dynamic post ID's assigned to it. I have tried editing it to toggle the variable "type" so that I can have the class of the div change with the rest of the variables being swapped during the toggle, but no matter what I've changed I can't seem to get it to update the variable when someone clicks on the link with the onclick event. Everything else works perfectly, content is shown and hidden when you click the link, I just can't get the "type" variable to switch. I think it's something to do with the JavaScript function itself (it looks to me like it's only looking at 4 variables and this new one would be a new variable that's being toggled). Below is the code. How can I get the type variable to update like the others (hidden_css, tmp_text, more_text, less_text)? Code: /*-----------------------------------------------------------------------------------*/
// Show Hide Posts
/*-----------------------------------------------------------------------------------*/
### Function: Enqueue JavaScripts
add_action('wp_enqueue_scripts', 'showhide_scripts');
function showhide_scripts() {
wp_enqueue_script('jquery');
}
### Function: Short Code For Inserting Show/Hide Into Post
add_shortcode('showhide', 'showhide_shortcode');
function showhide_shortcode($atts, $content = null) {
// Variables
$post_id = get_the_id();
// Extract ShortCode Attributes
extract(shortcode_atts(array(
'type' => 'show',
'more_text' => __('View Full Post'),
'less_text' => __('Close Post'),
'hidden' => 'yes'
), $atts));
// Determine Whether To Show Or Hide Content
$hidden_css = 'display: none;';
if($hidden == 'no') {
$hidden_css = 'display: block;';
$type = 'hide';
$tmp_text = $more_text;
$more_text = $less_text;
$less_text = $tmp_text;
}
// Format HTML Output
$output = '<div id="'.$type.'-content-'.$post_id.'" class="'.$type.'-content" style="'.$hidden_css.'">'.$content.'</div>';
$output .= '<div class="'.$type.'-link"><a href="#" onclick="showhide_toggle(\''.$type.'\', '.$post_id.', \''.esc_js($more_text).'\', \''.esc_js($less_text).'\'); return false;"><span id="'.$type.'-toggle-'.$post_id.'">'.$more_text.'</span></a></div>';
return $output;
}
### Function: Add JavaScript To Footer
add_action('wp_footer', 'showhide_footer');
function showhide_footer() {
echo '<script type="text/javascript">'."\n";
echo '/* <![CDATA[ */'."\n";
echo 'function showhide_toggle(a,b,c,d){jQuery("#"+a+"-content-"+b).toggle();jQuery("#"+a+"-toggle-"+b).text(jQuery("#"+a+"-toggle-"+b).text()==c?d:c)};'."\n";
echo '/* ]]> */'."\n";
echo '</script>'."\n";
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 I am learning to programme in HTML5 and Java, and I'd like some assistance with what I am sure is a pretty basic matter, if possible please? If anyone can assist it would be most appreciated? I am using Dreamweaver (latest version)... This code here below when run produces a google map with a street address look up input. I am wanting to learn how to look up an address and submit this to resolve within the map, and also to insert a place holder... I'd like the look up box to sit within (and overlay) the map top left area - at the moment it sits below the map - which i guess is because I haven't inserted a frame?? Many Thanks grin): ***CODE*** <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #map-canvas { height: 100%; margin: 5; padding: 5;} </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> function initialize() { var mapOptions = { center: { lat: -34.397, lng: 150.644}, zoom: 8 }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> <head> <title>Place Autocomplete Address Form</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> <script> // This example displays an address form, using the autocomplete feature // of the Google Places API to help users fill in the information. var placeSearch, autocomplete; var componentForm = { street_number: 'short_name', route: 'long_name', locality: 'long_name', administrative_area_level_1: 'short_name', country: 'long_name', postal_code: 'short_name' }; function initialize() { // Create the autocomplete object, restricting the search // to geographical location types. autocomplete = new google.maps.places.Autocomplete( /** @type {HTMLInputElement} */(document.getElementById('autocomplete')), { types: ['geocode'] }); // When the user selects an address from the dropdown, // populate the address fields in the form. google.maps.event.addListener(autocomplete, 'place_changed', function() { fillInAddress(); }); } // [START region_fillform] function fillInAddress() { // Get the place details from the autocomplete object. var place = autocomplete.getPlace(); for (var component in componentForm) { document.getElementById(component).value = ''; document.getElementById(component).disabled = false; } // Get each component of the address from the place details // and fill the corresponding field on the form. for (var i = 0; i < place.address_components.length; i++) { var addressType = place.address_components[i].types[0]; if (componentForm[addressType]) { var val = place.address_components[i][componentForm[addressType]]; document.getElementById(addressType).value = val; } } } // [END region_fillform] // [START region_geolocation] // Bias the autocomplete object to the user's geographical location, // as supplied by the browser's 'navigator.geolocation' object. function geolocate() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var geolocation = new google.maps.LatLng( position.coords.latitude, position.coords.longitude); autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation)); }); } } // [END region_geolocation] </script> <style> #locationField, #controls { position: relative; width: 480px; } #autocomplete { position: absolute; top: 0px; left: 0px; width: 99%; } .label { text-align: right; font-weight: bold; width: 100px; color: #303030; } #address { border: 1px solid #000090; background-color: #f0f0ff; width: 480px; padding-right: 2px; } #address td { font-size: 10pt; } .field { width: 99%; } .slimField { width: 80px; } .wideField { width: 200px; } #locationField { height: 20px; margin-bottom: 2px; } </style> </head> <body onload="initialize()"> <div id="locationField"> <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input> </div> <table id="address"> <tr> <td class="label">Street address</td> <td class="slimField"><input class="field" id="street_number" disabled="true"></input></td> <td class="wideField" colspan="2"><input class="field" id="route" disabled="true"></input></td> </tr> <tr> <td class="label">City</td> <td class="wideField" colspan="3"><input class="field" id="locality" disabled="true"></input></td> </tr> <tr> <td class="label">State</td> <td class="slimField"><input class="field" id="administrative_area_level_1" disabled="true"></input></td> <td class="label">Zip code</td> <td class="wideField"><input class="field" id="postal_code" disabled="true"></input></td> </tr> <tr> <td class="label">Country</td> <td class="wideField" colspan="3"><input class="field" id="country" disabled="true"></input></td> </tr> </table> </body> </html> |
|||||||