www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 22

Thread: Javascript not working on hosting site

  1. #1
    Join Date
    Apr 2011
    Location
    Chennai, India
    Posts
    13

    Javascript not working on hosting site

    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

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Post a link to a test page. We need to see the whole picture.

  3. #3
    Join Date
    Apr 2011
    Location
    Chennai, India
    Posts
    13
    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....

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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.

  5. #5
    Join Date
    Apr 2011
    Posts
    3

    Problem With Loading More Posts

    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
    Last edited by Kor; 04-27-2011 at 06:01 AM. Reason: delete content as irrelevant

  6. #6
    Join Date
    Apr 2011
    Location
    Chennai, India
    Posts
    13
    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...
    Attached Images Attached Images

  7. #7
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by ChanM View Post
    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.

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by Eightytwo View Post
    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>

  9. #9
    Join Date
    Apr 2011
    Location
    Chennai, India
    Posts
    13
    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

  10. #10
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by Eightytwo View Post
    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...

  11. #11
    Join Date
    Apr 2011
    Location
    Chennai, India
    Posts
    13
    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...

  12. #12
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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);

  13. #13
    Join Date
    Apr 2011
    Location
    Chennai, India
    Posts
    13
    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

  14. #14
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by Eightytwo View Post
    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

  15. #15
    Join Date
    Apr 2011
    Location
    Chennai, India
    Posts
    13
    Hey!

    I'm back home. I tried the code you gave and it's still the same... works on my desktop but not on the site

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles