JavaScript - Multiple Values From Array, Animate Div Resize

Hi, I'm having problems getting the values of selected checkboxes and outputting them to a textarea. This seems like quite a simple thing to do but its causing me a lot of bother! I am using a mixture of JavaScript and jQuery to find a solution to this.


Code:

<h2>Booking Form</h2>
<form name="booking">

Please choose the days that would suit your visit: <br/>
<input type="checkbox" name="days" value="Monday">Monday<br/>
<input type="checkbox" name="days" value="Tuesday">Tuesday<br/>
<input type="checkbox" name="days" value="Wednesday">Wednesday<br/>
<input type="checkbox" name="days" value="Thursday">Thursday<br/>
<input type="checkbox" name="days" value="Friday">Friday<br/>

</form>

<textarea id="output"> </textarea>

Code:

var values = $("#days").val() || [];
$("p#ss").html("<strong>Checked values:</strong> " + values.join(", "));
//This just outputs "Checked values:" to the paragraph 'ss' that I created just to test it this way.

Help with this would be appreciated.

I'm trying to get the menu divs' width to grow, extending to the right but am not getting any animation at all...

I'm not sure if I even have the right code...

Code:

<script type="text/javascript">
$(document).ready(function(){	
    $('#menu').mouseover(function(){
      
      $(this).stop().animate({"right": 20 }, 400);
    }).mouseout(function(){ 
      $(this).stop().animate({"right": 0 }, 400);
    });;
});
</script> 

<div id="menu" style="
	width:90px;height:24px;
    font: #C12026;
    text-align:right;
    padding-right:10px;
    padding-top: 5px;">

<a href="#top" class="scroll">Home</a></div>
<br />
<div id="menu" style="
	width:90px;height:24px;
    font: #C12026;
    text-align:right;
    padding-right:10px;
    padding-top: 5px;">
    
    <a href="#who" class="scroll">Who We Are</a>
    </div>
    <br />
<div id="menu" style="
	width:90px;height:24px;
    font: #C12026;
    text-align:right;
    padding-right:10px;
    padding-top: 5px;">
    
    <a href="#what" class="scroll">What we do</a>
    </div>
    <br />
<div id="menu" style="
	width:90px;height:24px;
    font: #C12026;
    text-align:right;
    padding-right:10px;
    padding-top: 5px;">
    
    <a href="#contact" class="scroll">Contact Us</a>
</div>

and here is the css

Code:

#menu {
	width:125px;
	height:24px;
    background:#C00;
    font: #C00;
}

#menu a {
color: #C00;

}

#menu a:visited {
color: #C00;
}

#menu a:hover {
color: #FFF;
}

right now I'm just trying to get it to grow but my original idea was to have the bars small with no words then when you mouse over it reveals the words when it grows to the right around 50px. When clicked it stays extended...

ANANANAY Help would be greatly appreciated!!!

here is the link to the temp site: http://sethwardallison.com/fargo/index.htm

