JavaScript - Fade Buttons Stop Nivoslider Working

I have 2 tables with Add/Remove Row buttons. The first table's Add Row button adds a row that belongs in the second table, and the Remove Row button gives me an Object Error. The second table works properly. The JavaScript for both tables is identical except for the ID's. When the tables are put into seperate html files both of the Add buttons work properly, but the remove row button from table one is still giving me the Object Error. Can someone point out what i'm doing wrong? Thanks.

Code for the first table
Code:

<SCRIPT language="javascript">
function addRow(kodaktable) {               
var table = document.getElementById(kodaktable);               
var rowCount = table.rows.length;             
var row = table.insertRow(rowCount);               
var cell1 = row.insertCell(0);             
var element1 = document.createElement("input");             
element1.type = "checkbox";             
cell1.appendChild(element1);               
var cell2 = row.insertCell(1); 
var element2 = document.createElement("input");             
element2.type = "text";             
cell2.appendChild(element2);                            
var cell3 = row.insertCell(2);             
var element2 = document.createElement("input");             
element2.type = "text";             
cell3.appendChild(element2); 
var cell4 = row.insertCell(2);             
var element2 = document.createElement("input");             
element2.type = "text";             
cell4.appendChild(element2);            
var cell5 = row.insertCell(2);             
var element2 = document.createElement("input");             
element2.type = "text";             
cell5.appendChild(element2); 
var cell6 = row.insertCell(2);             
var element2 = document.createElement("input");             
element2.type = "text";             
cell6.appendChild(element2); 
}
</script>
<script>                                        
function deleteRow(kodaktable) {             
try {             
var table = document.getElementById(kodaktable);             
var rowCount = table.rows.length;               
for(var i=0; i<rowCount; i++) {                 
var row = table.rows[i];                 
var chkbox = row.cells[0].childNodes[0];                 
if(null != chkbox && true == chkbox.checked) {                     
table.deleteRow(i);                     
rowCount--;                     
i--;                 
}               
}             
}catch(e) {                 
alert(e);             
}         
}       
</SCRIPT> 

<INPUT type="button" value="Add Row" onClick="addRow('kodaktable')" />
<INPUT type="button" value="Delete Row" onClick="deleteRow('kodaktable')" />
<TABLE id="kodaktable" width="350px" border="1">         
<TR>             
             
<tr>
	<th></th>
    <th>Job Name</th>
    <th>Job Number</th>
    <th>Start Doc</th>
    <th>End Doc</th>
    <th>Total</th>
  </tr>             
<tr>
	<td><INPUT type="checkbox" name="chk"/></td>
    <td><input type="text" name="name" /></td>
    <td><input type="text" name="name" /></td>
    <td><input type="text" name="name" /></td>
    <td><input type="text" name="name" /></td>
    <td><input type="text" name="name" /></td>
  </tr>
</TR>     
</TABLE>

code for the second table.
Code:

<SCRIPT language="javascript">
function addRow(incidenttable) {               
var table = document.getElementById(incidenttable);               
var rowCount = table.rows.length;             
var row = table.insertRow(rowCount);               
var cell1 = row.insertCell(0);             
var element1 = document.createElement("input");             
element1.type = "checkbox";             
cell1.appendChild(element1);               

var cell2 = row.insertCell(1); 
var element2 = document.createElement("input");             
element2.type = "text"; 
element2.size = "70";             
cell2.appendChild(element2);                            

var cell3 = row.insertCell(2);             
var element2 = document.createElement("input");             
element2.type = "text";
element2.size = "20";             
cell3.appendChild(element2); 

var cell4 = row.insertCell(2);             
var element2 = document.createElement("input");             
element2.type = "text";
element2.size = "20";             
cell4.appendChild(element2);
}                                        
function deleteRow(incidenttable) {             
try {             
var table = document.getElementById(incidenttable);             
var rowCount = table.rows.length;               
for(var i=0; i<rowCount; i++) {                 
var row = table.rows[i];                 
var chkbox = row.cells[0].childNodes[0];                 
if(null != chkbox && true == chkbox.checked) {                     
table.deleteRow(i);                     
rowCount--;                     
i--;                 
}               
}             
}catch(e) {                 
alert(e);             
}         
}       
</SCRIPT> 
<INPUT type="button" value="Add Row" onClick="addRow('incidenttable')" />
<INPUT type="button" value="Delete Row" onClick="deleteRow('incidenttable')" />
<table id="incidenttable" width="790px" border="1">
<tr>
     <th></th>
     <th>Incident</th>
     <th>Kodak Downtime</th>
     <th>System Downtime</th>
