JavaScript - Animate Fade In Border?

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);
    }

Im wanting to make a div move according to where the mouse is IE if the mouse is on the left the div moves right and visa versa. I've got the pixels for where the middle of the screen is but im unsure what to do next.

If anyone can help ill be very grateful, ill try and find an example to help illustrate what i mean.

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

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

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

I want to design my website so that when a page loads javascript will smoothly animate it from a reference point to the top of the page. I visited an Apple store recently and was looking at the encased ipods next to the displayed product and the one next to the iphone has a mini site and after pressing the compare button at the bottom of the page I saw this animation. Below is a link to the video i recorded showing what I am trying to achieve. Any and all help will be appreciated. I have found other script that animate on page load but none of which does it from a reference point like the following video. I'm not sure how the page loads at that point either. If someone could help with that as well I would greatly appreciate it. Thanks in advance.

http://demetriusmcclain.elementfx.co...pageScroll.MOV

Hey,

I'm working on a script that uses a function (called on click) to change the content of a div (called description) within the page. It contains an unordered list and list items. The first one has the class "show" and the ID "1", the second with just the ID "2", and so forth. (see code below).

I am using jQuery to control the onclick function. the jQuery gets the current object with the "show" class. If there is no show class, it takes the first. It then puts a variable string together that represents the UL LI that is needed to be shown.

Code:

var descurrent = ($('div#description ul li.show')?  $('div#description ul li.show') : $('div#description ul li:first'));
var desclass = '#description li#'+x;

Note: x is a variable transfered from the function change(x); where x is the ID that is to be shown

HTML CODE:
Code:

<div id="description">
					<ul>
						<li class="show" id="1">blahblah
						</li>
						<li id="2">
etc
						</li>
					</ul>

The jQuery i'm trying to get to work is:
Code:

//Hide the current image
		descurrent.animate({opacity: 0.0}, 1000)
		.removeClass('show');
	
		//Show new image
		
		$(desclass).addClass('show')
		.animate({opacity: 1.0}, 1000);

Note: the class "show" has a higer z-index

Thanks in advance,
Hope this can be resolved soon, been giving me headaches!
Cheers,
John

Hey CF.

I'm not great with JS, but I'm trying to build something pretty simple and even that's out of my league. I have a layout with multiple fields that need to be filled randomly from an array on click.

I have an array with a bit of jQuery that randomly reloads one field on click, but I need multiple fields filled at once from the same item in the array.

Code is below. I grabbed it from a tutorial somewhere, and have made some modifications.

Code:

<Script>
$(document).ready( function() {
    var foodArray = [
        '1',
        '2',
        '3',
        '4',
        '5'
    ];
    $('.foodtype').loadText( foodArray, 10000 ); // ( array, interval )
});
// custom jquery plugin loadText()
$.fn.loadText = function( foodArray, interval ) {
    return this.each( function() {
        var obj = $(this);
        obj.fadeOut( 'slow', function() {
            obj.empty().html( random_array( foodArray ) );
            obj.fadeIn( 'slow' );
        });
        timeOut = setTimeout( function(){ obj.loadText( foodArray, interval )}, interval );
        // reload random text (if not animated) -- entirely optional, can be removed, along with the reload link above (<a href="javascript:;" id="text-reload"><em>randomize</em></a>)
        $("#text-reload").click( function(){
            if( !obj.is(':animated') ) { clearTimeout( timeOut ); obj.loadText( foodArray, interval );} // animation check prevents "too much recursion" error in jQuery
        });
    });
}
//public function
function random_array( aArray ) {
    var rand = Math.floor( Math.random() * aArray.length + aArray.length );
    var randArray = aArray[ rand - aArray.length ];
    return randArray;
}

</script>

That outputs one of the array items into a <span class="foodtype">. What I need is another value next to say "1", eg '1, Blue' and print "Blue" to another span.

Can anyone help?

The other issue I have is the divs are snap resizing, is there a way set them to animate smoothly? The total height will be variable depending on the combinations that display.

Cheers guys, hope someone can help.

Hello,
I am trying to move each cell content from one table to another table. I do not want to lose the value of each cells in table1, but just to show how I got table2
from table1. I would like to show/animate the movement. So when the user clicks the button the data from table1 will scroll towards table2.
I am new to HTML/javascript programming I really appreciate your help

is it possible if you have a div with child divs inside , so i fade out the parent div but the opacity of the child divs stays at 100% ?
thank you

Hi

I have this code:

<script type="text/javascript">

function Ajax()
{
var
$http,
$self = arguments.callee;

if (window.XMLHttpRequest) {
$http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
$http = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
$http = new ActiveXObject('Microsoft.XMLHTTP');
}
}

if ($http) {
$http.onreadystatechange = function()
{
if (/4|^complete$/.test($http.readyState)) {
document.getElementById('ReloadThis').innerHTML = $http.responseText;
setTimeout(function(){$self();}, 20000);
}
};
$http.open('GET', '../inc/record_count.php' + '?' + new Date().getTime(), true);
$http.send(null);
}

}

