Search the Community
Showing results for tags 'javascript js'.
Found 2 results
-
That is my js for my tabs and as the title article entails i want the current tab to be active even after reload. for example my webpage has 12 tabs for each month (January, february ... etc) and as for the tab content there is a form, table and save button. say i go to the february tab and fill in the form and then click save, i want it to still stay on the feb tab page instead of reverting back to january tab page which is what it does now. how do i achieve this?? var tabLinks = new Array(); var contentDivs = new Array(); function init() { // Grab the tab links and content divs from the page var tabListItems = document.getElementById('tabs').childNodes; for ( var i = 0; i < tabListItems.length; i++ ) { if ( tabListItems[i].nodeName == "LI" ) { var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' ); var id = getHash( tabLink.getAttribute('href') ); tabLinks[id] = tabLink; contentDivs[id] = document.getElementById( id ); } } // Assign onclick events to the tab links, and // highlight the first tab var i = 0; for ( var id in tabLinks ) { tabLinks[id].onclick = showTab; tabLinks[id].onfocus = function() { this.blur() }; if ( i == 0 ) tabLinks[id].className = 'selected'; i++; } // Hide all content divs except the first var i = 0; for ( var id in contentDivs ) { if ( i != 0 ) contentDivs[id].className = 'tabContent hide'; i++; } } function showTab() { var selectedId = getHash( this.getAttribute('href') ); // Highlight the selected tab, and dim all others. // Also show the selected content div, and hide all others. for ( var id in contentDivs ) { if ( id == selectedId ) { tabLinks[id].className = 'selected'; contentDivs[id].className = 'tabContent'; } else { tabLinks[id].className = ''; contentDivs[id].className = 'tabContent hide'; } } // Stop the browser following the link return false; } function getFirstChildWithTagName( element, tagName ) { for ( var i = 0; i < element.childNodes.length; i++ ) { if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i]; } } function getHash( url ) { var hashPos = url.lastIndexOf ( '#' ); return url.substring( hashPos + 1 ); } this is a sample of my html tab code: <ul id="tabs"> <li><a href="#jan">January</a></li> <li><a href="#feb">February</a></li> <li><a href="#march">March</a></li> </ul> <div class="tabContent" id="jan"> <form method="post" action="income.php"> <table border="1" rules="groups" cellpadding="10px;" class="tableincome"> <thead> <th>Monthly Salary</th> <th></th> <th>RM</th> </thead> <tr> <td>Basic Salary</td> <td></td> <td><center><input type="text" name="basic" size="11" placeholder="0" value="<?php if(isset($_POST['basic'])){echo htmlentities($_POST['basic']);} ?>"></center></td> </tr> </table> <input type="submit" value="Save" class="jansave" name="jansave"> </div> thanks in advance!
-
I am using a countdown timer I've found in google, I just modify some line of codes to make the timer to count up instead of counting down and I want it to not reset if the page is refresh or the browser is restart. From what I know I need to use cookies for this but I don't know how to incorporate it to my code. Here's the code. <html> <html> <head> <title>Timer</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <body> <span id="countup">00:00:00</span> </body> </html> <script type="text/javascript"> (function(){ $(document).ready(function() { var time = "00:00:00", parts = time.split(':'), hours = +parts[0], minutes = +parts[1], seconds = +parts[2], span = $('#countup'); function correctNum(num) { return (num<10)? ("0"+num):num; } var timer = setInterval(function(){ seconds++; if(seconds > 59) { minutes++; seconds = 0; if(minutes > 59) { hours++; seconds = 0; minutes = 0; if(hours >= 24) { alert("timer finished"); } } } span.text(correctNum(hours) + ":" + correctNum(minutes) + ":" + correctNum(seconds)); }, 1000); }); })() </script>