</tr>
<tr>
     <td><INPUT type="checkbox" name="chk"/></td>
     <td><input type="text" name="name" size="70" /></td>
     <td><input type="text" name="name" size="20"></td>
     <td><input type="text" name="name" size="20"></td>
</tr>
</table>

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

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

I need to have an image hyperlinked to a js function that fades text elswhere on the page. I imagine it looks something like <a href="(some js function or somethingrather"><img src="theimg.png"></a>, but how do I do it exactly? I would like code that I can just copy and paste in my header that is set to fade a specific line of text, and be able to hyperlink and image to initiate the js. Please help.

Carson
www.carsonkahn.com

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?

Hi all,

I have created the following page http://kylehouston.com/new/index_new.html

I have used JQuery to add animated load icon followed by my images fading in, the load works fine and the images appear but the problem is the fade in wont work.

I have tried a few methods to try and get them to fade including adding spans round my images but the only thing that seems to work for me is setting all divs to fade in which I dont want to happen.

Anyone got any advice?

Thanks in advance!

Kyle

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.

Hi,

I have a problem with a fade script using jquery,
in firefox etc.. all is ok.

But IE the fade does not fade it just comes in & out.

If any one would be kind enough to have a quick look
I would appreciate it.

You can see the js in the main page, not an external file.

The url is www.thecityspa.co.uk

I've managed to get a slideshow to randomly display pictures, but each time I try to add a fade into it, it never seems to work. Can anyone give me some advice?



<script language="javascript">


var delay=2500 //set delay in miliseconds
var curindex=0

var randomimages=new Array()

randomimages[0]="image1.jpg"
randomimages[1]="image2.jpg"
randomimages[2]="image3.jpg"




var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
preload[n]=new Image()
preload[n].src=randomimages[n]
}

document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

document.images.defaultimage.src=randomimages[curindex]
}

setInterval("rotateimage()",delay)

</script>

<p align="center">This free script provided by<br />
<a href="http://javascriptkit.com">JavaScript
Kit</a></p>

I was using the below code to fade text links in and out on hover. But the problem I'm having is that if you hover over the text a few times quickly the animation will play over and over. Can someone help me add a 'callback'(?) so while the animation is still playing it won't fade in/out again until its finished? Or point me in the direction of a better way of doing this effect.

Thanks for reading and I looking forward to your help and responses!

Heres the code:

Code:

$(document).ready(function(){
$(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads

$(".thumbs img").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
});
});

I wrote a simple javescript for a slideshow that cycles through images and displays where the image is but I am wondering how to pause the slideshow and then add in a fading effect. Any help would be appreciated.

index.html
PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <title>Page 1</title>
        <link rel="stylesheet" type="text/css" href="css.css"></link>
        <script language="JavaScript" type="text/javascript" src="js.js"></script>
    </head>
    <body onLoad="LoadMenu(); PlaceArrow();">
        <table border="0" cellspacing="0" cellpadding="0" id="hmt" summary="layout" align="center">
            <tr><td colspan="4"><div id="htop"><img border="0" width="240" height="40" alt="" src="img/homet.png"></div></td></tr>
            <tr valign="top">
                <td id="hmtgut"><img border="0" width="50" height="250" alt="" src="img/homel.png"></td>
                <td id="hmtl"><img border="0" width="280" height="270" src="img/homelogo.png"></td>
                <td id="hmtr">
<script language="JavaScript" type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="photos/slides/photo01.jpg"
var image2=new Image()
image2.src="photos/slides/photo02.jpg"
var image3=new Image()
image3.src="photos/slides/photo03.jpg"
var image4=new Image()
image4.src="photos/slides/photo04.jpg"
var image5=new Image()
image5.src="photos/slides/photo05.jpg"
var image6=new Image()
image6.src="photos/slides/photo06.jpg"
var image7=new Image()
image7.src="img/thumbarrow.png"
var image8=new Image()
image8.src="img/spacer.gif"

var cphoto = Math.ceil(6*Math.random());
document.write('<div id="homephoto"><a href="javascript:slidelink()"><img border="0" name="photo" width="230" height="230" src="photos/slides/photo0'+cphoto+'.jpg"></a></div>');

var step=cphoto
var whichimage=step

