[Javascript] voor dummies - deel 3

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  woensdag 7 juni 2006 @ 14:19:36 #276
85514 ralfie
!Yvan eht nioj
pi_38625002
quote:
Op woensdag 7 juni 2006 14:14 schreef joupee het volgende:

[..]

hmm.. dus echt een dummie he, ik snap niet eens wat je hiermee bedoelt
dit topic gaat over javascript, een scripting taal voor webpaginas, wat totaal iets anders is als Java, wat een programmeertaal is. Zoek even verder en je zult een centraal Java topic vinden
  woensdag 7 juni 2006 @ 14:22:41 #277
124802 joupee
dat spreek je uit als zjoepee
pi_38625103
quote:
Op woensdag 7 juni 2006 14:19 schreef ralfie het volgende:

[..]

dit topic gaat over javascript, een scripting taal voor webpaginas, wat totaal iets anders is als Java, wat een programmeertaal is. Zoek even verder en je zult een centraal Java topic vinden
oke.. toch bedankt
pi_38626330
quote:
Op woensdag 7 juni 2006 06:26 schreef fokME2 het volgende:
Ik wil graag een divje kunnen draggen, op het moment kan ik de div 'vastpakken' en gaat slepen.

Als je met het divje gaat slepen, dan blijft je muis altijd in het midden van de div. Ik wil echter dat de muis op de plaats blijft waar ik de div 'vastpakte'.

html:
[ code verwijderd ]

javascript:
[ code verwijderd ]

Ik heb het al geprobeerd door ipv de helft van de width van de div, de 'xin' van de x af te trekken. Dit klopt echter niet, want:
x - parsint(div.style.left) = x - xin
xin = parseint(div.style.left), dus dan wordt er niet meer 'gedragged'.

Iemand een oplossing voor mijn probleem?
Iemand die mijn probleem snapt en kan helpen?
pi_38626843
ik zit nou al even te klooien met ajax (wat mij opzich wel een leuke techniek lijkt)
en ik wilde eigenlijk weten of mensen hier nog goede (duidelijke) nederlandse tutorials hierover weten..

en weet iemand wat ik kan doen tegen het feit dat wanneer ik op een link klik in IE dat de eerste ker hij wel netjes de pagina veranderd maar de 2de klik op een link doet ie niks?

[ Bericht 32% gewijzigd door mschol op 07-06-2006 15:50:47 ]
  woensdag 7 juni 2006 @ 16:00:44 #280
85514 ralfie
!Yvan eht nioj
pi_38627673
quote:
Op woensdag 7 juni 2006 15:06 schreef fokME2 het volgende:

[..]

Iemand die mijn probleem snapt en kan helpen?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="Microsoft FrontPage 4.0">
  <title></title>
  <script type="text/javascript" src="drag.js"></script>
  </head>
  <body>
  <div id="drag" onmousedown="startdragging(event)" onmouseup="stopdragging()" style="position: absolute; left: 100px; top: 100px; height: 200px; width: 200px; background-color: #fff000;"></div>
<script type="text/javascript">
function stopdragging() {
document.onmousemove=null;
}

var xrel=0;
var yrel=0;

function startdragging(e) {
var div=document.getElementById('drag');
var x=0;
var y=0;
if (document.all) {
  x = event.clientX + document.body.scrollLeft;
  y = event.clientY + document.body.scrollTop;
} else {
  x = e.pageX;
  y = e.pageY;
}
xrel=x-parseInt(div.style.left);
yrel=y-parseInt(div.style.top);
document.onmousemove=drag;
}

function drag(e) {
var div = document.getElementById('drag');
if (document.all) {
  x = event.clientX + document.body.scrollLeft;
  y = event.clientY + document.body.scrollTop;
} else {
  x = e.pageX;
  y = e.pageY;
}
div.style.left=x-xrel;
div.style.top=y-yrel;
}

</script>
  </body>
</html>

Het is misschien beter om de onmouseup op het document in plaats van de div te doen voor het geval de muisknop buiten deze losgelaten wordt, maar verder werkt het in principe hetzelfde.

