JavaScript - Problem With Javascript Fade Images Script In I.e.

Hello - I'm trying to add a fade effect between slideshow transitions. The script I'm building from is the Rich HTML Slideshow script which appears below.

The slides that rotate are wrapped in <div> tags with a class of "dyncontent" and I've managed to make the slideshow transition just fine, but not with any kind of fade effect. It just "snaps" from one slide to the next. Is this a fairly simple addition? Thanks!
<script type="text/javascript">

if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">\n')
document.write('.dyncontent{display: none; width: 250px; height: 60px;}\n')
document.write('</style>')
}

var curcontentindex=0
var messages=new Array()

function getElementByClass(classname){
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
messages[inc++]=alltags[i]
}
}

function rotatecontent(){
//get current message index (to show it):
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0
//get previous message index (to hide it):
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1
messages[prevcontentindex].style.display="none" //hide previous message
messages[curcontentindex].style.display="block" //show current message
}


window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent")
setInterval("rotatecontent()", 2000)
}
}

</script>

Hey, I have modified a script that used to fade in a image (and it worked fine) to fade in a table with that image inside it.
The table doesn't fade in

The HTML that is produced is exactly this, but the hashes are urls:
Code:

<table style="float:left; opacity:0; ">
<tr
<td>
<a href="#" rel="lightbox[group]">
<img src="#" width="97" height="97" />
</a>
</td>
</tr>
<tr>
<th>
</th>
</tr>
</table>

These are my two functions
Code:

function addImage(src) {
	var table = document.createElement("table");
	table.style.float = "left";
	
	var tr_1 = document.createElement("tr");
		
	var td_1 = document.createElement("td");
			
	var a_1 = document.createElement("a");
	a_1.src = src;
	a_1.rel = "lightbox[group]";
	
	var img_1 = document.createElement("img");
	img_1.src = src;
	img_1.width = 97;
	img_1.height = 97;
	
	a_1.appendChild(img_1);	
	td_1.appendChild(a_1);	
	tr_1.appendChild(td_1);
	
	var tr_2 = document.createElement("tr");
	var th_2 = document.createElement("th");
	
	tr_2.appendChild(th_2);	
	
	table.appendChild(tr_1);
	table.appendChild(tr_2);

	document.getElementById("thumbnails").appendChild(table);
	if (table.filters) {
		try {
			table.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
		} catch (e) {
			// If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
			table.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
		}
	} else {
		table.style.opacity = 0;
	}

	table.onload = function () {
		fadeIn(table, 0);
	};
}

function fadeIn(element, opacity) {
	var reduceOpacityBy = 5;
	var rate = 30;	// 15 fps


	if (opacity < 100) {
		opacity += reduceOpacityBy;
		if (opacity > 100) {
			opacity = 100;
		}

		if (element.filters) {
			try {
				element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity;
			} catch (e) {
				// If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
				element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
			}
		} else {
			element.style.opacity = opacity / 100;
		}
	}

	if (opacity < 100) {
		setTimeout(function () {
			fadeIn(element, opacity);
		}, rate);
	}
}

this is the previous addImage function:
Code:

function addImage(src) {
	var newImg = document.createElement("img");
	newImg.style.margin = "5px";

	document.getElementById("thumbnails").appendChild(newImg);
	if (newImg.filters) {
		try {
			newImg.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
		} catch (e) {
			// If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
			newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
		}
	} else {
		newImg.style.opacity = 0;
	}

	newImg.onload = function () {
		fadeIn(newImg, 0);
	};
	newImg.src = src;
}

The opacity of the table stays at 0, and never appears (but I can still click on the link)

Can anyone help me make the table fade in like it was supposed to?

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

I have a script that fades links on load and im trying to get this to work on everything but the menu link that has the "active" class

Code:

<div id="menu">
<ul><li id="Home"><a title="Home" href="/" style="opacity: 0.6;">Home</a></li>
<li class="active" id="projects"><a title="projects" href="/projects/" style="opacity: 0.6;">projects</a></li>
<li class="last" id="Contact"><a title="Contact" href="/contact" style="opacity: 0.6;">Contact</a></li>
</ul>
</div>

