JavaScript - Pure Javascript Animation - Animate Left To Right Condition Not Clear.

I can get the lightbox to work perfectly fine, and I love how seamlessly it works, I however am running some more java script on my page and am running into some problems. When I apply the lightbox it takes away the functionality of my other script, and I am not sure why this is so.

I am using 2.04 version of lightbox: http://www.huddletogether.com/projects/lightbox2/

Here is the other script that is getting either turned off or overridden, I'm not quiet sure.

<script type="text/javascript">

$(document).ready(function() {

//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );

};

//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 3750); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});

//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});

});
</script>


I am assuming there is some conflict with either an onload..or something I'm really not sure

I would greatly appreciate your help.

Hi,

I have beginner skills using JS and, with alot help, have developed a script for an animation of a white noise pattern (TV screen noise). I need to use the animation in an eLearning educational lesson.

The animation works OK but the sharpness of the animated pixels is poor (for example, looks blurry in FF).

I wonder if someone can suggest a way to sharpen the animation? This would be a big help.

The CSS simply creates a 640 x 640 canvas:
canvas{
border:1px solid black;
height:640px;
width:640px;
} The JS for the animation follows:
(function(){
var viewbmd,
px = [],
timer,
itsNoisy,
stage, random = Math.random
;

init();

function init(){
stage = document.querySelector("canvas");
viewbmd = stage.getContext("2d");
itsNoisy = true;
stage.onclick = manageNoise;
initNoise();
timer = setInterval(onTick, 50)
}

function initNoise(){
var array = [], d, val;
for (var i = 0; i < 255; i++) {
array[i] = 0xffffff * (i % 2);
}
for(i = 0; i < 6400; i++){
d = random()*256|0;
val = array[d];
viewbmd.fillStyle = "rgb(" + val + ", " + val + ", " + val + ")";
viewbmd.fillRect(i%80, ((i)/80)|0, 8, 8);
}
px = viewbmd.getImageData(0, 0, 80, 80);
}

function onTick(){
flipSomePixels(160);
viewbmd.putImageData(px, 0, 0);
}

function flipSomePixels(howMany/*:int*/){
for (var i = 0; i < howMany; i++){
var pxidx = (Math.random()*(px.data.length/4))|0;
for(var j = 0; j < 3; j++){
px.data[pxidx*4+j] = !px.data[pxidx*4+j] ? 255 : 0;
}
}
}

function manageNoise(){
itsNoisy ? clearInterval(timer) : timer = setInterval(onTick, 50);
itsNoisy = !itsNoisy;
}
})();
Any help appreciated.

Kind Regards,

saratogacoach

Currently I have a race condition existing in my Java script code. What I am trying to do with this code is convert all check boxes which are a part of the 'checkbox' class and are not checked into text boxes with a value of zero. Currently when you post a check box that is not checked it does not appear in the $_POST data. However I need to know all the values whether true or false for these particular set of check boxes.

The code I have is he
Code:

			function checkboxConvert() {
				
				var chkBxs = $$('.checkbox');
				for (var i = 0; i < chkBxs.length; i++) {
					if (chkBxs[i].checked == false) {
						chkBxs[i].type = 'textbox';
						chkBxs[i].value = '0';
					}
				}

				setTimeout("document.productForm.submit();",1000);
			}

Now the problem that I have been getting is that when I try to submit this form the values of the recently changed text boxes does not appear in the $_POST data. Therefore, as you can see above I have postponed the page submit for 1 sec and then I have all the data available to me. However as time goes on and my data set gets larger, 1 sec may no longer be enough. This I think is a race condition and I need to figure some way of running the code only after all the check boxes have been converted and they have their new values. I would have thought that this would be unnecessary from the start, but for some reason it's trying to run both pieces simultaneously and I can't submit until I have the proper values in place.

Any help is much appreciated!

Hi guys,

I have a little experience in Javascript and would like to learn a bit more etc.

I am currently working for a company which wants me create / find a image scroller using javascript and jquery.

I found one which seems very suitable... I have customized the CSS and have coded it all up...

The problem i'm having is that the image scroller is scrolling 3 images at a time.

I would like it to scroller one at a time whilst showing all the images...

Example

scroller:

[ pic 1] [pic 2] [pic 3] [pic 4]

after scroll

[pic 2] [pic 3] [pic 4] [pic 1]

after next scroll

[pic 3] [pic 4] [pic 1] [pic 2]

and so forth.

If you look at this code you will see what I mean...

please help me learn and please help me complete this... im sure its just a little adjustment... but me not being too great at javascript... it makes me feel like im shooting in the dark.

Thanks alot

Code:

<style type="text/css" media="screen">
<!--
body { font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
input, textarea { font-family: Arial; font-size: 125%; padding: 7px; }
label { display: block; } 

#textbanner {width:168px; height:118px; float:left;}

.infiniteCarousel {
  width: 618px;
  position: relative;
}

.infiniteCarousel .wrapper {
	width: 618px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
	height: 115px;
	margin: 0 0px;
	position: relative;
	top: 0;
	border: 1px solid #E1E1E1;
}

.infiniteCarousel ul a img {
  border: 0px solid #666;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.infiniteCarousel .wrapper ul {
	width: 625px; /* single item * n */
	list-style-image:none;
	list-style-type:none;
	margin:0;
	padding:0px 0px 0px 4px;
	position: absolute;
	top: 0px;
	left: 0px;
}

.infiniteCarousel ul li {
  display:block;
  float:left;
  padding: 0px 0px 0px 0px;
  height: 85px;
  width: 206px;
}

.infiniteCarousel ul li img {
    -webkit-transition: border-color 20ms;
}

.infiniteCarousel ul:hover li img {
  border-color: #666;
}

.infiniteCarousel ul:hover li:hover img {
  border-color: #000;
}

.infiniteCarousel ul li a img {
  display:block;
}



.infiniteCarousel .forward {
  background-position: 0 0;
  right: 0;
}

.infiniteCarousel .back {
  background-position: 0 -72px;
  left: 0;
}

.infiniteCarousel .forward:hover {
  background-position: 0 -36px;
}

.infiniteCarousel .back:hover {
  background-position: 0 -108px;
}



-->
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">

(function () {
    $.fn.infiniteCarousel = function () {
        function repeat(str, n) {
            return new Array( n + 1 ).join(str);
        }
        
        return this.each(function () {
            // magic!
            var $wrapper = $('> div', this).css('overflow', 'hidden'),
                $slider = $wrapper.find('> ul').width(9999),
                $items = $slider.find('> li'),
                $single = $items.filter(':first')
                
                singleWidth = $single.outerWidth(),
                visible = Math.ceil($wrapper.innerWidth() / singleWidth),
                currentPage = 1,
                pages = Math.ceil($items.length / visible);
                
            /* TASKS */
            
            // 1. pad the pages with empty element if required
            if ($items.length % visible != 0) {
                // pad
                $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
                $items = $slider.find('> li');
            }
            
            // 2. create the carousel padding on left and right (cloned)
            $items.filter(':first').before($items.slice(-visible).clone().addClass('cloned'));
            $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
            $items = $slider.find('> li');
            
            // 3. reset scroll
            $wrapper.scrollLeft(singleWidth * visible);
            
            // 4. paging function
            function gotoPage(page) {
                var dir = page < currentPage ? -1 : 1,
                    n = Math.abs(currentPage - page),
                    left = singleWidth * dir * visible * n;
                
                $wrapper.filter(':not(:animated)').animate({
                    scrollLeft : '+=' + left
                }, 1000, function () {
                    // if page == last page - then reset position
                    if (page > pages) {
                        $wrapper.scrollLeft(singleWidth * visible);
                        page = 1;
                    } else if (page == 0) {
                        page = pages;
                        $wrapper.scrollLeft(singleWidth * visible * pages);
                    }
                    
                    currentPage = page;
                });
            }
            
                        
            // 6. bind the back and forward links
            $('a.back', this).click(function () {
                gotoPage(currentPage - 1);
                return false;
            });
            
            $('a.forward', this).click(function () {
                gotoPage(currentPage + 1);
                return false;
            });
            
            $(this).bind('goto', function (event, page) {
                gotoPage(page);
            });
            
            // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
            $(this).bind('next', function () {
                gotoPage(currentPage + 1);
            });
        });
    };
})(jQuery);

$(document).ready(function () {
    // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
    var autoscrolling = true;
    
    $('.infiniteCarousel').infiniteCarousel().mouseover(function () {
        autoscrolling = false;
    }).mouseout(function () {
        autoscrolling = true;
    });
    
    setInterval(function () {
        if (autoscrolling) {
            $('.infiniteCarousel').trigger('next');
        }
    }, 500);
});


</script>

</head>
<body>
    
    
<div id="textbanner"><img src="http://i46.tinypic.com/2r423yc.jpg" alt="" width="168" height="117" /></div>
 
    <div class="infiniteCarousel">
      <div class="wrapper">
        <ul>
          <li><a href="www.google.com"><img src="http://i49.tinypic.com/eu4x81.jpg" alt="" width="202" height="116" /></a></li>
          <li><img src="http://i49.tinypic.com/2ex8ttw.jpg" alt="" width="202" height="116" /></li>
          <li><img src="http://i45.tinypic.com/2gy0pkz.jpg" alt="" width="202" height="116" /></li>
        </ul>
             
      </div>
      
      
</div>


</body>
</html>

I am looking for a javascript that when a image is clicked on it clears a textarea

I am fairly new to javascript and am attempting to create a function that will clear one checkbox when another is checked. I have multiple forms with dynamically generated names on the page.
Here is what I have:

<script type="text/javascript">
function undo_Complete(myForm)
{
var formName = myForm.name;
if(document.formName.getElementsByName("Needs_Change").checked==true)
{
document.formName.getElementsByName("Complete").checked=false;
}
}
</script>

The two checkbox fields involved:
<input name="Complete" value="Yes" <?php echo($Complete=="Yes") ? "checked" : ""; ?> size="4" type="checkbox">
<input name="Needs_Change" value="Yes" <?php echo($Needs_Change=="Yes") ? "checked" : ""; ?> size="4" type="checkbox" onClick="undo_Complete(this.form)">

Could someone please tell me what I am doing wrong?

Thank you!
Lisa

I have a search form and added the "Clear All" Button functionality...but it clears the last part of the search form display preferences....how do I only clear the checkboxes at the top of the form only and not at the bottom of the form between the <DIV> tags?

I have attached a copy of the JSP page.

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

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.
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.

Hi, I need your help with a javascript that is incorrectly displaying the time left as 12 hours instead of 24 hours.

The target date is July 7, 2010 at 09:00 AM
Here is the url where the script is installed: http://guaranteedtransformation.com/independence/

and here is the code:
Code:

<script LANGUAGE="JavaScript">
// This following statement must be left intact.
// Copyright (c) Michael Bloch and Taming The Beast.  
// Countdown timer script v1.2 April 20 2009
// Taming the Beast.net - http://www.tamingthebeast.net
// Free Web Marketing and Ecommerce articles and tools
// By using this code you agree to indemnify Taming the Beast
// from from any liability that might arise from its use. 
// The preceding statement be left intact. 


var present;   
var future;    
var tseconds;  
var seconds;   
var minutes;
var hours;
var days;
ID=setTimeout("countdown();", 1000);

function countdown() 
{
present = new Date();
present = present.getTime() + (60000) + (12 * 60 * 60 * 1000);
future = new Date("July 07, 2010 09:00:00");

tseconds = (future - present) / 1000;

days = tseconds /24/60/60;
days = Math.floor(days);
tseconds = tseconds - (days * 24 * 60 * 60);

hours = tseconds /60/60;
hours = Math.floor(hours);
tseconds = tseconds - (hours * 60 * 60);

minutes = tseconds /60;
minutes = Math.floor(minutes);
tseconds = tseconds - (minutes * 60);

seconds = tseconds;
seconds = Math.floor(seconds);

document.getElementById('days').innerHTML = days;
document.getElementById('hours').innerHTML = hours;
document.getElementById('minutes').innerHTML = minutes;
document.getElementById('seconds').innerHTML = seconds;
ID=setTimeout("countdown();", 1000);
}
</script>

And here is the html that displays the time:
Code:

<SPAN id="days">0</SPAN>&nbsp;days,&nbsp;&nbsp;<SPAN id="hours">0</SPAN>&nbsp;hours,&nbsp; 
<SPAN id="minutes">0</SPAN>&nbsp;minutes,&nbsp; 
<SPAN id="seconds">0</SPAN>&nbsp;seconds&nbsp;

Thanks for your help,
Jimmy

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!

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

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