object issues. [Archive] - Dynamic Drive Forums

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

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

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

jscheuer1

08-06-2008, 06:48 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.

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

$('.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:

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

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:

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:

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

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:

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.

riptide

08-08-2008, 04:47 PM

al...sigh is there anyway around it. Well I know there is a way around it by using a container div so i doesn't have to check the whole document.

still how will i get that elements first child into
('vanish').style.height=ct+'px'; should I use a var names carchild

should it be varchild.style.height=ct+'px';

jscheuer1

08-08-2008, 05:52 PM

I thought that might be enough to get the light to go on, perhaps not, at least not when you typed your last post. The getElementsByClass function will always return an array. So, if you want to use its output, you must treat it as an array. Now, I'm not looking for any other problems that there may be with your code. But to treat getElementsByClass output as an array, and get the first child of the first element returned (if any):

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

However, since I'm not sure what element you are really after, you might be looking for:

var pa=getElementsByClass(document,'linksclass1','div')[0]

Which would be the first div element on the page with that class.

riptide

08-08-2008, 07:05 PM

I droped the idea of using the classname function like that and decided to use one of your scripts you gave me in my last thread; but there is something really strange about your code.

if(document.getElementById)
document.onclick = function (e){
e = e? e : window.event;
var targ = e.target? e.target : e.srcElement,
Mlinks = document.getElementById('navebase').getElementsByTagName('a');
while(targ.parentNode && targ.parentNode.tagName && targ.tagName.toLowerCase() != 'a')
targ = targ.parentNode;
for (var i = Mlinks.length - 1; i > -1; --i)
if (targ == Mlinks[i]){
alert ('Mlinks number: ' + i + ' was clicked.');
return;
}
alert("Something other than an 'a' tag in the 'navebase' division was clicked");
}

else alert ("A 'version 5' or better Browser is required for this script.");

</script>

it will act strange when there are more than one link or (div as i'm using it) is in the array.
it will give the alert 'Something other than an 'a' tag in the 'navebase' division was clicked'
for ever item after the first child.
Not in you're original code but when it's changed for other things. So I don't think it was a browser problem after all. it looks like the issues urrounds
if (targ == Mlinks[i])

I because it will work when this is in the body

<div id="navebase"> <div id="thecan" class="linksclass2" > click <br/> <div id="vanish" class="sectaball" > this is the nav </div></div></div>

but never for this. all the divs in navebase give the alert 'something other than an 'a' tag in the 'navebase' division was clicked'

<div id="navebase">
<div id="thewho"> faker!!! </div>
<div id="thecan" class="linksclass2" > click <br/> <div id="vanish" class="sectaball" > this is the nav </div></div></div>

here is what I did to your code

if(document.getElementById)
document.onclick = function (e){
e = e? e : window.event;
var targ = e.target? e.target : e.srcElement,
Mlinks = document.getElementById('navebase').getElementsByTagName('div');
while(targ.parentNode && targ.parentNode.tagName && targ.tagName.toLowerCase() != 'div')
targ = targ.parentNode;
for (var i = Mlinks.length - 1; i > -1; --i)
var holder = Mlinks[i];
/* if(holder.className == 'new'*/

if (targ == holder){

if (holder.className=="linksclass2") { alert("right div")}

;
return;
}
alert("Something other than an 'a' tag in the 'navebase' division was clicked");
}

else alert ("A 'version 5' or better Browser is required for this script.");

I looked at the code and looked at scripts over the net and I see nothing wrong.