Hello.
I have my animation script working and I use setInterval to move by a number of pixels specified as 'this.gap', which defaults to 2 pixels (or 2/100's for opacity).

I would like to use a curve, such as the first half of a sine curve, for a more graceful effect.

Before the setInterval is begun I know the 'from' and 'to' position and believe I could use these initial values to work out the gaps to move on each iteration. (My code is slightly complicated by the fact that I change an x value and either the 'from' or 'to' value depending on whether I'm increasing or decreasing the left/top/opacity.)

My maths is a little rusty and any suggestion would be welcome

Here's a code snippet but I could provide more on request. Andy.
Code:

function animateIt(o) {
    if ( o.from < o.to ) {
        var y = ( o.type == 'opacity' ) ? 100 : 1;
        o.x = (o.positive) ? o.x + this.gap/y : o.x - this.gap/y;
        if ( o.type == 'opacity' ) {
            this.theObj.style.filter = "alpha(opacity=" + (o.x * 100) + ")";
            this.theObj.style.opacity = o.x;
        } else {
            this.theObj.style[o.type] = o.x + 'px';
        }
        (o.positive) ? o.from += this.gap/y : o.to -= this.gap/y;
    } else {
        this.stopIt();
    }   
}

PS i have posted elsewhere but no response as yet.

I'm new to JavaScript, and this forum so please forgive any improprieties. What I'm trying to do is fairly simple. I have a script that creates some SVG rectangles. I want to be able to click a button and have two rectangles switch places, moving along a curve to do so. This is part of a prototype for a larger product. I've included the relevant code pieces below, and I've also included the whole .html file as an attachment if you prefer. I feel like I'm on the right track, but I cannot figure out why it is not working. I "believe" the problem is when I create the animateA and animateB elements (syntax perhaps?). Please let me know if this is not enough information, as I've been staring at it for so long I seem to have lost perspective. Thanks for any help.

Code:

    var svgNS = "http://www.w3.org/2000/svg";
    var xlinkNS = "http://www.w3.org/1999/xlink";
    var animateDur = "1s";

    function swap(a,b) {
    //this section handles moving the actual elements of the array
    //rectArray is an array of integer values that represent the height of the rectangles
      var temp = rectArray[a];;
      rectArray[a]=rectArray[b];
      rectArray[b]=temp;
    //this section is for the animation (will probably be its own function
    //for the final version
      //get the elements
      var aRect = document.getElementById("rect_" + a);
      var bRect = document.getElementById("rect_" + b);
      //get the element coordinates, bY isn't needed, as it
      //is the same as bX
      var aX = aRect.getAttributeNS(null,"x");
      var aY = aRect.getAttributeNS(null,"y");
      var bX = bRect.getAttributeNS(null,"x");
      //calculate the x distance from a to b and from b to a
      //to use in the bezier curve path
      var aToBx = bX - aX;
      var bToAx = aX - bX;
      //calculate the halfway point to use in the bezier curve
      var qA = Math.floor(aToBx/2);
      var qB = Math.floor(bToAx/2);
      //create the path strings:
	//should be M startX startY q midpointX midpointY endX endY
	//notice that endX and endY are with respect to the startX and startY
      var pathAtoB = "M" + aX + " " + aY + " q " + qA + " 30 "  + aToBx + " " + aY;
      var pathBtoA = "M" + bX + " " + bY + " q " + qB + " 30 "  + bToAx + " " + aY;
      //create the animation element for rectangle A
      animateA = document.createElementNS(svgNS, "animateMotion");
      animateA.setAttributeNS(null,"path",pathAtoB);
      animateA.setAttributeNS(null,"dur",animateDur);
      //append it to the rectangle
      aRect.appendChild(animateA);
      //create the animation element for rectangle B
      animateB = document.createElementNS(svgNS, "animateMotion");
      animateB.setAttributeNS(null,"path",pathBtoA);
      animateB.setAttributeNS(null,"dur",animateDur);
      //append it to the rectangle
      bRect.appendChild(animateB);
      //change the id's of the rectangles to reflect their new
      //positions
      aRect.setAttributeNS(null,"id","rect_" + b);
      bRect.setAttributeNS(null,"id","rect_" + a);
    }

So, I've built this navigation bar so far and I'm curious if it's even possible to achieve what I'm thinking.
Currently, when you hover over each of the links they drop down (padding is increased).

Now, what I'm curious in doing is if you hover over say "test1", test2-4 also drop with it but in the padding that has been created from the drop down, "test1" information shows up. Allowing the user to click or read whatever information is in there. Also, if the user would like to, they can move their mouse to test2 and everything would animate (opacity, this I can do I think) to whatever is in the test2 field, test3 doing the same and so on.

I haven't had much success with this, I've created a completely separate panel before, but that didn't exactly work or I wasn't doing it correctly.

Here is what I've been working on, ANY help would be appreciated! Thanks!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$(function() { 
		$("#nav li > a").hover(function() {
			$(this).stop().animate({paddingTop: "100px"}, 100);
		}, 
		function() {
			$(this).stop().animate({paddingTop: "10px"}, 200);		
		});
	});
</script>

<style type="text/css">	
	#nav
	{
		position: absolute;
		top: 0;
		left: 60px;
		padding: 0;
		margin: 0;
		list-style: none;
	}
	
	#nav li
	{
		display: inline;
	}
	
	#nav li a
	{
		float: left;
		display: block;
		color: #555;
		text-decoration: none;
		padding: 10px 30px;
		background-color: #d1d1d1;
		border-top: none;
	}
</style>

</head>

<body>

<div id="wrap">

    <ul id="nav">
        <li><a href="">test1</a></li>
        <li><a href="">test2</a></li>
        <li><a href="">test3</a></li>
        <li><a href="">test4</a></li>

    </ul>
</div>
</body>
</html>

hello everybody!
this is my first atempt in writing javascript and i have a problem which I have no idea how to solve.

I want to take the values from several dropdown forms and make some calculations whit those in order to display a number. Unfortunately the script responts in a way that i cannot identify what is happening. this is a shorten example of my script.

Code:

<html>
<head>
<script type="text/javascript">



function calcul()
{


	var pcno = document.plithospc.listplpc.value;
	var ndno = document.plithosnd.listplnd.value;
	var hotline = document.hotlform.listhotl.value;

	var sumhotline = 0;

if (hotline == 2)
	{
		sumhotline = 8*(1+0.5*pcno) + 2*(1+0.5*ndno);
	}
	else if (hotline == 3)
	{
		sumhotline = 16*(1+0.5*pcno) + 4*(1+0.5*pcno);
	}
	else 
	{
		sumhotline = 0;
	}

document.write(sumhotline);

</script>

</head>
<body>


<FORM NAME="plithospc">
<SELECT NAME="listplpc">
<OPTION SELECTED="SELECTED" VALUE=0>choose one</OPTION>
<OPTION VALUE=1>-1-</OPTION>
<OPTION VALUE=2>-2-</OPTION>
<OPTION VALUE=3>-3-</OPTION>
</SELECT>

<FORM NAME="plithosnd">
<SELECT NAME="listplnd">
<OPTION SELECTED="SELECTED" VALUE=0>choose one</OPTION>
<OPTION VALUE=1>-1-</OPTION>
<OPTION VALUE=2>-2-</OPTION>
<OPTION VALUE=3>-3-</OPTION>
</SELECT>

<FORM NAME="hotlform">
<SELECT NAME="listhotl">
<OPTION SELECTED="SELECTED" VALUE=0>choose one</OPTION>
<OPTION VALUE=1>1st selection</OPTION>
<OPTION VALUE=2>second selection</OPTION>
<OPTION VALUE=3>third selection</OPTION>
</SELECT>

<button type="button" onclick="calcul()">click me</button>

</body>

does anyone knows how to fix this?
thanks in advance

print "<Font face=\"calibri, Arial\"><table id=\"rnatable\" border=2px width=100%>";
print "<th></th>";
print "<th>a</th>";
print "<th>b</th>";
print "<th>c</th>";
print "<th>d</th>";
print "<th>e</th>";
print "<th>f</th>";
print "<th>g</th>";

while($array = mysql_fetch_array($sql_query))
{
$id=$array['a'];
print "<tr id=\"newtr\">";
print "<td><input id=\"check\" type=\"checkbox\" name=\"keyword[]\" value=\"$id\" ></td>";
print "<td>".$array['a']."</td>";
print "<td>".$array['b']."</td>";
print "<td>".$array['c']."</td>";
print "<td>".$array['d']."</td>";
print "<td>".$array['e']."</td>";
print "<td>".$array['f']."</td>";

print "<td>
<a href=\"http://localhost/rnasearch/retrieve.php?a=$id\">bla</a>
</td></tr></font>";

}

print "</table>";
}

this is part of a php searchengine script that i wrote to retrieve data from a database and as you can see the last column that is g contains a link which when clicked takes the user to the second php script which retrieves additional information of that entry, but this is done for only single entries so as you can see i introduced checkboxes so that the user can check any number of checkboxes and retrieve information as per their wish

now to do this i created a <input type=text where i want the value of these checkboxes i.e. $id to be posted in a delimited format so that the user can then click the corresponding button and retrieve the information this is the code

<div id="floatMenu">
<ul class="menu1">
<center><li><form name="senddata" method="POST" action="http://localhost/retrieve.php" style="display:inline;"><input id="fasta" type="text" class="multitext"><input name="Fasta" type="Submit" value="Retrieve Fasta"></form>

this is a css floating menu....so far so good....everything went fine....
after this i had to write a javascript to do this and i've been stuck there searching forums for the last 4 days!

this is the javascript i found from somewhere which came close to doing wht i wanted it to do

window.onload = function () {
var cb = document.getElementById('check');
var fasta = document.getElementById('fasta');
cb.onclick = function () {fasta.value = cb.value + ",";
};};

this script only sends the value of the first checkbox in the table, the others are not found by it, mind you its not the first checkbox selected its the first checkbox that is present in the table

how can i resolve this problem so that even if i have n number of checkboxes in my table, if the user chooses to do so they can retrieve n number of information....please help i've almost lost hope in this!

Hi' there

Is there anyway to make a custom resize function that resizes one of my div elements on the webpage the same amount of pixels as the browser window gets resized?