and here is the javascript.. (JQuery)

Code:

$(document).ready(function(){
$("#menu a").fadeTo("slow", 0.6); // This sets the opacity of the menu to fade down to 60% when the page loads
$("#menu a").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 40% on hover
},function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity back to 100% on mouseout
});
});

What do I add so any "<li>" that has the class "<li class="active"> isnt effected by the javascript so it just displays at 1.0 instead of 0.6?

Hi! I'm wondering if somebody here could help me please. I'm trying to develope the image slideshow using PHP and JavaScript. The idea is that the PHP file gets random images from the folder, i'm using session to prevent repeating the same image and then JavaScript generates the fade slideshow using that PHP file. I've come up with the solution to use two img tags in the HTML page, so JavaScript then swap them around and play with opacity, but unfortunately couldn't make it work. Everything I have tried in JavaScript didn't work properly. I'd be grateful for any help and advice guys. Thank you.

My PHP code:

PHP Code:
<?php 
class images {

    var $images = Array();
    var $imgDir = 'images/';
    
    function getImages() {
        $images = Array();
        if ($dir = opendir($this->imgDir)) {
            while(($file = readdir($dir)) !== false) {
                if(preg_match('#(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)#i', $file)) $images[] = $file;
            }
            closedir($dir);
        }
        return $images;
    }
    
    function getNextImage() {
        if (($images = $this->getImages()) !== false) {
            session_start();
            if (!isset($_SESSION['image'], $images[$_SESSION['image']])) {
                $index = mt_rand(0, count($images)-1);
            } else {
                $index = $_SESSION['image'] == count($images)-1 ? 0 : $_SESSION['image']+1;
            }
            $_SESSION['image'] = $index;
            return $images[$index];
        }
        return false;
    }
    
    function outputImage() {
        if (($file = $this->getNextImage()) !== false) {
            header('Cache-Control: no-cache, must-revalidate'); // HTTP/1.1
            header('Expires: Wed, 9 Dec 1981 07:00:00 GMT'); // Date in the past
            header('Content-type: image/jpg');
            readfile($this->imgDir.$file);
            exit();
        }
    }
}
$img = new images();
$img->outputImage();
?>

My HTML page:

Code:

<html>
<head>
<title>Images</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="javascript/slideshow2.js" language="javascript"></script>
</head>

<body onload="startSlideShow();">
<h1>Images</h1>
<div id="imageWrap">
	<div id="images">
		<img id="sampleImgFade" src="images.php" alt="images" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;" width="800" height="600" onload="coverLoaded(this);" />
		<img id="sampleImg" src="images.php" width="800" height="600" alt="images" onload="mainLoaded();" />
	</div>
</div>
</body>
</html>

CSS code:

Code:

#imageWrap {
	clear: both;
}
#images {
	position: relative;
	clear: both;
}
#sampleImgFade {
	position: absolute;
	top: 0px;
	left: 0px;
}

JavaScript code which doesn't work properly(just to show in which direction I'm going):

Code:

var img;
var loaded = new Array();
loaded['start'] = true;
loaded['main'] = false;
loaded['cover'] = true;
var fade = 0;
var i = 0;
function getImage() {
	img = new image();
	img.src = "images.php";
}
function coverLoaded(obj) {
	loaded['cover'] = true;
	setOpacity(obj, 100);
	window.setTimeout("startFade", 5000);
}
function mainLoaded() {
	loaded['main'] = true;
	if (loaded['start'] && loaded['cover'] && loaded['main']) startFade();
}
function startFade() {
	loaded['start'] = false;
	loaded['main'] = false;
	loaded['cover'] = false;
	fade = window.setInterval("fadeIn()", 50);
}
function fadeIn() {
	var obj = document.getElementById("sampleImgFade");
	var opacity = getOpacity(obj);
	if (opacity > 0) {
		setOpacity(obj, opacity-5);
	} else {
		window.clearInterval(fade);
		document.getElementById("sampleImg").src = "images.php?u="+i++;
	}
}
function getOpacity(obj) {
	if (obj.filters) {
		return obj.filters.item("DXImageTransform.Microsoft.Alpha").Opacity;
	} else if (obj.style.MozOpacity) { // mozilla
		return obj.style.MozOpacity*100;
	} else if (obj.style.KhtmlOpacity) { // konquerer
		return obj.style.KhtmlOpacity;
	} else { // not supported
		return 0;
	}
}
function setOpacity(obj, opacity) {
	if (obj.filters) {
		obj.filters.item("DXImageTransform.Microsoft.Alpha").Opacity = opacity;
	} else if (obj.style.MozOpacity) { // mozilla
		obj.style.MozOpacity = opacity/100;
	} else if (obj.style.KhtmlOpacity) { // konquerer
		obj.style.KhtmlOpacity = opacity;
	}
}

