object issues.

**riptide** · 08-05-2008, 06:21 PM

I'm using some scripts from the net and some from here i got them to all work with eachother but one thing is strange. let me explain each part.

the first code is the opacity changing script I got from brain error.
it works well and uses getElementById to find the object to control.

The second code is a classname function because I want to control the opacity of a whole class of objects. the classname function and the second opacity function are hooked up correctly as far as I can tell. I don't really know how to make the opacity function control classNames and/or Ids so I have two opacity functions.

the third code is one I was given here and it works nice and I'm using it to fade two divs in by clicking on a green one.

the forth code is a copy of the code above but it now looks for class names and works with onmouseout.

I'm trying to make it so all the divs with the classname sectaball will fade out when the mouse moves off. the whole code worked when there was only one div by the name of sectaball.

there are some other things I want to do to the dup object but I read that calling settimeout on a method is tricky.

I was thinking of making a function to shrink the height of any div. so I would have to use getElementByTag or use the classname function.
and lastly the whole code doesn't work when the setaball divs are inside of the div called the can. I can't find a way to fix it.

thanks in advance

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=iso-8859-1" />
<title>Untitled Document</title>


<script type="text/javascript">

function opacity(id, opacStart, opacEnd, millisec) { 
    //speed for each frame 
    var speed = Math.round(millisec / 100); 
    var timer = 0; 

    //determine the direction for the blending, if start and end are the same nothing happens 
    if(opacStart > opacEnd) { 
        for(i = opacStart; i >= opacEnd; i--) { 
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); 
            timer++; 
        } 
    } else if(opacStart < opacEnd) { 
        for(i = opacStart; i <= opacEnd; i++) 
            { 
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); 
            timer++; 
        } 
    } 
} 

//change the opacity for different browsers 
function changeOpac(opacity, id) { 
    var object = document.getElementById(id).style; 
    object.opacity = (opacity / 100); 
    object.MozOpacity = (opacity / 100); 
    object.KhtmlOpacity = (opacity / 100); 
    object.filter = "alpha(opacity=" + opacity + ")"; 
 

}





/*test code under here classname function added. the above code works*/


function getElementsByClass(node,searchClass,tag) {
		    var classElements = new Array();
		    var els = node.getElementsByTagName('div'); // use "*" for all elements
		    var elsLen = els.length;
		    var pattern = new RegExp("\\b"+searchClass+"\\b");
		    for (i = 0, j = 0; i < elsLen; i++) {
		         if ( pattern.test(els[i].className) ) {
		             classElements[j] = els[i];
		             j++;
		         }
		    }
		    return classElements;
		}

/*classname function*/
function Classopacity(searchClass, opacStart2, opacEnd2, millisec) { 
    //speed for each frame 
    var speed2 = Math.round(millisec / 100); 
    var timer2 = 0; 

    //determine the direction for the blending, if start and end are the same nothing happens 
    if(opacStart2 > opacEnd2) { 
        for(i = opacStart2; i >= opacEnd2; i--) { 
            setTimeout("changeClassOpac(" + i + ",'" + searchClass + "')",(timer2 * speed2)); 
            timer2++; 
        } 
    } else if(opacStart2 < opacEnd2) { 
        for(i = opacStart2; i <= opacEnd2; i++) 
            { 
            setTimeout("changeClassOpac(" + i + ",'" + searchClass + "')",(timer2 * speed2)); 
            timer2++; 
        } 
    } 
} 




/*  above second opacity function for classes. below function to call the classnames opacity working as far as I know*/

function changeClassOpac(opacity, searchClass) { 
    
	var Cobject = getElementsByClass(document,searchClass,'div');

		   //alert(myEls[0].name);

		   for(i = 0; i < Cobject.length; i++){
    Cobject[i].style; 
    Cobject[i].style.opacity = (opacity / 100); 
    Cobject[i].style.MozOpacity = (opacity / 100); 
    Cobject[i].style.KhtmlOpacity = (opacity / 100); 
    Cobject[i].style.filter = "alpha(opacity=" + opacity + ")";
}}






</script>




<style type="text/css">
<!--
#vanish {
	
	border: 1px solid #000033;
	position: absolute;
	left: 120px;
	top: 40px;
filter:alpha(opacity=0);
-moz-opacity:.0;
	opacity:.0;
-khtml-opacity: .0;	
	
}
#thecan {
	background-color: #00CC33;
	position: absolute;
	height: 50px;
	width: 200px;
	left: 100px;
	top: 40px;
	
}
.sectaball {
	background-color: #003399;
	height: 100px;
	width: 100px;
filter:alpha(opacity=0);
-moz-opacity:.0;
	opacity:.0;
-khtml-opacity: .0;


}
#thetest {
	border: thin dashed #990000;
filter:alpha(opacity=0);
-moz-opacity:.0;
	opacity:.0;
-khtml-opacity: .0;	
}
-->
</style>
</head>

<body>
<div id="vanish"   class="sectaball"  > this is the nav </div>

<div id="thecan"  class="linksclass2"></div>

<div id="thetest"   class="sectaball"  > this is the class test </div>


<script type="text/javascript">


var action=new Object();


action.linksclass1=function(e){
var el=window.event&&window.event.srcElement? window.event.srcElement : e&&e.target? e.target : null;
if(el)
alert(el.innerHTML);
return false;
}
action.thecan=function(){ opacity('vanish', 0, 100, 1000);opacity('thetest', 0, 100, 1000) ;
return false;
}
action.vanish=function(){alert("still works") ;

return false;
}

var theas=document.getElementsByTagName('div');
for (var i_tem = 0; i_tem < theas.length; i_tem++)
theas[i_tem].onclick=action[theas[i_tem].id];










var dup=new Object();

dup.vanisher2=function(e){
var el=window.event&&window.event.srcElement? window.event.srcElement : e&&e.target? e.target : null;
if(el)
alert(el.innerHTML);
return false;
}

dup.sectaball=function(){ /*Classopacity('sectaball', 100, 0, 1000)*/ alert("may work");


return false;
}



var sectabs=document.getElementsByTagName('div');
for (var Snav = 0; Snav < sectabs.length; Snav++)
sectabs[Snav].onmouseout=dup[sectabs[Snav].className];









</script>


</body>
</html>

**Jesdisciple** · 08-06-2008, 01:49 AM

What's the ultimate purpose of this script, if you don't mind my asking?

And I only see #thecan (green), so it's kind of hard to debug. I tried changing the background-color and border of #thetest and #vanish, and even commented the background-color of .sectaball, but that didn't seem to make a difference. Changing the background-color of #thecan works as expected.

EDIT: Of course! Their opacity is hiding them. Do you have the ID version working?

**riptide** · 08-06-2008, 06:19 PM

if your talking about the object that grabs Ids it should be working. if it's id using opacity function yeah it's working.

the idea is to make about 8 divs with the class name the can and a bunch more with the class sectaball.

the idea is when a green div is clicked on one gray div will show up. when the mouse moves off of the gray div it will vanish. the gray divs will have links in them in the end. I know there are scripts that do the same thing as i'm trying to do but they are just way too large.

**jscheuer1** · 08-06-2008, 06:48 PM

Originally Posted by riptide

if your talking about the object that grabs Ids it should be working. if it's id using opacity function yeah it's working.

the idea is to make about 8 divs with the class name the can and a bunch more with the class sectaball.

the idea is when a green div is clicked on one gray div will show up. when the mouse moves off of the gray div it will vanish. the gray divs will have links in them in the end. I know there are scripts that do the same thing as i'm trying to do but they are just way too large.

Define "way too large". You can hotink to jQuery on googlescripts and it has this kind of functionality:

Code:

$('.someclass').do_something(options);

It will apply the do_something() function to all elements with that class. The choices for do_something include changing opacity, visibility, display, etc., even doing so in a gradual timed manner. Since the script is hotlinked, the user may already have it cached. And it isn't all that big, probably smaller than many images used on your site (about 31K).

Hotlink for jQuery:

HTML Code:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script>

Goes in the head of your page before any code using it. Here's the manual:

http://docs.jquery.com/Main_Page

**riptide** · 08-06-2008, 08:44 PM

that sounds good but I would like to keep the script with me. no hotlinking.
now I looked on the net and found out changing the hight of a div can be hard. but I found an easy way to do it till I read about methods.

what is the deal with using settimeout on a method

I fixed a problem with the css. I take a look at jQuery 31k is cool.

as for my script it looks like there is something going wrong when classopacity and the class function inter act.

**jscheuer1** · 08-07-2008, 02:06 AM

You can download jQuery if you prefer not to hotlink to it.

Changing the height of things is easy, what's tricky is whether or not the other elements around, and/or containing it will react well to the change, and/or allow it.

Using setTimeout is tricky because it runs everything in the global scope. So, unless you pass a function to it, or use a string with variables that if resolved when it is invoked will still be valid in the global scope when it is run, it will fail. I find passing it a function to be easiest, ex:

Code:

function somefunc(){
var a = 'whatever';
setTimeout(function(){alert(a);}, 3000);
}
somefunc();

In the above example, regardless of the scope of a, it is in the same scope as the anonymous function passed to setTimeout, so it will work. Whereas, this will not work:

Code:

function somefunc(){
var a = 'whatever';
setTimeout("alert(a)", 3000);
}
somefunc();

because by the time the time out fires, it is in the global scope where var a is undefined.

**riptide** · 08-07-2008, 05:57 PM

yeah I managed to make a script to change the height of a div when you click on another div. the problem is I can't use settimeout in a objects' method so now I'm trying to do this

If a parent node of a class of "whatever" is clicked a function looks for child nodes of type 1 then checks if it's another div.

div parentNode
|
|
div child Node

from there it will store the child node in a var to be used in place of get ElementById as the div to be resized. the thing is this function is to only do a few things. I'm working on this now.

**jscheuer1** · 08-07-2008, 06:12 PM

You can use objects in setTimeout. They just have to be in scope when the time out fires. So - say you assign an object to a variable:

Code:

var oObj = someHTMLelementOrNodeList;
setTimeout(function(){doSomething(oObj);}, 3000);

As long as you haven't changed the value of oObj before the time out fires, it will work. However, if passing a nodeList, the value of a nodeList will change if elements are added to it or removed. This can be an issue when working with nodeLists even when a setTimeout isn't involved - say, with a common for loop.

**riptide** · 08-07-2008, 10:34 PM

I was going to use one method to call a time out for another method but it would be eaiser to do things another way.
so i found my self making another code

I'm trying to use a getElementsByClassName function inplace of a getElementByTag or getElementById in a tricky spot.

The function trackandsend() is trying to see if a a div of a className of linksclass1 was clicked and if so get and array of the first child nodes.

Then check to see if it was nodeType1 and look to see if any of those childnodes has a class of 'sectaball' it will throw and alert. If it's not node Type 1 it will go to the next sibling and look for type 1 and the className of 'sectaball'.

All that is just to make sure a div of the className sectaball is found inside of divs with the className linksclass1.

the function is not quite working right but my question is about the botom functions which change a div's height. in place of document.getElementById('vanish').style.height=ct+'px';

how would I load which ever clicked div with a classname linksclass1's child node with a class name of sectaball into it's place. I'm trying to make a holder for this in the function track and send

should I put it into a var can this even be done in javascript

Code:

function getElementsByClass(node,searchClass,tag) {
    var classElements = new Array();
    var els = node.getElementsByTagName('div'); // use "*" for all elements
    var pattern = new RegExp('\\b'+searchClass+'\\b');
    for (var i = 0; i < els.length; i++)
         if ( pattern.test(els[i].className) )
             classElements[classElements.length] = els[i];
    return classElements;
}





function trackandsend() {
e = e? e : window.event;
var targ = e.target? e.target : e.srcElement,
var pa=getElementsByClass(document,'linksclass1','div').firstChild;

if (targ==pa) {

for (i=0;i<pa.length;i++)
{ 
  if (pa[i].nodeType==1){ if (pa[i].firstChild.className==sectaball) { alert('hu')
  
  
  
  }
  
  
  } else { alert.('wrong type')} 
  
  
  else if (pa[i].firstChild.nextSibling.nodeType==1){ alert('found kid')}
  
  
  }
  }
}


/*wild code above*/

var ct=50;
var vis=0;

function show(){
  document.getElementById('vanish').style.height=ct+'px';
  ct++;
 
  if (ct==51)
    document.getElementById('vanish').style.display='block'; 
  if (ct<140)
   setTimeout('show()',10);
}



function revers() {

document.getElementById('vanish').style.height=ct+'px';
 ct--; 
 
 if (ct<6)
    document.getElementById('vanish').style.display='none'; 
  if (ct>5)
   setTimeout('revers()',0); 
   
 
    }

**jscheuer1** · 08-08-2008, 02:00 AM

This line will fail:

Code:

var pa=getElementsByClass(document,'linksclass1','div').firstChild;

because getElementsByClass(document,'linksclass1','div') will return an array, not an element. If no elements are found, it will be an empty array. If one or more elements are found, it will be an array of that/those element(s). Regardless, an array cannot have a .firstChild.

Thread: object issues.

Thread Tools

Search Thread

object issues.

Bookmarks

Bookmarks

Posting Permissions