[JS] Defenieer probleem - Softwareontwikkeling

zondag 2 april 2006 23:43

Acties:

Topicstarter

Hallo, sinds paar daagies ben ik verslaafd aan javascript geworden maar nu zit ik met een probleem.
We kennen natuurlijk allemaal het probleem dat een beetje website tegenwoordig met een firefox/IE/etc update telkens moeilijker word om voor elke browser hetzelfde resultaat te produceren, ik zit met het volgende probleem

Ik heb een menu gemaakt dat zich helemaal opbouwt uit paar arrays. In IE6.0 en 7.0 doet ie het prima, maar in Netscape en FireFox doet ie het niet. Ik krijg van de Javascript Console de error
main is not defined in: lb/javascript/rp_menu.js Line: 10
Terwijl ie dat wel is, volgens mij...

Hulp much appreciated!

Dit is mijn code:
rp_menu.js:

JavaScript:

function construct_menu() {

    for(var m = '0'; m < main.length; m++){
        var main_det = explode('|',main[m]);
        
        if(!main_det[1]) {
            var link = '#';
        } else {
            var link = main_det[1];
        }

        document.write('<li class="item_level_1"><a href="' + link + '">' + main_det[0] + '</a></li>');
    
        if(link == '#') {
            document.write('<ul><table id="sub_table">');
            m++;
            
            alert(m);
            for(var d = '0'; d < sub_items[m].length; d++) {
                var sub_det = explode('|',sub_items[m][d]);

                document.write('<tr><td id="sub_row" onmouseover="this.bgColor=' + fadein_subrow + '" onmouseout="this.bgColor=' + fadeout_subrow + '"><a href="' + sub_det[1] + '">' + sub_det[0] + '</a></td></tr>');
            }
            document.write('</table></ul>');
        }
    }
            
}

En dit is de html (met een beetje js uiteraard) :

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
    <link href="lib/css/rp_menu.css" rel="stylesheet" type="text/css" media="all" />
    <link href="lib/css/rp_master.css" rel="stylesheet" type="text/css" media="all" />
    
    <script type="text/javascript" >

        var slmenuObj;

        var initExpandIndex                 = 0;
        var divCounter                      = 1;
        var slideMenuHeightOfCurrentBox     = 0;

        var ulToHide                        = false;
        var expandFirstItemAutomatically    = false;
        var initMenuIdToExpand              = false;
        var expandMenuItemByUrl             = false;
        var divToScroll                     = false;
        var ulToScroll                      = false;    
        var divToHide                       = false;

        var parentDivToHide                 = new Array();
        var objectsToExpand                 = new Array();
        var otherDivsToScroll               = new Array();      
        var alwaysExpanedItems              = new Array();
        var parentDivToHide                 = new Array();
        var main                            = new Array();
        var sub_items                       = new Array();

        var fadein_subrow                   = "'#E1E1E1'";
        var fadeout_subrow                  = "'#F4F4F4'";

        main = new Array(
                        '1.|1.php',
                        '2.|2.php',
                        '3.|',
                        '4.|',
                        '5.|5.php',
                        '6.|'
                        );

        sub_items[3]= new Array(
                        '3.1|x.php',
                        '3.2|x.php'

                        );
        sub_items[4]= new Array(
                        '4.1|x.php',
                        '4.2|x.php'
                        );
        sub_items[6]= new Array(
                        '6.1|x.php',
                        '6.2|x.php'
                        );
            
    </script>
    <script type="text/javascript" src="lib/javascript/rp_functions.js"></script>
    <script type="text/javascript" src="lib/javascript/rp_menu.js"></script>

</head>
<body>
<a href="javascript: autoHideMenus()">close all</a> <a href="javascript: construct_menu()">construct menu</a>

    <div id="slidedown_menu">
        <ul>
        <script type="text/javascript"> construct_menu(); </script>
        </ul>
    </div>

<script type="text/javascript"> initSlideDownMenu(); </script>
</body>
</html>

Voor een live versie:
http://www.interblue.nl/got/got.html

[ Voor 33% gewijzigd door Optix op 03-04-2006 01:05 ]

.

