Javascript not working on hosting site

**Eightytwo** · 04-26-2011, 11:32 PM

Hi,
I'm new to this site and to Javascript. I got a a JS code sometime ago to create dropdown menus. The instructions said that I should insert into the head section. The script works very well.

Off late, I've been reading up on Javascript on w3schools and realised that I could move the script to an outside file and share it gloabally because I have galleries on seven pages that uses the same code. This works perfectly well, locally, on my desktop. But when I uploaded it to my hosting site(go daddy), the javascript doesn't work. This code worked perfectly well earlier when it was inside the HTML.

Some of the classes I've used for the dropdowns are defined in a external styling sheet. I know for a fact that this styling sheet is accessible because the gallery styling is applied. It is only the dropdowns that don't work. I've checked on google and other forums and while the problem of JS not working on the hosting exists, it doesn't match the problem I'm facing. I am also able to access the JS file using the navbar and double checked the path.

Can someone please help? I'm posting the JS code, the CSS styling and the HTML code below:

HTML:

HTML Code:

<head>
<script type="text/javascript" src="js/slider.js"></script>
<link rel="stylesheet" type="text/css" href="css/define.css" />
<div class="KB_Heads">Submenu</div>
</head>
...
<body>
<div class="KB_OpenHeads">description.  
<div class="gal" id="ps">
<a href="file1" title="Perfect Strangers">   <img src="file1" alt="Perfect Strangers" /></a>   
<a href="file2" title="Perfect Strangers">   <img src="file2" alt="Perfect Strangers" /></a>   
</div>
</div>
</body>

JAVASCRIPT:

Code:

var thekite_slideSpeed = 10;	// Higher value = faster
var thekite_timer = 10;	// Lower value = faster
 
var objectIdToSlideDown = false;
var thekite_activeId = false;
var thekite_slideInProgress = false;
var thekite_slideInProgress = false;
var thekite_expandMultiple = false; // true if you want to be able to have multiple items expanded at the same time.
 
function showHideContent(e,inputId)
{
	if(thekite_slideInProgress)return;
	thekite_slideInProgress = true;
	if(!inputId)inputId = this.id;
	inputId = inputId + '';
	var numericId = inputId.replace(/[^0-9]/g,'');
	var answerDiv = document.getElementById('thekite_a' + numericId);
 
	objectIdToSlideDown = false;
 
	if(!answerDiv.style.display || answerDiv.style.display=='none'){
		if(thekite_activeId &&  thekite_activeId!=numericId && !thekite_expandMultiple){
			objectIdToSlideDown = numericId;
			slideContent(thekite_activeId,(thekite_slideSpeed*-1));
		}else{
 
			answerDiv.style.display='block';
			answerDiv.style.visibility = 'visible';
 
			slideContent(numericId,thekite_slideSpeed);
		}
	}else{
		slideContent(numericId,(thekite_slideSpeed*-1));
		thekite_activeId = false;
	}
}
 
function slideContent(inputId,direction)
{
 
	var obj =document.getElementById('thekite_a' + inputId);
	var contentObj = document.getElementById('thekite_ac' + inputId);
	height = obj.clientHeight;
	if(height==0)height = obj.offsetHeight;
	height = height + direction;
	rerunFunction = true;
	if(height>contentObj.offsetHeight){
		height = contentObj.offsetHeight;
		rerunFunction = false;
	}
	if(height<=1){
		height = 1;
		rerunFunction = false;
	}
 
	obj.style.height = height + 'px';
	var topPos = height - contentObj.offsetHeight;
	if(topPos>0)topPos=0;
	contentObj.style.top = topPos + 'px';
	if(rerunFunction){
		setTimeout('slideContent(' + inputId + ',' + direction + ')',thekite_timer);
	}else{
		if(height<=1){
			obj.style.display='none';
			if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
				document.getElementById('thekite_a' + objectIdToSlideDown).style.display='block';
				document.getElementById('thekite_a' + objectIdToSlideDown).style.visibility='visible';
				slideContent(objectIdToSlideDown,thekite_slideSpeed);
			}else{
				thekite_slideInProgress = false;
			}
		}else{
			thekite_activeId = inputId;
			thekite_slideInProgress = false;
		}
	}
}
function initShowHideDivs()
{
	var divs = document.getElementsByTagName('DIV');
	var divCounter = 1;
	for(var no=0;no<divs.length;no++){
		if(divs[no].className=='KB_Heads'){
			divs[no].onclick = showHideContent;
			divs[no].id = 'thekite_q'+divCounter;
			var answer = divs[no].nextSibling;
			while(answer && answer.tagName!='DIV'){
				answer = answer.nextSibling;
			}
			answer.id = 'thekite_a'+divCounter;
			contentDiv = answer.getElementsByTagName('DIV')[0];
			contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
			contentDiv.className='KB_OpenHeads_content';
			contentDiv.id = 'thekite_ac' + divCounter;
			answer.style.display='none';
			answer.style.height='1px';
			divCounter++;
		}
	}
}
window.onload = initShowHideDivs;

CSS:

Code:

/*gallery styling code comes here*/
/*dropdown styling*/
.KB_Heads{	/* Styling question */
	font-size:30px;
	width:500px;
	height:auto;
	cursor:pointer;
	text-align:center
}
.KB_OpenHeads{	/* Parent box of slide down content */
	font-size:20px;
	width:500px;
	height:auto;
	position:relative;
	text-align:center
}
.KB_OpenHeads_content{	/* Content that is slided down */
	padding:1px;
	position:relative;
	overflow:hidden;
	width:500px;
	height:auto;
	text-align:center;
}

I've built my entire site using code recycled from examples and tutorials freely available. I figured this was the best way of learning but this problem is beyond me. I'm sure the answer s simple and I'm not looking at the right place.

Thanks
Sri

**Kor** · 04-27-2011, 03:47 AM

Post a link to a test page. We need to see the whole picture.

**Eightytwo** · 04-27-2011, 04:10 AM

Hi! Thanks for replying...

I do not have a test page but here's a link to one of the galleries...

www.thekite.in/thekite/indian_rock.html

The dropdowns in this page load up fully opened. They should be closed and when the user clicks on the band names, the dropdown for THAT band alone opens up. I am unable to post a live working example... I even tried inserting the JS into the HTML page as it was originally and it is still not working....

**Kor** · 04-27-2011, 04:21 AM

I don't understand. I see no dropdown in that page. Is that the page which bring you trouble? If not, post the link exactly to your document which gives you errors.

**ChanM** · 04-27-2011, 04:35 AM

Hello everyone.

Im also having a problem with my javascript and was hoping i could get a reply here. I cant seem to post a new thread on here probably because im new.

At the moment my site has been set up to load more posts in the same page instead of browsing 1,2,3..20 but there is a bit of a problem. [...]
content deleted by moderator

Kind Regards

Chan

**Eightytwo** · 04-27-2011, 04:38 AM

Yes, that is the page with the error...

I COPIED the HTML from page using the view source window and created an HTML page which works perfectly fine. Please see the screenshot...

**Kor** · 04-27-2011, 04:44 AM

Originally Posted by ChanM

Hello everyone.

Im also having a problem with my javascript and was hoping i could get a reply here. I cant seem to post a new thread on here probably because im new.

Please, don't hijack the others threads. Post your own thread. As a new user you will wait for a Moderator's approval (only for your first post). If you are posting it now, I will approve it within seconds.

**Kor** · 04-27-2011, 04:49 AM

Originally Posted by Eightytwo

Yes, that is the page with the error...

I COPIED the HTML from page using the view source window and created an HTML page which works perfectly fine. Please see the screenshot...

I see no errors here:
http://www.thekite.in/thekite/indian_rock.html
Except, maybe, a HTML/CSS error on the last line of the body (the tags are closed in a wrong order):

Code:

<div id="main">
<style type="text/css"> body{background:url(ir/irbg.gif) no-repeat top center;}
</div>
</style>

**Eightytwo** · 04-27-2011, 04:51 AM

Thanks, Kor. I will correct that... but I doubt that'll solve my problem... I have no clue as to what could've gone wrong

**Kor** · 04-27-2011, 05:00 AM

Originally Posted by Eightytwo

Thanks, Kor. I will correct that... but I doubt that'll solve my problem... I have no clue as to what could've gone wrong

