Map moving probleem en andere ongemakken website

[MrDummy]

Ik heb voor RIFT mmo een database-map website gemaakt.
Link: *weg*

De code werkt prima naar behoren in FF en Chrome, zo is me bekend gemaakt.
In IE8 werkt het maar half en dan houdt ie ermee op.
In Opera doet ie vrijwel niks meer.

De map verplaatsing wordt elke keer weer gecontroleerd met divbinnen.OffsetLeft en divbinnen.OffsetTop.
Kijk maar:

Alle vlakken hebben position:relative
De rode vlak heeft zelf geen grootte en breedte, die is gewoon positie punt voor de absolute vlakken, dat dus uit map informatie zal bestaan.
Met aanroep Offset gaat het hier goed.
De div vlak heeft hier 0px,0px als positie. Vlak = divbinnen. De Offset wordt dus op div vlak gelezen t.o.v. div kbody dat als venster gaat dienen voor de map, en dus alles erbuiten mooi wegstopt.
Deze heeft dan ook overflow:hidden.


Hier wordt vlak, dat binnendiv id heeft, even ergens anders neergezet met negatieve coords erin.
Dat kan -300px,-300px zijn.
In Firefox, de Offset werkt gewoon zoals het hoort, de positie is goed herkend.
In IE bleek vooral OffsetLeft steeds 1 pixel teveel te hebben bij elke check, en schuift iets op dan de bedoeling. Hierdoor werkt de map move niet meer goed na wat te hebben verplaatst met Click-move. Via cursor knop kan het nog wel, maar blijft niet goed zoals in FF.

Wat bij Opera nog meer misgaat weet ik niet, maar daarom vraag ik je advies om probleem aan te pakken.
Ik heb lang gezocht naar diverse positie oplossingen, ook JQuery bekeek ik het even. Maar ik wil gewoon simpel houden en niet JQuery gebruiken.

De meeste elementen worden ingelezen met getElementById.
Ik weet niet meer precies wat er nog meer bij moet om IE in goede banen te leiden, en welke codes bij moeten voor Opera. Het is vervelend dat browsers net anders werken.

Meld de problemen op de website en geef als het kan wat tips nadat je onder motorkap hebt gekeken.
Alvast hartelijk dank. Het is zonde dat de nuttige site voor deel niet bruikbaar is voor een aantal spelers, en moeten ze FF of Chrome gebruiken...

[ Voor 0% gewijzigd door RobIII op 24-02-2011 18:50 ]

[RobIII]

MrDummy schreef op donderdag 24 februari 2011 @ 18:30:
Wat bij Opera nog meer misgaat weet ik niet, maar daarom vraag ik je advies om probleem aan te pakken.

Kan iemand even...?
Wij zitten hier niet om je site(s) te testen; als je testers nodig hebt kun je die prima vinden

MrDummy schreef op donderdag 24 februari 2011 @ 18:30:
Ik heb lang gezocht naar diverse positie oplossingen, ook JQuery bekeek ik het even. Maar ik wil gewoon simpel houden en niet JQuery gebruiken.

Dat vind ik wel heel kort door de bocht... En als jQuery je niet bevalt dan zijn er ook nog zaken als MooTools, DoJo en weetikhet.

MrDummy schreef op donderdag 24 februari 2011 @ 18:30:
Ik weet niet meer precies wat er nog meer bij moet om IE in goede banen te leiden, en welke codes bij moeten voor Opera. Het is vervelend dat browsers net anders werken.

Juist daarom zijn libraries als jQuery zo verdomde handig; die nemen al dat cross-browser gezanik (grotendeels) uit je handen (ten koste van wellicht wat overhead...)

MrDummy schreef op donderdag 24 februari 2011 @ 18:30:
Meld de problemen op de website en geef als het kan wat tips nadat je onder motorkap hebt gekeken.

Nogmaals : Kan iemand even...?. Dit is pure werving en dat staan we hier niet toe.

Als je in de Devschuur geholpen wil worden dan zul je of relevante(!) snippets code (m.b.v. code tags) moeten plaatsen in dit topic of een uitgeklede(!) testcase met enkel de hoognodige HTML/CSS/JS om je probleem te illustreren (en niet meer) online plaatsen en daar naar linken. Niemand hier heeft zin om 1500 regels JS code en nog eens ~1000 regels CSS/HTML door te spitten. En, al dan niet bedoelde (verkapte), "spam"-links naar een 'zo goed als af' site zijn we hier niet blij mee.

Daarbij helpt het voor jezelf ook om een uitgeklede testcase te hebben; dat helpt je bij het pinpointen van de oorza(a)k(en) van je proble(e)m(en). Een ander voordeel is dat je heel snel aanpassingen kunt maken om te zien of dat iets oplost. Heb je een oplossing gevonden dan verwerk je die in je huidige "volledige" site.

Verder lees ik veel "heb ik me laten vertellen". Begin eens met gewoon alle browsers die je target op je systeem te installeren. Kost niets hoor en een beetje webdevver heeft minimaal de 5 grote browsers op z'n systeem staan (IE/FX/Chrome/Safari/Opera). Dan hoef je niet op anderen af te gaan maar kun je 't met eigen ogen zien

Tot slot: Waar hoort mijn topic?
PRG >> WEB

[ Voor 26% gewijzigd door RobIII op 24-02-2011 19:05 ]

[MrDummy]

Ik heb wat getest met JQuery 1.5 script met offset() en position(), maar het werkt niet goed.
En andere script code

JavaScript:

function getPosition(obj){
    var topValue= 0,leftValue= 0;
    while(obj){
    leftValue+= obj.offsetLeft;
    topValue+= obj.offsetTop;
    obj= obj.offsetParent;
    }
    finalvalue = leftValue + "," + topValue;
    return finalvalue;
}

Heb ik getest, dat lijkt te werken in IE en FF, maar veroorzaken beiden een jump in de map.

En ik kijk morgen of deze http://help.dottoro.com/ljvmcrrn.php wat werkt met andere code.
Morgen ook maar es Opera installeren, je hebt gelijk dat ik als devver met meerdere browsers moet testen.
Omdat ik weet dat Chrome ook werkt, hoef ik die niet installeren.

Hopelijk heb ik dan alles in orde in de weekend. Ik blijf googlen naar de oplossingen en tips, maar het zal voor me veel tijd kosten om alles voor elkaar te krijgen.

[RobIII]

MrDummy schreef op vrijdag 25 februari 2011 @ 01:04:
Omdat ik weet dat Chrome ook werkt, hoef ik die niet installeren.

Want dat kost je toch wel zeker 15Mb (en dan reken ik nog royaal waarschijnlijk) diskspace? Het werkt nu in Chrome, maar straks? En als Chrome (of 1 van de andere browsers) een getargette browser is, waarom zou je die dan niet installeren en er in testen?

MrDummy schreef op vrijdag 25 februari 2011 @ 01:04:
Hopelijk heb ik dan alles in orde in de weekend. Ik blijf googlen naar de oplossingen en tips, maar het zal voor me veel tijd kosten om alles voor elkaar te krijgen.

Het lijkt me stug dat jQuery verkeerde waardes teruggeeft; nu schud ik helaas niet "zo effe" wat jQuery uit m'n mouw maar weet je zeker dat je 't goed gebruikt/de juiste properties/methods gebruikt?

[MrDummy]

Ik heb gezien dat JQuery doet met

PHP:

var offset=div.offset();

maar zag ook

PHP:

var offset=$('#idlabel').offset();

of

PHP:

var offset=$('idlabel').offset();

Ik moet naar label van div aanwijzen en dat kan met onderstaande, maar het pakt niet op.
Ik zag ook dat Offset() naar hele document kijkt, en er is Position() dat naar parent kijkt. Wellicht moet ik de laatste gebruiken om offset van vlak - kbody correct te maken.

