...

View Full Version : Why won't my script work



riptide
01-23-2012, 06:37 AM
Okay I'm trying to make a script where if I click on a link a div pops up. And if I click on another link another div pop ups up and the old div is closed. The script calls the function from the link in the html and sends an ID. I am confused as to why this doesn't work.


function controls(vtiles){/*ID of requested div*/

vtiles.style.ClassName='switchOn'; //change it's classname to something that's displayed

var cap=document.getElementsByTagName('div');// get every div element

for(i=0;i<cap.length;i++) // make some kina loop with the number of divs
{
var store=cap[i].ClassName;

if(store=='switchOn' && cap.[i].id);
{ /*look for div's that are on (switchOn) and check to see if they have and ID*/

var check = cap.[i].id //store their IDs

if(check!=vtiles){//check to see if the id is the one stored in Vtiles

store=='switchP'//change the classname to switchP(off)
}
}
}

}





<div class="content"><a class="Atiles" href="#" onclick="controls(document.getElementById('Ankara'))">Ankara</a></div>

<div id="Ankara" class="switchP">




.switchP{
position:absolute;
display:none;
z-index:-1;
left: 20px;
top:40px;
}

.switchOn{
position:absolute;
display:block;
z-index:100;
left: 20px;
top:40px;
width:200px;
height:200px;
}



hey I'm a bit confused, I really am looking for some javascript tutorials so I don't have to keep asking for help.

Old Pedant
01-23-2012, 06:50 AM
The problem is that you have lied to yourself.

Your code says

function controls(vtiles){/*ID of requested div*/

and yet when you invoke this function you do it via

onclick="controls(document.getElementById('Ankara'))">

meaing that you are *NOT* calling with the ID of the requested div. You are calling with an actual reference to the div.

So then, later in your code, you do

if(check!=vtiles){

but vtiles is *NOT* an ID, and so it will never equal check (which is).

But there are many other errors in that code:
(a) ClassName and className are *NOT* the same thing. There is no such builtin property as ClassName.
(b) store=='switchP'//change the classname to switchP(off)
is wrong on two levels: You used == instead of = so all you are doing is COMPARING the two strings. Even if you had done store = 'switchP' all that would have done would be to change the string. You are *NOT* affecting the className of the div in question.

There are several ways to fix this, but the easiest is thie:


function controls(vtiles)/* div to "select" */
{
var cap=document.getElementsByTagName('div');// get every div element
for(i=0;i<cap.length;i++) // make some kina loop with the number of divs
{
var div = cap[i];
if( div.className =='switchOn' && div.id != null )
{
div.className = "switchP";
}
}
vtiles.style.className='switchOn'; // and now turn on the desired div

}

In other words, change *ALL* the <div>s to "off" and THEN change only the one you wanted to to "on".

riptide
01-23-2012, 07:08 AM
The are all already off but I guess it never hurts to make sure they are off before each time the code is called. I understand your script.

I don't understand why is vtiles not and ID in my script
and why can't [store = 'switchP'] change the classname is it because I can't change the classnames when is put cap[i].ClassName in a variable?

Old Pedant
01-23-2012, 08:06 AM
I don't understand why is vtiles not and ID in my script
Because you ALREADY converted it from an ID to a reference when you did this:


onclick="controls(document.getElementById('Ankara'))">

If you wanted to pass JUST the ID, then you should have just coded


onclick="controls('Ankara')">

But that would have meant changing some other code.



and why can't [store = 'switchP'] change the classname is it because I can't change the classnames when is put cap[i].ClassName in a variable?

Because the variable store is ONLY a STRING. It is *NOT* an object reference to a className.

And I say again: You can *NOT* use cap[i].ClassName

You must use cap[i].className

JavaScript is case sensitive. C and c are not the same, so className and ClassName are not the same.

riptide
01-23-2012, 08:09 AM
Because you ALREADY converted it from an ID to a reference when you did this:


onclick="controls(document.getElementById('Ankara'))">

If you wanted to pass JUST the ID, then you should have just coded


onclick="controls('Ankara')">

But that would have meant changing some other code.



Because the variable store is ONLY a STRING. It is *NOT* an object reference to a className.

And I say again: You can *NOT* use cap[i].ClassName

You must use cap[i].className

JavaScript is case sensitive. C and c are not the same, so className and ClassName are not the same.

aggh I feel stupid for forgetting that controls('Ankara') was the correct way to pass the ID to the function. I fixed the issue with className anyway.
Why is the variable store a string? What is it actually holding?

also your script isn't quite working when I call it with onclick="controls('Ankara')">Ankara</a></div>

JackieBolinsky
01-23-2012, 11:08 AM
When the div alert is shown only then the buttons on the browser should not be clicked, just like Javascript Codes alert box does not allow us to clik on the browser until we do some action to the alert box. Since we cannot bring focus on the div, then we will just fake it by using a simple button to handle our focus event, then apply appropriate function. The div won't leave your sight unless you click the OK button.

- Jackie

riptide
01-23-2012, 03:11 PM
Hu? I'm not building and alert box.

I'm getting the error vtiles.style.className='switchOn'; isn't defined.

riptide
01-23-2012, 08:51 PM
I hate to bump this but I have another question. I've got a great effects script
but it didn't have anything added to stop event bubbling.
I have an event stopping script that I've used before but I can't seem to attach it to this script I'm using. I don't know why it's not working it looks like it should work.



onclick="transition(event,document.getElementById('select3'),1,900,20)"
I added the event.



function transition(e,ele,dirflag) {

/*if(!e) var e = window.event;
e.cancelBubble = true;
if(e.stopPropagation) e.stopPropagation();
*/

if (!e) e = window.event;
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
while (reltg.tagName != 'BODY'){
if (reltg.id == this.id){return;}
reltg = reltg.parentNode;
}


if((ele.dirflag == dirflag) && ele.intrans) return; // stops function being called multiple times
var totDur = arguments[2] || 1000; // third argument, or one seconds
var numSteps = arguments[3] || 30; // fourth argument, or thirty steps (video quality, 30fps)
var intrval = totDur/numSteps; // renamed so it can't conflict
ele.sopac = 0; // we start at 0
ele.shght = 50; // we start at 50px
ele.eopac = 1; // we end at 1
ele.ehght = 140; // we end at 140px
ele.iopac = (ele.eopac-ele.sopac)/numSteps; // how much to increment opac
ele.ihght = (ele.ehght-ele.shght)/numSteps; // how much to increment hght
ele.copac = parseFloat(ele.copac,10) || ele.style.opacity || ele.sopac; // a val for current
ele.chght = ele.chght || parseInt(ele.style.height,10) || ele.shght; // a val for current
ele.dirflag = dirflag; // changed name to dirflag, stored for reference
if(ele.intrans) clearInterval(ele.intrans); // clear timeout if already running...
if(dirflag) { // 1 or true = increment
// alter visibility here to make an invisible item visible before starting
ele.style.display='block';
ele.intrans= setInterval(function() {
if(ele.copac<ele.eopac ) { // if mods needed
ele.copac=parseFloat(ele.copac,10)+parseFloat(ele.iopac,10); // increment
if(ele.copac>ele.eopac) ele.copac=ele.eopac; // error correction
ele.chght=parseFloat(ele.chght,10)+parseFloat(ele.ihght,10); // increment
if(ele.chght>ele.ehght) ele.chght=ele.ehght; // error correction
// set styles accordingly
ele.style.opacity = ele.copac;
ele.style.filter = 'alpha(opacity='+parseInt(ele.copac*100,10)+')';
ele.style.height = ele.chght+'px';
} else {
clearInterval(ele.intrans); // we're done -- clear timeout
}
},intrval); // do it on intrval timeline
} else { // 0 or false = decrement
ele.intrans= setInterval(function() {
if(ele.copac>ele.sopac || ele.chght>ele.shght) { // if mods needed
ele.copac=parseFloat(ele.copac,10)-parseFloat(ele.iopac,10); // decrement
if(ele.copac<ele.sopac) ele.copac=ele.sopac; // error correction
ele.chght=parseFloat(ele.chght,10)-parseFloat(ele.ihght,10); // decrement
if(ele.chght<ele.shght) ele.chght=ele.shght; // error correction
// set styles accordingly
ele.style.opacity = ele.copac;
ele.style.MozOpacity = ele.copac;
ele.style.KhtmlOpacity = ele.copac;
ele.style.filter = 'alpha(opacity='+parseInt(ele.copac*100,10)+')';
ele.style.height = ele.chght+'px';
} else {
clearInterval(ele.intrans); // we're done -- clear timeout
// and make the item disappear here since it's done transitioning.
ele.style.display='none';
}
},intrval); // do it on intrval timeline
}
} // all done!



when I use the code that's commented out the function slows down but doesn't stop the bubbling. I'm wondering if the event is being passed to the function transition.

Old Pedant
01-23-2012, 09:00 PM
also your script isn't quite working when I call it with onclick="controls('Ankara')">Ankara</a></div>

Yes, because now you must do the getElementById() in the controls function.

You must do it one place or the other.

If you had left your onclick code alone, I think my code would have worked.

But if you want to pass the ID then in my code, just change


vtiles.style.className='switchOn'; // and now turn on the desired div

to


document.getElementById(vtiles).style.className='switchOn';

riptide
01-23-2012, 10:01 PM
I actually had

<div class="content"><p class="Atiles" onclick="controls('Ankara')">Ankara</p></div>
<div class="content"><p class="Atiles" onclick="controls(document.getElementById('Apple'))">apple</p></div>


so one of them should have worked with your code.
onclick="controls(document.getElementById('Apple'))" Doesn't throw and error
but doesn't work either. When I just changed you code the reverse happens. It could just be something in the class I'm switching to but I had already tested that class.

Old Pedant
01-24-2012, 12:35 AM
Can you show the page live? Give a URL to look at?

riptide
01-24-2012, 01:44 AM
I don't have the page live(it's not my site) but I can either give all the code so you can copy and paste or you can wait for me to attach it to my website for testing.

what would you rather me do?

Old Pedant
01-24-2012, 02:30 AM
let's wait until it's live. Unless you are desperate.

riptide
01-24-2012, 04:11 AM
Here is the address. the images aren't on the site.
http://resourcehouse.atspace.com/test/Tile%20Template.html

I have the javascript linked to the page as DivSwitch.js

Old Pedant
01-24-2012, 04:37 AM
NO NO NO!!!

You have

document.getElementById(vtiles).style.className='switchOn'

WRONG!

It must be just

document.getElementById(vtiles).className='switchOn'


OH MAN! I did that to you! SO SORRY! That was a HUGE typo on my part. Too much copy and paste and not enough edit. Mea maxima culpa.

riptide
01-24-2012, 07:00 AM
oh fudge, I should have caught that my self. I know that className isn't a style.

Now can you give me some info on e and event in javascript. like how an event like clicking the mouse onclick="something(event)"

gets passed to a function in

something(e)

Then you pass the event to a var that holds (e.relatedTarget ? e.relatedTarget : e.toElement) what is going on in that part I know IE and moz browsers don't have event of being an element of the same thing or something like that.

riptide
01-25-2012, 12:13 AM
is there a definitive way to stop event bubbling for mouseout. It's fireing when I move it over the Div's child elements. I run into this event bubbling problem so frequently I need to find a script that I can add to any function to stop this.

Old Pedant
01-25-2012, 12:23 AM
Post this as a new question with an appropriate thread title. I've seen this discussed before, but it's not my bailiwick.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum