Learn VBA & Macros in 1 Week!

JavaScript - Swap Display Action With Fade Effect Need Help

Full Excel VBA Course - Beginner to Expert

Swap Display Action With Fade Effect Need Help	View Content

Full Excel VBA Course - Beginner to Expert

Fade Effect Help?

Similar Tutorials

View Content

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

Fade Effect Works In Ie, But Not In Ff

Similar Tutorials

View Content

Hi,

Please see URL http://backstageweb.net/Salon/indexslides2.htm.

(code is below, original source: http://javascript.internet.com/misce...lide-show.html

The slide show cross-fade effect in this script works in IE, but not in FF. I know there are better scripts I could use, but I like this one because of its simplicity (doesn't require any accompanying CSS, etc). But I need it to work in all browsers. Is there a simple fix here?

Thanks,

John

Code:

<head>
<script type="text/JavaScript">
<!-- Original:  CodeLifter.com (support@codelifter.com) -->
<!-- Web Site:  http://www.codelifter.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'images/01.jpg'
Pic[1] = 'images/02.jpg'
Pic[2] = 'images/03.jpg'
Pic[3] = 'images/04.jpg'
Pic[4] = 'images/05.jpg'

// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
//  End -->
</script>
</head>

Code:

<body onLoad="runSlideShow()">

Code:

<div id="slides">
    <img src="images/01.jpg" name='SlideShow' width="380" height="541"> 
  </div>

Fade Effect For Images

Similar Tutorials

View Content

Hi,
I have problem with javascript for image effects...

Here is the LINK...

login with theese nick and pass:
nick: google
pass: googleads

the problem:

When you log into, on the top of the page are 4 images with fade effect...
But effect is wrong. When I came first I see those images in full collors. How to change my script to show them in grey when I first came?

Thanks in advance...

Problem With Several Rows For Fade Effect

Similar Tutorials

View Content

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>

Changing A Slide Effect To A Fade Help?

Similar Tutorials

View Content

I am currently trying to convert a relatively simple slide effect in javascript to a fade effect, I have attached the code below and be grateful if anyone can help,

var slider = null;
var slider_next = null;

$(function () {

var interval = setInterval('rotate_slider()', 11000);

pos = (window.location.pathname == "/" || window.location.pathname == "/home" ? '1280' : '1280');

$('#featuredSlider > div:not(:first)').attr('style','position:absolute;left:'+ pos +'px;width:1280px');
$('#featuredSlider > div:first').next().attr('style','position:absolute;left:0px;width:1280px');

$('#featuredShortcuts > div').click( function() {

clearInterval(interval);

sliders = $('#featuredSlider > div:not(:first)');

sliders.css({"left": "1280px", "opacity": 0});

var curr_div = $(this);
var selected_div = $('#featuredShortcuts > div.selected');

selected_div.toggleClass('selected');
curr_div.toggleClass('selected');

sliders.eq( parseInt(selected_div.attr('id').substr(1, 1)) ).animate({"left": "-=1280px", "opacity": 0}, 1000);
sliders.eq( parseInt(curr_div.attr('id').substr(1, 1)) ).animate({"left": "0px", "width": "1280px", "opacity": 1}, 1000);
});
});

function rotate_slider()
{
var next = null;
var curr_div = $('#featuredShortcuts > div.selected');

if( $('#featuredShortcuts > div:last').hasClass('selected') )
{
next = $('#featuredShortcuts > div:first');
}
else
{
next = curr_div.next();
}

curr_div.toggleClass('selected');
next.toggleClass('selected');

if( ! slider )
{
slider = $('#featuredShortcuts').next();
slider_next = slider.next();
}
else if ( slider_next.html() == $('#featuredSlider > div:last').html() )
{
slider = slider.next();
slider_next = $('#featuredShortcuts').next();
}
else if ( slider.html() == $('#featuredSlider > div:last').html() )
{
slider = $('#featuredShortcuts').next()
slider_next = slider_next.next();
}
else
{
slider = slider.next();
slider_next = slider.next();
}

slider.animate({"left": "-=1280px", "opacity": 0}, 1000);
slider_next.animate({"left": "0px", "width": "1280px","opacity": 1}, 1000, function () { slider.css('left', '1280px') });

}

Adding A Fade Effect To A Slideshow

Similar Tutorials

View Content

Hello all! This is my first time in the forum and I have been reading for a while. The information in here appears to be very accurate and useful. I am new to JavaScript. I have been programming sites for a while but have been using Flash for most of my animation and never really got into the ActionScript. Thanks to Apple... I can no longer use that crutch. So as I post in this forum please understand 2 things: 1 I am a beginner in JavaScript and 2. I want to learn not just copy, paste and move on!

Here is my issue: I have made a VERY SIMPLE slide show and it works perfectly. However, Now I want to add a fade in and out effect to the code. I have seen this done with the CSS opacity(alpha) and that seems to be the simplist way. However, I am having trouble fitting this into my code. Any direction in this matter would be great! Thanks so much!

Code:

	
var step=1
function switchImg()
{
if (!document.images)
return						
document.images.slide.src=eval("image"+step+".src")
if (step<9)
step++
else
step=1
setTimeout("switchImg()",3500)
}
switchImg()

Need Help Adding Fade Effect To My Javascript Slideshow

Similar Tutorials

View Content

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

</script>
</head>

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

<script type="text/javascript">

</script>
</body>
</html>

Adding Fade Effect To Slideshow Script

Similar Tutorials

View Content

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>

Javascript - Swap An Image Within An Expand/collapse Effect

Similar Tutorials

View Content

Hi everyone,

I have a set of "buttons" that expand/collapse information onClick, using Javascript that look like this...

Here is the CSS I used to create the look of the "buttons"...

Code:

div.btn_workshops {
	background-image: url(../images/btn_workshops_mid.gif);
	background-position: top left;
	background-repeat: repeat-x;
	cursor: pointer;
	height: 22px;
	margin-bottom: 1px;
	width: 330px;
}
div.btn_workshops_lt {
	background-image: url(../images/btn_workshops_lt.gif);
	background-position: 0 0;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%px;
}
div.btn_workshops_rt {
	background-image: url(../images/btn_workshops_rt.gif);
	background-position: 100% 0;
	background-repeat: no-repeat;
	height: 100%;
	padding: 3px 12px 0px 12px;
	width: 100%px;
}
.hide {
	display: none;
	visibility: hidden;
}
.show {
	display: block;
	visibility: visible;
}

Here is the HTML that contains the "buttons" and the text that will appear when you click on the "buttons" to expand them. Keep in mind that everything collapses when you click on any of the "buttons" a second time. This is done, using Javascript.

Code:

<div class="btn_workshops" onclick="expandWorkshops('workshop1');flipArrow('arrow1')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Basic Ceramics</span> - Jennifer Thompson
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow1" />
											</div>
										</div>
									</div>
                                    <div id="workshop1" class="hide">Instructor: Jennifer Thompson<br />
                                        Dates: October 9, 16, 23, and 30<br />
                                        Hours: 2:30pm - 5:30pm<br />
                                        Tuition: $250</p>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop2')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Head Drawing and Painting</span> - Daniel Shoreman
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow2" />
											</div>
										</div>
									</div>
                                    <div id="workshop2" class="hide">Instructor: Jennifer Thompson<br />
                                        Dates: 2/19, 2/26, 3/5, and 3/12<br />
                                        Time: 10am - 1pm<br />
                                        Tuition: $275
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop3')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Figure Drawing</span> - Tom Hampton
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow3" />
											</div>
										</div>
									</div>
                                    <div id="workshop3" class="hide">Instructor: Tom Hampton<br />
                                        Dates: August 7 and 14<br />
                                        Time: 9am - 4pm<br />
                                        Tuition: $150
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop4')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Photographing Portraits</span> - Susan Lilianas
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow4" />
											</div>
										</div>
									</div>
                                    <div id="workshop4" class="hide">Instructor: Susan Lilianas<br />
                                        Dates: February 19 - April 23<br />
                                        Time: 6pm - 9pm<br />
                                        Tuition: $200
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop5')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Still Life Oil Painting</span> - Daniel Shoreman
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow5" />
											</div>
										</div>
									</div>
                                    <div id="workshop5" class="hide">Instructor: Susan Lilianas<br />
                                        Dates: June 5, 12, 19, and 26<br />
                                        Time: 10am - 1pm<br />
                                        Tuition: $200
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>

Here is the JavaScript I used to create the expand/collapse effect...

Code:

//Expand Workshops
function expandWorkshops(obj) {
	var workshop = document.getElementById(obj)
	if ( workshop.className != "hide" )
		{ workshop.className = 'hide' }
	else { workshop.className = 'show'	}
}

Here is my problem. I added the downward, red arrows to give users a "hint" that the "buttons" will do some action if you click on them. By default, I have the arrows facing down to show that information will appear below the "button." Then once a user has expanded a block of information, I want the downward, red arrow to change to an upward, red arrow. I currently have that working, but it is only working "one way." In other words, when you click on any one of the "buttons," the arrow does change, but it does not change back to the default when you click on a "button" a second time to collapse the information.

Here is what it looks like with one of the "buttons" expanded. As you can see, I was successfully able to change the downward arrow to an upward arrow after the information expanded below. This helps show that the text can collapse upward if you click on the "button" a second time. Again, my problem is I am unable to get the upward arrow to return to its default, downward arrow appearance.

This is what it currently looks like when you click on the "button" a second time to collapse the information. As you can see, my expand/collapse effect works, and the text goes away, but I am unable to get the upward arrow to change back to the default, downward arrow.

This is the function that I added to my JavaScript, which successfully changes the arrow from down to up onClick, but fails to return the arrow image to default when you click again.

Code:

function flipArrow() {
	if ( document.images("arrow1").src = "static/images/arrow_down.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_up.gif' }
	else if ( document.images("arrow1").src = "static/images/arrow_up.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_down.gif' }
}

This is the full JavaScript that includes the expand/collapse effect and the unsuccessful swap arrow effect so you can everything together.

Code:

//Expand Workshops
function expandWorkshops(obj) {
	var workshop = document.getElementById(obj)
	if ( workshop.className != "hide" )
		{ workshop.className = 'hide' }
	else { workshop.className = 'show'	}
}
function flipArrow() {
	if ( document.images("arrow1").src = "static/images/arrow_down.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_up.gif' }
	else if ( document.images("arrow1").src = "static/images/arrow_up.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_down.gif' }
}

The flipArrow function I wrote is just my latest attempt. Believe me, I've tried all kinds of things, including "if else," "if else if," "if." I've tried Variables, getElementById, and switched out all different kinds of methods and ID's. No matter what, I can't seem to get any combination to work. Don't get me wrong. One of the previous methods I tried might have been the correct one, but I most likely did not write it correctly. I am no JavaScript expert at all. The code that I currently have was partly found on the Internet and partly modified by me after hours and hours of research and troubleshooting. I'm very proud that I was able to get this far, but I'm getting to the point where I am spending all day and night, every day, trying to figure this out. I always search forums before posting in them. This is probably the second time I've ever posted in a forum. I hope it helps. Sorry to ramble on. I just want to make sure you have as many details and samples as possible so I do not get any questions or confusion.

Thanks for your help!

Javascript Noob: Onmouseover Color Fade/change Effect Help

Similar Tutorials

View Content

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.

Using Dynamically Populating A Javascript Image Slideshow- Fade Effect?

Similar Tutorials

View Content

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

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

Swap Style Display

Similar Tutorials

View Content

Hello,

I'm trying to use a couple of radio buttons to toggle between text inputs being displayed, but although the code works well in IE and GC, it doesn't in FF.

That's my code:
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>
<title>number</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<script type="text/javascript">
function toggle(){
	if (Mailbox.style.display == "none") {
		document.getElementById('Mailbox').removeAttribute('style');
		document.getElementById('PhoneNum').removeAttribute('style');
//		document.getElementById('Mailbox').setAttribute('style','display:block');
		document.getElementById('PhoneNum').setAttribute( 'style', 'display:none');
	} else {
		document.getElementById('Mailbox').removeAttribute('style');
		document.getElementById('PhoneNum').removeAttribute('style');
		document.getElementById('Mailbox').setAttribute('style','display:none');
//		document.getElementById('PhoneNum').setAttribute('style','display:block');
	}
}
</script>

</head>
<body>
	<input type="radio" name="type" value="Voicemail" onclick="toggle()" checked="checked"/> VoiceMail
	<input type="radio" name="type" value="Phone" onclick="toggle()"/> Phone Number<br></br>
	<div id="Mailbox">Mailbox: <input type="text" name="mailbox"/></div>
	<div id="PhoneNum" style="display:none">Number: <input type="text" name="number"/></div>

</body>
</html>

Can anyone help me sort this out?

Thanks a lot,

David

Display Div For Set Amount Of Time, And Then Fade Out?

Similar Tutorials

View Content

Hey guys.

So I've been learning PHP and MySQLi for the past few weeks and it's going brilliantly!
I intend to start learning JS over the Xmas holidays, but right now I only have a very basic knowledge of it.

I was just wondering if someone could point me in the right direction on how to do this, as I think i should be pretty easy.

After someone changes something in the admin area [e.g. the position of an item] I want to be able to have a small div display at the top of the screen saying something like "Position Updated!" and then have it fade away after 2-3 seconds.

Just wondering if there's a fairly easy way to do this, or would I have to go get something like MooTools, etc.?

Thanks a lot!

Coverflow-like Effect Does Not Display Correctly In Ie

Similar Tutorials

View Content

The right most images are supposed to be visable and flip into view as the user scrolls. In IE, it's truncated and shoved over to the left. As you can see from the screenshot I attached, everything works fine in Moz.

I think this is the suspect bit of js:
Code:

//move out the images on the right, then delete the right most one
var end = old + 4;
if(end > this.getListLength()) end = this.getListLength();
for(var i = old + 1; i < end; i++) this.shiftOut(i, 'r', old, sel, end);
var start = sel - 3;
if(start < 0)	start = 0;
var lOffset = (this.containerWidth - 100 - this.widthOffset - 50) + ((old - sel) * 50);
var zIndex = 500 - ((old - sel) * 50);
var dur = this.chainDuration / 2;
this.tiltAway(old, 'r', lOffset, zIndex, dur);
var fn = function(){
Coverflow.center.apply(Coverflow, [sel, 'l', 1]);
for(var i = start; i < sel; i++) Coverflow.shiftIn(i, 'l', old, sel);
}
setTimeout(fn, dur / 2);
}	else if(old < sel) {
this.working = true;

Here's the CSS:
Code:

#__cvfl-coverflow{
	height: 560px;
	margin: auto;
	overflow: hidden;
	position: relative;
	width: 600px;
}

#__cvfl-coverflow-label{
	color: #fff;
	font: 15pt Arial;
	line-height: 1.3em;
	position: relative;
	top: 238px;
	z-index: 700;
	margin-left:85px;
	margin-top:15px;
}

#__cvfl-coverflow-label a{
	font-size:12pt;
	color:#0099FF;
}

#__cvfl-coverflow-holder{
	width: 650px;
	background:#000000;
}

Here's the html:
Code:

<div id="coverflowHolder">
<div id="__cvfl-coverflow-holder">
<div id="__cvfl-coverflow">
<div id="__cvfl-coverflow-wrapper"></div>
<div id="smallerPreview"></div>
<div>
<div id="__cvfl-coverflow-label"></div>
</div>
<!-- -->
</div>
</div>
<div id="oldlist" style="display:none"></div>
<SCRIPT type="text/javascript" src="coverflow.js">
</SCRIPT>
<SCRIPT type="text/javascript">
var canvas_compatible = false;
try {
canvas_compatible = !!(document.createElement('canvas').getContext('2d'));
} catch(e) {}
if (canvas_compatible) document.getElementById("__cvfl-coverflow-holder").style.display="";
else document.getElementById("oldlist").style.display="";	
</SCRIPT>

I'm not sure what the problem is with IE. Any input would be great, thx.

Jquery Picture Fade Script To Fade Background Image?

Similar Tutorials

View Content

This is a really awesome script that I'm sure all of you can put to use if you haven't yet heard of it.
However, I'm trying to get it to fade a background image on my css styled navigation for my a:hover.

Here is the script with a little simple tutorial on how to set it up:
http://bavotasan.com/tutorials/creat...r-fade-effect/

My only other knowledge is in PHP, so after about 2 hours of fail in this client-side language, I decided it was about time I should post where some experienced people can help.

I really appreciate all time you spend on this, and don't think it will take a moderate Javascript programmer very long.

This is the link to my site so far:
http://matt.mw/help-request

You can see the script working as it is on my little yellow MW logo on the right side of the navigation.

So in my scenario, I am looking to fade button.png to button-hover.png (both repeating on the x axis).

Any ideas?

How To Make A Page Fade Out, Then Fade In, With Different Text

Similar Tutorials

View Content

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!

Fade In

Similar Tutorials

View Content

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

Div Fade

Similar Tutorials

View Content

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

Swap

Similar Tutorials

View Content

could somebody plz tell me why this isnt working??

i want it specifically as it is because i need it in a bigger picture

Code:

<body>
<img id="down0" src="images/greentick.png" onclick="swap(0,1)" />
<br />
<table><tr><span id="0"><td>asdasdasd</td></span></tr></table>
<br />
<table><tr><span id="1"><td>ante gamisou re gyfto</td></span></tr></table>

<script type="text/javascript">
/*<![CDATA[*/
function swap(idA,idB){
	var cellA=document.getElementById(idA); 
    var cellB=document.getElementById(idB);
	if(cellA&&cellB){ 
		
        var temp=cellA.innerHTML;
		cellA.innerHTML=cellB.innerHTML; 
        cellB.innerHTML=temp;
	}
	alert(idB);
}
/*]]>*/
</script>
</body>

Background Img Fade In

Similar Tutorials

View Content

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