Bij snelle check in Opera 11 werkt scrollen wel goed, maar de menu's rechts klappen niet open. Even kijken wat de reden hiervoor zou zijn.

De website is al uitgebreid getest in FF, en werkt goed. Er hoeft alleen gescript worden zodat op IE en Opera goed gaat. Dan ben ik klaar.

[Caelorum]

MrDummy schreef op vrijdag 25 februari 2011 @ 08:39:
De website is al uitgebreid getest in FF, en werkt goed. Er hoeft alleen gescript worden zodat op IE en Opera goed gaat. Dan ben ik klaar.

Als ik jou was zou ik na de aanpassingen toch nog even in de andere browsers testen of het nog werkt (dus ook in FF).

[MrDummy]

Ik denk dat ik wat weet. Er zit ouderwetse browser detectie in dat display none/block moet regelen.
Die houdt geen rekening met met Opera. Het gaat om stuk code:

PHP:

// browser detectie
//
var browserType;

if (document.layers) {browserType = "nn4"}
if (document.all) {browserType = "ie"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {browserType= "gecko"}

en de code om display te bepalen zijn:

PHP:

function hidedisplay(idlayer) {
  if (browserType == "gecko" )
     document.poppedLayer = eval('document.getElementById(\''+idlayer+'\')');
  else if (browserType == "ie")
     document.poppedLayer = eval('document.all[\''+idlayer+'\']');
  else
     document.poppedLayer = eval('document.layers[\'`'+idlayer+'\']');
  document.poppedLayer.style.display = "none";
}
function showdisplay(idlayer) {
  if (browserType == "gecko" )
     document.poppedLayer = eval('document.getElementById(\''+idlayer+'\')');
  else if (browserType == "ie")
     document.poppedLayer = eval('document.all[\''+idlayer+'\']');
  else
     document.poppedLayer = eval('document.layers[\'`'+idlayer+'\']');
  document.poppedLayer.style.display = "block";
}

Opera 11 schijnt gewoon getElementById doen, zo is gebleken, maar de detectie wijst 'm mogelijk de verkeerde kant op.
Ik heb op internet https://developer.mozilla...and_cross_browser_support gelezen dat de huidige type detectie problemen zal hebben en dat het anders moet.

De aanbevolen methode is detecteren of de functie werkt, de "feature oriented object detection" via if () methode zou ik hier moeten doen.

Dat wordt dus:

PHP:

// browser detectie
//
var browserType;

if (document.layers) {browserType = "nn4"}
if (document.all) {browserType = "ie"}
if (document.getElementById) { browserType = "gecko"; }

En Opera laat nu wel vensters zien. Goed, dat lost een belangrijk probleem op. Nu nog IE's eigen offset probleem.

[ Voor 9% gewijzigd door MrDummy op 25-02-2011 16:34 ]

[MrDummy]

Ik heb op offset probleem twee voorbeeld scripts gemaakt;
http://mrdummy.net/riftworldmap/boxtest.php
In deze test wordt berekend tussen berekende offset via lange script dat op http://help.dottoro.com/ljvmcrrn.php staat, welke gebruik maakt van getBoundingClientRect functie. Uiteraard ook voor oudere browsers is deel code opgenomen. Het komt uit voorbeeld script nummer 4.
De tweede is direct via offsetLeft en offsetTop.

Om in dezelfde stylesheet te komen als de website, is de tweede pagina gemaakt http://mrdummy.net/riftworldmap/boxtest2.php
Alles lijkt in de orde, MAAR getElementbyId('vlak') komt niet door en werkt de zaak niet? Ik weet niet wat er precies fout is in tweede testscript, want in de eerste is er niks aan de hand.

Uit eerste script test zie ik geen afwijking ontstaan. Dat is apart, want ik dacht dat in IE wel een afwijking ontstaat.

Update: terwijl ik nog een keer riftworldmap uittest in IE, leek het erop dat de correctie van browser detectie de probleem verdwijnt. Ik kan nu niet meer de map probleem reproduceren. Het kan opgelost zijn, maar ik wacht wel af op nieuwe problemen.
Op dit moment mag je antwoord geven waarom tweede boxtest2.php geheel weigert doordat getElementById('vlak') niet werkt en in eerste toch wel.
Ik kan hier geen oorzaak vinden waarom het weigert, misschien ziet iemand het wel.

[ Voor 21% gewijzigd door MrDummy op 25-02-2011 15:51 ]

[MrDummy]

Nou weet ik niet meer.
De tweede tests laten zien dat IE goed scrollt en niet meer ergens hangt.
Maar vandaag bekijk ik het nog een keer, blijkt dat ie toch nog vastloopt als ie X coords heeft bereikt. Het blijkt dat ie nog niet goede einde heeft bereikt en komt niet meer verder.

Hier word ik wel beetje moe van. Hoe kan ene keer gewoon werken en op andere dag doet het niks meer? IE kan niet uit zichzelf corrigeren, het is dit of dat.

Morgen ga ik toch wat proefjes doen met paar extra script controles, kijken of het beter gaat.

[ Voor 9% gewijzigd door MrDummy op 27-02-2011 00:45 ]

[MrDummy]

In IE zag ik steeds dat OffsetLeft 1 pixel teveel afwijking vertoont en andere browsers niet.
Dus heb ik besloten maar de waarden te laten afronden om de offset fout te onderdrukken.

JavaScript:

/* Offset functie */
function getOffset(obj) 
    {
    divbinnen=document.getElementById(binnenvlak);
    var posX=divbinnen.offsetLeft;
    var posY=divbinnen.offsetTop;
    // IE blijkt 1 pixel teveel te hebben in X OffsetLeft, hierbij een kleine correctie.
    // FF / Chrome / Opera hebben de probleem niet.
    posX=Math.floor(posX/10)*10;
    posY=Math.floor(posY/10)*10;
    return [posX,posY];
    }

Met de afronding erin gaat het beter in IE, het loopt niet meer ergens vast in de eindeloze lus en maakt zijn routine nu wel geheel af; het bereikt nu goed zijn doel.

[Zed_no1]

waarom ga je niet op zoek naar bestaande oplossingen? Zelf het wiel uit vinden is leuk maar niet erg praktisch.
De meeste ontwikkelaars zullen dat namelijk als eerste doen (kijken naar bestaande oplossingen!).

Wat je wilt doen is vrij complex en je red het niet om "even" naar iets te kijken.. je zult eerst het e.a. goed moeten onderzoeken en tegen elkaar moeten afwegen.

Zoals RobIII al zei ga eens kijken naar javascript libarys of naar Flash oplossingen.

Misschien dat er dan wat meer mensen met je "probleem" willen mee denken?

[MrDummy]

Bestaande oplossingen zijn goed, ik weet dat het al stukken makkelijker maakt.
De locatie XY script heb ik al overgenomen van andere site, na goed uitzoeken welke script beste functioneert en past bij relative berekening. Dat zit erin en heeft goed geholpen. Zelf maken lukt me niet.
Echter, bruikbare XY scripts zijn zeldzaam. Dus ik ben blij dat ik een heel geschikt script heb gevonden dat precies bij mijn eis past.

Maar ik wil ook zelf meer leren. Wat niet lukt, ga ik zeker naar de andere oplossingen kijken.
Je moet toch weten hoe het allemaal werkt, want dan kun je beter op programmeren. Weet je niks van, dan kun je niet niveau hoger doen. Ik programmeer al wat langer, dus ik daag me graag uit om wat te proberen.

Ik verbeter eerst in kleine stappen op. Eerst hou ik simpel, daarna als het steeds beter moet worden, zal ik vaker naar bestaande oplossingen kijken. Ik probeer graag nieuwe methodes uit om te kunnen ontdekken en ook weten wanneer niet meer kan.

En ik probeer de zwakke punten van elke browser te leren. IE heeft zeker al wat problemen en daar wil ik achter komen hoe ik kan voorkomen met wat aanpassingen.