JavaScript - Opacity Changing (fade) Not Smooth

Hi all,

I am building a website with a smooth scroll function...

that site is: katielipsitt.com/website

As you will see if you click the menu links, the page scrolls too far up. I would like each div to stop right below the navigation. I am not very familiar with javascript, so I am wondering where in the code I would put this? I imagine I'll be able to put in something to tell the page to "scroll to Div'X' but leave 150 pixels of padding at the top" Is that possible?

Thanks!!

Please take a look at my site at http://purdypoodles.webs.com/index2.html to see what I have set up with frames. I'm looking for code that will allow users to click on "meet the parents" in the top frame, for example, and nicely scroll from the current position in the bottom frame to the Meet the Parents section also in the bottom frame. Then, if the user wants to go to Poodle Facts from there, it'll scroll smoothly from Meet the Parents to Poodle Facts. etc. I got a JS code somewhere, but it doesn't work. Any ideas??

Hi there.
I'm using JonDesign's SmoothGallery v2.1beta1 and would like to have the album navigation side-by-side with the image display.

With css I can almost achieve this, except that the album list disappears after clicking. A JS function is changing the opacity but can't figure out how to change this. Don't know JS and everytime I try to change anything the gallery stops working.

Can anyone help? Thanks in advance.

-----------------------------------------
GALLERY SCRIPT
http://smoothgallery.jondesign.net/download/
-----------------------------------------
EXAMPLE
http://www.script-tutorials.com/demos/52/index-2.php

Hi.
I'm using a tooltip javascript from this website:
http://sixrevisions.com/tutorials/ja...cript_tooltip/
This is what it looks like when it's working smoothly:
http://sandbox.leigeber.com/tooltip/

To fix scrolling issues, I changed (near the lower bottom, under "pos:function(e)"):
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
to:
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;

I'm using these tooltips for an image map that has 1,000 defined areas. In Firefox, everything works very smoothly. Everything works well and looks smooth/visually pleasing.
But in IE, the tooltips are "choppy" and "staticy". They work well when I continuously move my mouse over the image map without stopping. But when I completely stop the cursor on a part of the image map for about 1 full second, and then move my mouse, the tooltip stays where it is even though the mouse has moved. It then takes between 1 - 2 seconds for the tooltip to "catch up" and move to be next to the mouse/cursor - where it is supposed to be. Also, I must note that when I only have a few (like 3 or 4) defined areas for the image map, the tooltip works perfectly fine and smoothly in IE.
I'm very new to html and javascript, and so I'm finding myself at a bit of a loss as to why this is occuring. Can anyone offer any help as to how I can make this tooltip go smoothly between defined areas (not sure if that's the correct terminology) of the image map?

I'm new to javascript, and so, unsure of which parts could be causing the problems. However, I think it might have to do with the part from pos:function(e) on. If needs be, I'd be happy to post the full javascript code.

Code:

  pos:function(e){
   var u = ie ? event.clientY + document.getElementById('bodyid').scrollTop : e.pageY;
   var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
   tt.style.top = (u - h) + 'px';
   tt.style.left = (l + left) + 'px';
}

$(function() {
// HIDING THE CLASS
$(".ad-nav").css("opacity","0.0");

// ON MOUSE OVER
$(".ad-nav").hover(function () {

// SET OPACITY TO 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");
},

// ON MOUSE OUT
function () {

// SET OPACITY BACK TO HIDE
$(this).stop().animate({
opacity: 0.0
}, "slow");
});
});

I am hiding a Div and showing it on mouse over. Fade Animation is smooth on Safari but a bit choppy FF. Can anyone come up with a solution to make it run smoothly on both? thanks.

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

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

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?

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

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.

Hello. I know I get set opacity for IE using the CSS
Code:

filter:alpha(opacity=50);

and I set it with JS as
Code:

theObj.style.filter = "alpha(opacity=" + (opac * 100) + ")";

but how can I read it's initial value (and store it in a variable)?

Andy.

Added: I should mention I use this function to get the current style:
Code:

var GetStyle = function (el, strRule) {		// e.g. "font-size" - robertnyman.com
    var elem = (typeof el === 'string') ? document.getElementById(el) : el;
    if (document.defaultView && document.defaultView.getComputedStyle ) {
        return document.defaultView.getComputedStyle(elem, '').getPropertyValue(strRule);
    }
    else if ( elem.currentStyle ) {
        strRule = strRule.replace(/\-(\w)/g, function (strMatch, p1) {
            return p1.toUpperCase();
        });
        return elem.currentStyle[strRule];
    }
    else
        return '';
}

;

I have this code...
I want to be able to make each image fade from one to the other.
Like this...
http://www.dynamicdrive.com/dynamici...nslideshow.htm

Is there a way to do that with this code?

Code:

<script type="text/javascript">
// Simple Javascript Time based Image Swap

var Pics = new Array();

var counter = 0;


// Use this section to change the image paths
function LoadImages()
{
 Pics[1] = new Image();
 Pics[1].src = "images/pic1.jpg";
 Pics[2] = new Image();
 Pics[2].src = "images/pic2.jpg";
 Pics[3] = new Image();
 Pics[3].src = "images/pic3.jpg";
 Pics[4] = new Image();
 Pics[4].src = "images/pic4.jpg";
 Pics[5] = new Image();
 Pics[5].src = "images/pic5.jpg";
 Pics[6] = new Image();
 Pics[6].src = "images/pic6.jpg";
 Pics[7] = new Image();
 Pics[7].src = "images/pic7.jpg";
 Pics[8] = new Image();
 Pics[8].src = "images/pic8.jpg";
 Pics[9] = new Image();
 Pics[9].src = "images/pic9.jpg";
 Pics[10] = new Image();
 Pics[10].src = "images/pic10.jpg";
 Pics[11] = new Image();
 Pics[11].src = "images/pic11.jpg";
 Pics[12] = new Image();
 Pics[12].src = "images/pic12.jpg";
 Pics[13] = new Image();
 Pics[13].src = "images/pic13.jpg";
 Pics[14] = new Image();
 Pics[14].src = "images/pic14.jpg";
 Pics[15] = new Image();
 Pics[15].src = "images/pic15.jpg";
 Pics[16] = new Image();
 Pics[16].src = "images/pic16.jpg";
 Pics[17] = new Image();
 Pics[17].src = "images/pic17.jpg";

 document.pic1.src = Pics[1].src;
}
//Time in miliseconds
function timedImage()


{
counter ++
 if (counter > 17) {
   counter = 1;
 }
 document.pic1.src = Pics[counter].src;
t=setTimeout("timedImage()",5000);
}
</script>

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