Xepher.Net Forums

Community => Knowhow Trading Post => Topic started by: Miluette on July 25, 2008, 01:48:59 am

Title: Not-working Javascript
Post by: Miluette on July 25, 2008, 01:48:59 am
Looks like I'll be looking at a lot of Javascript in the near future.

For now, however, the TINIEST thing is puzzling me.

The Javascript I'm using to create a popup window from a link on this links page (http://millennium.senshuu.com/links.php) (the more banners link) is not working, although it used to.

I use the exact same script on this one (http://lf.senshuu.com/link.php) and this one (http://ai.senshuu.com/links.php), and they both work.

I can't for the life of me figure out why, and I'm sure I haven't overlooked anything 'cause I spent a long time trying to figure this out. Ouuu.
Title: Re: Not-working Javascript
Post by: Xepher on July 25, 2008, 07:59:04 am
Well, the error console in firefox says the "banners()" function is undefined. The next link you give (the first working one) is calling "banner()" instead of "banners()" and the third page actually includes the function directly in the page, rather than a seperately sourced script. First rule of debugging... it's not "the exact same script" if you're actually using three different pieces of code. :-P I'd suggest consolidating stuff. First off, try putting the banner pop-up code directly on the broken page (that page isn't using any other javascript from the included file) and see if it works then. I suspect the javascript file isn't getting sourced properly for some reason or other. Keep in mind that if you've got other problems in that included javascript (even unrelated to the banners() function) they might be screwing things up. Comparing commonmil.js with commonlf.js I see the collapseAll function has a different number of variables. The broken one looks like it's ending some array with an extra comma. That could be a failure point (I don't know hava Javascript handles that condition, but in some programming languages, it screws things up.)

Anyway, my prime suggestion is just to put a <script> block in the page to directly define the banners function, and then if that works, try it in its own .js file. If those two work, then you know its a problem specifically with that .js file you're currently using. Don't forget to remove the existing .js script insertion when testing this.
Title: Re: Not-working Javascript
Post by: Miluette on July 26, 2008, 03:58:31 pm
I'm super non-PC about coding. Oh, the limits to my technical side...

Anyway, that is amazing. I knew EXACTLY which comma you were talking about, took it out, and now everything works. I knew that except for that particular array and the banner function name that all three files were the same, because I made them at the same time. But I didn't know that extra comma would mess EVERYTHING up. Wow, code.

Hmm, that might be why something else didn't work... *_* This is no time for me to go code-geeky but ah~ Thanks~
Title: Re: Not-working Javascript
Post by: Xepher on July 27, 2008, 12:07:49 am
Wow! I was right? I was honestly just guessing about the comma. Like I said, I've no real idea about javascript, but I just know general programming (or for the matter, journalism/english) practice is that you can't end on a comma. Glad it worked for ya.
Title: Re: Not-working Javascript
Post by: Miluette on September 13, 2008, 10:05:27 am
I probably should have posted this thread in the web design forum. :B Although so far I haven't used Javascript for any design purposes really...

So, the nifty expand/collapse code I use on two pages of LF's site. It works differently on one of them and I'm not sure why.

http://lf.senshuu.com/about.php This page works the way I want it to, with all the info collapsed when the page loads. Nevermind the way I've set things up is slightly tacky and I should probably just break the info up into several pages, but that comes later.

http://lf.senshuu.com/cast.php I only have one use of it here so far, but that's because it's been acting strange. Before it loaded uncollapsed and clicking "spoiler" wouldn't do anything. Now it loads uncollapsed, which is bad for spoilers.

I don't know why it should be doing that, since I basically copied the code from one page to another and changed the id.
Title: Re: Not-working Javascript
Post by: Xepher on September 13, 2008, 03:37:19 pm
Try adding a "display: none;" to the CSS for the hidden elements. That's usually how most pre-made JS utilities handle it.
Title: Re: Not-working Javascript
Post by: Miluette on December 15, 2008, 12:27:34 am
Super late response and new question!

(1) I did that, and now the div that should be hidden is hidden, but clicking the switcher link still doesn't do anything. Meanwhile the other page using this exact method still works perfectly. Buh?

(2) I copied over the exact same (I mean it this time) poll-results-creating popup js from LF's front page (http://lf.senshuu.com/index2.php) to Mil's (http://millennium.senshuu.com), and it works on LF's but not Mil's. I hate it when this happens ahh seriously I can't figure this stuff out
(Another weird thing with Mil's poll is that, after modifying the source code and copying THAT over from LF's page as well as the css I used to modify it, the poll still won't left-align like LF's. I think Millennium hates me for not updating it)
Title: Re: Not-working Javascript
Post by: Databits on December 16, 2008, 12:35:31 pm
FireFox says:

Error: results is not defined
Source File: javascript:results()
Line: 1

Which means that you either aren't defining that function before you use it in the page, or that you aren't including the file that defines that function before using it in that page. By the looks of it you're missing a rather important include that you have on the other site:

Code: [Select]
  <script type="text/javascript" src="js/commonlf.js"></script>
Title: Re: Not-working Javascript
Post by: Miluette on December 16, 2008, 12:49:55 pm
Oh my! I feel like such a huge doofus now. I forgot that Millennium's main page doesn't link to its Javascript file. XD;; LOL. Wow.

Now to figure out this other thing...
Title: Re: Not-working Javascript
Post by: Databits on December 16, 2008, 01:48:48 pm
If you have questions in PHP, SQL, or even JS/HTML/CSS (hell even C/C++ at this point) just ask. I'm rather well adept in all of them, and even if I don't know the answer I can generally find one.  ;)
Title: Re: Not-working Javascript
Post by: Miluette on December 16, 2008, 04:35:48 pm
Well, the switchmenu hide-show div thingy still isn't working on this page. http://lf.senshuu.com/cast.php (seen in the sparkling text link, the only one I have on that page so far)

