JavaScript - How To Make A Custom Count Up
I have a script that almost does what I need: a simple counter that counts inmigrants remmittences to their home countries.
Counting starts at 150,000,000,000 and it increments by 35,000 every one minute. The following scripts does the job done but it does not record in a continious manner, it resets each time the page is visited: Here is the code: ( I hope I get some help to make it: no reseting in each page visit) -------------------------------------------------- <html> <head> <script language="javascript" type="text/javascript"> <!-- var startCount = 150000000000; var addPerMin = 35000; function ProcessCounter() { document.getElementById('cnt').innerHTML = addCommas(String(cnt++)); setTimeout('ProcessCounter()', SetTimeOutPeriod); } function PutSpan() { document.write('<span id="cnt"></span>'); } function addCommas(nStr) { var rgx = /(\d+)(\d{3})/; while (rgx.test(nStr)) { nStr = nStr.replace(rgx, '$1' + ',' + '$2'); } return nStr; } var cnt = startCount; var SetTimeOutPeriod = Math.floor((1000 * 60) / addPerMin); function displayCounter() { PutSpan(); ProcessCounter(); } //--> </script> </head> <body <font size="30"> <script language="javascript" type="text/javascript">javascript:displayCounter();</script> </font> </body> Similar TutorialsI'm trying to make a count-up timer that counts to 100 or 1000 then adds 1 to another number. i would like the timer speed to be adjustable if possible...i'm kinda new to javascript so any help with this would be appreciated. I am looking for a custom pop up box, but there is only 3 kinds (Alert, Confirm, Prompt). Neither of those will work. This is what I want to do. http://www.youtube.com/watch?v=zr0F6elv-vg I'm trying to create a custom drop down and using the code below it works pretty well - only one problem is if i have more than one drop down, all the links will only activate the first drop down. Any ideas on how I would fix that? Code: function toggle() { var ele = document.getElementById("dropdown-items"); var text = document.getElementById("dropdown-menu"); if(ele.style.display == "block") { ele.style.display = "none"; } else { ele.style.display = "block"; } } I already have a sort function that but wish to provide my users with the ability to specify custom sorts - days of the week, months etc. Assuming that I have a function that will return day of week (ie 'Mon' = 0, "Tue" = 1, "Wed" = 2 ... etc) can anyone show me how I would incorporate this into a sort routine? Many thanks in advance should you respond to this. I have a successful translator that has random letter, number and symbols assigned to various letters problem is it only lets assign 1 character to 1 letter when i want to assign 4 characters to each letter to ensure the code cant be broken here is a snipet of what im working with its different then normal translators....
Code: <script language="javascript"> function translate() { if (document.form1.elements[0].checked == true) { EtoA() } else if (document.form1.elements[1].checked == true) { AtoE() } else { } } function EtoA() { var toggle = "false" var xlate = document.form1.elements[4].value var xlation = "" document.form1.elements[5].value = "" for (var i = 0; i <= xlate.length; i++) { tempa = xlate.charAt(i) if ( tempa == "[") { toggle = "true" i++ } else if ( tempa == "]") { toggle = "false" i++ } tempa = xlate.charAt(i) if (toggle == "true") { tempb = tempa } else if(tempa == "a") { tempb = "9" } else if(tempa == "b") { tempb = "a" } else if(tempa == "c") { tempb = "0" } else if(tempa == "d") { tempb = "c" } else if(tempa == "e") { tempb = "3" } else if(tempa == "f") { tempb = "b" } else if(tempa == "g") { tempb = "4" } else if(tempa == "h") { tempb = "?" } else if(tempa == "i") { tempb = "5" } else if(tempa == "j") { tempb = "6" } else if(tempa == "k") { tempb = "e" } else if(tempa == "l") { tempb = "+" } else if(tempa == "m") { tempb = "x" } else if(tempa == "n") { tempb = "7" } else if(tempa == "o") { tempb = "v" } else if(tempa == "p") { tempb = "1" } else if(tempa == "q") { tempb = "t" } else if(tempa == "r") { tempb = "q" } else if(tempa == "s") { tempb = "g" } else if(tempa == "t") { tempb = "n" } else if(tempa == "u") { tempb = "<" } else if(tempa == "v") { tempb = ">" } else if(tempa == "w") { tempb = "^" } else if(tempa == "x") { tempb = "!" } else if(tempa == "y") { tempb = "@" } else if(tempa == "z") { tempb = "#" } else if(tempa == "A") { tempb = "9" } else if(tempa == "B") { tempb = "a" } else if(tempa == "C") { tempb = "0" } else if(tempa == "D") { tempb = "c" } else if(tempa == "E") { tempb = "3" } else if(tempa == "F") { tempb = "b" } else if(tempa == "G") { tempb = "4" } else if(tempa == "H") { tempb = "h" } else if(tempa == "I") { tempb = "5" } else if(tempa == "J") { tempb = "6" } else if(tempa == "K") { tempb = "e" } else if(tempa == "L") { tempb = "f" } else if(tempa == "M") { tempb = "x" } else if(tempa == "N") { tempb = "7" } else if(tempa == "O") { tempb = "v" } else if(tempa == "P") { tempb = "1" } else if(tempa == "Q") { tempb = "t" } else if(tempa == "R") { tempb = "q" } else if(tempa == "S") { tempb = "g" } else if(tempa == "T") { tempb = "n" } else if(tempa == "U") { tempb = "<" } else if(tempa == "V") { tempb = ">" } else if(tempa == "W") { tempb = "^" } else if(tempa == "X") { tempb = "!" } else if(tempa == "Y") { tempb = "@" } else if(tempa == "Z") { tempb = "#" } else if(tempa == "1") { tempb = "}" } else if(tempa == "2") { tempb = "{" } else if(tempa == "3") { tempb = "(" } else if(tempa == "4") { tempb = "'" } else if(tempa == "5") { tempb = "|" } else if(tempa == "6") { tempb = "`" } else if(tempa == "7") { tempb = ":" } else if(tempa == "8") { tempb = ";" } else if(tempa == "9") { tempb = "=" } else if(tempa == "0") { tempb = ")" } else if(tempa == "~") { tempb = "R" } else if(tempa == "!") { tempb = "T" } else if(tempa == "@") { tempb = "F" } else if(tempa == "#") { tempb = "Y" } else if(tempa == "$") { tempb = "K" } else if(tempa == "%") { tempb = "J" } else if(tempa == "^") { tempb = "H" } else if(tempa == "&") { tempb = "G" } else if(tempa == "*") { tempb = "X" } else if(tempa == "_") { tempb = "V" } else if(tempa == "-") { tempb = "B" } else if(tempa == "+") { tempb = "M" } else if(tempa == "=") { } else if(tempa == "<") { tempb = "N" } else if(tempa == ">") { tempb = "U" } else if(tempa == ".") { tempb = "S" } else if(tempa == ",") { tempb = "W" } else if(tempa == "?") { tempb = "." } else if(tempa == ":") { tempb = "," } else if(tempa == ";") { tempb = "$" } else { tempb = tempa } xlation = document.form1.elements[5].value document.form1.elements[5].value = xlation + tempb } } function AtoE() { var toggle = "false" var xlate = document.form1.elements[4].value var xlation = "" document.form1.elements[5].value = "" for (var i = 0; i <= xlate.length; i++) { tempa = xlate.charAt(i) if ( tempa == "[") { toggle = "true" i++ } else if ( tempa == "]") { toggle = "false" i++ } tempa = xlate.charAt(i) if (toggle == "true") { tempb = tempa } else if(tempa == "9") { tempb = "a" } else if(tempa == "a") { tempb = "b" } else if(tempa == "0") { tempb = "c" } else if(tempa == "c") { tempb = "d" } else if(tempa == "3") { tempb = "e" } else if(tempa == "b") { tempb = "f" } else if(tempa == "4") { tempb = "g" } else if(tempa == "?") { tempb = "h" } else if(tempa == "5") { tempb = "i" } else if(tempa == "6") { tempb = "j" } else if(tempa == "e") { tempb = "k" } else if(tempa == "+") { tempb = "l" } else if(tempa == "x") { tempb = "m" } else if(tempa == "7") { tempb = "n" } else if(tempa == "v") { tempb = "o" } else if(tempa == "1") { tempb = "p" } else if(tempa == "t") { tempb = "q" } else if(tempa == "q") { tempb = "r" } else if(tempa == "g") { tempb = "s" } else if(tempa == "n") { tempb = "t" } else if(tempa == "<") { tempb = "u" } else if(tempa == ">") { tempb = "v" } else if(tempa == "^") { tempb = "w" } else if(tempa == "!") { tempb = "x" } else if(tempa == "@") { tempb = "y" } else if(tempa == "#") { tempb = "z" } else if(tempa == "9") { tempb = "A" } else if(tempa == "a") { tempb = "B" } else if(tempa == "0") { tempb = "C" } else if(tempa == "c") { tempb = "D" } else if(tempa == "3") { tempb = "E" } else if(tempa == "b") { tempb = "F" } else if(tempa == "4") { tempb = "G" } else if(tempa == "?") { tempb = "H" } else if(tempa == "5") { tempb = "I" } else if(tempa == "6") { tempb = "J" } else if(tempa == "e") { tempb = "K" } else if(tempa == "+") { tempb = "L" } else if(tempa == "x") { tempb = "M" } else if(tempa == "7") { tempb = "N" } else if(tempa == "v") { tempb = "O" } else if(tempa == "1") { tempb = "P" } else if(tempa == "t") { tempb = "Q" } else if(tempa == "q") { tempb = "R" } else if(tempa == "g") { tempb = "S" } else if(tempa == "n") { tempb = "T" } else if(tempa == "<") { tempb = "U" } else if(tempa == ">") { tempb = "V" } else if(tempa == "^") { tempb = "W" } else if(tempa == "!") { tempb = "X" } else if(tempa == "@") { tempb = "Y" } else if(tempa == "#") { tempb = "Z" } else if(tempa == "}") { tempb = "1" } else if(tempa == "{") { tempb = "2" } else if(tempa == "(") { tempb = "3" } else if(tempa == "'") { tempb = "4" } else if(tempa == "|") { tempb = "5" } else if(tempa == "`") { tempb = "6" } else if(tempa == ":") { tempb = "7" } else if(tempa == ";") { tempb = "8" } else if(tempa == "=") { tempb = "9" } else if(tempa == ")") { tempb = "0" } else if(tempa == "R") { tempb = "~" } else if(tempa == "T") { tempb = "!" } else if(tempa == "F") { tempb = "@" } else if(tempa == "Y") { tempb = "#" } else if(tempa == "K") { tempb = "$" } else if(tempa == "J") { tempb = "%" } else if(tempa == "H") { tempb = "^" } else if(tempa == "G") { tempb = "&" } else if(tempa == "X") { tempb = "*" } else if(tempa == "V") { tempb = "_" } else if(tempa == "B") { tempb = "-" } else if(tempa == "M") { tempb = "+" } else if(tempa == "N") { tempb = "<" } else if(tempa == "U") { tempb = ">" } else if(tempa == "S") { tempb = "." } else if(tempa == "W") { tempb = "," } else if(tempa == ".") { tempb = "?" } else if(tempa == ",") { tempb = ":" } else if(tempa == "$") { tempb = ";" } else { tempb = tempa } xlation = document.form1.elements[5].value document.form1.elements[5].value = xlation + tempb } } Can anyone help me out in assigning more then one character? Multple characters work when going english to my custom assignments but it cant translate back from my custom assignments to english. Hey guys, I'm trying to call the following custom tag: <mvt:item name="category_tree" /> from a JS function: <script language="javascript" type="text/javascript"> <!-- function left_nav_bar () { document.write('Categories:'); document.write('<mvt:item name="category_tree" />'); } //--> </script> But the custom tag is not executing in the browser. Am I calling it wrong from my JS code? Hi, I am not a Javascript programmer and I am facing some barriers. Maybe some of you could help me. I would need a script that can be used to count down until any given date with hour, minutes and seconds. For example: Quote: September 10, 2009 16:02:00 Bob Kuspe I've been looking everywhere for a script that counts up from 1 to 10, but can't find anything. I even searched the forums. Basically just something that starts from 1 and then replaces itself with 2, and so on. Thanks! Hi I have been looking to create custom buttons in an alert box I would like them to say Go and Cancel instead of OK and cancel Code: onClick="if(confirm('Would you like to continue?')) Hi I have a table that sorts in jquery and I have one column that I would like to always remain the same while the other columns sort around it. What I want is for the order of the column to always be Great, Bad, Failure while every other column can be sorted and I don't want to the column to sort alphabetically. What is the easiert way for me to do this?
hey there, I have a problem when trying to set a different color for each button on my 4 blocks, matching the proper color. Here is my page http://holidays.area-italia.com I ve copy/paste the default art-button in the template.css file adding a " -red" suffix. I also made a new image with the red colors to match the active/hovered/pressed. Here is the code: Code: /* begin Button-red */ .art-button-wrapper-red a.art-button-red, .art-button-wrapper-red a.art-button-red:link, .art-button-wrapper-red input.art-button-red, .art-button-wrapper-red button.art-button-red { text-decoration: none; font-family: Verdana, Tahoma, Arial, Helvetica, Sans-Serif; font-size: 13px; position:relative; top:0; display: inline-block; vertical-align: middle; white-space: nowrap; text-align: center; color: #FFFFFF !important; width: auto; outline: none; border: none; background: none; line-height: 37px; height: 37px; margin: 0 !important; padding: 0 26px !important; overflow: visible; cursor: pointer; } .art-button-red img, .art-button-wrapper-red img { margin: 0; vertical-align: middle; } .art-button-wrapper-red { vertical-align: middle; display: inline-block; position: relative; height: 37px; overflow: hidden; white-space: nowrap; width: auto; margin: 0; padding: 0; z-index: 0; } .firefox2-red .art-button-wrapper-red { display: block; float: left; } input, select, textarea { vertical-align: middle; font-family: Verdana, Tahoma, Arial, Helvetica, Sans-Serif; font-size: 13px; } .art-block-red select { width:96%; } .art-button-wrapper-red.hover .art-button-red, .art-button-wrapper-red.hover a.art-button-red:link, .art-button-red:hover { color: #FFFFFF !important; text-decoration: none !important; } .art-button-wrapper-red.active .art-button-red, .art-button-wrapper-red.active a.art-button-red:link { color: #FCFCFD !important; } .art-button-wrapper-red .art-button-l-red, .art-button-wrapper-red .art-button-r-red { display: block; position: absolute; height: 121px; margin: 0; padding: 0; background-image: url('images/buttonr.png'); (I made a new image with the red colors) } .art-button-wrapper-red .art-button-l-red { left: 0; right: 14px; } .art-button-wrapper-red .art-button-r-red { width: 417px; right: 0; clip: rect(auto, auto, auto, 403px); } .art-button-wrapper-red.hover .art-button-l-red, .art-button-wrapper-red.hover .art-button-r-red { top: -42px; } .art-button-wrapper-red.active .art-button-l-red, .art-button-wrapper-red.active .art-button-r-red { top: -84px; } .art-button-wrapper-red input { float: none !important; } /* end Button-red */ Then I copy/paste the default code button in the index.php adding the "-red" suffix, into my red block: Code: <center> <span class="art-button-wrapper-red"> <span class="art-button-l-red"> </span> <span class="art-button-r-red"> </span> <a class="readon art-button-red" href="javascript:void(0)">More</a> </span> </center> Doing all the mentioned above doesnt work, it always shows the default button. I know there is a javascript which rules it but i dont know how to edit/add the function. Here is my part of the script.js related to the button: Code: /* begin Button */ function artButtonSetup(className) { jQuery.each(jQuery("a." + className + ", button." + className + ", input." + className), function(i, val) { var b = jQuery(val); if (!b.parent().hasClass('art-button-wrapper')) { if (!b.hasClass('art-button')) b.addClass('art-button'); jQuery("<span class='art-button-wrapper'><span class='art-button-l'> </span><span class='art-button-r'> </span></span>").insertBefore(b).append(b); if (b.hasClass('active')) b.parent().addClass('active'); } b.mouseover(function() { jQuery(this).parent().addClass("hover"); }); b.mouseout(function() { var b = jQuery(this); b.parent().removeClass("hover"); if (!b.hasClass('active')) b.parent().removeClass('active'); }); b.mousedown(function() { var b = jQuery(this); b.parent().removeClass("hover"); if (!b.hasClass('active')) b.parent().addClass('active'); }); b.mouseup(function() { var b = jQuery(this); if (!b.hasClass('active')) b.parent().removeClass('active'); }); }); } jQuery(function() { artButtonSetup("art-button"); }); /* end Button */ Anyone who can help out please? Many thanks. Hello, I am trying to make a custom select menu. Here is what I have so far: http://mikewgd.com/wp-content/portfo...custom-select/ Im just stuck at getting the <li> to become selected and etc... I am using this as reference: http://v2.easy-designs.net/articles/replaceSelect/ -- Im not using there script exactly Im doing it a different way. Im doing it more as a dropdown menu Code: <ul class="select"> <li class="selected"> cheese <ul class="drop"> <li>milk</li> <li>bread</li> <li class="selected">cheese</li> <li>pickles</li> <li>salsa</li> </ul> </li> </ul> I'm trying to understand how a custom object can call a function within itself. Say I have something like this: Code: function functiontest() { this.prop1 = '', this.prop2 = '', this.options = {initiallevels:0}, this.prop3 = '/blah', this.prop4 = true, this.function4 = function(x) { console.log(x) }, this.init = function(options) { this.uid=options.uid this.t=options.target document.getElementById(this.t).addEventListener('click',function(){this.uid.function4(this.t)},false) } } myfun1=new functiontest myfun1.init({uid:'myfun1',target:'target1'}) myfun2=new functiontest myfun2.init({uid:'myfun2',target:'target2'}) And the html: Code: <html> <head></head> <body> <div id="target1">T1</div> <br> <div id="target2">T2</div> </body> </html> I don't know what to put in the part in bold to set the click event listener and have it call function4 within the functiontest object. I've tried a bunch of different things and nothing worked. Please help, thanks! Hi all, The question is hopefully relatively simple. if I have an object say Code: [ var SampleObject = function(id){ SampleObject.id = id; SampleObject.age= 22; } Is there a way to create an event that triggers every time the age member value changes? Thanks Ollie. Hi, I want to build a custom calendar using javascript. On load of page for which date schedule are there, it should show dark black dot at left-top corner of particular date for current month. There are 3 button below the calendar as prev mnth,create schedule,next mnth. when prev is clicked it should works same as on load for previous month, similarly for next mnth. Pls help its urgent. Thanks I am working on a custom accordion. A type 2 accordion works but type 1 and 3 don't work. Does anyone know how to correct this syntax? Also, if you see any ways to make this code better, please post your fixes in this post Code: /* To use these, insert your content between a div tag. For example: <div id="2011" style="display: none"> This is the content in the accordion </div> You can have as many of these on the page as you wish but they all must have a different div tag. You will be creating a different button for each div tag. To make an item display on page load, change that div tag display from "none" to "inline". For the button that toggles the accordion: <a href="javascript:accordion('2011', '2', eventyear)">2011</a> Here is what all of these variables do: 1. Id of the div tag you want to toggle 2. The type of accordion you want 3. Only needed if it is a type 1 or 2 accordion, this refers to an array of all of the other div id's in the accordion. If you are using a type 1 or 2 array, create a array under the arrays comment of all of the div id's in your accordion. Types: 1 = One open at a time. Open and close 2 = One open at a time. Open no close 3 = No limit. Open and close. 3 doesn't use an array */ //Arrays; var eventyear=new Array("2011","2010","2009"); var months=new Array("January","February","March","April","May","June","July","August","September","October","November","December"); function accordion(click,type,array) { var click = document.getElementById(click); if ((click.style.display = "inline") && ((type == "1") || (type == "3"))) { click.style.display = "none"; } else if ((click.style.display = "none") && ((type == "1") || (type == "2"))) { var c; for(c in array) { document.getElementById(array[c]).style.display = "none"; } click.style.display = "inline"; } else if ((click.style.display = "none") && (type == "3")) { click.style.display = "inline"; }} http://becompleteamerica.com/index.p...tact&Itemid=80 It works awesome in all browsers but IE 7 & 8. The custom "alert" is actually a dialog box, with a background fader underneath it, kind of like lightbox. Any ideas why IE doesn't play nice? Thx Currently we have an implementation of Lightbox (not sure which version) on our site that aids in the process of a voting system. I wasn't around when it was created, and after creating a new version of the site, have no idea how to re-integrate it so I was hoping some seasoned JS people out there can help me. Now what happens is that people go to the voting page where the list is populated with entries from a mysql db. The names are clickable and, when clicked, a lightbox should show up with the information about the person and have a vote and close button. The vote button, when pressed, should tick a single vote back in the mysql db, and then take them to a "Thank you for voting, here are the current top 10" type page. That's the overall function. Here's what information I do have so far: In the root directory there's a folder named templates Inside of that, there's a folder called Lightbox inside of Lightbox, there are 3 folders [css, images, and js] The *.js folder has [builder.js, effects.js, lightbox.js, prototype.js and scriptaculous.js] inside When clicking on a name, however, it just takes me to the image as if it's directly linked instead of opening up the Lightbox. So I need some help getting this to work. Hi all. I'm developing After Effects scripts using their Extendscript language - essentially just Javascript with various extensions. I've defined a class, called ScriptSetting, which handles reading and writing of user settings to a prefs file. For example I create a ScriptSetting variable as follows: Code: var mySetting = new ScriptSetting("myScript", "thisSettingKey", 200); This calls the ScriptSetting constructor function: Code: function ScriptSetting(sectionName, keyName, defaultValue) { this.sectionName = sectionName; // Store the type of this setting for conversion later this.defaultType = defaultValue.constructor; // Convert any type to a string value for storing defaultValue = defaultValue.toString(); this.keyName = keyName; if(!app.settings.haveSetting(this.sectionName, this.keyName)) { this.value = defaultValue; this.saveSetting(); } else this.value = this.getSetting(); } This calls some of Extendscript's built-in functions, like app.settings.haveSetting() This all works fine - I can then later access mySetting's value with, for example alert(mySetting.value) since I've defined value as part of the class constructor function. However what I'd ideally like to do, if at all possible is to lose the .value part and just be able to access the setting value directly from the setting variable, so in this case alert(mySetting). At the moment, this will just return object Object. Naturally this is because mySetting is an instance of the ScriptSetting object. But I wondered if you can spoof this with a different type (i.e. Array or Number) when accessing it as part of a statement e.g. if(mySetting == 200) { // do something } but still retain all its prototyped methods, e.g. Code: mySetting = 300; mySetting.saveSetting(); Is this possible in Javascript? It's not a deal-breaker - I just want to make my code a bit more readable. Many thanks in advance, Christian |