eaglehopes

Why I asked this question is that because of the comments to user Sandeep Kapil's similar code in tight dependency comments of another forum in the internet. I learned that tight dependency occurs when stateful protocol used but someones claim the otherwise. Thanks kicken for great answer, but I have difficulty to understand your above statement, why it isn't count as a request? Until your answer I am thinking that I am triggering and requesting/calling the result of the function inside the php file after run it server. Can you explain a little bit more what happens really when my code run, please? Because what I understood that, php code injected into javascript code calls the function inside another file and returns the function's returned result(I am not so quite sure since I experienced that any echoed string value before the return statement will return as a result). I know that my code does not seem the right way to get/fetch the result of function in another php file and I found at least one disadvantage of using it although it workes as I expected. So, I am not insisting on the "properness" of the code, but I am really curious to learn why it works only sometimes, not always? Thanks.

I found Guawong Miao's blog which defines when request become stateless or stateful. I think my request does not requires server to save any state of user, so it uses stateless protocol, am I right? How can I determine/learn while developing a request, which one use which(i.e. stateless or stateful)? Is there any tool (such as can Chrome's developer tool or wireshark) show that? Which one is the simplest one? Thanks.

I have a such javascript code in a php file called index.php; <?php include mathfunctions.php; ?> ... <script> var a=10, b=20; var stars=<?php echo multiply(a,b); ?> </script> I learned that there are two types of protocols, stateless(such as HTTP) and stateful (such as FTP). My question is that, when I used above line of code, does this cause my request to use stateful or stateless protocol? Didn't both use HTTP request? Thanks.

No, I could not manually configured anything before installing XAMPP since I did not know where and how to do it(by the way I am still do not know it). However, after installing XAMPP, it puts all apache, php and sql files under the same folder(/opt/lampp) and by the help of XAMPP's own help documents I learn that how to configure each(including php.ini etc.). I managed my website by using php-javascript code combination such that, php code does : 1. first checks category/subcategory folders and put their names on the menu 2. checks folders for each subcategories 3. lastly, checks files under each subcategories and prepage them as links 4. javascript get all those links and put them into pagination process. Therefore, when I add a "x.html" file under category/subcategory folder, it automatically put it into the menu as a link, similar for category and subcategories- each folder creates a new item in menu.... I read some specific tags from each ".html" file I added such as title, date publish/edit and summary....etc. and when users clicks on it, everything will be tranferred to the div inside the main page... goes on like that, so I did my some kind of automatic website management system. I am now trying to do all these jobs by using sql database. So when I delete some files, it automatically removed from web page links. Therefore, in such times I need to create XML sitemap again! So list of files is basically for 1. creating XML sitemap and 2. to see which file I edit the latest. Since I put some of the latest edited blog pages in my home page (main.js does that). It means it includes last edit time info too. I created a shell(bash) script file and using this file, I can create XML sitemap easily. Script is very easy, simply add page's own link and some xml tags and before and end of file's path ! No problem every bit knowledge is important.

1. I tried installed them package by package but, could not start Apache2. Since I didn't know there is log, but I could not know etc. so I changed my tactic and uninstall all and install XAMPP. Even after XAMPP apache server did not start since it gave error "port already listening..." due to that another program had already used apache's port etc. I used "ss" command etc. to solve it manually(i gave details in my own blog page). So normal procedure did not work as I expected for me as a beginner, so I used XAMPP which is more compact and solves all of my configurations related problems(except port ) . And using XAMPP in Linux is not a guilt, XAMPP has Linux version . 2. Since English is not my mother/native language, it is my mistake. 3. Thanks for drawing an attention to that point,I am learning so I will be more careful about that point next time. Ok, as you said, file_put_contents error was solved, since I copied everything from server to local htdocs folder of XAMPP but under folder named "enginery", not to its root(htdocs). So as you said my php code did not work locally because of that ! I love red flags . If I prevent access to that file by .htaccess file, can I drop that red flag? I used them as root but changed as you suggested and now everything is easier than before! Thanks requinix from a short course from English to Linux & PHP !

Hi all, I installed XAMMP for Linux 8.2.4 to run my website including php codes test locally first. When I copied everything one-to-one from server to my local htdocs folder of XAMMP, I can run my page and php codes, and css codes. However, not javasript codes. My index.php file includes external javascript file defined as in meta tag : <script type="text/javascript" src="/js/main.js"></script> File is there but developer console said "main.js could not found". Then I looked at the w3schools website(https://www.w3schools.com/tags/att_script_src.asp) and I changed the line as : <script src="./js/main.js"></script> I added "." infront of the path and remove 'type="text/javascript' words. Then error gone, but none of the function worked correctly. New error was : Warning: file_put_contents(/opt/lampp/htdocs/pages/filesList.txt): Failed to open stream: No such file or directory in/opt/lampp/htdocs/enginery/pages/standards/home.html Warning : file_put_contents(/opt/lampp/htdocs/pages/filesList.txt): Failed to open stream: No such file or directory in /opt/lampp/htdocs/enginery/pages/standards/home.html What is happening? Both files are there, is there any problem with write premission? Everything under XAMMP's htdocs are under root's control, is this the problem? Does anybody guide me to solve this error? Thanks.

I must share my experience about "lazy loading" since I experienced one of its disadvantage : when I put two images inside a container and place them using "position:relative"( to put them on each other with some overlap) , then lazy loading cause misbehaviour; they positioned on the same point(complete image eclipse occured ) ( but not always i can see, at least not after the first run). So, it must be used carefully.

Woow, "lazy loading", "eager loading"... there have been different techniques for developers to use. I haven't heard anything about them until AngrySheep's great post! I applied "lazy loading" to some images in my webpage's page that has high and big images. Result is that users will have better experience(ie. faster and smoother) while loading it.

I added pagination to my website and it solves lots of bottlenecks! But I do not know what is "lazy loading", I will look about it and try to apply it. Thanks AngrySheep for comment.

Does anybody know the last MySQL having Windows XP (64bit) support? Thanks.

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!"

I hope admins do not angry with me but I solved my problem with an better alternative as requinix suggeted at the end. Because : 1. although my above code works for desktop sized screens, when I checked my webpage's mobile or tablet visualizations, since top menu squeezed, its height increase so that menu closed too early and user could not see the whole menu ! 2. code for hiding/showing an independent side bar is easy and ready but, implementing it into my php required harder work so that, I just added a few lines of code to add to a "show/hide menu" button on sticky menu and user can close/open it anytime s/he wants. I think it is more "reliable" code.

I always tried to avoid using "function as wrapper" since, as far as I understood that wrapper code is for more specific situations, not general cases. That was my mistake! Very good explanation ! Thanks kicken, I do not know "pass by reference" and advantage/necessity of using function as wrapper.

Yes, I found that, it is due to extra parameters I gave... I do not like javascript's "hidden parameter" feature! In other languages there is no such thing, but in javascript, sometimes even I did not sent any parameter, function can have it! function loadListeners() { btns.forEach((item,index,arr) => { console.log("item type is "+typeof(item)); item.addEventListener('click',toggleBtn,false ); }); } function toggleBtn(item) { // write the parameter to console to see what it is ! console.log(item); // it is an PointerEvent whose type is "click" } I changed my code above, and put a parameter named "item" to the toggleBtn functon definition itself (not sent anything inside addEventListener function). I got item as PointerEvent whose type is "click"! I have lot to learn about javascript's these kind of "strange" features.

Thanks kicken, actually it worked! However, I think, I did not do anything extra what is done in : w3school example by assigning a function to an event. What is the difference btw mine code and the example code? Is it due to parameters which I supplied to my function ?

Hi, I prepared a code : <html> <head> <style> .inn { vertical-align: top; display: inline-block; margin: 7px; text-align: left; padding: 10px; border-radius: 30px; text-shadow: 0 0 black; background-color: #ff5722; border-style: solid none none solid; border-width: 5px; border-top-color: red; border-left-color: #ff1800; box-shadow: 4px 4px #7a5858; background-image: linear-gradient(to top, rgba(0,0,0,0) , rgb(255,255,255,.1) ); } .inn:hover { vertical-align: top; color: #4340ff; display: inline-block; padding: 10px; margin: 7px; text-align: left; border-radius: 30px; background-color: #f97950; border-style: solid none none solid; border-width: 5px; border-top-color: #b10000; border-left-color: #910303; box-shadow: 4px 4px #ffffff; background-image: linear-gradient(to top, rgba(0,0,0,0) , rgb(255,255,255,.1) ); } .inText { color : black; } .inn:hover .inText { position : relative ; top : 2px; } .inTextHover { position : relative ; top : 2px; } </style> </head> <body> <div class="navbar"> <div class="inn"> <div class="inText">button1</div> </div> <div class="inn"> <div class="inText">button2</div> </div> <div class="inn"> <div class="inText">button3</div> </div> </div> <script> var toggleButton ; var toggleOn; var btns ; window.addEventListener("load",load); function load() { console.log("loaded?"); btns = Array.from( document.getElementsByClassName("inText") ); // get all buttons to collection object then to an array sessionStorage.setItem("clickCounter",Number(0)); // add click eventlistener to all buttons > loadListeners(btns) ; } function loadListeners(btns) { btns.forEach((item,index,arr) => { item.addEventListener('click',toggleBtn(item,index,arr),false ); }); } function toggleBtn(item,index,arr) { // change botton's class : if(item.className =="inText" ) { // change inText divs' classes console.log("yes"); sessionStorage.setItem("clickCounter",Number(sessionStorage.clickCounter)+1); if(sessionStorage.clickCounter %2 ==1) { item.className="inTextHover"; console.log("click counter : "+sessionStorage.clickCounter); } } } </script> </body> </html> when I load page, I am sawing that, window.load have already triggered the "click" event of divs. Why? I used "addEventListener" function, not a custom function. What is wrong? Thanks.

Thanks maxxd, I am trying to look for alternative solutions for hiding a top down menu while scrolling down in my web page http://enginery.freecluster.eu Although my current code solves my problem in big screens, for tablets and smartphones my page could not seem correct since height condition to hide menu remains too low. So I wanted to direct to alternative solutions.

Hi again, I am trying to find my page's height which changes when I hide(i.e. changing its height to 0pixel or by using element.style.display: "none") one element inside it. I found solutions in google as : <script> var h1,h2,h3,h4,h5 ; var body = document.body, html = document.documentElement; h1 = body.scrollHeight; h2= body.offsetHeight; h3= html.scrollHeight; h4= html.offsetHeight; h5= html.clientHeight; console.log("bscrH :"+ h1 + ", boffH :"+h2+ ", HtmlscrH:"+h3+", HtmloffH:"+h4+", HtmlcliH:"+h5); </script> However, when I hide some elements inside the page with javascript, none of them changed ! How can I get the instant height of my page after hiding an element ? thanks.

Is there any similarity between promises and async-threads in java(or any other lang)?

I understood the hysteresis, but adjusting the range is not easy; since each device show may page with their own width-height, so I think could not manage it. I solved it by using change in the body element's top position during scrolling of my page. So, my final code like that var mainBody ; ... mainBody = document.getElementById("mainbody"); ... topPos=mainBody.getBoundingClientRect().top; if( topPos >= -10 ) { showSecondNThirdLevelMenus(); } else if(topPos < -10) { hideSecondNThirdLevelMenus(); } Even a 10 pixel scroll down cause menus to collapse. Other than that, showing menus. Difference from the first code? Main difference is that: fistly I referenced the sticky element itself which is also moving when scrolling down-up. However , second solution I select the fixed (i.e. anchored to the scrolling page) element. Then hide/show does not effect the fixed element's position. So I will chose fixed elements as a reference for style changes next time ! Thanks for guiding. :D

Thanks requinix. I think yes, I understood the problem. I wanted to do that : when user pressed blog page and show second level or/and third level menus and when they are showing on the sticky "MenuContainer" div, simply hide them. Reason is that the menu height is so big so that it hides the page content mostly. Condition of hide : I used checking condition as sticky container's top position; when it goes up(i.e. user scroll down), less than 69 pixels from the top, hide both sub-menus. I tried condition as "less than 1 pixel" but it was the worst !

I tried to hide some "div" elements inside another sticky "div" element by changing their display property to "none" when scroll the page down. But, sometimes the result is like that: 1. when scroll the page down, elements inside the sticky container removed successfully 2. when elements removed, its container's top position in the page changed( I do not understand why) 3. then according to my condition(which depends on the main sticky container's top position) it again start to show elements 4. then when elements I hide shown, again the container's top position changes and that repeats infinitely ! Stucked at that point. How can I overcome this ? Example is in online at my web page. 1. enter into http://enginery.freecluster.eu 2. change the browser windows width to lesser so that that top-down scroll appears at the right, 3. press "blog" menu button. 4. at some width positions, page instantly starts shaking( i.e. try to use my hide and show elements javascipts at the same time) when scroll down, sometimes it does not The code I used is that to hide elements in sticky sub-menu container is : <html > <head> ...</head> <body onscroll="showHideSubMenus()"> ... <div id="MenuContainer" style="position:sticky; top : 0px"> <div id="secondLevelMenu" > .... </div> <div id="thirdLevelMenu" > .... </div> ... </div> ... <script> var secondLvlMenu, thirdLvlMenu; var topPos ; var container ; window.onload = function() { secondLvlMenu = document.getElementById("secondLevelMenu"); thirdLvlMenu = document.getElementById("thirdLevelMenu"); container = document.getElementById("MenuContainer"); // container div }; function showHideSubMenus() { secondLvlMenu = document.getElementById("secondLevelMenu"); thirdLvlMenu = document.getElementById("thirdLevelMenu"); if(container) { topPos=container.getBoundingClientRect().top; if( topPos < 50 ) { hideSecondNThirdLevelMenus(); return; } else { showSecondNThirdLevelMenus(); return; } } } function hideSecondNThirdLevelMenus() { console.log("hide menus"); hearderElement.style.maxHeight = "69"; if(secondLvlMenu ) { //DEBUG I used that but gave same result : secondLvlMenu.style.display="none"; secondLvlMenu.style.visibility= "hidden"; secondLvlMenu.style.maxHeight= "0"; } if(thirdLvlMenu) { //DEBUG I used that but gave same result : thirdLvlMenu.style.display="none"; thirdLvlMenu.style.visibility= "hidden"; thirdLvlMenu.style.maxHeight = "0"; } } function showSecondNThirdLevelMenus() { console.log("show menus"); if(secondLvlMenu ) { // secondLvlMenu.style.display="block"; secondLvlMenu.style.visibility= "visible"; secondLvlMenu.style.maxHeight= "initial"; } if(thirdLvlMenu) { //thirdLvlMenu.style.display="block"; thirdLvlMenu.style.visibility= "visible"; thirdLvlMenu.style.maxHeight = "initial"; } } </script> ... </body> ... </html> Does anybody have any idea about what is the permanent/bug free solution ? Thanks.

Thanks Barand, it worked too. But since I am learning javascript too, if you do not mind, can you explain a little bit about the "$" sign in javascript? What is the function of it?

Thanks requinix for answer. Actually I was learning svg coding and I used https://editsvgcode.com/ page to try my code and did not work. I tried it in my own browserr, both worked... So I think the problem is due to online svg editor.

I am trying to reach the div element having inside-svg classname inside an svg element (I put it as foreignObject) but no success. My sample code is like : <style> .sv { stroke:#aa1111; border-radius:20px; border-width:2px; border-color:#ccc; box-shadow:2px 2px darkgray; background-blend-mode: normal; } .sv:hover { background-color: #ccffcc; fill:black; width : border-width:2px; border-color:red; background-blend-mode: difference; /*filter: blur(0.5px) grayscale(2%);*/ } .sv:hover:has(.inside-svg) { background-color:red; color:black; } </style> <svg class="sv" width="200" height="400" xmlns="http://www.w3.org/2000/svg" > <circle x="0" y="0" cx="120" cy="-20" r="150" style="fill:darkgreen;fill-opacity:0.8;stroke:darkgreen;stroke-width:0" /> <text x="50" y="160" font-size="20px" font-family="monospace" font-style="italic" > TRIAL <tspan x="10" y="185">BANNER</tspan> </text> <circle x="20" y="200" cx="10" cy="480" r="250" style="fill:darkgreen;fill-opacity:0.8;stroke:darkgreen;stroke-width:0" /> <circle x="60" y="230" cx="40" cy="460" r="250" style="fill:blue;fill-opacity:.3;stroke:blue;stroke-width:0" /> <foreignObject x="10" y="290" width="100%" height="100%"> <!-- In the context of SVG embedded in an HTML document, the XHTML namespace could be omitted, but it is mandatory in the context of an SVG document --> <div class="inside-svg" style="width:92%;word-break:break;color:white"> having a div inside the svg might be the only way to do this correctly, time permitting </div> </foreignObject> </svg> How can I reach div inside svg and change its foreground color to black? Thanks.