wat je hier doet is dus zodra je de muisknop indrukt het verschil in x en y tussen de div en de muis berekenen (xrel en yrel) en bij het slepen dit getal er elke keer aftrekken
pi_38627932
Ik wilde juist vermijden om met onmousedown en onmouseup in de html te werken, maar volgens mij zit er niet veel anders op?
pi_38630059
quote:
Op woensdag 7 juni 2006 16:09 schreef fokME2 het volgende:
Ik wilde juist vermijden om met onmousedown en onmouseup in de html te werken, maar volgens mij zit er niet veel anders op?
Wat is je probleem daarmee? Eventueel voeg je het later dmv. javascript toe aan het element
  woensdag 7 juni 2006 @ 17:59:33 #283
32768 DionysuZ
Respect my authority!
pi_38631499
quote:
Op woensdag 7 juni 2006 15:27 schreef mschol het volgende:
ik zit nou al even te klooien met ajax (wat mij opzich wel een leuke techniek lijkt)
en ik wilde eigenlijk weten of mensen hier nog goede (duidelijke) nederlandse tutorials hierover weten..

en weet iemand wat ik kan doen tegen het feit dat wanneer ik op een link klik in IE dat de eerste ker hij wel netjes de pagina veranderd maar de 2de klik op een link doet ie niks?
cache. daar kun je omheen door een random waarde mee te sturen (of een no-cache header, maar dat heb ik nog niet geprobeerd)
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
pi_38631625
----verkeerde preview knop, post komt zo----
pi_38631757
quote:
Op woensdag 7 juni 2006 17:59 schreef DionysuZ het volgende:

[..]

cache. daar kun je omheen door een random waarde mee te sturen (of een no-cache header, maar dat heb ik nog niet geprobeerd)
hmmm oke ga ik even naar kijken...

--edit--

1http.open('GET','data.php?id='+ action + '&rand='+ Math.random(), true);

ik heb het stukje code met Math.random() toegevoegd maar helaas helpt dit niet..
een no-cache header kan ik nog even naar kijken..

[ Bericht 34% gewijzigd door mschol op 07-06-2006 18:15:46 ]
  woensdag 7 juni 2006 @ 18:20:19 #286
32768 DionysuZ
Respect my authority!
pi_38632131
quote:
Op woensdag 7 juni 2006 18:08 schreef mschol het volgende:

[..]

hmmm oke ga ik even naar kijken...

--edit--
[ code verwijderd ]

ik heb het stukje code met Math.random() toegevoegd maar helaas helpt dit niet..
een no-cache header kan ik nog even naar kijken..
ik heb nl. met AJAX een chat ingebouwd in een site. Alles werkte mooi in firefox maar ik kreeg klachten dat het in IE niet werkte. Toen ik keek zag ik dat de betreffende div wel opnieuw ingevuld werd met een nieuwe innerHTML, maar dat de code die erin kwam hetzelfde bleef. Een random (idd met math.random()) toegevoegd en alles werkte mooi.
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
  woensdag 7 juni 2006 @ 18:22:15 #287
32768 DionysuZ
Respect my authority!
pi_38632193
Mijn (werkende) code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		function loadurl(dest, divname)
{ try
  { xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
  }
  catch (e)
  {
  }
  xmlhttp.onreadystatechange = function()
    { if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
      { document.getElementById(divname).innerHTML = xmlhttp.responseText;
      }
    }
  xmlhttp.open("GET", dest);
  xmlhttp.send(null);
}

function timedCount()
{
var t;
loadurl('chat.php?p=' + Math.floor(Math.random()*50000), 'chatmsgs');
t=setTimeout("timedCount()",3000);
}
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
pi_38632277
quote:
Op woensdag 7 juni 2006 18:22 schreef DionysuZ het volgende:
Mijn (werkende) code:
[ code verwijderd ]
ik ga eens kijken wat ik darmee kan..
no cache headers toevoegen heeft ook niet geholpen namelijk
pi_38632333
De netste oplossing lijkt me toch de juiste headers meesturen in het PHP-bestand, want zo'n random waarde is wel erg hackish

Van deze pagina:
1
2
3
4		<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
?>
  woensdag 7 juni 2006 @ 18:32:39 #290
