JavaScript - I M Newbie To Programming World Kindly Help Grey Out Certain Divs Using Javascript

Friend i concern with some that man told me , JavaScript programming is the best effective for website development. so how it is tell me ?

I need to know two things.

How do you position an alert or prompt to anywhere on the screen.

How do you change the font for the alert or prompt (i.e Hebrew)

Thanks in advance

D.A.

I have to take more javascript programming classes and I'm really not good at it. I desperately need help. I own Visual Basic, but it's a little difficult to use. What is the best book, online resource, and software for programming in javascript?

Hi,
Please i am confuse to know the work of this sign (!)...which is exclamation sign in programming.

i have this code here which which i remove the exclamation sign (!)..it dont work but when i add it ,then it work.
Here is the code
<script type="text/javascript">
function getvalue()
{
var mytextfield=document.getElementById("mytext");
if(mytextfield.value!="")
{
alert("You Entered:"+mytextfield.value)
}
else{
alert("would you enter some text")
}
}
</script>
<input type="text" id="mytext" size="30">
<input type="button" value="check" onclick="getvalue()">

Please help me to understand the use of this sign !.

Thank you.
Clement Osei.

i am trying to create a simple counter that will start with a fixed number, say 5,000,000 and count up in increments of 1 every ten seconds with no end value set (infinitely).. This is for the non-profit I work for, and it is to show the number of bars of soap we have recycled to distribute to third world countries. Any help is greatly appreciated.

Hello, everyone i have a mini problem on my hands. I wrote a javascript file, which was linked to a html file. The issue here is that i cannot seem to load my table of contents. i have checked my syntax countless times and my compiler shows no error message. i hope anyone of you out there could help me out. thanks!

here are the codes:

unsconttxt.htm -


<?xml version="1.0" encoding="UTF-8" ?>

toctxt.js -


/*

Author:
Date:

Filename: toctxt.js

function addEvent(object, evName, fnName, cap) {
if (object.attachEvent)
object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);
}

addEvent(window, "load", makeTOC, false); //the code to run makeTOC() function when the page loads

var sections = new Array("h1", "h2", "h3", "h4", "h5", "h6"); //list of elements that act as section headings
var sourceDoc; //document on which the TOC is based

function makeTOC()
{
var TOC = document.getElementById("toc"); //html codes added to the TOC object.
TOC.innerHTML = "<h1>Table of Contents</h1>";
var TOCList = document.createElement("ol"); //creates an element node for the ol element
TOC.appendChild(TOCList); //appends the ol element to the table of contents element

sourceDOC = document.getElementById("doc");

//generate list items containing section headings
createList(sourceDoc, TOCList);
}

function levelNum(node) //this function returns the level number of the section heading or -1 if not a section heading.
{
for (var i = 0; i < sections.length; i++)
{
if (node.nodeName == sections[i].toUpperCase())return i;
}
return -1 //node is not a section heading
}

function createList(object, list) //this function creates the list items for the table of contents
{
for (var n = object.firstCHild; n != null; n = n.nextsibling)
{
//loop through all of the nodes within the object

var nodeLevel = levelNum(n); //locates section headings within an object
if (nodeLevel != -1) //locates section headings within an object
{
//node represents a section heading
//creates a list item to match
var listItem = document.createElement("li"); //text of the list item comes from the text of the section heading
listItem.innerHTML = n.innerHTML; //text of the list item comes from the text of the section heading
list.appendChild(listItem); //text of the list item comes from the text of the section heading
}
}
}

I am very new to JavaScript and am trying to create a page that calculate net annual pay and pops up an alert box that states what they will take home as well as pay in taxes. I have figured my way out of created the boxes to enter fields and even got a calculate button. I cannot figure out the code the actually calculate the taxes!

Field one is for first name and referenced by id: num1
Field two is for last name and referenced by id: num2
Field three is enter gross salary with id: num3

I am using 20% for federal taxes and 10% for state taxes and need it to show up in an alert box... Any ideas? Thanks!

Hello I am totally new to javascript and am overwhelmed with this problem. I have tried a few different things but can't figure it out.

I am trying to create a calculation of a total amount based on some fields.

Here is what i am trying to do:

I have five materials: Flex Vinyl, PSV, Rigid PSV, Vinyl Mesh, and Vinyl Banners

Each material has a cost based on a total sq foot.

Then two dropdown fields that add a certain amount.

Here is what I have so far:

Material [DROPDOWN MENU]
Width [TEXT FIELD] Height [TEXT FIELD]
Grommets [DROPDOWN] UV Coating [DROPDOWN]
Total $ [TEXT FIELD AUTO-FILL AMOUNT]

Is there a place that I can read about how to figure this out?

I believe it would be something like:


Width x Height = Total

If Material One is selected then below numbers:
If Total is greater than 1200 then Cost = .85
If Total is between 200 and 1200 then Cost = .50
If Total is between 20 and 49 then Cost = 1.00
If Less than 20 then Cost = 2.50

If PSV is selected then below numbers:
If Total is greater than 1200 then Cost = .90
if Total is between 50 and 1200 then Cost = .75
....and so on

Amount = Cost x Width x Height + Grommets Selected Value + UV Coating Selected Value


Any suggested reading/help that I can do to create this form?

Hi everyone,

I'm currently stuck with a transition problem in my javascript (actually it's not mine) but since it's a little tricky to explain I've uploaded the page to a friend website so you can take a look at it.


http://www.tanzstelle.net/simon/coel...red/index.html


So when you hover between the link "car1" and "car2" the fading animation is absolutely correct but as soon as you hover lets say between "car2" and "car3" you'll see how during the transition "car1" shows up for a second - which is imho very annoying. Does anyone know how to tell js not to use "car1" between other transitions? I'm absolutely open to any new ideas but please remember I'm really a javascript/css newbie. Thank you.

simon

Hi guys,

Started studying HTML , but having a bit of a problem creating <table>s.

My instruction is to :"format the row in the table so that they alternate from white to grey. Within the grey rows format the text to white, Withing the white rows, format the text to black.
I created a table for this in a previous exercise which I'll paste in the bottom. If I understand correctly, I need to use the table's <tr> element, but I don't know how it should be formatted. Any suggestions would be greatly appreciated.

Here is what I got so far;

<form action="" name="newsHeadlines">
<table border="0" width="100%">
<tr valign="top">
<td>
<select name="headline" multiple="multiple" style="height: 93px">
<option onclick="document.newsHeadlines.news.value=newsItem1">
Investigation of building standards in quake zone
</option>

<option onclick="document.newsHeadlines.news.value=newsItem2">
Obama sees signs of economic progress
</option>

<option onclick="document.newsHeadlines.news.value=newsItem3">
Apple aplication downloads approach 1 Billion
</option>

<option onclick="document.newsHeadlines.news.value=newsItem4">
Jones, Braves beat winless Nationals 8-5
</option>

<option onclick="document.newsHeadlines.news.value=newsItem5">
America's uninsured haven't shown collective power
</option>
</select>
</td>
<td>
<textarea name="news" cols="50" rows="10" style="background-color : Transparent"></textarea>
</td>
</tr>
</table>

<script type="text/javascript">
/* <![CDATA[ */
/8 ]]> */