Hello, I'm learning javascript, and was wondering if it was Possible to have buttons/links that you click, the whole page fades out, and then fade's in, with different stuff. here are my ideas for just changing the stuff

Text:
1. having a javascript src file to start, and then when the button is clicked, that is formatted to white, the text layer is moved down, and a new javascript file is loaded?

2.variables?

any help would be appreciated!

Thanks, Cookies, whatever this forum gives out, you may receive!

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="images/slideshow/image001.jpg"
var image2=new Image()
image2.src="images/slideshow/image002.jpg"
var image3=new Image()
image3.src="images/slideshow/image003.jpg"
var image4=new Image()
image4.src="images/slideshow/image004.jpg"
var image5=new Image()
image5.src="images/slideshow/image005.jpg"
var image6=new Image()
image6.src="images/slideshow/image006.jpg"
var image7=new Image()
image7.src="images/slideshow/image007.jpg"
var image8=new Image()
image8.src="images/slideshow/image008.jpg"
var image9=new Image()
image9.src="images/slideshow/image009.jpg"
var image10=new Image()
image10.src="images/slideshow/image010.jpg"
var image11=new Image()
image11.src="images/slideshow/image011.jpg"
var image12=new Image()
image12.src="images/slideshow/image012.jpg"
var image13=new Image()
image13.src="images/slideshow/image013.jpg"
var image14=new Image()
image14.src="images/slideshow/image014.jpg"
var image15=new Image()
image15.src="images/slideshow/image015.jpg"
var image16=new Image()
image16.src="images/slideshow/image016.jpg"
var image17=new Image()
image17.src="images/slideshow/image017.jpg"
var image18=new Image()
image18.src="images/slideshow/image018.jpg"
var image19=new Image()
image19.src="images/slideshow/image019.jpg"
var image20=new Image()
image20.src="images/slideshow/image020.jpg"
//-->
</script>
</head>

<body>
<img src="images/slideshow/image001.jpg" name="slide">

<script type="text/javascript">
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src" )
if (step<20)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
</body>
</html> 

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

Hi,

This must be a 1st.

It works ok in IE...But not in Firefox?

I need to use white text over a dark bg color or if possible over an image.
The problem is in FF the white text distorts on fade

The black text works ok when adding the white bg.

See my test code below. (It can be copied straight in to test)

If anyone could please take a quick look and give some pointers.

Code:

 <!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML DIR="LTR" LANG="en">
<head>
<title>Working-Test-Banner</title>
<style type="text/css">
#welcomebanner img {border: none;}
#wrapper{position:relative;}
#welcomebanner {margin: 0; padding: 0;  position:relative;background-color:color:#fff;}
#welcomebanner ul, #welcomebanner li {margin: 0; padding: 0; list-style: none;}
#welcomebanner li {display: none;}