32768 DionysuZ
Respect my authority!
pi_38632508
quote:
Op woensdag 7 juni 2006 18:27 schreef JeRa het volgende:
De netste oplossing lijkt me toch de juiste headers meesturen in het PHP-bestand, want zo'n random waarde is wel erg hackish

Van deze pagina:
[ code verwijderd ]
ik ga dat in mijn geval ook even proberen tnx
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
  woensdag 7 juni 2006 @ 18:36:30 #291
32768 DionysuZ
Respect my authority!
pi_38632640
quote:
Op woensdag 7 juni 2006 18:32 schreef DionysuZ het volgende:

[..]

ik ga dat in mijn geval ook even proberen tnx
en het werkt
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
pi_38632661
hmm nog niks...
het lijkt erop alsof hij de 2de keer helemaal geen request doet oid?

mijn code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32		var req;
   
function createrequestobject() 
{
   req = false;
   // branch for native XMLHttpRequest object
   if(window.ActiveXObject) 
   {
      try 
      {
         req = new ActiveXObject("Msxml2.XMLHTTP");
      } 
      catch(e) 
      {
         try 
         {
            req = new ActiveXObject("Microsoft.XMLHTTP");
         } 
         catch(e) 
         {}
      }
   }
   else if(window.XMLHttpRequest) 
   {
      req = new XMLHttpRequest();
   }
   
   if( !req) {
      return false;
   }
   return req;
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35		var http = createrequestobject();
   
   function sndreq(action)
   {
      if(http)
      {
         http.onreadystatechange = handleresponse;
         http.open('GET','data.php?id='+ action, true);
         http.send(null);
      }
   }
   
   function handleresponse()
   {
      if (http.readyState == 4) 
      {
         // only if "OK"
         if (http.status == 200) 
         {
            //things to do for correct display
            display();
            return true;
          } 
          else 
          {
            alert("There was a problem retrieving the data:\n" + http.statusText);
          }
      }
   }
   
   function display()
   {
      document.getElementById('content').innerHTML = http.responseText;
      return true;
   }


en ik roep em alsvolgt aan:
1<a href="#" onclick="javascript:sndreq(1);">page 1</a>
pi_38632850
quote:
Op woensdag 7 juni 2006 17:13 schreef JeRa het volgende:

[..]

Wat is je probleem daarmee? Eventueel voeg je het later dmv. javascript toe aan het element
Okok, doe het wel met Gewoon even wennen (>>>>nog<<<<< niet zo into javascript )

Ik heb nu dit:

drag.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41		var xrel = 0;
var yrel = 0;
var obj = null;

function startdragging(e, id){
  var x = 0;
  var y = 0;
  obj = document.getElementById(id);
  if(document.all){
      x = event.clientX + document.body.scrollLeft;
      y = event.clientY + document.body.scrollTop;  
  } else {
      x = e.pageX;
      y = e.pageY;
  }
  xrel = x - parseInt(obj.style.left);
  yrel = y - parseInt(obj.style.top);
  obj.style.cursor = 'move';
  document.onmousemove = drag;
}

function stopdragging(){
    obj.style.cursor = 'default';
    document.onmousemove = null;
}

function drag(e) {
               //     var obj = document.getElementById('drag');
                    if (document.all) {
                      x = event.clientX + document.body.scrollLeft;
                      y = event.clientY + document.body.scrollTop;
                    }
                    else {
                      x = e.pageX;
                      y = e.pageY;
                    }                 

                  obj.style.top = y - yrel;
                  obj.style.left = x - xrel;
                  return true;
}


drag.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <style type="text/css">
  <!--
  .cholder{
      position: absolute; 
      width: 200px; 
      background-color: #fff000; 
      cursor: default;
  }
  -->
  </style>
  <title></title>
  <script type="text/javascript" src="drag.js"></script>
  </head>
  <body>
  <div id="drag" class="cholder" onmousedown="startdragging(event, 'drag');" onmouseup="stopdragging();" style="left: 100px; top: 100px;">a</div>
  <div id="draga" class="cholder" onmousedown="startdragging(event, 'draga');" onmouseup="stopdragging();" style="left: 300px; top: 300px;">b</div>
  </body>
</html>


Ik wil het sleepeffect van:
http://netvides.com/ bereiken. Iemand tips/suggesties hoe ik dat het beste kan aanpakken?

[ Bericht 3% gewijzigd door fokME2 op 07-06-2006 19:35:06 ]
pi_38636484
niemand een idee voor mijn probleem?
misschien een andere stuk code?
pi_38636845
quote:
Op woensdag 7 juni 2006 20:56 schreef mschol het volgende:
niemand een idee voor mijn probleem?
misschien een andere stuk code?
Ik weet het niet zeker, maar moet je voor een nieuwe request niet een nieuw XMLHttpRequest object aanmaken?
pi_38637047
quote:
Op woensdag 7 juni 2006 21:14 schreef JeRa het volgende:

[..]

Ik weet het niet zeker, maar moet je voor een nieuwe request niet een nieuw XMLHttpRequest object aanmaken?
nog eff verder gezocht en lijkt aan de activexObject te liggen oid:
gebruik nu:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35		function createrequestobject() 
{
   req = false;
   // branch for native XMLHttpRequest object
   if(window.ActiveXObject) 
   {
          var types = [    
                'MSXML2.XMLHTTP.6.0',
                'MSXML2.XMLHTTP.5.0',
                'MSXML2.XMLHTTP.4.0',
                'MSXML2.XMLHTTP.3.0',
                'MSXML2.XMLHTTP',
                'Microsoft.XMLHTTP'    ];

        for (var i = 0; i < types.length; i++)
        {
            try
            {
                return new ActiveXObject(types[i]);
            }
            catch(e) {}
        }

        return null;
   }
   else if(window.XMLHttpRequest) 
   {
      req = new XMLHttpRequest();
   }
   
   if( !req) {
      return false;
   }
   return req;
}

en dit werkt ..
geen idee wat het nou was...
nof wel eff testen oinder FF (zodat ik niet die vernaggeld heb )
pi_38637591
quote:
Op woensdag 7 juni 2006 21:23 schreef mschol het volgende:

[..]

nog eff verder gezocht en lijkt aan de activexObject te liggen oid:
gebruik nu:
[ code verwijderd ]

en dit werkt ..
geen idee wat het nou was...
nof wel eff testen oinder FF (zodat ik niet die vernaggeld heb )
Dit vind ik nog steeds de fraaiste oplossing:

1
2
3
4
5
6
7
8
9
10
11
12		if(!window.XMLHttpRequest){
   window.XMLHttpRequest=function(){
      var types=['Microsoft.XMLHTTP','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP'];
      for (var i=0;i<types.length;i++){
         try{
            return new ActiveXObject(types[i]);
         }
         catch(ex){};
      };
      return undefined;
   };
};


Dan kan je gewoon zo een nieuwe instantie van het XMLHttpRequest object maken:

1var r = new XMLHttpRequest();


(met dank aan crisp )
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_38637722
quote:
Op woensdag 7 juni 2006 21:47 schreef SuperRembo het volgende:

[..]

Dit vind ik nog steeds de fraaiste oplossing:
[ code verwijderd ]

Dan kan je gewoon zo een nieuwe instantie van het XMLHttpRequest object maken:
[ code verwijderd ]

(met dank aan crisp )
eigenlijk is ie alleen maar wat korter dan wat ik heb, wat ik er zo van zie..
maar ach het werkt en daar ben ik blij mee..
inmiddels me anroep funcite ook al weer vergroot :
1sndreq(action, page, param, param2)

dat wordt dus v.l.n.r.
POST/GET
naam v/d php pagina
parameter 1 (volledig, dus id=1 en niet alleen 1, om het voor mij goed bruikbaar te houden)
parameter 2 same als 1 alleen wordt er met een if gekeken of deze wel mee moet met de request
pi_38642833
Ben nou al een tjidje aan het prutsen, maar ik kom er maar niet uit waarom dit niet in firefox werkt, maar wel in opera of IE.

[ Bericht 6% gewijzigd door fokME2 op 08-06-2006 00:31:12 ]
pi_38643101
Ik denk dat het opvragen van de positie niet klopt. Hoe dat beter kan kan je bijvoorbeeld lezen op Quirksmode.org.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[Javascript] voor dummies - deel 3
Index

» digital corner

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')