And it's working on this page http://lf.senshuu.com/about.php which calls the exact same js file undeniably

and I copied over the same code

unless I screwed something up again lol. But I haven't noticed yet. >__>

Thanks by the way. I love knowing smart code people. :D (I'll never write JS/PHP myself, but I can mess with stuff to an extent, yaaay)
Title: Re: Not-working Javascript
Post by: Databits on December 16, 2008, 08:26:33 pm
I don't see any sparkling link thingy on either of those pages.
Title: Re: Not-working Javascript
Post by: Miluette on December 16, 2008, 09:15:07 pm
I should have been a bit more specific, but I meant this link

cast page, spoiler link below Chains

Doesn't do anything when you click it, as opposed to all the header links in the about/world page.
...Wait, now they're not doing anything either. What the crap. D: They worked befoooore.

EDIT: And now that page works again. The javascript should automatically hide the div being hidden/shown by the link you click on, which is why I didn't have display:none on any of those divs in the first place. *nod*

It's just not automatically hiding it on the cast page, which isn't good. D:
Title: Re: Not-working Javascript
Post by: Databits on December 16, 2008, 11:04:46 pm
ok good news, I know the issue, the bad news... this JS is ugly as sin.

It's all located in this here:
Code: [Select]
function collapseAll(objs) {
var i;
for (i=0;i<objs.length;i++ ) {
objs[i].style.display = 'none';
function pageLoad() {
collapseAll($('aboutp','legendp','overp','systemp','typesp','becomingp','gemsp','aimsp','deathp','weaponsp','planep','ronadap','itemsp', 'classesp','recp','spoilerchains','spoileryu','spoilersaru','spoilerhibi','spoileremblem','spoilerdonna','spoilernexy','spoilerohbi', 'spoilerresen','spoilercinna','spoilermin','spoilerjone','spoilerisu','spoilerfila','spoilergachan','spoilerchester','spoilermido', 'spoilerwren','spoilerkaben'));

What this code here is doing is adding the pageLoad() function to an onload handler event (which runs after the page is finished loading). the pageLoad function has an object with a crap ton of hard coded element id's in it which is passes to the collapseAll() function. The collapseAll() function then basically loops through that entire listing and attempts to just set the property on each of these elements, regardless on if they exist or not...

What I'd suggest is to just pre-hide all these elements with inline styles (or a class added to each one with display: none set in it) and scrap this entire chunk of code. It looks more professional when everything is showing as intended before the page is done loading anyhow. Rather than waiting for the page to load then hiding everything that you want hidden.
Title: Re: Not-working Javascript
Post by: Miluette on December 17, 2008, 04:06:42 pm

If I do that though, well, as I mentioned, when I slapped "display:none" to the stuff that's supposed to load hidden, they wouldn't show at all, even after you clicked on the switcher link. Would that change if I took out that chunk of code? ('Cause yeah, having to list all that stuff there does bug me, though when I redo the about section I should get rid of around half of that)
Title: Re: Not-working Javascript
Post by: Databits on December 18, 2008, 12:55:07 pm
That would simply mean that the code to show it isn't written correctly too. I've done the same thing your doing many many time for things on our ecommerce system for stuff like order editing. It's not really that hard, just need to get the hang of it.

First of all though, I tend to write things a little differently:

Code: [Select]
  <script language="javascript" type="text/javascript">
    MyWebsiteName = {};
    MyWebsiteName.toggleContent = function(elementId) {
      var div = document.getElementById(elementId);
      if (!div)
        return false;
      if (div.style.display = 'none')
        div.style.display = '';
        div.style.display = 'none';
      return false;
  <a href="#" onclick="return MyWebsiteName.toggleContent('link1_content');">Link Name</a>
  <div id="link1_content" style="display: none">
    Text content/other html and stuff here...

A few things to note which you may or may not already know. The portion "link1_content" is the div's id. In HTML an id is supposed to be unique to each element, meaning that you don't want to ever have it repeating. Secondly, this code doesn't just open it, it checks to see what the status is for the div and toggles the hiding on or off depending on its state. The weird object stuff "MyWebSite" is a form of name spacing to keep the javascript from being interfered with from other scripts you may add. I also tend to have a habit to always place my JS into onclick handlers rather than the href of the element, and to always have it return "false" to the element telling it not to proceed on to the link contained in href. Finally, just in case the JS fails to do that the "#" will stop it anyhow.

Most the stuff can just be renamed to whatever you like, such as the "MyWebSite" and "link1_content" stuff. I'd also advise that if you wish to style the elements your using, not to use the id's set for styling (even though you can). It's a bad habit to get into. Much more appropriate to use a class in that case in addition to the id element.