|
JavaScript - Two Js Conflict Due To Onload Event At The Same Time.
Greetings!
Im new in JS, I have two sets of codes and I searched that JS code will not execute if there is two onload event at the same time. How can I get rid of these here are my codes from http://code.jquery.com/jquery-1.6.3.min.js http://ajax.googleapis.com/ajax/libs.../jquery.min.js Code: else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);
and Code: else if(c.attachEvent){c.attachEvent("onreadystatechange",C),a.attachEvent("onload",e.ready);
Is it possible to combine the two? any help will be appreciated. Similar TutorialsHello Can anyone help with the following problem On the following page http://www.stroudskittles.co.uk/signingon.html I have a Body onload event (to load the chained Menu) and a windows.onload event (to load the IFrame Ticker) If I open the page in Internet explorer both scripts function; however in Firefox I'm having problems. The Chained Menu works, however the IFrame Ticker does not display. Both events ahave ben placed on the boady tag. Can anyone advise how I can get both to display in Firefox Can anyone Hi, I need to use more than one javascripts that use onload event. Every time I try this only one from these scripts work correctly. How can I make these scripts work together? 1) Code: var kmrSimpleTabs = {
sbContainerClass: "simpleTabs",
sbNavClass: "simpleTabsNavigation",
sbContentClass: "simpleTabsContent",
sbCurrentNavClass: "current",
sbCurrentTabClass: "currentTab",
sbIdPrefix: "tabber",
init: function(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
var containerDiv = document.getElementsByTagName("div");
for(var i=0; i<containerDiv.length; i++){
if (containerDiv[i].className == kmrSimpleTabs.sbContainerClass) {
// assign a unique ID for this tab block and then grab it
containerDiv[i].setAttribute("id",kmrSimpleTabs.sbIdPrefix+[i]);
var containerDivId = containerDiv[i].getAttribute("id");
// Navigation
var ul = containerDiv[i].getElementsByTagName("ul");
for(var j=0; j<ul.length; j++){
if (ul[j].className == kmrSimpleTabs.sbNavClass) {
var a = ul[j].getElementsByTagName("a");
for(var k=0; k<a.length; k++){
a[k].setAttribute("id",containerDivId+"_a_"+k);
// get current
if(kmrSimpleTabs.readCookie('simpleTabsCookie')){
var cookieElements = kmrSimpleTabs.readCookie('simpleTabsCookie').split("_");
var curTabCont = cookieElements[1];
var curAnchor = cookieElements[2];
if(a[k].parentNode.parentNode.parentNode.getAttribute("id")==kmrSimpleTabs.sbIdPrefix+curTabCont){
if(a[k].getAttribute("id")==kmrSimpleTabs.sbIdPrefix+curTabCont+"_a_"+curAnchor){
a[k].className = kmrSimpleTabs.sbCurrentNavClass;
} else {
a[k].className = "";
}
} else {
a[0].className = kmrSimpleTabs.sbCurrentNavClass;
}
} else {
a[0].className = kmrSimpleTabs.sbCurrentNavClass;
}
a[k].onclick = function(){
kmrSimpleTabs.setCurrent(this,'simpleTabsCookie');
return false;
}
}
}
}
// Tab Content
var div = containerDiv[i].getElementsByTagName("div");
var countDivs = 0;
for(var l=0; l<div.length; l++){
if (div[l].className == kmrSimpleTabs.sbContentClass) {
div[l].setAttribute("id",containerDivId+"_div_"+[countDivs]);
if(kmrSimpleTabs.readCookie('simpleTabsCookie')){
var cookieElements = kmrSimpleTabs.readCookie('simpleTabsCookie').split("_");
var curTabCont = cookieElements[1];
var curAnchor = cookieElements[2];
if(div[l].parentNode.getAttribute("id")==kmrSimpleTabs.sbIdPrefix+curTabCont){
if(div[l].getAttribute("id")==kmrSimpleTabs.sbIdPrefix+curTabCont+"_div_"+curAnchor){
div[l].className = kmrSimpleTabs.sbContentClass+" "+kmrSimpleTabs.sbCurrentTabClass;
} else {
div[l].className = kmrSimpleTabs.sbContentClass;
}
} else {
div[0].className = kmrSimpleTabs.sbContentClass+" "+kmrSimpleTabs.sbCurrentTabClass;
}
} else {
div[0].className = kmrSimpleTabs.sbContentClass+" "+kmrSimpleTabs.sbCurrentTabClass;
}
countDivs++;
}
}
// End navigation and content block handling
}
}
},
// Function to set the current tab
setCurrent: function(elm,cookie){
this.eraseCookie(cookie);
//get container ID
var thisContainerID = elm.parentNode.parentNode.parentNode.getAttribute("id");
// get current anchor position
var regExpAnchor = thisContainerID+"_a_";
var thisLinkPosition = elm.getAttribute("id").replace(regExpAnchor,"");
// change to clicked anchor
var otherLinks = elm.parentNode.parentNode.getElementsByTagName("a");
for(var n=0; n<otherLinks.length; n++){
otherLinks[n].className = "";
}
elm.className = kmrSimpleTabs.sbCurrentNavClass;
// change to associated div
var otherDivs = document.getElementById(thisContainerID).getElementsByTagName("div");
var RegExpForContentClass = new RegExp(kmrSimpleTabs.sbContentClass);
for(var i=0; i<otherDivs.length; i++){
if ( RegExpForContentClass.test(otherDivs[i].className) ) {
otherDivs[i].className = kmrSimpleTabs.sbContentClass;
}
}
document.getElementById(thisContainerID+"_div_"+thisLinkPosition).className = kmrSimpleTabs.sbContentClass+" "+kmrSimpleTabs.sbCurrentTabClass;
// get Tabs container ID
var RegExpForPrefix = new RegExp(kmrSimpleTabs.sbIdPrefix);
var thisContainerPosition = thisContainerID.replace(RegExpForPrefix,"");
// set cookie
this.createCookie(cookie,'simpleTabsCookie_'+thisContainerPosition+'_'+thisLinkPosition,1);
},
// Cookies
createCookie: function(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
},
readCookie: function(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
},
eraseCookie: function(name) {
this.createCookie(name,"",-1);
},
// Loader
addLoadEvent: function(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
// END
};
// Load SimpleTabs
kmrSimpleTabs.addLoadEvent(kmrSimpleTabs.init);
2) Code: function hideMessage() {
document.getElementById("thanks").style.display="none";
}
function startTimer() {
var tim = window.setTimeout("hideMessage()", 5000); // 5000 milliseconds = 5 seconds
}
3) Code: var ids=new Array();
function QAinit(){
if(document.getElementById){
var tids=document.getElementsByTagName('div');
for(i=0;i<tids.length;i++)if(tids[i].className=="question")ids[ids.length]=tids[i];
for(i=0;i<ids.length;i++)ids[i].onmouseup=setstate;
}}
function setstate(){
for(i=0;i<ids.length;i++){
if(ids[i]==this){
var d=this.parentNode.getElementsByTagName('div')[1];
if(d.style.display=="block")d.style.display="none";
else d.style.display="block";
}}}
function expandall(){
if(document.getElementById){
for(i=0;i<ids.length;i++)ids[i].parentNode.getElementsByTagName('div')[1].style.display="block";
}}
function collapseall(){
if(document.getElementById){
for(i=0;i<ids.length;i++)ids[i].parentNode.getElementsByTagName('div')[1].style.display="none";
}}
window.onload=QAinit;
Can anyone please help? I have an aspx with javascript, and I used to call a script func whenever the page was loaded. Suddenly it doesn't work. I then tried to simplify things to <body onload="alert('hello');" and no alert is shown, nor do I get any error. How come the onload event doesn't fire? How do I fix it? thanks in advance Good morning guys. I am new to Javascript and am trying to add some functionality to a website but have come across a problem when trying to utilise two seperate Javascript onloads events. I have a text scroller to display the latest news and I also have a javascript lightbox gallery. Both of these events work perfectly on their own but when I try to include both on one page only one of the events is executed. My code is displayed below: Code: <script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/jquery.li-scroller.1.0.js"></script>
<script type="text/javascript">
$(function(){
$("ul#news-scroller").liScroll({travelocity: 0.04});
});
</script>
</head>
<body onload="clickMenu('gallery'); initLightbox()">
If anyone could tell me where my mistake is I would be so grateful. I know it is probably a really obvious mistake but being new to this I am unsure where to start looking. Thanks in advance! Mack If I use a window opener to open a new window, is there a way to detect that the new window is finished loading before carrying out some other directive in the opener window? Can I access the remote window's onload event from the opener window? I need to know that the website has loaded before moving to the next page. something like: remoteWindow.onload = goToPage(url); Is this even possible? I have the following javascript function: [ function addNewWindowEvent(evType, fn) { if (window.addEventListener) { this.addEventListener("load", fn, false); return true; } else if (window.attachEvent) { var onload = "onload" this.attachEvent(onload, fn); return true; } else { return false; } } ] which is giving me a an exception every time a page on our site loads. The actual exception in firefox is this: uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: https://cms-dev.stchas.edu/global/js/hdvscripts.js :: addNewWindowEvent :: line 5" data: no] and I'm not sure exactly what it's complaining about. I'm relatively new to javascript so diagnosing and fixing this problem has me quite puzzled, and so far I have been unable to find anything helpful when I try and google for information on this. I would appreciate any help or suggestions. Thanks. henryv Hi forum, I am trying to attach an event to a dynamically produced button, and then use stopPropagation and preventDefault. Code: function chapter12_nodeOne() {
//create an element
var element = document.createElement('input');
//set some attributes
element.setAttribute('type', 'button');
element.setAttribute('value', 'submit');
element.setAttribute('id', 'myBtn');
//appendd the element into a DIV
document.getElementById('myDiv').appendChild(element);
//uses EventUtil to attach an event listener
EventUtil.addHandler(element, 'click', function() {
alert('event attached');
});
var flag = confirm('prevent default behavior of button?');
if (flag) {
var el = document.getElementById('myBtn');/////////////////////////(1)
var ev = el.onclick;
}
}
var EventUtil = {
addHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.addEventListener) {
element.addEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = null;
}
}
};
But when debugging I see under el on the line marked with (1) that the onclick event is null. What am I doing wrong?! PS:the event is attached, when I click on the button I get an alert message is it possible to capture the control.event or element.event that was fired to invoke the onbeforeunload event. for example, if a button is clicked and it causes the onbeforeunload event to fire can i determine which button was clicked. thanks I have a ondrag event handler and in that I am trying to retrieve e.ClientX but it always return 0 in Mozilla. Works fine in IE though. How can retrieve the clientX and clientY in ondrag event? Hi Code: var err_str="";
function validate_grid(value,id,ind)
{
$("#result").html(" ").show();
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
alert(err-str);
here ind==1 is from_time and ind==2 is to_time,i need to validate time as to_time must be always greater than from-time,if condition fails an alert msg should populate.time format is[05:00]as it is in string format im unable to do the validation for it.(ex:from-time=08:00 to-time=07:59 condition fails) thank you. Hello im using dhtmlx grid in this cells i have from time and to time (i.e ind==1 and ind==2) i need to validate time where to-time must be greater than from-time else it should alert an message,i have writeen a normal Regular expression for the time validation.as the time is i string format i.e[05:00],please can any one send me code for that. Code: var err_str="";
function validate_grid(value,id,ind)
{
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
hi im using dhtml xgrid where i need to do validation for time ,(from-time and to-time i.e ind==1 and ind==2 ) to-time must be greater than from-time else i need to alert a message to-time must be greater than from-time. can any one send me the code for it time format is[05:00]. Code: var err_str="";
function validate_grid(value,id,ind)
{
$("#result").html(" ").show();
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
Hi Guys. I wish I could say I was a fellow coder but I'm not. I am a WYSISYGer that promised to help a friend and is lost. I'm making her a site that is based on a js template. I want to add a lightbox effect using jquery. Ive been trying to use a plugin called bumpbox because unlike lightbox it allows static html in the popup. When I implement the plugin in a very basic html doc, it works just fine. However when I use it in my js site, nothing happens. I really really don't understand what I am doing right or wrong, so if someone could take a look at code and help me out (with very basic instructions), I'd really appreciate it! Ive uploaded site to http://www.flashfollow.com/index.html click home>link saying seo it should open a lightbox...currently to developers site. THANKS SO MUCH Heya there, I have been trying to run two Javascripts within the same page. The first is the Drop down menu Javascript, the second is the Picture Viewer (Click an image and it opens) Here is a copy of the webpage (the active version has been modified to reduce confusion for users) http://f1p.co.uk/saved%20pages/picture1.html I have tried a noconflict, but it didn't seem to work. As you can see, the Picture viewer works fine, but the drop down menu seems to be in conflict. Any help please? 1 down vote favorite I do have the countdown script (see link below) to display the time between current time and the date given in real-time. However, I want to achieve to display the time difference between a given start and end time. Right now, it calculates from the current server time to the end time. I want to be able to set up my own start time and end time. Here is what I have: http://jsfiddle.net/BgEtE/ thank you for help Hi all, I'm sure this issue/question has been raised many times but need some help. I am trying to use two javascripts on one page but it doesnt seem to work, I can get one or the other but never both - believe this is whats know as a script conflict... Now Im lost when it comes to javascript so have no idea how to solve the issue: trying to use a vertical scroller on my images (this works) & would like to use a lightbox feature (that works when the above is removed)... This is my test page that is using the troublesome scripts - http://www.liam-sheridan.co.uk/portfolio_lightbox.html How can I solve this and use both features? thanks LiamS Alright, I'm trying to get this website finished within the next 5 hours. I was designing it in such a way that I have some rollover buttons that take me to various parts of the site. Then, I have a gallery page, where I have a simple rollover galley. Adding the rollover gallery has stopped my buttons at the top from working. First, my .js file Code: function swap_image(name,source) {
document.images[name].src=source;
var argv=swap_image.arguments;
if(argv[2] && argv[3] && document.getElementById) {
element=document.getElementById(argv[2]);
element.innerHTML=argv[3];
}
}
if (document.images) {
image0 = new Image;
image1 = new Image;
image2 = new Image;
image0.src = '/images/male_fem.jpg';
image1.src = '/images/moon_wmn.jpg';
image2.src = '/images/mobydick.jpg';
} else {
image0 = '';
image1 = '';
image2 = '';
document.rollimg = '';
}
var cap = ['Picture One',
'Second Picture',
'Three'];
function rollover(n) {
document.rollimg.src = window['image'+n].src;
document.getElementById('caption').innerHTML = cap[n];
}
Now a portion of my html.. Code: <a onmouseover="swap_image('gallery','/images/galleryro.jpg')" onmouseout="swap_image('gallery','/images/galleryhl.jpg')">
<img style = "top:150px; left:160px;" border="0" id="gallery" src="/images/galleryhl.jpg"/> </a>
<a href="timeline.htm" onmouseover="swap_image('timeline','/images/timelinero.jpg')" onmouseout="swap_image('timeline','/images/timeline.jpg')">
<img style = "top:150px; left:175px;" border="0" id="timeline" src="/images/timeline.jpg"/> </a>
<a href="biography.htm"onmouseover="swap_image('biography','/images/biographyro.jpg')" onmouseout="swap_image('biography','/images/biography.jpg')">
<img style = "top:150px; left:190px;" border="0" id="biography" src="/images/biography.jpg"/> </a>
<a href="contact.htm" onmouseover="swap_image('contact','/images/contactro.jpg')" onmouseout="swap_image('contact','/images/contact.jpg')">
<img style = "top:150px; left:205px;" border="0" id="contact" src="/images/contact.jpg"/> </a>
<div class = "lrgimg">
<p align = "center">
<img style = "top:150px" src="images/male_fem.jpg" width="auto" height="auto" border="0" alt="large" name="rollimg" />
</p>
</div>
<div class = "imgbar">
<p align = "center"><span onmouseover="document.rollimg.src=image0.src;">
<img style = "top:250px" src="images/male_fem_sm.jpg" width="32" height="32" border="0"alt="malefem"/> </span>
<span onmouseover="document.rollimg.src=image1.src;">
<img style = "top:250px" src="images/moon_wmn_sm.jpg" width="32" height="32" border="0" alt="moonwmn"/></span>
<span onmouseover="document.rollimg.src=image2.src;">
<img style = "top:250px" src="images/mobydick_sm.jpg" width="32" height="32" border="0" alt="mobydick"/></span>
</p>
</div>
</div>
Any help to quickly resolve the conflict, would be greatly appreciated. I don't have a lot of time. Hi! I'm having problems with a thumbnail viewer. I have the Nivo slider installed in my website and now I added a thumbnail viewer called SmoothGallery and my Nivo Slider stopped working. They both are javascript. Once I added the source for the SmoothGallery in the header my Nivo Slider stopped working. Here is the code I entered for the SmoothGalery plugin: <script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"></script> <script src="js/mootools-1.2-more.js" type="text/javascript"></script> <script src="js/jd.gallery.js" type="text/javascript"></script> Once that is entered, my Nivo slider stops working. My nivo slider requires these libraries: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script> Can anyone help me solve this issue? I am no expert on javascript and any help is appreciated! hi guys! i was building a website using two jquery codes . first one for the slideshow banner and the other one for the menu but only one of them works, i've search on the web and i fouond something called jquery no conflict() is this good? this is the code inside de <head> tags Code: <!-- JavaScripts-->
<script type="text/javascript">
jQuery.noConflict();
</script>
/*This is the menu's*/
<script type='text/javascript' src="jquery-1.2.6.min.js"></script>
<script type='text/javascript' src="kwicks.js"></script>
<script type='text/javascript' src="custom.js"></script>
/*Here starts the sideshow*/
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
</head>
Hi, I wonder if any one has any ideas in what is causing this bug in I.E The main slide show is the javascript in question. I think the javascript conflicting or causing this issue is the show hide with the plus minus at the top left of the page just above the navigation. I think there is some Javascript conflict but it works sometimes and sometimes it doesnt. http://tinyurl.com/6ee5yk2 thanking you in advance. |
|||||||