zondag 2 april 2006 23:49

Acties:

BasieP

je krijgt neem ik aan ook een regelnr terug?
probeer eens zelf te debuggen, kijk iig waar 'main' wel een waarde heeft, en waar niet
dit kan je bijv. doen door alerts te plaatsen op bepaalde plekken

trouwens, maak je main 2x new?1x als lege en 1x als volle array?

[ Voor 34% gewijzigd door BasieP op 02-04-2006 23:53 ]

This message was sent on 100% recyclable electrons.

zondag 2 april 2006 23:54

Acties:

Optix

Topicstarter

BasieP schreef op zondag 02 april 2006 @ 23:49:
je krijgt neem ik aan ook een regel terug?
probeer eens zelf te debuggen, kijk iig waar 'main' wel een waarde heeft, en waar niet
dit kan je bijv. doen door alerts te plaatsen op bepaalde plekken

trouwens, maak je main 2x new?1x als lege en 1x als volle array?

Nja die is volgens mij tijdens de debug over gebleven, maar iig reply op wat je zei:
dat is juist het leuke er aan, overal is main gevuld, hij gebruikt de array ook. alleen om 1 of andere reden is mijn menu opengeklapt. (zoals je kan zien)

.

maandag 3 april 2006 00:02

Acties:

crisp

Devver

Pixelated

JavaScript:

1
2
3

for(var m = '0'; m < main.length; m++){

if(main_det[1].length == '0') {

Weet je ueberhaupt wel het verschil tussen strings en numbers?

Overigens, anno 2006 een menu maken dat zonder JS totaal inaccessible is is op z'n minst nogal amateuristisch te noemen; 'unobtrusive' is een mooi zoekwoord

en gebruik aub niet het javascript: pseudo-protocol in eventhandlers

We kennen natuurlijk allemaal het probleem dat een beetje website tegenwoordig met een firefox/IE/etc update telkens moeilijker word om voor elke browser hetzelfde resultaat te produceren

Nee, dat probleem ken ik eigenlijk niet zo. Ik ga meestal uit van standards-compliant browsers en meestal doet IE dan vervelend

[ Voor 6% gewijzigd door crisp op 03-04-2006 00:09 ]

Intentionally left blank

maandag 3 april 2006 00:18

Acties:

Optix

Topicstarter

Dude, ik zit nog maar paar dagies aan de javascript.
Ja hoor ik weet het verschil tussen een string en een nummer wel hoor

Het werkt toch, dus toegestaan in ontwikkeling

.

maandag 3 april 2006 00:19

Acties:

crisp

Devver

Pixelated

Het werkt toch, dus toegestaan in ontwikkeling

Je post hier een topic omdat je een probleem hebt; blijkbaar werkt het dan toch niet

en zachte heelmeesters... (IE is een hele zachte heelmeester, ik niet)

frappant ook die XHTML doctype, en dan toch document.write gebruiken (en markup die niet valideerd)

[ Voor 41% gewijzigd door crisp op 03-04-2006 00:23 ]

Intentionally left blank

maandag 3 april 2006 00:28

Acties:

Optix

Topicstarter

Tsjonge, je bent niet echt van de helpende hand he.
Alles fout keuren (ook al is het misschien wel fout

) en niet vertellen hoe ik het dan beter kan doen.

.

maandag 3 april 2006 00:42

Acties:

crisp

Devver

Pixelated

Ik geef toch een fout aan? Strict genomen is main['0'] iets anders dan main[0]

Ik denk overigens dat je probleem eerder te maken heeft met hoe standards-compliant browsers omgaan met whitespace in de DOM; zie bijvoorbeeld dit artikel

deze warning gaf me de clue (webdeveloper toolbar met JS strict warnings aan):

Warning: reference to undefined property mainMenuItem.tagName
Source File: http://www.interblue.nl/got/lib/javascript/rp_menu.js
Line: 193

Het valt me ook op dat je uppercase tagNames gebruikt in je script - iets dat ook niet strookt met XHTML (vermits juist mimetype)

edit: de door jouw genoemde foutmelding krijg ik echter niet; welke versie Firefox test je in?

[ Voor 45% gewijzigd door crisp op 03-04-2006 00:50 ]

Intentionally left blank

maandag 3 april 2006 00:56

Acties:

Optix

Topicstarter

FireFox 1.5.0.1

Netscape ( 8.1 ) meld mij nu:
Error: sub_items[get_sub] has no properties
Source File: file:///***/lib/javascript/rp_menu.js
Line: 24

In live versie heb ik boven een knop gemaakt die de menu constructor function uitvoert, druk daar eens op en kijk wat voor foutmelding je dan krijgt in javascript console

[ Voor 36% gewijzigd door Optix op 03-04-2006 00:57 ]

.

maandag 3 april 2006 00:59

Acties:

crisp

Devver

Pixelated

NightFade schreef op maandag 03 april 2006 @ 00:56:
FireFox 1.5.0.1

Netscape ( 8.1 ) meld mij nu:
Error: sub_items[get_sub] has no properties
Source File: file:///***/lib/javascript/rp_menu.js
Line: 24

In live versie heb ik boven een knop gemaakt die de menu constructor function uitvoert, druk daar eens op en kijk wat voor foutmelding je dan krijgt in javascript console

Tsja, '0' + 1 = '01'

Overigens krijg ik geen foutmelding, maar een pagina die niet stopt met laden en enkel een aantal warnings in mijn console (Ff 1.5.0.1)

Mijn advies: geen JS gebruiken om een menu te genereren. Gebruik gewoon plain HTML voor je menu en gebruik JS enkel voor behaviour (en CSS voor styling).

[ Voor 26% gewijzigd door crisp op 03-04-2006 01:02 ]

Intentionally left blank

maandag 3 april 2006 01:04

Acties:

Optix

Topicstarter

Ik pas code ff aan, look up
met m++; gaat menu 4 weg

reply: haha ja, erg goed advies, zo denk ik er ook over, maar het was een nobel streven

, het het al eens eerder voor elkaar gekregen, maar dat was niet in de tijd van een populaire Ff

Ik heb em ook al wel werkend liggen met gewoon html en ik kan natuurlijk dit ook wel in PHP doen, maar scheelt weer load voor server he

Overigens krijg ik geen foutmelding, maar een pagina die niet stopt met laden en enkel een aantal warnings in mijn console (Ff 1.5.0.1)

Die melding is inmiddels gefixed, dit zei hij na het laden van de functie door op dat linkje te drukken

Fout sub_items is not defined
Bronbestand file:///***lib/javascript/rp_menu.js
Regel 26
is het nu

[ Voor 119% gewijzigd door Optix op 03-04-2006 01:12 ]

.

maandag 3 april 2006 08:42

Acties:

crisp

Devver

Pixelated

Dat komt denk ik doordat je document.write()'s uitvoert na het laden van je pagina. Hierdoor destroy je je huidige document en dan is het logisch dat je je script-data ook kwijtraakt (hoewel dat een beetje verschilt per browser).

Intentionally left blank

maandag 3 april 2006 08:53

Acties:

BasieP

crisp schreef op maandag 03 april 2006 @ 00:02:

en gebruik aub niet het javascript: pseudo-protocol in eventhandlers

mag ik vragen waarom niet?

ik zie op enorm veel websites het "javascript: void(0)" verhaal, en vaak genoeg ook functie aanroepen op die manier, waarom zou dat niet mogen, 't ding is er toch voor gemaakt?

This message was sent on 100% recyclable electrons.

maandag 3 april 2006 09:03

Acties:

crisp

Devver

Pixelated

BasieP schreef op maandag 03 april 2006 @ 08:53:
[...]

mag ik vragen waarom niet?

ik zie op enorm veel websites het "javascript: void(0)" verhaal, en vaak genoeg ook functie aanroepen op die manier, waarom zou dat niet mogen, 't ding is er toch voor gemaakt?

Event-handlers behoren enkel script-data te bevatten; een pseudo-protocol is geen script-data.
In een href-attribuut moet je natuurlijk wel javascript: gebruiken, maar aan de andere kant moet je je dan afvragen of een anchor dan wel het juiste element is om te gebruiken

Intentionally left blank