</script>


<script type="text/javascript">
setTimeout(function() {Ajax();}, 1000);
</script>

Can you help me make this make a fade in effect??

Hi everyone I'm new to javascript and I'm trying to fade in and out a div using an array. It worked when I had two arrays and two variables. One array that decends through the opacity values and another array that acends the opacity values. here is the the external JS, HTML and external CSS. It works once but I want it to work every time we click on the link. At the bottom of the post I've posted the JS again but modified in a way I thought would work by using one array, going fowards through the array with i++ and then going backwards through the array using i--. Anyway, it doesn't work and I can't find a simple solution. Hope you all understand what I'm trying to say.

**********************THE JAVASCRIPT***********************

var fadesFoward = ["0.95","0.90","0.85","0.80","0.75", "0.70","0.65","0.60","0.55","0.50", "0.45","0.40","0.35","0.30","0.25", "0.20","0.15","0.10","0.05","0.00"];

var fadesBackward = ["0.05","0.10","0.15","0.20","0.25", "0.30","0.35","0.40","0.45","0.50", "0.55","0.60","0.65","0.70","0.75", "0.80","0.85","0.90","0.95","1.00"];

var i = 0;
var j = 0;

function fadeDiv()
{
if(i == fadesFoward.length);
else (i++);
document.getElementById("redbox").style.opacity = fadesFoward[i];
}

function hide()
{
setInterval("fadeDiv()", 30);
}



function showDiv()
{
if(j == fadesBackward.length);
else (j++);
document.getElementById("redbox").style.opacity = fadesBackward[j];
}

function show()
{
setInterval("showDiv()", 30);
}

function delayShow()
{
setTimeout("show()", 1000);
}


********************THE HTML************************

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN""http//www.w3c.org/TR/html4/strict.dtd">

<html>

<head>
<link rel="stylesheet" type="text/css" href="test.css"/>

<script language="javascript" type="text/javascript" src="test.js">
</script>
</head>

<body>

<div id="redbox"></div>
<a href="#" onclick="hide(); delayShow(); return false;" id="go_red">RED</a>

</body
</html>


*********************THE CSS**********************

div#redbox{z-index:2; width:200px; height:200px; background-color:red; opacity:1.0; position:absolute; left:0px; top:0px;}

a#go_red{position:absolute; left:250px; top:100px;}


*********************THE JAVASCRIPT AGAIN******************

var fades = ["0.95","0.90","0.85","0.80","0.75", "0.70","0.65","0.60","0.55","0.50", "0.45","0.40","0.35","0.30","0.25", "0.20","0.15","0.10","0.05","0.00"];


var i = 0;

function fadeDiv()
{
if(i == fades.length);
else (i++);
document.getElementById("redbox").style.opacity = fades[i];
}

function hide()
{
setInterval("fadeDiv()", 30);
}



function showDiv()
{
if(i == fades.length);
else (i--);
document.getElementById("redbox").style.opacity = fades[i];
}

function show()
{
setInterval("showDiv()", 30);
}

function delayShow()
{
setTimeout("show()", 1000);
}


What would be really easy but which I can't find out how to do or even know if it is possible, is to have the variable "i" reset to 0 everytime the function is called. maybe it would work then?

A script like this is invoked for each html page presenting a different background picture. How can I extend/modify the script to make the pic fade in when page is loaded?

window.onload = function()
{var bodyTag = document.getElementsByTagName("body")[0];
bodyTag.style.backgroundImage ="url(bilder/bryggsol.jpg)";
bodyTag.style.backgroundAttachment = "fixed";
bodyTag.style.backgroundPosition = "100% 100%";
bodyTag.style.backgroundRepeat = "no-repeat";}

Grateful for clues

Hello everyone. I'm working on a fade in and fade out script. I got to the part where I am making the fade in part of the script but I got this error that says:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Fri, 29 Jan 2010 07:08:20 UTC


Message: Object expected
Line: 1
Char: 1
Code: 0

But I'm not to sure what is making my script error out. I do believe it is the timeout part in my script but I'm not totally sure. If that is it how do I go about fixing it?

Code:

	function fade(obj, duration, toggle) {
	this.steps = 100;
	this.elem = document.getElementById(obj);
	
	function setOpacity(level) {
	   (document.getElementById && !document.all) ? this.elem.style.opacity = level : 
	   this.elem.style.filter="alpha(opacity="+ level * 100 +")";
	}
	
	
	function fadeIn() {
		for(var i = 0; i<= 1; i+=(1/this.steps)) {
			setTimeout("setOpacity("+ i +")", i * duration);
		}
	}
	
	fadeIn();
	
	}
	
	window.onload = function() {
		fade('text', 20000, 1);
	}

Thanks for the help.