Javascript Drag and drop + scalable.

Status
Niet open voor verdere reacties.

synchronicspace

Gebruiker
Lid geworden
20 mrt 2010
Berichten
5
Hoi Allen!
Zou iemand mij kunnen helpen of vertellen wat ik fout doe?
Ik gebruik dit javascript om plaatjes te draggen en te droppen en te schalen:
http://www.synchronicspaces.nl/wz_dragdrop.js
Dit is de webpagina:
http://synchronicspaces.nl/index2.html
In de validator van w3 geeft ie aan dat er 106 fouten in zitten:
http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0 waarvan ik dacht dat ze verplicht waren in een codering..
Hij werkt niet in safari maar wel in firefox, in opera trekt ie alle plaatjes scheef.
Bij voorbaat dank.
Groet,
Joris.
 
Eh, je HTML is verkeerd, zoals de validator al aangaf.
HTML:
  <body text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<body>
je mag maar 1x body, dus die bovenste mag weg (met al die text, link, alink, etc).

de rest van de fouten komt DOOR die foute body, zover ik kan zien. Dus, fix die regel, en dan zou ie dus moeten werken.



:thumb:
 
Er zijn minder fouten, maar nog steeds 99..:(
Hij laadt minder plaatjes dan hij zou moeten doen en dat heeft op een of andere manier met safari te maken geloof ik, want in firefox doet ie het prima?
 
Joho, tenminste als de pagina index2.html (nu: 404) intussen de root is geworden.
  • Regel 20 met:
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    meteen als regel 5 na de <head ...> zetten. Daarmee weten browsers hoe ze alle volgende code-tekens moeten interpreteren.
  • Bij mij doet Opera het dan wel.
Verder is m.b.t. de nog resterende 99 html-errors het leed te overzien:
  • Regel 23: <script> moet worden <script type="text/javascript">.
  • Alle images moeten eindigen op .../> i.p.v. op de kale ...>.
  • Alle images moeten een lege alt="" eigenschap erbij krijgen.
  • En nog een paar <br>retjes die <br /> moeten zijn.
  • En bij de images moet een id="..." komen, met een inhoud die gelijk is aan de name="..." van dat img.
Met vriendelijke groet,
CSShunter
 
Noho, hij doet het nog steeds niet in safari :confused:
Wel zijn er minder fouten nog maar 1 :p
Als ik bij safari alles selecteer, dan kan ik de velden wel verslepen dus er werkt wel iets, maar de plaatjes worden steeds niet geladen of maar enkele..
gr.
 
Hoi synchronicspace,
Ook nog even aan het speuren geweest.
  • De "ene fout in regel 36" is de eigenschap name="..." die in de Strict-variant van html/xhtml niet gebruikt mag worden.
  • Maar als de eerste name="..." van regel 36 verwijderd is, geeft de html-validator ogenblikkelijk een nieuwe "1 error" aan: nu de name="..." in de volgende regel! - Ze moeten er dus allemaal uit. Foutje van de validator: kijkt niet verder dan z'n neus. :shocked:
  • Erger is: slopen we alle "names" er uit (een id="..." zou genoeg moeten zijn), dan werkt het script niet. :confused:
Dan moeten we onze toevlucht nemen tot het Transitional Doctype om de html valid te laten zijn. Dat even uitgeprobeerd. Helaas: alle browsers vertonen hun kunsten, maar Safari nog steeds niet.
Proefjestijd voot bug-hunten! :D
  • Eerst de achtergrond-wissel uitgezet, en alle afbeeldingen behalve de eerste uitgeschakeld.
  • De charset voor alle veiligheid nog even op utf-8 gezet.
  • Toen een gekleurd randje om de <div> gezet, om 'm te kunnen zien.
  • Ook voor het gemak nog een randje om het img.
Wat zien we:
  • Alle browsers doen keurig wat er gevraagd wordt: de afbeelding laat zich verslepen vanuit de div naar een andere plek op het scherm, de afbeelding laat zich schalen, en als je de div verplaatst, gaat het er op afstand aan geplakte img prachtig mee over het scherm: samen op weg in Internet Explorer (7 in mijn geval), Firefox, Opera.
  • Zie hier test 1.
  • Maar niet in Safari! En ook niet in Chrome, trouwens.
Door de gekleurde randjes kunnen we echter wel de diagnose bij patiënt Safari stellen:
  • De <div> en het <img> zijn ook bij Safari in principe aanwezig en zitten op de goede plaats.
  • De <div> laat zich goed verplaatsen, en het <img> gaat ook mee.
  • Maar de border om het <img> laat zien, dat het <img> geen hoogte heeft: het is alleen een lijntje met de breedte! Met wat handigheid is wel het groene strookje los te trekken van de <div> en apart te positioneren; daarna ook nog mogelijk: via de <div> gekoppeld verplaatsen. Maar nog steeds geen <img> te zien.
Vandaar dat er zonder borders helemaal niets op scherm komt! Dus de html-broncode ingedoken om te zien hoe dat zit.
  • Het <img> heeft alleen een opgegeven breedte. Normaal gesproken zou Safari dan de bij[passende hoogte moeten uitrekenen en het totaal gaan renderen, maar kennelijk gebeurt dat nu niet. Het zou kunnen dat het script in de weg zit.
Daarom zelf bij de in de html verkleinde breedte van de afbeelding de bijbehorende hoogte uitgerekend, en die in de html erbij gezet. Hopend dat de hoogte nu niet het script in de weg zit...
Nu de borders er weer af:
Met goede moed nu de starthoogtes van alle andere afbeeldingen uitgerekend en in de html gezet:
Zo, paasei is gelegd. Hoop dat ie het bij jou ook op deze manier doet.

Met vriendelijke groet,
CSShunter

PS: ik merk nu, achteraf, een verschil in Safari bij lokaal testen van test-1 en testen van hetzelfde bestand vanaf een echte site! - Lokaal is Safari een stuk wispelturiger: soms goed, maar meestal fout. Dat zou misschien te maken kunnen hebben met de Safari-beveiliging voor uitvoeren van javascript op lokale bestanden.

PS2: ben wel reuze nieuwsgierig geworden naar die onzichtbare <div>-verpakkingen: komen daar nog dingen in ofzo?
 
Laatst bewerkt:
Super gaaf csshunter!! Hij doet het!
Bedankt voor dit mooie paaseicadeauding :)!
gr.
PS. Ik ga je uitleg nog een keer grondig doorlezen hoe het nu precies zit, na 1 keer lezen heb ik het nog niet helemaal doorgrond haha!
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan