Log in

View Full Version : conflicting javascript


mr curious
01-15-2011, 02:25 PM
Hey all,

i've got 2 onclick functions that are conflicting. i'm not really sure how to add the event handlers, i've tried a whole bunch of things but obviously i'm missing something.

my 2 function are:
the first one is for horizontal scrolling, and is kept in a seperate js file called thw.js http://code.google.com/p/wplatformer/source/browse/js/thw.js?spec=svn1bf0fa996cab30ccef0c4b07255e4d03a48bfc07&r=1bf0fa996cab30ccef0c4b07255e4d03a48bfc07


the second one is a short function to change a tag's class name, used for links:


<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var Lst;

function CngClass(obj){
if (Lst) Lst.className='';
obj.className='selected';
Lst=obj;
}

/*]]>*/
</script></head>

<body>

<style type="text/css">
#nav .selected { opacity:1.00;}


</style>
<div id="nav">
<a href="#home" id="hlink" onClick="CngClass(this);" style="margin-left:130px">home</a>
<a href="#foamo" class="flink">foamo</a>
<a href="#book" class="blink">book</a>
<a href="#portfolio" class="plink">portfolio</a>
<a href="#contact" class="clink">contact</a>
</div>
</body>


wat i've got so far in terms of the event handler is:


<script type="text/javascript">
function addEventHandler(obj, eventName,handler){
if (document.attachEvent){
obj.attachEvent("on" + eventName, handler);
} else if (document.addEventListener) {
obj.addEventListener(eventName, handler, false);
}
}
</script>
<script type="text/javascript">
window.onload = myonload;
function myonload(){
addEventHandler(submit, "click" , function(){CngClass(obj)});
}
</script>



any help plz..

mc
jscheuer1
01-17-2011, 12:10 AM
This is, depending upon when it's called, OK for avoiding a conflict:


<script type="text/javascript">
function addEventHandler(obj, eventName,handler){
if (document.attachEvent){
obj.attachEvent("on" + eventName, handler);
} else if (document.addEventListener) {
obj.addEventListener(eventName, handler, false);
}
}
</script>

But it should be reversed and use the ever present window object, not the document object which might not be available for testing (again depending upon when it's used) yet in some browsers:


<script type="text/javascript">
function addEventHandler(obj, eventName, handler){
if (window.addEventListener){
obj.addEventListener(eventName, handler, false);
}
else if (window.attachEvent){
obj.attachEvent('on' + eventName, handler);
}
}
</script>

Once you have that, you no longer need:



window.onload = myonload;

Which does potentially expose itself to an onload conflict.

You can do instead:


<script type="text/javascript">
function addEventHandler(obj, eventName, handler){
if (window.addEventListener){
obj.addEventListener(eventName, handler, false);
}
else if (window.attachEvent){
obj.attachEvent('on' + eventName, handler);
}
}
</script>
<script type="text/javascript">
function myonload(){
addEventHandler(submit, "click" , function(){CngClass(obj)});
}
addEventHandler(window, 'load', myonload);
</script>

But this makes no sense unless submit is previously defined, which it's not in any of the code you are showing. And the obj argument in:


addEventHandler(submit, "click" , function(){CngClass(obj)});

can never be defined when called in that way.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

And since you seem to imply that each of these scripts work just fine on their own, post a link to two more pages:


One where you have the thw.js working.


Another where you have this CngClass code or whatever it is working.
mr curious
02-11-2011, 07:59 AM
wow thats all a bit confusing. let me fix and tidy up my code before i post again as I noticed there was some incorrect code in my last post.

Thanks though