|
JavaScript - Js Fails To Toggle Css Display Property When Parameters Used In Js Function
I wrote a script that creates 2 absolutely positioned divs, in perfect alignment, one on top of the other. I want to use javascript to manipulate the display property of each div to show one div at a time by toggling each div's display property between none and block with an onClick event handler attached to the link.
This script works fine when the javascript function has no parameters, because the div id's are inserted directly into the getElementById function. When I say it works, I mean the div with id=cal2 displays onload, then disappears when the Show Calendar link is clicked. The div that appears in its place has a link that does the reverse when clicked. I want to create multiple pairs of overlapping divs that toggle their visibility, so I want to put parameters inside the functions that identify the specific pair of divs that need to be toggled per function call. When I try to use variables/parameters in the functions to insert specific div id's into getElementById, it does not work. PLEASE NOTE, the code below has div id's in green that don't have quotes of any kind. It still works in my firefox browser. I thought id's needed quotes, but it works without. I don't know why. The code below works, but has no parameters in the functions: Code: <!DOCTYPE html>
<xhtml>
<head>
<title>Practice Calendar</title>
<style type="text/css">
.practicecalendar
{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
width: 18em;
background: #B3FF99;
text-align: center;
}
.practiceschedule
{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
width: 18em;
background: #99E6FF;
text-align: center;
}
</style>
<script type="text/javascript">
<!--
function showSchedule(){
document.getElementById('sch2').style.display = 'block';
document.getElementById('cal2').style.display = 'none';
}
function showCalendar(){
document.getElementById('cal2').style.display = 'block';
document.getElementById('sch2').style.display = 'none';
}
//-->
</script>
</head>
<body>
<div id= cal2 class='practicecalendar' style='
display: block;
'>
<p>Calendar</p>
<p><a href='' onClick='showSchedule(); return false'>Show Schedule</a></p>
</div>
<div id= sch2 class='practiceschedule' style='
display: none;
'>
<p>Schedule</p>
<p><a href='' onClick='showCalendar(); return false'>Show Calendar</a></p>
</div>
</body>
</xhtml>
When I add the information in red to the same script above, I get the script below that does not work. Code: <!DOCTYPE html>
<xhtml>
<head>
<title>Practice Calendar</title>
<style type="text/css">
.practicecalendar
{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
width: 18em;
background: #B3FF99;
text-align: center;
}
.practiceschedule
{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
width: 18em;
background: #99E6FF;
text-align: center;
}
</style>
<script type="text/javascript">
<!--
function showSchedule( sch,cal ){
document.getElementById( 'sch' ).style.display = 'block';
document.getElementById( 'cal' ).style.display = 'none';
}
function showCalendar( cal,sch ){
document.getElementById( 'cal' ).style.display = 'block';
document.getElementById( 'sch' ).style.display = 'none';
}
//-->
</script>
</head>
<body>
<div id= cal2 class='practicecalendar' style='
display: block;
'>
<p>Calendar</p>
<p><a href='' onClick='showSchedule( 'sch2','cal2' ); return false'>Show Schedule</a></p>
</div>
<div id= sch2 class='practiceschedule' style='
display: none;
'>
<p>Schedule</p>
<p><a href='' onClick='showCalendar( 'cal2','sch2' ); return false'>Show Calendar</a></p>
</div>
</body>
</xhtml>
When I remove the single quotes from the blue code , it does not work either. Code: <!DOCTYPE html>
<xhtml>
<head>
<title>Practice Calendar</title>
<style type="text/css">
.practicecalendar
{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
width: 18em;
background: #B3FF99;
text-align: center;
}
.practiceschedule
{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
width: 18em;
background: #99E6FF;
text-align: center;
}
</style>
<script type="text/javascript">
<!--
function showSchedule(sch,cal){
document.getElementById('sch').style.display = 'block';
document.getElementById('cal').style.display = 'none';
}
function showCalendar(cal,sch){
document.getElementById('cal').style.display = 'block';
document.getElementById('sch').style.display = 'none';
}
//-->
</script>
</head>
<body>
<div id=cal2 class='practicecalendar' style='
display: block;
'>
<p>Calendar</p>
<p><a href='' onClick='showSchedule( sch2,cal2 ); return false'>Show Schedule</a></p>
</div>
<div id=sch2 class='practiceschedule' style='
display: none;
'>
<p>Schedule</p>
<p><a href='' onClick='showCalendar( cal2,sch2 ); return false'>Show Calendar</a></p>
</div>
</body>
</xhtml>
Thanks for reading all of this. Does anyone know what I'm missing? Similar TutorialsHello, I'm a complete noobie to JavaScript so my apologies in advance if I'm asking something totally stupid. I'm trying to get a website up and running using WordPress. A particular plug-in for WP makes the site I'm building mobile-phone etc friendly - and I have a question regarding some JS that is part of the plug-in. Before people think badly of me, the licensing terms of the plug-in allow users to modify the code, but the suppliers will not respond for requests for help in doing so. I'm therefore having to see whether I can figure out how to do this myself. If I've understood correctly, the extract of code below will show/hide a search box when the user clicks on the search button on the menu page. However, I would like the search box to always be visible when the user visits the menu page (but not on any other pages). With the extract provided, could anybody tell me please, how to change the code to keep the search box permanently visible? With many thanks in advance Darren PS I've only selected what I think are the important lines of code - hope I've included enough .... Code: var touchJS = jQuery.noConflict();
/* Toggling the search bar from within the menu */
touchJS( 'a#tab-search' ).unbind( 'click' ).click( function() {
touchJS( '#search-bar' ).toggleClass( 'show-search' );
touchJS( this ).toggleClass( 'search-toggle-open' );
if ( touchJS( '#search-bar' ).hasClass( 'show-search' ) ) {
touchJS( 'input#search-input' ).focus();
} else{
touchJS( 'input#search-input' ).blur();
}
return false;
});
I wanted to toggle text by using a JavaScript. I used the following script: Code: function toggle_visibility(id) {
var e = document.getElementById(id);
e.style.display = ((e.style.display!='none') ? 'none' : 'block');
}
and Code: <a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>
for every element I wanted to hide by clicking the text. It works fine, but the content of the div is already displayed when loading the page itself. I want it to be hidden first, and only visible when you blick the text. Is this possible? I am to make a showresults function, purpose is for results 4 parameters are in function, race, name,party and votes i then declare variable named totalV equal to value of returned by the totalVotes() function useing votes as parameter value then write HTML code to document this is the code I came up with Code: function showResults(race,name,party,votes)
{ // script element to display the results of a particular race
var totalV = totalVotes(votes);
document.write("<h2>" + race + "</h2>");
document.write("<table cellspacing='0'>");
document.write("<tr>");
document.write("<th>Candidate</th>");
document.write("<th class ='num'>Votes</th>");
document.write("<th class='num'>%</th>");
document.write("</tr>");
}
How does this look so far? Hi, I am making a function that executes code as AJAX readyState's are returned... If readyState = 3 then I running code through eval but I want to be able to run functions with parameters, within the parameter that is evetually executed by the eval Heres abit of pseudo code of what I am talking about Code: function receiveRequest(whileLoading, whenDone) {
// AJAX stuff... blah... blah... blah...
if request is being processed:
eval(whileLoading)
if request is done:
eval(whenDone)
}
// When a button is clicked:
onClick="receiveRequest('alert('loading')', 'alert('finished AJAX request')')"
But this doesn't work because I am escaping the first parameter of 'receiveRequest' in the alert() but if I use double quote (") I will be escaping the event handler Is there anyway to get around this / or a better way to fix it? I haven't used Javascript in agggeeesss and I can barely remember anything anymore - PHP <3 Thanks in advanced. Hey there, I started learning Javascript about five weeks ago when I started my University course, and I have been doing above averagely in the little mini-tests, but now I am on coursework I have been having trouble getting past the most simple thing, and I can't help think that I'm just approaching the issue from the wrong angle in my head. I'm not asking to be spoon-fed the answers from veteran coders or cheating because that just defeats the point of learning. In fact I actively discourage anyone from posting a direct answer to this question. However I would like some assistance in the kind of thinking that would help me in term of creating a function like this; Name of function and parameters: index(string,pattern,caseSensitive) "Where pattern starts in string (or -1 if it is not found), return the index. The search needs to be case sensitive if the third parameter is true else it is case insensitive." (Where underlined and italics are parameter names) I know how to create functions in general, however I cannot get my head around the fact that the parameters are supposed to represent something, and it is required for me to program something without knowing what the parameters represent. I know it's simple and I'm probably thinking about it the wrong way. If anyone could assist me I would be grateful. On my site I'm using an external (big) javascript file, in this external file there is a function with the following line in it: Code:
function showslide(){
return(currentSlide);
}
In my main html file the external javascript file is loaded within the head section. This external file does a lot of other stuff besides returning a number. Now here is my problem.. Somewhere in my html file I need to call the showslide function. I tried doing that with this: Code: <script language ="Javascript" src="upload/3weg_slider.js"> document.write(showslide()); </script> But it doesn't return anything, when I place an alert line within the function it doesn't show up either. What am I doing wrong here? Hi Guys, I have a Javascript function that toggles a 'show/hide' table row: //CONTROL Code: <a href="#" onclick="toggle('ROW 1, this)"><img src="../../Images/plus.gif" border="0" /></a>
//JAVASCRIPT Code: function toggle(id, obj) {
var matchingElements = new Array();
if (document.getElementsByClassName) {
matchingElements = document.getElementsByClassName(id);
} else {
var elements = document.getElementsByTagName("tr");
for (i = 0; i < elements.length; i++) {
if (elements[i].className == id) {
matchingElements[matchingElements.length] = elements[i];
}
}
}
for (i = 0; i < matchingElements.length; i++) {
toggleDisplay(matchingElements[i], obj);
}
}
function toggleDisplay(element, obj) {
if (element.style.display == "none") {
element.style.display = "block";
obj.innerHTML = "<img src=\"../../Images/minus.gif\" border=\"0\">";
} else {
element.style.display = "none";
obj.innerHTML = "<img src=\"../../Images/plus.gif\" border=\"0\">";
}
}
Which works fine, but what I need is something like this: Control 1: Toggle - ROW 1 (+ Close ROW 2 (if visible)) Control 2: Toggle - ROW 2 Is this a Javascript or PHP issue? I'm probably missing something simple here. I have this function called display: function display(name3,office3,officePH3,mobile3,email3) { document.getElementById('viewer').src=('Location_Files/')+(office3)+('.htm') } It's supposed to take 5 values and do various things with them. When I only had one parameter it worked fine, it took an office number which was the value of a listbox option and turned it into a path and then pointed an iframe to that path. Then I changed it so the value of the listbox option was 5 parameters separated by commas. Here's the listbox now: <select onchange="display(this.value)" multiple="multiple" id="People" name="People" style="border-style: none; height:260px; width:220px;"> <option value="test name,1656,phone,NONE,email">Loading</option> </select> You can see display is executed as "display(this.value)" so in theory it should take "test name,1656,phone,NONE,email" as its parameters and it should accept 1656 as the "office3" parameter. For some reason it's not working out that way, the function executes and the iframe changes but I get an unable to display webpage message like the path is broken. Can anyone see what I'm doing wrong? Image of the output: http://i.imgur.com/jqzhJxb.png What I'm trying to do, is pass an object by reference so that I can use it in other scripts, and allow the current script to change the object's value when appropriate. What's happening: It passes correctly, you can see that my var_dump of the object before the function call is 30. After the function call, it becomes 60. Also, it writes "now60" to the document as instructed. When I call the function the second time, it does nothing. No error, no repeat of writing now60 to the document, etc. And in the last var_dump, which is after the second function call - you can see that the value remained 60. Why? Thanks for your help! Code: PHP Code: var quickChallengeTimer = {timer:30}; var quickChallengeQuestion; var quickChallengeAnswer; var quickChallengeResponse; function quickChallenge(quickChallengeTimerfunc, quickChallengeQuestion, quickChallengeAnswer) { if (typeof quickChallengeResponse == 'undefined') { switch (quickChallengeTimerfunc.timer) { case 30: quickChallengeTimerfunc.timer = 60; quickChallengeResponse = 'undefined'; document.write("now60"); break; case 60: quickChallengeTimerfunc.timer = 120; quickChallengeResponse = 'undefined'; document.write("now120"); break; default: document.write("Error"); break; } } console.dir(quickChallengeTimerfunc.timer); } var_dump(quickChallengeTimer); quickChallenge(quickChallengeTimer); var_dump(quickChallengeTimer); quickChallenge(quickChallengeTimer); var_dump(quickChallengeTimer); I have a page: http://www.girlscoutsmoheartland.org...progsearch.php that works perfectly fine in every browser I try, except for actual IE7 (it even works fine in IE8 emulating IE7). When you search for something on that page and have a display of results, each result has a link that changes a table row's display to visible, and hides the row when clicked again. It doesn't do that in IE7. There are no errors or warning in Firefox's Error Console. But IE7 has an "Error on Page" notice (which does NOT appear in IE8 emulating IE7), that says: Line: 59 Char: 11 Error: Could not get the display property. Invalid argument. The script in question is this, with what would be line 59 indicated: Code: <script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
var f = document.getElementById(id + "b");
if(e.style.display == 'table-row')
e.style.display = 'none';
else
e.style.display = 'table-row'; <<-- This is line 59
if(f.style.display == 'table-row')
f.style.display = 'none';
else
f.style.display = 'table-row';
}
//-->
</script>
I really don't know what to do, or where to begin. Everything in my limited knowledge seems to be working just fine. Most of my site's visitors use IE8, but enough use actual IE7 that I really need to fix this. Thanks for any help or advice! Liam Javascript: Code: function hoverMenu(listItem, menuName)
{
if (document.getElementById(menuName).isActive == "1")
{
var listItemHeight = document.getElementById(listItem).offsetHeight;
var itemTop = document.getElementById(listItem).offsetTop;
var itemLeft = document.getElementById(listItem).offsetLeft;
document.getElementById(menuName).style.top = itemTop + listItemHeight + "px";
document.getElementById(menuName).style.left = itemLeft + "px";
document.getElementById(menuName).style.display = "block";
document.getElementById(menuName).style.opacity = "1.0";
document.getElementById(menuName).isActive = "0";
}
else
{
var listItemHeight = document.getElementById(listItem).offsetHeight;
var itemTop = document.getElementById(listItem).offsetTop;
var itemLeft = document.getElementById(listItem).offsetLeft;
document.getElementById(menuName).style.top = itemTop + listItemHeight + "px";
document.getElementById(menuName).style.left = itemLeft + "px";
document.getElementById(menuName).style.display = "block";
menuFade(menuName);
document.getElementById(menuName).isActive = "0";
}
}
function hoverMenuTier2(listItem, menuName)
{
if (document.getElementById(menuName).isActive == "1")
{
var itemTop = document.getElementById(listItem).offsetTop;
var itemLeft = document.getElementById(listItem).offsetLeft;
document.getElementById(menuName).style.top = itemTop + "px";
document.getElementById(menuName).style.left = itemLeft + "px";
document.getElementById(menuName).style.display = "block";
document.getElementById(menuName).style.opacity = "1.0";
document.getElementById(menuName).isActive = "0";
}
else
{
var itemTop = document.getElementById(listItem).offsetTop;
var itemLeft = document.getElementById(listItem).offsetLeft;
document.getElementById(menuName).style.top = itemTop + "px";
document.getElementById(menuName).style.left = itemLeft + "px";
document.getElementById(menuName).style.display = "block";
menuFade(menuName);
document.getElementById(menuName).isActive = "0";
}
}
function hideThis(menuName)
{
document.getElementById(menuName).style.display = "none";
document.getElementById(menuName).style.opacity = "0";
}
function showMenu(menuName)
{
document.getElementById(menuName).style.display = "block";
document.getElementById(menuName).style.opacity = "1.0";
document.getElementById(menuName).isActive = "1";
}
HTML: Code: <div id='db-sub' class='ddm-db' onmouseover="showMenu('db-sub');" onmouseout="hideThis('db-sub');">
<ul>
<a href='#'><li id='dba' class='sub'>1</li></a>
<a href='#'><li class='sub'>2</li></a>
<a href='#'><li class='sub'>3</li></a>
<a href='#'><li class='sub'>4</li></a>
<a href='#'><li class='sub'>5</li></a>
<a href='#'><li class='sub'>6</li></a>
<a href='#'><li class='sub'>7</li></a>
<a href='#'><li class='sub'>8</li></a>
<a href='#'><li id='dbq' onmouseover="hoverMenuTier2('dbq', 'dbq-sub');" onmouseout="hideThis('dbq-sub');" class='submenuArrow'>9</li></a>
<a href='#'><li class='sub'>10</li></a>
<a href='#'><li class='sub'>11</li></a>
<a href='#'><li class='sub'>12</li></a>
<a href='#'><li class='sub'>13</li></a>
</ul>
</div>
The remaining HTML for the the 'dqb-sub' element that is displayed follows an identical format to 'db-sub'. Mousing over the upper elements produces a drop-down menu that is aligned with the position of the top-most element in question. Mousing over the 'dbq' element produces the element 'dbq-sub' at the (0,0) position of the window, which is my issue. I believe it has to do with the fact that I'm setting the display property to 'none', which essentially destroys the element, along with its properties. What doesn't make sense is that while the 'db-sub' element is set to a block display type, it should have valid, non-zero offsets. I'd like the 'dbq-sub' element to position based on where the 'dbq' element is. Any ideas? Hello, I'm hoping someone can help me with this. I have 3 pages that I need to put into my framework, they are products, shopping cart and billing. At the moment they work perfectly fine. Here is a live example - http://www.cems.uwe.ac.uk/~r4-george...g/products.php Now, I have a framework for a whole website that I need to put these pages into. (http://www.cems.uwe.ac.uk/~r4-george/wp4/index.php) The index uses a switch statement to go between pages. Here is the index.php PHP Code: <?php # index.php /* * This is the main page. * This page includes the configuration file, * the templates, and any content-specific modules. */ // Require the configuration file before any PHP code: require_once ('./modules/config.inc.php'); // Validate what page to show: if (isset($_GET['p'])) { $p = $_GET['p']; } elseif (isset($_POST['p'])) { // Forms $p = $_POST['p']; } else { $p = NULL; } // Determine what page to display: switch ($p) { case 'about': $page = 'about.inc.php'; $page_title = 'About This Site Again'; break; case 'products': $page = 'products.inc.php'; $page_title = 'Products on this site'; break; case 'this': $page = 'this.inc.php'; $page_title = 'This is Another Page.'; break; case 'that': $page = 'that.inc.php'; $page_title = 'That is Also a Page.'; break; case 'contact': $page = 'contact.inc.php'; $page_title = 'Contact Us'; break; case 'search': $page = 'search.inc.php'; $page_title = 'Search Results'; break; // Default is to include the main page. default: $page = 'main.inc.php'; $page_title = 'Site Home Page'; break; } // End of main switch. // Make sure the file exists: if (!file_exists('./modules/' . $page)) { $page = 'main.inc.php'; $page_title = 'Site Home Page'; } // Include the header file: include_once ('./includes/header.inc'); echo "<div id=\"content\">"; // Include the content-specific module: // $page is determined from the above switch. include ('./modules/' . $page); // Include the footer file to complete the template: include_once ('./includes/footer.inc'); ?> It uses the .inc.php files located in the modules folder to switch between pages. Here is my products.inc.php - PHP Code: <? include("includes/db.php"); include("includes/functions.php"); if($_REQUEST['command']=='add' && $_REQUEST['productid']>0){ $pid=$_REQUEST['productid']; addtocart($pid,1); header("location:shoppingcart.php"); exit(); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Products</title> <script language="javascript"> function addtocart(pid){ document.form1.productid.value=pid; document.form1.command.value='add'; document.form1.submit(); } </script> </head> <body> <form name="form1"> <input type="hidden" name="productid" /> <input type="hidden" name="command" /> </form> <div align="center"> <h1 align="center">Products</h1> <table border="0" cellpadding="2px" width="600px"> <? $result=mysql_query("select * from products"); while($row=mysql_fetch_array($result)){ ?> <tr> <td><img src="<?=$row['picture']?>" /></td> <td> <b><?=$row['name']?></b><br /> <?=$row['description']?><br /> Price:<big style="color:green"> £<?=$row['price']?></big><br /><br /> <input type="button" value="Add to Cart" onclick="addtocart(<?=$row['serial']?>)" /> </td> </tr> <tr><td colspan="2"><hr size="1" /></td> <? } ?> </table> </div> </body> </html> This is EXACTLY the same code as the working example. The products get listed correctly but the problem I have is the 'Add to Cart' button fails to work. Live example - http://www.cems.uwe.ac.uk/~r4-george...php?p=products Everything is in the right directory. When I inspect the 'Add to Cart' button in chrome I get the following - Quote: Uncaught TypeError: Cannot set property 'value' of undefined addtocart index.php:51 (anonymous function)index.php:83 onclick Any help is really appreciated, I'm struggling to see what I have done wrong. I don't know whether it's a Javascript problem. If you need any of the code from other pages I can post it too. Thanks in advance. Hi there! Okay, here is my scenario: I have a link and a div on a webpage. With the link I want to toggle the content (HTML) of the div. On toggle, I want to load the content from a PHP-file and I want it to load on the toggle, not when the webpage originally loaded (to reduce loading time on the webpage itself). The file that is loaded on toggle doesn't have to be PHP, but it would help a lot. Does anybody know of a example of this or something similar to it? I have been looking for some time now, without any luck unfortunately. Highly appreciate any help/answers/feedback! How do I get a function in the head to turn on or show an image in the body area? I am a struggling noob, but tutorials will not teach me. If I wanted to document.write, or in this case use an alert box, I would not have a question. I feel I understand the functions below, but these are not real world examples of anything, at least that I would ever use. I don't know how to help myself. But I do know, I need to get the part of alert("Hello") changed into something somehow the image will act on, see and display after the 3 second delay. This is the website I got this code from. http://www.w3schools.com/js/js_timing.asp If I can see how to get a function to really do something, would be a big help for me in understanding JS. This is not a school project, my school doesn't offer any programming. I have been at this all day trying to find a tutorial that would help me. Thanks so much for your help. Code: <html>
<head>
<script type="text/javascript">
function timeMsg()
{
var t=setTimeout("alertMsg()",3000);
}
function alertMsg()
{
alert("Hello"); Somehow this has to show my image.
}
</script>
</head>
<body">
<form>
<input type="button"
value="show my Image"
onClick="timeMsg()" />
</form>
<img />
</body>
</html>
Hello! I am working on creating a basic calorie calculator with Javascript and my code is not showing the results after the user makes their selections. I've created a simple function to obtain the user's weight, activity and duration info but when I use the GetElementById to retrieve the result, it does not show up. Any help would be much appreciated to make this work. Thanks. Code: <head>
<script type="text/javascript">
var myActivity = new Array();
myActivity[100] = "6.670";
myActivity[200] = "3.811";
myActivity[300] = "3.343";
myActivity[400] = "3.343";
myActivity[500] = "3.343";
myActivity[600] = "4.765";
myActivity[700] = "4.765"
function CalorieBurner() {
//user prompt
var caloriesBurned;
var myForm = document.form;
//processing
var caloriesBurned = (myForm.duration[formElement.value] * (myActivity[formElement.value] * 3.5 * myForm.weight[formElement.value])/200);
FormElement = myForm.activity[myForm.activity.selectedIndex];
document.getElementById("caloriesBurned").innerHTML = "You will burn " + caloriesBurned + "calories doing " + myForm.duration[formElement.value] + "minutes of " + FormElement.text;
}
</script>
</head>
<body>
<form name="form">
Enter your weight: <input type="text" name="weight" />
<br /><br />
Select an activity:
<br />
<select name="activity">
<option value="100"> Backpacking, Hiking with pack </option>
<option value="200"> Bagging grass, leaves </option>
<option value="300"> Bathing dog </option>
<option value="400"> Carpentry, general</option>
<option value="500"> Carrying infant, level ground </option>
<option value="600"> Carrying infant, upstairs </option>
<option value="700"> Children's games, hopscotch... </option>
</select>
<br /><br /><br />
Enter the duration of your activity (in minutes): <input type="text" name="duration" />
</form>
<br /><br /><br />
<input type="button" value="Results" name="btnUpdate" onClick="CalorieBurner()"/>
<br /><br /><br />
<div id="caloriesBurned"></div>
</body>
</html>
So I want this function to return the date in the format: 4-Jan-2011. I feel like I have to make the variables strings or something but I can't figure it out, I'm kinda new to javascript. Code: function calander(TheDay) {
var theDate = new Date();
var day = new theDate.getDay();
var month = new theDate.getMonth();
var year = new theDate.getFullYear();
if (month == 0) {month = "Jan";}if (month == 1) { month = "Feb"; }
if (month == 2) { month = "March"; }if (month == 3) { month = "April"; }
if (month == 4) { month = "May"; }if (month == 5) { month = "June"; }
if (month == 6) { month = "July"; }if (month == 7) { month = "Aug"; }
if (month == 8) { month = "Sept"; }if (month == 9) { month = "Oct"; }
if (month == 10) { month = "Nov"; }if (month == 11) { month = "Dec"; }
TheDay.value = day + "-" + month + "-" + year;
}
Hey guys, I'm trying to make a function that will display certain elements when a paragraph is clicked. As of right now, the function is called, and only the first line gets executed properly. The rest don't work. $postCount is a counter variable setup by a for loop that it is in. When I view source, it is working properly. Code: function newComment".$postCount."()
{
document.getElementById('postComment$postCount').style.display = 'none';
document.getElementById('newCommentProfilePicture$postCount').style.display = '';
document.getElementById('commentBox$postCount').style.display = '';
document.getElementById('submitComment$postCount').style.display = '';
document.getElementById('addCommentContainer$postCount').style.display = '';
document.getElementById('commentBox$postCount').rows = '3';
}
PHP Code: echo "<div class='viewComment' id='viewCommentButton".$postCount."'> <div class='leftCommentControl'>"; if ($numComments > 0) { echo "<p class='viewCommentLink' id='viewCommentLink".$postCount."' onclick='showComment".$postCount."()' onmouseover=\"this.style.textDecoration='underline'; this.style.cursor='pointer'\" onmouseout=this.style.textDecoration='none'> View ".$numComments." Hidden Comments!</p>"; } echo "</div> <div class='rightCommentControl'> <p class='postComment' id='postComment".$postCount."' onclick='newComment".$postCount."()' onmouseover=\"this.style.textDecoration='underline'; this.style.cursor='pointer'\" onmouseout=this.style.textDecoration='none'>Add Comment</p> </div> </div> <div class='addCommentContainer' id='addCommentContainer".$postCount."' style='display: none'> <form action='processComment.php?userid=".$_SESSION['userid']."&postid=".$row['postid']."&sentFrom=$currentPage' method='POST'> <img class='newCommentProfilePicture id='newCommentProfilePicture".$postCount."' src='uploadPic/mini".$_SESSION['picture']."' style='display: none'></img> <textarea id='commentBox".$postCount."' class='commentTextArea' name='commentBox' rows='1' cols='49' onfocus='newComment".$postCount."()'></textarea> <input type='submit' class='button' id='submitComment".$postCount."' name='submit' ALT='Submit button' value='Comment' style='display: none'> </form> </div> </div> </div>"; Hi, I am a newbie in JS, and have already been stuck with this problem for the whole day. Basically I want to display a var returned from a function with <fmt:message/> tag. It sounds easy, but somehow I just can't get it to be display correctly (Tried with alert() and it worked). Here is my code: ------------------------------------------------------------------------------------------- <script> function ReturnTime() { var dateobj=new Date(); if (dateobj.getSeconds()%30==0) { return dateobj.getSeconds(); } else { return dateobj.getSeconds(); } } time1 = ShowTime(); alert(time1); </script> <fmt:message key='content.currentTime'/>: <cut value="${time1}"/> ------------------------------------------------------------------------------------------------------------------------- I might have done some stupid things here. But I am very new to JS (2 days of experience so far). So please be patient. Your kind help will be very much appreciated. Regards, Robert Hi, I am just a noob and this is my first go at javascript and html I am trying to figure out how to display info from an array in the <textarea>, I have tried a number of things nothings worked and I know it must be something simply but have tried a number of things I also have to clear the <textarea> after it displays the info mentioned above and I think I have that sorted but I also have to have the <textarea> display all signup info stored in the array when a user clicks on a button Here's the code Code: function show()
{
var myArray = new Array();
myArray[0] = document.getElementById('fullname').value; myArray[1] = document.getElementById('Address').value; myArray[2] = document.getElementById('Phone').value;
document.writeln('Thank you for signingup,' + ' ' + myArray[0] + '. Your details will be confirmed by E-mail to ' + myArray[2] );
document.writeln("<br>")
document.writeln('Details:')
document.writeln("<br>")
for (var i=0; i<myArray.length; i++)
{document.write(myArray[i] + "<br />"); }
}
Thanks I would like to add a Lightbox like image display function to TinyMCE. What is a good approach in the regard, integration or extension? Thank for your input in advance. |
|||||||