But what's going wrong? I don't understand...

**Eightytwo** · 04-27-2011, 05:10 AM

err... let me try and explain it better...

When the page loads, the user should see the page as shown in the screenshot('page_load.jpg') below
page_load.JPG

When they click on a sub-menu, say 'Perfect Strangers' they should see the thumbnails as shown in the screenshot('dropdown') below
dropdown.JPG

The thumbnails are not visibile because I don't have these on the system I'm currently using.

The point is, it working perfectly fine locally but doesn't when I upload this to my hosting server.

I am using jquery Lightbox to display the pictures. This is working perfectly fine. It is the dropdown function in specific that doesn't work.

I hope this explains the problem...

**Kor** · 04-27-2011, 06:10 AM

OK, I understood. I guess that the problem might be related with the way you have called the function onload. You see, onload can be called only once per element, thus the line:

Code:

window.onload = initShowHideDivs;

Will do nothing, because I suspect that onload is called previously by one of the JQuery application. To bypass that you must attach a new function. So, instead of the line above, try this:

Code:

// cross-browser attach events function

function AttachEvent(obj,evt,fnc,useCapture){
	if (!useCapture) useCapture=false;
	if (obj.addEventListener){
		obj.addEventListener(evt,fnc,useCapture);
		return true;
	} else if (obj.attachEvent) return obj.attachEvent("on"+evt,fnc);
	else{
		MyAttachEvent(obj,evt,fnc);
		obj['on'+evt]=function(){ MyFireEvent(obj,evt) };
	}
} 
function MyAttachEvent(obj,evt,fnc){
	if (!obj.myEvents) obj.myEvents={};
	if (!obj.myEvents[evt]) obj.myEvents[evt]=[];
	var evts = obj.myEvents[evt];
	evts[evts.length]=fnc;
}

function MyFireEvent(obj,evt){
	if (!obj || !obj.myEvents || !obj.myEvents[evt]) return;
	var evts = obj.myEvents[evt];
	for (var i=0,len=evts.length;i<len;i++) evts[i]();
}
// attach new function

AttachEvent(window,'load',function(){initShowHideDivs()},false);

**Eightytwo** · 04-27-2011, 06:58 AM

Okay... thanks...

I'll try that once I get home but I have two questions

1) How do I figure out how to relate my code with yours? Obviously, the 'objects' or variables defined are different and I'm just a beginner with JS...

2) You said that the code

Code:

window.onload = initShowHideDivs;

will be invoked only once and that it could be invoked by another jQuery application. But I don't think it does because the only other jQuery I have on my website and that doesn't use this... or, at least I think it does... moreover how is it working locally and not when hosted on the server... if it is can be invoked only once, it shouldn't work locally, either, right?

Sorry to question your solution but I am only trying to understand what I'm doing here...

S

**Kor** · 04-27-2011, 07:09 AM

Originally Posted by Eightytwo

Okay... thanks...

I'll try that once I get home but I have two questions

1) How do I figure out how to relate my code with yours?

Once again:

Instead of

Code:

window.onload = initShowHideDivs;

write:

Code:

// cross-browser attach events function

function AttachEvent(obj,evt,fnc,useCapture){
	if (!useCapture) useCapture=false;
	if (obj.addEventListener){
		obj.addEventListener(evt,fnc,useCapture);
		return true;
	} else if (obj.attachEvent) return obj.attachEvent("on"+evt,fnc);
	else{
		MyAttachEvent(obj,evt,fnc);
		obj['on'+evt]=function(){ MyFireEvent(obj,evt) };
	}
} 
function MyAttachEvent(obj,evt,fnc){
	if (!obj.myEvents) obj.myEvents={};
	if (!obj.myEvents[evt]) obj.myEvents[evt]=[];
	var evts = obj.myEvents[evt];
	evts[evts.length]=fnc;
}

function MyFireEvent(obj,evt){
	if (!obj || !obj.myEvents || !obj.myEvents[evt]) return;
	var evts = obj.myEvents[evt];
	for (var i=0,len=evts.length;i<len;i++) evts[i]();
}
// attach new function

AttachEvent(window,'load',function(){initShowHideDivs()},false);

Just give it a try