function slideit()
{
if (!document.images)
return
document.images.photo.src=eval("image"+step+".src")
whichimage=step
if (step<6)
{
step=parseInt(Math.ceil(6*Math.random()))
}
else
{
step=1
}
setTimeout("slideit()",3000)
var i = "a" + whichimage
document.images.a1.src=eval("image8.src")
document.images.a2.src=eval("image8.src")
document.images.a3.src=eval("image8.src")
document.images.a4.src=eval("image8.src")
document.images.a5.src=eval("image8.src")
document.images.a6.src=eval("image8.src")
document.images[i].src=eval("image7.src")
}

slideit()

function slidelink()
{
if (whichimage==1)
window.open('img.php?img=1','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
else if (whichimage==2)
window.open('img.php?img=2','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
else if (whichimage==3)
window.open('img.php?img=3','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
else if (whichimage==4)
window.open('img.php?img=4','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
else if (whichimage==5)
window.open('img.php?img=5','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
else if (whichimage==6)
window.open('img.php?img=6','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
}

//-->
</script>
<noscript>
<div id="homephoto">
<img border="0" name="photo" width="230" height="230" src="photos/slides/photo01.jpg">
</div>
</noscript>
</td>
                <td id="mtmenu" valign="middle">Links Here</td>
            </tr>
            <tr>
                <td colspan="4">
                    <div id="hfoot">
                        <div id="hbot"><img border="0" width="240" height="20" alt="" src="img/homeb.png"></div>
                        <div id="thumb1">
                            <div><img border="0" vspace="9" hspace="2" name="a1" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(1); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo01thumb.jpg"></a></div>
                      </div>
                        <div id="thumb2">
                            <div><img border="0" vspace="9" hspace="2" name="a2" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(2); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo02thumb.jpg"></a></div>
                      </div>
                        <div id="thumb3">
                            <div><img border="0" vspace="9" hspace="2" name="a3" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(3); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo03thumb.jpg"></a></div>
                      </div>
                        <div id="thumb4">
                            <div><img border="0" vspace="9" hspace="2" name="a4" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(4); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo04thumb.jpg"></a></div>
                      </div>
                        <div id="thumb5">
                            <div><img border="0" vspace="9" hspace="2" name="a5" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(5); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo05thumb.jpg"></a></div>
                      </div>
                        <div id="thumb6">
                            <div><img border="0" vspace="9" hspace="2" name="a6" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(6); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo06thumb.jpg"></a></div>
                      </div>
                    </div>
                </td>
            </tr>
        </table>
</table>
</body>
</html> 


js.js
PHP Code:
function PlaceArrow() {
    if ( cphoto ) {
        carrow = "a" + cphoto;
        document.images[carrow].src = "img/thumbarrow.png";
    }
}

function LoadPhoto (i) {
    if (document.images) {
        carrow = "a" + cphoto;
        document.images[carrow].src = "img/spacer.gif";
        
        narrow = "a" + i;
        nphoto = "photo0" + i;
        document.images[narrow].src = "img/thumbarrow.png";
        document.images['photo'].src = "photos/slides/" + nphoto + ".jpg";
        
        cphoto = i;
    }
} 

Hi,
On my webpage I have an embedded link that jumps the users up to a text box for logging in. I'm trying to find a way so when they click that link, it will not only jump up to the text box but highlights it as well. I then want the highlight color to fade back to normal. I've been searching around but I can't find something that will work. Any ideas?

I'm trying to recreate the fade hover effect shown on the menu at the top here http://www.dragoninteractive.com/.

I have found some javascript which looks like it will do the trick.

But being a graphic designer and not a web developer or anything it just doesn't work. lol

Currently I have a CSS opacity filter on, but please discard that as it should just show what i am trying to achieve.

This is my very first attempt at Javascript

here is the html:

Code:

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

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

</head>
<body>
<div style="margin:20px;" class="modules">
  <div class="single_module"><a class="toggleopacity" href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div>
  <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div>
  <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div>
  <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div>
  <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div>
  <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div>
</div>
</body>

And the CSS:

Code:

.modules {
	margin:0px -20px 20px;
	background-color:#9999CC;
	min-height:100%;
	width:100%;
}
.single_module {
	border:solid 1px #000000;
	background-color:#000000;
	height:160px;
	padding:0;
	margin:-1px 0px 0px -1px;
	width:240px;
	float:left;
}
.toggleopacity img {
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity:0.5;
}
.toggleopacity:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity:1;
}

And the Javascript:

Code:

$("#single_module").css({ opacity: "0.0", display: "block" });
$("#single_module").hover(function(){$(this).fadeTo(100, 0.5);}, function(){$(this).fadeTo(300, 0.0);} );
$("#single_module").hide();
});