eaglehopes
-
Posts
102 -
Joined
Community Answers
-
eaglehopes's post in Why did not element.getAttribute() work? was marked as the answer
Actually, I noticed that, when I explicitly define width and height attributes in HTML (not from CSS), they worked. It looks like a "hard-coded" vs. "soft coded" or something like that... I do not know : what worked was :
<svg id="dotBorder" width="300" height="300" class="borderedSVG" > ... </svg> When I define width and height in CSS by var(--width) or var(--height), javascript does not understood it. Why?
-
eaglehopes's post in Why my web page cause crash in Chrome and slow in Firefox? was marked as the answer
I found its reason : my php code bombards the page to load more than 100 links having their own styles when I chose sub blog page. Then this loading cause some kind of memory leak in my google chrome(TM) browser and eat my whole memory so that it crashed(When I show processes after crash, there are lots of chrome crash-pad processes, if I am lucky to behave fast before complete freeze, I went into tty1 and had to kill chrome by script).
The solution I found is "pagination". I get all links of pages from PHP to javascript and put them only three of them to make the page load faster and crash free! I am marked this as a solution. The lesson I learned was "do not trust browser's memory control, do it your own way while desining your web page!"
-
eaglehopes's post in AJAX : Why did not my xhr object send string variable to php page as $_POST variable? was marked as the answer
Thanks requinix for suggestion, but I read lots of comparisons between fetch vs. XMLHttpRequest pages, such as https://blog.openreplay.com/ajax-battle-xmlhttprequest-vs-the-fetch-api. Implementing "timeout" and "readyState " and some other features that are "not easy" in fecth. XMLHttpRequest suits better for my purposes and easier(while loading... etc.) to handle.
found another page after your link requinix, about POST data using form data : https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects in my search.
Then, I added fastly a hidden form into my html code and send formdata object and worked. My code to solve problem was :
<form name="hiddenForm"></form> <button type="button" id="buttonT1" onclick="getContent()">Get content</button> <div id="contentDiv" ></div> <script> async function loadPage(url,elementIdToInsert,postVarName, postVarValue) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { switch(this.readyState ) { case 4 : if(this.status == 200) { document.getElementById(elementIdToInsert).innerHTML = this.responseText; // this here refers to xhttp object console.log("ok"); } else { console.log("not ok! : "+this.status ); } break; } }; // end of onreadystatechange xhttp.open("POST", url, true); // open the file let formData = new FormData(document.forms.hiddenForm); formData.append(postVarName,postVarValue); xhttp.send( formData ); } function getContent() { loadPage("./path/to/phpfile/scripts.php","contentDiv","foo","bar"); } </script> and send data correctly to php script and I got it from $_POST['foo'].
Thanks.
-
eaglehopes's post in "Clearing a canvas at the back" problem in multilayer HTML5 canvas application was marked as the answer
Since, no one answers to my question, I am back with my code sample to who want to use multiple canvas layers! My sample code :
<html> <script src="code.js"></script> <body> <canvas id="canvas1" height="300" width="400" style="position:absolute;top:0px;left:0px;z-index:1;"> </canvas> <canvas id="canvas2" height="300" width="400" style="position:absolute;top:0px;left:0px;z-index:2;"> </canvas> </html>
window.onload=function() { var canvas1 = document.getElementById('canvas1'); var canvas2 = document.getElementById('canvas2'); var g1 = canvas1.getContext('2d'); var g2 = canvas2.getContext('2d'); g1.save(); // save current state g2.save(); // fill 1 g1.fillStyle='rgba(0,10,200,0.5)'; g1.fillRect(0,0,100,100); // fill 2 g2.fillStyle='rgba(0,255,0,0.5)'; g2.fillRect(20,20,60,60); // restore all states g1.restore(); g2.restore(); } Simply I used "z-index" in style and force two canvas to be in the same position by using "position:absolute". Everything else remains to you... Edited: I attached my code's output...
-
eaglehopes's post in What did I wrong in scoping- not working? was marked as the answer
I found my mistake !! Sorry to disturb, when I put all script tag after canvas object, everything worked ! Element not defined when script is written, I think that is the problem.
-
eaglehopes's post in Problem in passing data with embedded link was marked as the answer
Ok ! I found the answer in answer . It says that, I forgot to get the variable passed by using $_GET["page"] .
So below code solved my problem $page=$_GET["page"];