p{font-size:30px;background-color:purple;color:#fff;}

h2{font-size:30px;background-color:#fff;color:#000;}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
	var $j = jQuery;
	var welcomeBannerTimer;
	
	function nextSlide(){
		var el = $j('#welcomebanner');
		var slides = el.data('slides');
		var c = el.data('slideIndex');
		var n = ((c+1) >= slides.length)? 0 : c+1;
		el.data('slideIndex', n);
		$j(slides[c]).fadeOut(null, function(){
			$j(slides[n]).fadeIn();
			
		});
	}
	
	function over(){
		clearInterval(welcomeBannerTimer);
	}
	
	function out(){
		welcomeBannerTimer = setInterval(nextSlide, 3000);
	}
	
	$j(window).load(function() {
		var el = $j('#welcomebanner');
		var slides = $j('#welcomebanner>li');
		if (slides.length < 2){
			$j(slides[0]).show();
			return;
		}
		el.data('slides', slides);
		el.data('slideIndex', 0);
		welcomeBannerTimer = setInterval(nextSlide, 3000);
		el.bind('mouseenter', over).bind('mouseleave', out);
		$j(slides[0]).show();
		
	});
	
	
</script>

</head>
<body>

<div id="wrapper">

<ul id="welcomebanner">

  <li>

	<h2>testing the text fade</h2>
	<p>testing the text fade</p>

 </li>  

 <li>  

<h2>Firefox and IE problems</h2>
	<p>Firefox and IE problems</p>

 </li>  
   
</ul>

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

okay i have a problem...i get the content of my rows from my database... the problem is when there is 4 rows... and i try to click on the 1st row... instead of it being deleted the 3rd row is deleted.. when i click on the 2nd row... the 4th row is delete...

the moveicon.gif is the image for deleting the row.. there is no problem when i remove the javascript...but when i applied it i noticed the poblem


Code:

<table width="759" border="0">
    <tr>
      <td colspan="5"><span class="style8">Confirmed Request</span> </td>
    </tr>
    <tr>
      <td width="105" bgcolor="#408080"><span class="style5">Type</span></td>
      <td width="463" bgcolor="#408080"><span class="style5">Topic</span></td>
      <td width="108" bgcolor="#408080"><span class="style5">Date</span></td>
      <td width="25" bgcolor="#408080"><div align="center"></div></td>
      <td width="36" bgcolor="#408080"><div align="center"></div></td>
    </tr>
<%@ page import="com.sun.rowset.CachedRowSetImpl;" %>
<%
	


	int i = 0;
 	CachedRowSetImpl crset3 = new CachedRowSetImpl();
    crset3 = view.home2();
    
    	while (crset3.next())
		{
		
	String day3 = crset3.getString("dep_date");
		
	  String[] monthcol2= day3.split("-");
      
       year = Integer.parseInt(monthcol2[0]); 
       month = Integer.parseInt(monthcol2[1]);
       day= Integer.parseInt(monthcol2[2]);
       m="";
      
      if(month==1)
      {
      m="Jan";
      }
      else if (month==2)
      {
      m="Feb";
      }
      else if (month==3)
      {
      m="March";
      }
      else if (month==4)
      {
      m="April";
      }
      else if (month==5)
      {
      m="May";
      }
      else if (month==6)
      {
      m="June";
      }
      else if (month==7)
      {
      m="July";
      }
      else if (month==8)
      {
      m="Aug";
      }
      else if (month==9)
      {
      m="Sept";
      }
      else if (month==10)
      {
      m="Oct";
      }
       else if (month==11)
      {
      m="Nov";
      }
      else if (month==12)
      {
      m="Dec";
      }
      
      
		if(i==0)
		{
		%>
     <tr>
<script src="images/jquery-latest.js"></script>

<script type="text/javascript">
<!--
function confirmation1(){
        var answer = confirm("Do you want to move this to archives?")
	if (answer){

		$("#movieIcon").parents("tr").fadeOut("slow");		
window.location = "http://localhost:8080/ICTPROJ/deployment/archiver.jsp?r=<%=crset3.getString("ref_num")%>&t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>";
	}
	else{
	}

    }
//-->
</script>

      <td  scope="row"><fade1><div align="left" class="style22"><span class="style7"> <%= crset3.getString("dep_type") %> </span>&nbsp;</div></fade1></td>
   	  <td  scope="row"><div align="left" class="style22"><span class="style7"> <%= crset3.getString("dep_name")%></a>
</span>&nbsp;</div></td>
       <td > <span class="style7">
       <% out.println(day);%>
       <% out.println("-");%>
       <% out.println(m);%>
       <% out.println("-");%>
       <% out.println(year);%> 
       </span></td>
       <td ><div align="center"><a href="http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>" onClick="chw=window.open('http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>','NewWindow','resizable=yes,scrollbars=yes,status=yes,width=640,height=500'); if (chw != null) chw.focus(); return false"><img src="../Chapters/images/reporticon.gif" border="0"></a></div></td>
       <td ><div align="center"><img id="movieIcon" src="images/moveicon.gif" width="29" height="29" border="0" onClick="confirmation1()"/></div></td>
    </tr>
<%
			i=1;
		}
		else
		{
%>
      <tr>
<script type="text/javascript">
<!--
<!--
function confirmation(){
        var answer = confirm("Do you want to move this to archives?")
	if (answer){

		$("#movieIcon1").parents("tr").fadeOut("slow");		
window.location = "http://localhost:8080/ICTPROJ/deployment/archiver.jsp?r=<%=crset3.getString("ref_num")%>&t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>";
	}
	else{
	}

    }
//-->
//-->
</script>

         <td bgcolor="#CCCCCC" scope="row"><div align="left" class="style22"><span class="style7"> <%= crset3.getString("dep_type") %></span>&nbsp;</div></td>
   	  <td bgcolor="#CCCCCC" scope="row"><div align="left" class="style22"><span class="style7"><%= crset3.getString("dep_name")%>
</span>&nbsp;</div></td>
        <td bgcolor="#CCCCCC"> <span class="style7">
        <% out.println(day);%>
        <% out.println("-");%>
        <% out.println(m);%>
        <% out.println("-");%>
        <% out.println(year);%> 
        </span></td>
        <td bgcolor="#CCCCCC"> <a href="http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>" onClick="chw=window.open('http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>','NewWindow','resizable=no,scrollbars=yes,status=no,width=640,height=500'); if (chw != null) chw.focus(); return false"><div align="center"><img src="../Chapters/images/reporticon.gif" border="0"></div>
        </a></td>
        <td bgcolor="#CCCCCC" ><div align="center"><img id="movieIcon1" src="images/moveicon.gif" width="29" height="29" border="0" onClick="confirmation()"></div></td>
    </tr>
<%	
			i=0;
    	}
    }
%>
  </table>

Hi,

I'm building a website which uses javascript to cycle through and fade images in the header portion of each web page. The javascipt os located in an external file and called via the master page. Here is the code in the content.js file which specifies where the images are located:

Code:

// create array of images
var CyclingImages = new Array("header/images/tankimage1.gif",
                              "header/images/tankimage2.gif", 
                              "header/images/tankimage3.gif",
                              "header/images/tankimage4.gif")

Here is the code in the master page which finds the javascript:

Code:

 <script language="javascript" src="<%= Page.ResolveUrl("~/content/content.js") %>"  type="text/javascript"></script>

Here is the function call in the masterpage to fade and cycle the images:

Code:

<body onload="FadeAndCycleImages()">

Here is the code in the masterpage which references the cycling images:

Code:

<span class="fadingimages">
                <img src="<%= Page.ResolveUrl("header/images/tankimage1.gif") %>" width="142" height="124" title="" alt="" name="cyclingimage"  />
            </span>

Each webpage loads the masterpage. If the webpage is located at the root of the project, the cycle and fade functionality works great. When I start to place some of the webpages in separate folders - which I need to do - the cycling and fading functionality breaks down, meaning the images cannot be found. The image place holder is there with the standard red "x" in the upper left. I have done a lot of research and tried many approaches to try to resolve this issue, but with no success. The root of the problem seems to lie in the fact that I cannot apply Page.ResolveUrl within the content.js file. Any suggestions would be greatly appreciated.


Thank you,
petela

I have an age script running in the attachment below. It works fine for numbers such as 1 22 1980.

Code:

if ((input.search(/\b([1-9]|[12][0-9]|3[01])\b/)!= -1) && (input.search(/\b([1-9]|1[0-2])\b/)!=-1) && (input.search(/\b(19[0-9]{2}|200[0-9]|201[01])\b/)!= -1)) {       
function getBirth() {   
    var now = new Date(); 
    var myMatchy = input.match(/\b(19[0-9]{2}|200[0-9]|201[01])\b/);
    var myMatchm = input.match(/\b([1-9]|1[0-2])\b/)
    var myMatchd = input.match(/\b([1-9]|[12][0-9]|3[01])\b/);
    var year = myMatchy[0]; 
    var month = myMatchm[0];
    var day = myMatchd[0]; 
    var today = 
	{ 
		"year" : now.getFullYear(), 
		"month": now.getMonth()+1, 
		"day"  : now.getDate() 
	} 

    var age = today["year"] - year; 

    if (month > today["month"]) 
        age--; 
    else if (month == today["month"]) 
	         if (day > today["day"]) age--
    return age; 
} 
document.result.result.value = "Your age is "+getBirth()+"."; 
return true;}

However, if someone writes out the month it doesn't. Such as January 22 1980. I did a work-around by inserting the month value. Highlighted below. But that means I would have to duplicate this lengthy code 12 times for each month of the year. Anybody know a better way to handle this? You can test it in the small attachment below. Any help would be appreciated.

Code:

if ((input.search(/\b([1-9]|[12][0-9]|3[01])\b/)!= -1) && (input.search(/(january)/)!= -1) && (input.search(/\b(19[0-9]{2}|200[0-9]|201[01])\b/)!= -1)) {       
function getJan() {   
    var now = new Date(); 
    var myMatchy = input.match(/\b(19[0-9]{2}|200[0-9]|201[01])\b/);
    var myMatchd = input.match(/\b([1-9]|[12][0-9]|3[01])\b/);
     var month = 0;     
    var year = myMatchy[0]; 
    var day = myMatchd[0]; 
    var today = 
	{ 
		"year" : now.getFullYear(), 
		"month": now.getMonth()+1, 
		"day"  : now.getDate() 
	} 

    var age = today["year"] - year; 

    if (month > today["month"]) 
        age--; 
    else if (month == today["month"]) 
	         if (day > today["day"]) age--
    return age; 
} 
document.result.result.value = "Your age is "+getJan()+"."; 
return true;}

http://www.javascriptkit.com/javatut...rnalphp2.shtml


Anyone have a decent way of adding a fade affect to this script?

Hello everybody!

This is my first post at CodingForums!

I'm currently designing a wordpress theme, and I require a bit of javascript for a hover effect. I'm using Wordpress Jquery + Jquery Color Animations plugin.

The structu
I use a div (class="post") as a container for the wordpress post, and within the "post" div, I have a span (class="title") which I use to display the title of the post.

What I want to do is:
when the user hovers over (OnMouseOver) "post" div:
".title" spans's background color fades from black to red.

when the user hovers out (OnMouserOut) "post" div:
".title" spans's background color fades back to black.

The Code

Code:

$j(document).ready(function(){
	$j(".posts").hover(function(){
	$j (".posts .title").animate({ backgroundColor: "#FF0062" }, 300);
	},function(){
	$j(".posts .title").animate({ backgroundColor: "#231F20" }, 300);
	});
	});

The Problem

The code works, except when the user hovers over any "post" div, all "title" span change color. So my question is, how do I target the code to address ONLY the "title" span in the "post" div that is in hover state?


Any help would be greatly appreciated,

Cheers,

Drew.

Hi there,
I am new in web development. I think this problem is related to javascript. My javascript script is below which changes images after 2 sec. But when i call my start function in img tag in my third row div of my layout, it does not show images in that div or in that area. It show that series of images in first row.

<script>

var images = new Array ("img/1.jpg", "img/2.jpg", "img/3.jpg");
var currentIndex = 0;


function Start()
{
setInterval("ChangeImage()", 2000);
}

function ChangeImage()
{
currentIndex++;
if(currentIndex == images.length)
{
currentIndex = 0;
}

document.images[0].src = images[currentIndex];
}
</script>

first div in html:
<div id="menu">
<img src="header/menu.png" name="menu" id="m"/>
</div>

My slideshow images places here, u can see i have call Start() function in another div.

3rd div html:
<div id="slideshow-img">
<img src="img/3.jpg" name="myimg" id="myimg" onclick="Start()"/>
</div>

Please resolve my problem within an hour, I'll highly appreciate. Sorry for grammer mistakes, my english is not so good.