javascript/div tags

[Shaolins-Finest]

Hi guys,

I have some js and a div tag with a class property. Now when the user clicks a link the javascript should change the div tag class property, in this case, from setnone to setdisplay (css properties). But when I click the link, the content between the div tag displays but only for a fraction of a second and then disappears. See code below:

HTML:
<a href="" onmouseup="changeClass();">Edit Events</a>
<div id="eventsetting" class="setnone">
//stuff in here
</div>

Javascript:
function changeClass()
{
setClassName("eventsetting","setdisplay");
}

function setClassName(targetName, nameOfClass)
{
var target = document.getElementById(targetName)
if(document.implementation && document.implementation.createDocument)
{
target.setAttribute("class", nameOfClass);
} else {
target.className = nameOfClass;
}
}

css:
.setnone {
display : none;
}

.setdisplay {
display : inline;
}

[sandstorm]

Hello,

It might be easier to use
document.getElementById(targetName).style.display = 'inline';
to show the div and
document.getElementById(targetName).style.display = 'none';
to hide it.

Your code appears to be fine. Does it fail in both ie and ff?

[Shaolins-Finest]

Hello,

It might be easier to use
document.getElementById(targetName).style.display = 'inline';
to show the div and
document.getElementById(targetName).style.display = 'none';
to hide it.

Your code appears to be fine. Does it fail in both ie and ff?Hi,

Tthat code doesn't work for IE, also, I tend to use alittle less obtrusive techniques when scripting in javascript nowadays.

It does the same thing in IE and FF and even opera.

[JoeyDaly]

Everything looks fine to me, except the onMouseUp not sure if because your using that specific event it basically flashes.

Is there any more code that causes the class to revert back? Like does #eventsetting change display back to none?

One suggestion is using browser debugger tools, Firebug for Firefox is really good...

[rangana]

Hi ShaolinsFinest,
The reason why the "//stuff here" in your eventsetting div disappears for a fraction of second is because you haven't specify a link on your <a href>. Try putting # on <a href=""> and you'll see the "//stuff here" steadily.
I bet you are using FF, which shows only for a while, while the worse thing is that in IE, it opens the folder where the page is residing.
See if it helps.

[Shaolins-Finest]

Hi Guys,

Sorry about the confusion but I the code did work. When I said 'the code doesnt work' in my second reply I meant the method of changing CSS:

document.getElementById(targetName).style.display = 'inline';
to show the div and
document.getElementById(targetName).style.display = 'none';

The above code will work in FF but not IE.

[rangana]

Hi Guys,

Sorry about the confusion but I the code did work. When I said 'the code doesnt work' in my second reply I meant the method of changing CSS:

document.getElementById(targetName).style.display = 'inline';
to show the div and
document.getElementById(targetName).style.display = 'none';

The above code will work in FF but not IE.

Have you put a "#" already??...or better a link, instead of <a href=""> which causes the error.

[chamith]

try this
document.getElementById('eventsetting').style.visibility= 'visible'; for visible it and
document.getElementById('eventsetting').style.visibility= 'hidden'; for hide it .

www.bhoomi.lk