eaglehopes
-
Posts
108 -
Joined
Everything posted by eaglehopes
-
Why doesn't Element's "style.left" work?
eaglehopes replied to eaglehopes's topic in Javascript Help
Thanks kicken. Your solution is worked. Also I found another variable which changes while scrolling : getBoundingClientRect() of elements. I used the getBoundingClientRect() version and worked. -
I had three divs having class named "kut"u in another div whose class name is "scroller". I am trying to hide "kutu" objects which are inside "scroller" , whenever their left position is lower than zero. My code is below : <html> <head> <style> body { background-color: lightblue; } .kut { box-sizing :border-box; border-radius : 6px; padding : 10px; margin : 2px; border : 1px solid black; min-width: 200px; max-width: 300px; word-break: break-all; height : 250px; } p { font-family: verdana; font-size: 20px; } .scroller { height : 100px; display: flex; overflow-x: scroll; overflow-y: hidden; } </style> </head> <body> <div id="scroller" class="scroller" onscroll="hideObjects()"> <div id= "1" class="kut">1ENTOEWTEWNTEWNEWTETW</div> <div id= "2" class="kut">2ENTOEWTEWNTEWNEWTETW</div> <div id= "3" class="kut">3ENTOEWTEWNTEWNEWTETW</div> </div> <p id="dbg"></p> <script> var boxes =Array.from( document.getElementsByClassName("kut")); var debug = document.getElementById("dbg"); var container = document.getElementById("scroller"); function hide(item) { var left=item.style.left.replace("px", ""); console.log(item.id+"'s left is"+ item.style.left); // not give correct result ! if(left< 0 ) { item.display = "none"; console.log("closed"); } else { item.display = "block"; console.log("shown"); } } function hideObjects() { boxes.forEach(hide); // when I wrote "boxes.forEach(hide());", it failed!? } </script> </body> </html> Why didn't "style.left" work? I tried to debug its value in console.log(), but it did not work even. Thanks for any advice.
-
Why my web page cause crash in Chrome and slow in Firefox?
eaglehopes replied to eaglehopes's topic in Other
[Computer programming > Linux ] sub-blog had 126 blog pages. -
I used my own php code to build links to my blog pages in my website. I put all links inside a div container and use horizontal scrollbar to access to all. However, when number of blog pages increases(over 100), page loads links but : 1. Chrome crashes when I changed and come back to the tab of my webpage 2. Firefox does not crash but, it starts slow scrolling There is not any php or javascript errors in browser's console. Can anybody help me what is the problem of my page design? Thanks. My problematic web page is : http://enginery.freecluster.eu/index.php?page=blog&subblog=CP&fin=LINUX&blogPage=1.html#BlogHeadTitle
-
Yes, you are right, it is integer ! Oh my god! My mistake is using array_push()... Thanks requinix! So, my final code using array_merge() was completely warning free now. $array = array_merge($array, listAllFiles($sf));
-
Thanks requinix. In manual page it says that : "array_push() treats array as a stack, and pushes the passed variables onto the end of array. The length of array increases by the number of variables pushed." It should be "mixed" variable. In my code it should be an array(named $array) since it calls recursively the same function... So why the first argument gives an error then? Is it better to use array_merge() instead of array_push() then? I will try...
-
I read that array_push() can give warning when the first argument is not an array from php manual. However, my below code is for directory listing. Although there is no int variable in directory names(I checked all filenames-all string- but maybe implicit conversion is done??) randomly it gives warning. And it when I wrote the array with var_dump() it writes some strange "int(1)", "int(4)" etc. as a result. Can someone explain where is my mistake? My code for recursive directory listing with array_push() function ; function listAllFiles($dir) { $array = array_diff(scandir($dir), array('.', '..')); // remove "." and ".." folders foreach ($array as $f) { $sf = $dir.DIRECTORY_SEPARATOR.$f ; if(is_dir($sf)) { if(!is_array($array)){ echo "...no array..."; var_dump($array); $array=[]; } // end is_array check $array = array_push($array, listAllFiles($sf)); echo "<br><b>".$sf." is a directory</b><br>"; } else if(is_file($sf)) { echo "<br>".$sf." is a file"; } // end "if file/directory" check } // end outer for loop return $array; } Thanks.
-
My statement was : " Implementing "timeout" and "readyState " and some other features that are "not easy" in fecth." because they are missing. So, "some implementations" are not easy(not just according to me, but according to others, please see the link I have sent above) due to they are missing and need extra time to add and prone to errors for beginners like me. Therefore, I think, I am misunderstood; since "totally" word catches my attention which is not so correct ! By the way your code is highly elegant , thanks for sharing with us .
-
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.
-
I am trying to learn AJAX and I found page https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send where, it says that I can send string variable by using POST method of xmlhttprequest object. I used this code by using AJAX xmlhttprequest(xhr) object to get a content into the "div" element whose id is "contentDiv" by using onclick event of a button ; <button type="button" id="buttonT1" onclick="getContent()">Get content</button> <div id="contentDiv" ></div> <script> async function loadPage(url,elementIdToInsert,postVariables) { 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 // DEBUG console.log( postVariables ); xhttp.send( postVariables ); } function getContent() { loadPage("./path/to/phpfile/scripts.php","contentDiv","foo=bar"); } </script> And in my scripts.php file I checked it : <?php echo "sended foo variable has value of ".$_POST['foo']; ?> However, I got this output : sended is so it is blank! I checked it with isset() and !empty() functions of php and result is that ; it is set, not empty but no data in it? Why did not work my "POST" method code? Thanks.
-
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...
-
I changed all my website and make sticky menu work even for Chrome by freeing the design from table layout.
-
@kicken, the caniuse.com is a fantastic website ! I saved it to my bookmarks immediately! I couldn't imagine of the presence of such a great & supporting website until one mention about it.
-
I am using Chrome 90.0.4430.212 and not working for me. But, after your reply, I used Firefox 98 and it worked ! Its behavior is browser dependent then. Also I read the link you have sent, it contains lots of valuable info for me. I will try to change my design. Thanks kicken.
-
The link seems broken, I think I forgot to add it, it is here, sorry.
-
In my website I am trying to use position:stick for a table row (<tr> element). But it did not work, I read possible causes but none of them is valid for me. My website is my web page and problematic table row is <tr class="StickyMenuBar" id="MainMenuBar"> <!-- MENU ROW --> <td class="MenuTag" id="menuBar"> ... and corresponding css code is : .StickyMenuBar { position: -webkit-sticky; position : sticky; top : 0px; } Thanks.
-
Method called from another method in the same class not working
eaglehopes replied to drezzia's topic in Javascript Help
Maybe your problem is scope problem of "this" keyword. When you used this you showed what, I think it shows function you defined when user clicked? For more detailed explanation please look here : tutorial about scope of this keyword in Javascript If you defined show_price() method for class Store, you can use it only for instances of Store class objects as you did at the end of the code. I managed to make your code to work like by sending store object to fast_selling method as parameter like that : fast_selling(store) { // I get Store class object that is instantiated //works here // this.show_price(); //.... your code here //doesnt work here store.show_price(); } } //class store const store = new Store(); store.fast_selling(store); // send store object as parameter to fast_selling method or you can use call() or apply() methods to work it like that : class Store { show_price() { alert("Well done , dude!!!"); } //another method fast_selling() { //works here // this.show_price(); //doesnt work here this.show_price(); } } //class store const store = new Store(); store.fast_selling().call(store); // show what is the scope of this in fast_selling() method -
What is wrong in my code - wrong strokeStyle applied?
eaglehopes replied to eaglehopes's topic in Javascript Help
@kicken, thank you very much. -
Hi, I am preparing a canvas program. I prepared a code for drawing lines by below code : draw(g,x0,y0,x1,y1) { // draw line on canvas g.save(); g.strokeStyle = "red"; g.lineWidth = 1; g.moveTo(x0,y0); g.lineTo(x1,y1); g.stroke(); // go back to origin 0,0 coordinates gotoOrigin(); g.restore(); } Although I used save() and restore() methods above, after this method, all strokes become red eventhough I explicitly changed strokeStyle to "#000000". I need some help about what is my mistake? Thanks.
-
I have returned to the working one layer solution because using one layer solves the problem. Please help me to delete the topic. 🙂
-
I used directly the canvas' context (not sending it as a function argument) : function clearCanvas() { nodesGraphics.save(); // save current state flipped about x axis nodesGraphics.fillStyle = backcol; nodesGraphics.scale(1,1); nodesGraphics.clearRect(-w/2,-h/2,w,h); nodesGraphics.fillRect(-w/2,-h/2,w,h); nodesGraphics.restore() ; // get back to old flipped state } did not work. Also when I used : function clearCanvas(g) { if(g) { g.save(); // save current state flipped about x axis g.fillStyle = backcol; g.scale(1,1); g.clearRect(-w/2,-h/2,w,h); g.fillRect(-w/2,-h/2,w,h); g.restore() ; // get back to old flipped state g = null ; // nullified g, still working.... strange ! } else { wc("clearing canvas is not possible since graphics is not ready"); } } Althouth I nullified the sended graphics context g, I can again use it, so javascript uses pass by copy method for function arguments. However, in https://www.geeksforgeeks.org/pass-by-value-and-pass-by-reference-in-javascript/ it says that objects are passed by references. So why context of canvas did not pass by its reference? Any help is appreciated. Thanks.
-
When I pass 2D context of canvas object inside function, does it copy or send its reference in Javascript? Can it be the problem? I asked since when I used one canvas solution, I directly used the canvas' context.
-
I am preparing a multilayer canvas program by using HTML5. It consists of three layer of canvas elements at top of each others. z-index 3 : axesLayer z-index 2 : nodesLayer z-index 1 : edgesLayer When I am using mouse wheel to change the point's position(i.e. scale the graph) using event listener for top layer(axes layer), zoom function triggered. In zoom function I call clearCanvas(g). Where g is the 2D context of the canvas. However, second layer canvas could not be cleared properly. Somehow, it stores all the drawings although I cleared it. Same thing happens when I try to delete a node too. To delete a node, click the checkbox nead the node number, and press either big red - sign at the bottom, or at the X button at the same row of node under Remove title. I noticed that, I can only trigger a mouse wheel event for the top canvas, so zoom function only triggered by axesCanvas, so zoom event is triggered by axesCanvas object. When I used only one layer, the same code(i.e. I changed only names of the contexts, other than that code was the same) did not give any error, but when I used three layers this problem starts. Can anybody help me about it? You can replicate the situation : 1. enter 100 in x and 0 in y coordinates input boxes, 2. press green colored +(plus) sign to add it to nodesLayer element's context 3. while on the canvas at the right, use mouse wheel to scale the point's position and you will see that, it draws continuously the track. My code is live at : http://www.online-mech.epizy.com/js/mtw_v3.js file and application is at : http://www.online-mech.epizy.com also related part is : var backcol = `rgba(0,0,0,0.0)`; function clearCanvas(g) { g.save(); // save current state flipped about x axis g.fillStyle = backcol; g.scale(1,1); g.clearRect(-w/2,-h/2,w,h); g.fillRect(-w/2,-h/2,w,h); g.restore() ; // get back to old flipped state } function drawActiveNodes() { // make it more smart , if // draw all nodes in nodesArray nodesArray.forEach((value) => { value.draw(); }); } function zoom(event) { event.preventDefault(); // prevent scrolling of mouse wheel // make zoom in given increments var increment = 60; zoomFactor = 1 + Math.sign(event.deltaY)*increment * -0.0001; modZoomRef *= zoomFactor; totalZoom = modZoomRef/zoomReference; // += Math.sign(event.deltaY)*increment * -0.0001; if(nodesGraphics) { // this is just for show - not real node values will be changed nodesArray.forEach((value) => { value.gx *= zoomFactor; value.gy *= zoomFactor; }); clearCanvas(nodesGraphics); drawActiveNodes(); } } Thanks.
-
How can I pass class object to onclick function ?
eaglehopes replied to eaglehopes's topic in Javascript Help
I did not know that. Thank you very much ! -
How can I pass class object to onclick function ?
eaglehopes replied to eaglehopes's topic in Javascript Help
To pass the NodeElement class instace object to function. Like this in java : public class NodeElement { NodeElement() { } public Checkbox cbox; ... } in another java file I can do this : import ....; NodeElement n1=new NodeElement(); if(n1.cbox.checked) { select(n1); } My aim was to do similar thing in javascript. But I could not do that , instead I did above.