var newsItem1 = "Example1";
var newsItem2 = "Example2";
var newsItem3 = "Example3";
var newsItem4 = "Example4";
var newsItem5 = "Example5";



</script>

</form>

I have been told that what I want to accomplish can be done with javascript. I have never used it, so I am at this forums mercy. I basically have to HTML inputs, the first are simple radio buttons, Yes and No. If no is checked (which is selected by default), then I want the 2nd input to be invisible to the user. Unfortunately I am not the original developer of the code. I have been asked to complete this in a very short amount of time. From the looks of the code, it looks like the condition will have to hide the entire table row with the id of 'voiceintrorow' if radio button 'playintro' with the value of 0 is checked. Here is my code.


<tr id="playIntroRow">
<td class="editLabel"><span>*</span>Play Intro:</td>
<td>Yes<input type="radio" name="playintro" value="1" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;No<input type="radio" name="playintro" value="0" checked /></td>
</tr>

//Hide this table row if the above radio button is checked NO
<tr id="voiceIntroRow">
<td class="editLabel"><span>*</span>Intro Message:</td>
<td><cfscript>voiceIntroRenderer.Render();</cfscript></td>
</tr>

Iguess javascript can accomplish this, but I don't know. I hope I posted this question correctly.

Hi There - I am a bit new to javascript and I am having a tough time coming to a solution to this problem I am having! I will try to explain.. first I have a call to a javascript button in a form of a form button:


Code:

<input type="submit" value=" Click This Button" onClick="fireMyPopup()">

Now the code for firemypopup()


Code:

function fireMyPopup() {
  myPopupRelocate();
  document.getElementById("mypopup").style.display = "block";
  document.body.onscroll = myPopupRelocate;
  window.onscroll = myPopupRelocate;
}

Now for the other function referenced there

Code:

Code:
function myPopupRelocate() {
  var scrolledX, scrolledY;
  if( self.pageYOffset ) {
    scrolledX = self.pageXOffset;
    scrolledY = self.pageYOffset;
  } else if( document.documentElement && document.documentElement.scrollTop ) {
    scrolledX = document.documentElement.scrollLeft;
    scrolledY = document.documentElement.scrollTop;
  } else if( document.body ) {
    scrolledX = document.body.scrollLeft;
    scrolledY = document.body.scrollTop;
  }

  var centerX, centerY;
  if( self.innerHeight ) {
    centerX = self.innerWidth;
    centerY = self.innerHeight;
  } else if( document.documentElement && document.documentElement.clientHeight ) {
    centerX = document.documentElement.clientWidth;
    centerY = document.documentElement.clientHeight;
  } else if( document.body ) {
    centerX = document.body.clientWidth;
    centerY = document.body.clientHeight;
  }

  var leftOffset = scrolledX + (centerX - 850) / 2;
  var topOffset = scrolledY + (centerY - 200) / 2;

  document.getElementById("mypopup").style.top = topOffset + "px";
  document.getElementById("mypopup").style.left = leftOffset + "px";
}

As you might have guessed I am using this javascript to show a hidden div and keep it centered and following the screen scroll. This is working fine! It's the next part I am lost on!

Here is the code for the div...

Code:

<div id="mypopup" name="mypopup" style="position: absolute; width: 800px; height: 400px; display: none; background: #ddd; border: 10px solid #000;">

<form action=(this will call a PL SQL package eventually)>
<input type="hidden" name="CRN" value="'11111'">
<input type="hidden" name="TERM" value="1111">
<input type="hidden" name="CONF" value="y">
<input type="hidden" name="email1" value="1@aol.com">
<input type="hidden" name="email2" value="2@aol.com">
<input type="hidden" name="email3" value="3@aol.com">
<input type="hidden" name="activeemail" value="3">

<input type=''submit'' value='' Yes I Am 100% Sure'' onClick=''document.getElementById("mypopup").style.display="none"''>');
</form>
</div>

Ok now I will get to the nitty gritty here - the first issue is I would like to call the popup function and pass it a variable to signify which email is "active" amongst the hidden email fields.

So when I call the popup function I want to say something like:

Code:

<input type="submit" value=" Click This Button" onClick="fireMyPopup(3)">

In a perfect world this 3 is passed along to fireMypopup and then somehow I would like to somehow change the active email hidden field to 3 as well.

So my question is how would I change the code I provided to help me to figure out which email is active in the div. I am open to page refreshes etc, just has to be seemless i suppose.

What am I trying to do?

To sum it up I am printing an html form with lets say 15 rows. Each row has a column with an "email" button - which is this submit button. This submit button opens the "popup" or shows the div. Depending on which button is clicked I need to determine which email to send the email to. The popup window will be a simple form with 2 text fields and a submit button (which will call a PLSQL script to send the email) - but I need to know which hidden field email is the one that represents the click made. So the email gets sent to the proper email address :-)

I am not opposed to new ways to do this - but the one constant is that these hidden fields containing all emails will be there. So if theres 15 emails, there will be 15 hidden fields + 1 for the active indicator (unless theres a better way)

Thanks in advance - I am super confused! :-)

- Jeff

Hello there,

Can some one gimme source code for greying out a button on php page.
In my application i have one play button and one stop button in the html form. If i click play button it will update database with play and invoke a script. similarly with stop.
so while they are being played i want this play button to be greyed out.
or

is there any way that i can only show stop button while playing and play button while not playing the files.

HELP PLZZZZZZZZ

I was changing the code on the Grey Box script to pop up only the first time someone came to the page.


The original code that controls this is:

Code:

AJS.AEV(window, 'load', function() {GB_show("The Kinniebrew Group", "http://therdkgroup.com/id18.html"); 											
	 }
	 );

and to make it work just the first time someone visits the page I changed to read:

Code:

  AJS.AEV(document, 'load', function() {
          // look for our strangely named cookie: 
		  if ( document.cookie.indexOf("zz1rr_xxG") < 0 )
          {
              // if not found...
              document.cookie = "zz1rr_xxG=yes"; 
              // set it for next time...without expire so session only
              // and show the box:
              GB_show("The Kinniebrew Group", "http://therdkgroup.com/id18.html");
          }
      }
	  )

I had this line of code working but it doesn't now after I did something to it. does anyone have an idea how I can modify this to make it work?

I have been trying to learn javascript for the last few weeks and have come to a brick wall in my thinking. Could you look at this code and tell me where I am going wrong? I would prefer for you to point out what type of an issue I have and the basic syntax of what I am trying to do. This enables me to look at the problem, digest the type of problem and put together an idea of the way to fix the code.

my code (with errors on purpose)
Code:

<html>
<head>
<title>
<script type=text/javascript src=blah.js></script>
</head>
<body>  (and so on)

The response type of response I would like to see is - (from the helper)

check to see if you have closed all your lines with the </sectiontype>
you need to double check your format on line 4. The correct format would be
<script type="type of script" and the src="scriptname.js">.

I really appreciate any help you can provide. I just cannot figure a few things out and am getting confused as to how to fix my problems.

Code:

<!DOCTYPE html>
<html>
<head>
<title>The Italian Job</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" > //src="italianjob.css">

	//Set up array that represent the car storage space in cubic inches
var car_type = new Array();
		car_type["2door"]=41446;
		car_type["4door"]=52776;

	//Set up array that represents the metal_type weight
var metal_type= new Array();
		metal_type["selectmetal"]=0;
		metal_type["Aluminum"]=4.3512;
		metal_type["Gold"]=30.9912;
		metal_type["Platinum"]=34.09692;
		metal_type["Silver"]=16.8276;

	// getCarStorage() finds the storage based on the car storage space.

function getCarStorage()
{
var carStorageArea=0;
		//refers form id="carForm"
var theForm = document.forms["carForm"];
	
var selectedCar = theForm.elements["selectedCar"];
		//Here since there are 2 radio buttons selectedCar.length = 2
		//We loop through each radio buttons
for(var i = 0; i = selectedCar.length; i+)
{
		//if the radio button is checked
//if(selectedCar[i].checked)
{
		//by using the car_type array
		//We get the selected item value such as car_type["4door".value]"
carStorageArea = car_type[selectedCar[i].value];
		//If we get a match then we break out of this loop
		
break;
}
}
		//We return carStorageArea
return carStorageArea;
}
		//This function finds the metal bar weight
function getMetalDensity()
{
var carStorageSpace=0;
		//Get a reference to the form id="carForm"
var theForm = document.forms["carForm"];
		//Get a reference to the select id="metal"
var selectedmetal = theForm.elements["metal"];
		//equal to value user chose such as metal_type["Aluminum".value] would be equal to 4.3512
carStorageSpace = metal_type[selectedmetal.value];
		//finally we return carStorageSpace
return carStorageSpace;
}
function calculateTotal();
{
		//Here we get the total by calling our function
		//Each function returns a number
var carUsed = getCarStorage() / 440;
var howMany = carUsed * .33;
var fit = car_type / 44.4;
var weightBars = 1800 / metal_type;
var total = weightBars * metal_type;
var barLimit = carUsed - howMany;
var weightLimit = howMany - weightBars;

var divobj = document.getElementById('total');
	if (barLimit <0)
  {
	document.write("<This will not work.");
  }
	else if (weightLimit <0)
  {
	document.write("This will not work.");
  }
else
respond = 'With the total cargo area of the chosen car, you are able to fit ' +carUsed.toFixed(0) + 
		' bars in it. Due to weight limit of 1800 lbs, you are limited to ' + weightBars.toFixed(0) + 
		' bars in the cargo area.  The weight of the bars you want to have onboard the car is ' + total.toFixed(2) +
			' \n';
return respond}
</script>
</head>
<body style="background-color:burlywood" > <!-- onload="hideTotal()" -->
<p>In <em>The Italian Job</em>, theives were able to steal bars of gold by loading them into Mini Coopers and driving away.</p>
<p>
It is now your turn to pull your own version of <em>The Italian Job</em>.  You are able to choose what model of Mini you use and the type of metal bar you want to steal.
Thes rules a 

<ul>
<li>You can only load the cargo area of your Mini 1/3 of the way full</li>
<li>The cargo area used cannot weigh more than 1800 lbs.</li>
</ul>
<form id="carForm" onsubmit="return false;">
<label>What car do you want to use?</label>
<br />
<label class="radiolabel">
<input type="radio" onclick="calculateTotal()" value="2door" name="selectedCar" />
2 Door Mini - 25.4 cubic inches of cargo space
</label>
<br />
<label class="radiolabel">
<input type="radio" onclick="calculateTotal()" value="4door" name="selectedCar" />

4 door Mini - 35 cubic inches of cargo space
</label>
<p>Now you get to choose which metal you wish to steal.
</p>
<select id="metal" onchange="calculateTotal()" name="metal">
<option value="selectmetal">Select the metal bar type</option>
<option value="Aluminum">Aluminum</option>
<option value="Gold">Gold</option>
<option value="Platinum">Platinum</option>
<option value="Silver">Silver</option>
</select>
<br />

</form>
<div id="total" style="display: selectmetal;">
</div>
</body>
</html>