hello
I am having a problem to add numbers store in an array.

arrayValues[0][0] = 1;
arrayValues[0][1] = 2;
var col = 0;
var sum;
for ( var row = 0; row < index; i++ )
sum += arrayValues[col][row];


my result is ==> 12 it is defining my sum variable as string. even I try do do this var sum = 0; to define sum as numeric variable. my result was ==>012.

Any idea, this is my first javaScritp code.
Thanks.

Hi Guys,
How do I sum the values of an array and output the result using document.write?

Say my array is var number=new Array(1.234,56.43,1.02);

THANKS

Thought this wud work?

Code:

<script type="text/javascript">


var x = [1, 2, 3, 4, 5, 6, 7, 8, 9];
document.write(sum(x));


</script>

Hi i have a code like this in my web site to slide a panel from left to right:
<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {


$("#panel-tab").click(function(e) {
//if(autoTimer) clearTimeout(autoTimer);
//autoTimer = null;

e.preventDefault();
$("#panel").animate({ left: sipPos }, 1764, 'linear', function() {
if(sipPos == 0) { sipPos = -856; }
else { sipPos = 0; }

});
});
});
-->
</script>

---CSS---

#panel {
width: 864px;
height: 369px;
position: absolute;
top: 195px;
left: -856px;/*-856*/
z-index: 200;
background:url('../images/bg_panel.png') no-repeat;
padding:20px 0 0 18px;
text-align:left;
}
#panel-tab {
width: 21px;
height: 371px;
position: absolute;
top: 9px;
left: 856px;
background:url(../images/panel-arrw-show.png) no-repeat;
text-decoration: none;
color: #FFFFFF;
text-indent:-999999px;
}

What i want to do is use the animate function in jquery...like this $("#panel").animate({ left: 0 }) but not sure how to use that and on page load make the panel opens and stays open..

Any help

Sam

hi, here is my Javascript to show and hide my comments div:

Code:

<script language=javascript type='text/javascript'>
function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('comments').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'visible';
}
else { // IE 4
document.all.hideShow.style.visibility = 'visible';
}
}
}

function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('comments').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'hidden';
}
else { // IE 4
document.all.hideShow.style.visibility = 'hidden';
}
}
}

I would now like to animate the div fading or moving down

can someone please help?

thanks

So I'm trying to modify this code to make it so a 1px border fades in on rollover of an image.

My CSS for the images has this class for an invisible border:
Code:

border: solid 1px rgba(242, 112, 17, .0);

I was assuming using this part of the Javascript code below that I could animate some kind of borderOpacity or something like that so the border would fade in from .0 to 1.

Code:

$('.item li img').animate({'opacity' : 1}).hover(function() {
					$(this).animate({'borderOpacity' : 1});
				}, function() {
					$(this).animate({'opacity' : 1});
				});

But I obviously am doing something wrong.

Any help would be greatly appreciated. Thanks!

I'm using the below code to expand and collapse a DIV on alternative clicks


Quote:
Code:

<script>
 function Tog(id){
var x=document.getElementById(id);
if(x) {
        if(x.style.display=='none') 
                                          { x.style.visibility='visible';
                                           x.style.display='block';
                                          }
          else{ x.style.visibility='hidden';
                  x.style.display='none';
               }
         }
                          }
</script>

<a href="#" onclick="Tog('togme')" > Click me tog 'togme'</a>
<div id="togme">
Content inside this DIv will hide and show on alternative clicks
</div>

When you click on the link div togme drops down suddenly, I need to make it slow and animated, however I'm not able to make it animated yet.

I tried playing around with the below code

Code:

 
	 Quote:

	

	
		

			
				<script>
function show() {

var curheight=0;

var fullheight=document.getElementById("hidden").offsetHeight;
while(curheight<fullheight) {
curheight=curheight+10;
document.getElementById("hidden").style.height=curheight+"px";
document.getElementById("hidden").style.display="block";
// SET DELAY HERE FOR EVERY INCREMENT IN VALUE OF NEW HEIGHT
}
}
</script>
<i onclick="show()" >Click me</i>
<div id='hidden'  style="display:none;">
Hide me<br>
Hide me<br>
Hide me<br>
Hide me<br>
Hide me<br>
Hide me<br>
Hide me<br>
</div>
			
		

	
	

Still no luck, Something is wrong with the usage of display:block , It display whole of it in a click, Help me fix this