/    Sign up×
Community /Pin to ProfileBookmark

irritating onclick problem

Copy linkTweet thisAlerts:
Feb 05.2009

[url=”http://testvcnkyvc.embanet.com:85/associatesdegrees.shtm”]link[/url]

When the visitor clicks on the degree type category, the list opens; but when the visitor then clicks on a specific degree, the list closes before they are taken to the specific degree’s webpage. How do I fix this?

[code]
// JavaScript Document

// expand or collapse the list by setting the correct style
// on the parent list item.
function toggle( e )
{
// apply style to hide or show list elements
if( e.className == ‘hide’ )
e.className = ‘expand’;
else
e.className = ‘hide’;
}

// prevent a click on a child list element from reaching the
// parent.
function cancel( evt )
{
// stop event from bubbling
if( window.event )
window.event.cancelBubble = true; // ie
else if (evt.stopPropagation)
evt.stopPropagation(); // firefox
}
[/code]

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@astupidnameFeb 05.2009 — In your li elements that have

onclick="toggle(this)"

try changing that to: [CODE]onclick="cancel(event); toggle(this);"[/CODE]

or else this might work too:

change the li element onclicks to: [CODE]onclick="toggle(event,this);"[/CODE]

Then change your toggle function to:

[CODE]function toggle(ev,e) {
cancel(ev);
// apply style to hide or show list elements
if( e.className == 'hide' )
e.className = 'expand';
else
e.className = 'hide';
}[/CODE]

I have not tested, but should get you close hopefully!
Copy linkTweet thisAlerts:
@astupidnameFeb 05.2009 — In your li elements that have

onclick="toggle(this)"

try changing that to:

Code:

onclick="cancel(event); toggle(this);"or else this might work too:

change the li element onclicks to:

Code:

onclick="toggle(event,this);"Then change your toggle function to:


Code:

function toggle(ev,e) {

cancel(ev);

// apply style to hide or show list elements

if( e.className == 'hide' )

e.className = 'expand';

else

e.className = 'hide';

}I have not tested, but should get you close hopefully! [/quote]


Actuall, scratch everything I said there (leave your onclicks the way you had them), I had an attack of conscience and tested after realizing you need to cancel the li elements parentNode parentNode onclicks (first parent node is the ul, then the containing li). The following is what worked for me with a test snippet from your page:

[CODE]<script type="text/javascript">

function toggle( e )
{
// apply style to hide or show list elements
if( e.className == 'hide' ) {
e.className = 'expand';
} else if (e.className == 'expand') {
e.className = 'hide';
}
return true;
}

// prevent a click on a child list element from reaching the
// parent.

function cancel( evt )
{
// stop event from bubbling
if( window.event )
window.event.cancelBubble = true; // ie
else if (evt.stopPropagation)
evt.stopPropagation(); // firefox
}

function set_Lis(id) {
var elem = document.getElementById(id);
var lis = elem.getElementsByTagName("li");
var i = 0;
while (i < lis.length) {
if (typeof lis[i].onclick != 'function') {
lis[i].onmouseover = function () {
this.parentNode.parentNode.onclick = null;
};
lis[i].onmouseout = function () {
this.parentNode.parentNode.onclick = function () { toggle(this); };
};
}
i++;
}
}

window.onload = function () {
set_Lis('text'); //'text' is id of containing div
};

</script>[/CODE]


Be aware of the window.onload function in there to start the set_lis function, I did not look if your page already has any window.onload events, you may need to add them to this one if necessary.
×

Success!

Help @KDLA spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...