Jump to content

dsonesuk

Members
  • Content count

    9,769
  • Joined

  • Last visited

  • Days Won

    27

Everything posted by dsonesuk

  1. dsonesuk

    Inconsistent results when using the color: property

    Don't forget to allow for device 'warm glow' (yellow tint) and 'cool glow' (blue tint) setting for device display. :-)
  2. dsonesuk

    background color

    <body> <div> </div> </body>
  3. dsonesuk

    background color

    That won't work on the body the background-color applied to body will always fill the whole browser window. you need to use a container block element within the body.
  4. dsonesuk

    background color

    height: 60vh; width: 60vw; margin: 20vh 20vw;
  5. dsonesuk

    Help with SLIDESHOW - W3CSS

    It works https://www.w3schools.com/code/tryit.asp?filename=FVC4MG2Z44GK it changes every 2 seconds, from 'feedback' to 'contact us', then back (note i removed last 'feedback' html). That's what that does! IF you are expecting something different? tell us what you expected. If you wish them to stay visible a bit longer change 2000 (every 1000 = 1sec) to a higher value.
  6. dsonesuk

    Help with SLIDESHOW - W3CSS

    In effect you are running setTimeout() twice! these are conflicting, first timer shows feedback 2sec, then next timer does the same over-riding the first so it may last on some occasions up to 4sec instead of 2sec. You don't require body onload, from what have seen it works perfectly fine without it. You have two 'feedback' text, compared to single 'contact us', as it reaches last 'feedback' and loops back to first 'feedback' you have 2 + 2 secs of 'feedback' compared to 2sec each time for 'contact us'
  7. dsonesuk

    "var" keyword not used with =+ operator?

    A 'var' defines a identifier as a variable var x=10; //define variable and its value var x = x + 5; //redefine variable but new 'x' value will now be the previous defined value plus 5 additional var definition of the the same identifier means that x default value will now be the current value calculated, overriding the previous. It can be seen using var y=0 var x = 10; var y = x+5; document.getElementById("demo_x").innerHTML = x; document.getElementById("demo_y").innerHTML = y; swap 'y' to 'x' in third line. As 'y,' its default value is from now on, will be 15 (as below if 'x') , while 'x' will remain as 10. As 'x' its default value is from now on, will be 15, while 'y' will remain as 0. var x+=5; Its not doing nothing, its produces a syntax error, and the script will fail from that point as its not valid, hit f12 on keyboard to view console to see this error.
  8. dsonesuk

    Dropdown menu not working with sticky navbar

    That's not removing! that's a possible breaking the css and likely to affect css following it! Remove it completely, comment it out completely never leave it half done. The container envelopes all the menus to give them a background colour, by restricting the height, it no longer adjusts in height envelope anymore, the menu items and text are there, they just have contrasting background to show them anymore.
  9. dsonesuk

    Dropdown menu not working with sticky navbar

    Remove overflow: hidden; as you have done and add .topnav::after { clear: both; content: ""; display: block; } A block element container, with floated child elements such as the anchors and div's is not able to detect the area they occupy so the height becomes 0, overflow: hidden is used to fixed this, that becomes a problem when used with a menu, BUT! using content:""; this will add a sort of textual block element which has clear: both, 0 height running below the menu elements that the container CAN detect, so it envelopes the menu again as it did with overflow: hidden.
  10. dsonesuk

    getting data once only

    The client only runs on a event, with button it would be .onclick, a form .onsubmit, with none of these you are left with event .onload which it usually attached to window. that only runs when the document has fully rendered. https://www.w3schools.com/jsref/event_onload.asp
  11. dsonesuk

    Dropdown menu not working with sticky navbar

    Ahh that's because one function removes all classes with 'topnav' remaining, removing the 'sticky' class. Also you require to override the '.topnav.responsive' class style of position relative, if 'sticky' class present, to remain position: fixed; try <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>stickydropdown.html</title> <style> body { margin:0; font-family:Arial } .header{ width: 100%; height: 125px; background-color: #999; } .body-content{ width: 100%; min-height: 1025px; background-color: #fff; } .footer{ width: 100%; height: 175px; background-color: #000; } .topnav { background-color: #333; overflow: hidden; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .active { background-color: ; color: white; } .topnav .icon { display: none; } .dropdown { float: left; overflow: ; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: #333; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: #555; color: white; } .dropdown-content a:hover { background-color: #ddd; color: black; } .dropdown:hover .dropdown-content { display: block; } /* Page content */ .content { padding: 16px; } /* The sticky class is added to the navbar with JS when it reaches its scroll position */ .sticky,.topnav.responsive.sticky { position: fixed; top: 0; width: 100%; } /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */ .sticky + .content { padding-top: 60px; } @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } } </style> </head> <body> <div class="header"></div> <div class="topnav" id="myTopnav"> <a href="stickydropdown.html" class="active">Home</a> <div class="dropdown"> <button class="dropbtn">Products <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="plinkone.html">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Services <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="slinkone.html">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a href="a.html">About</a> <a href="news.html">News</a> <a href="c.html">Contact</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> </div> <div class="body-content"> <div style="padding-left:16px"> <h2>Home</h2> <p>Resize the browser window to see how it works.</p> <p>Hover over the dropdown button to open the dropdown menu.</p> </div> </div> <div class="footer"></div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (!x.classList.contains("responsive")) { x.classList.add("responsive"); } else { x.classList.remove("responsive"); } } </script> <script> // When the user scrolls the page, execute myFunction window.onscroll = function() {myFunctionSticky()}; // Get the topnav var topnav = document.getElementById("myTopnav"); // Get the offset position of the navbar var sticky = topnav.offsetTop; // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position function myFunctionSticky() { if (window.pageYOffset >= sticky) { topnav.classList.add("sticky") } else { topnav.classList.remove("sticky"); } } </script> </body> </html>
  12. dsonesuk

    Dropdown menu not working with sticky navbar

    You can't have two identical function names, it will only act on one, change sticky function name call on window scroll event and make sure the sticky function name matches. window.onscroll = function() {myFunctionSticky()}; function myFunctionSticky() { if (window.pageYOffset >= sticky) { topnav.classList.add("sticky") } else { topnav.classList.remove("sticky"); } }
  13. I've just notice, when I gradually reduce the width of my browser before it reached a media queries breakpoint, scroll bars appear? that is not supposed to happen. It should smoothly move from one to the other with no scrollbars appearing, that usually means you have fixed width content, or containers which will remain greater than the next Media Query break point. It should on whatever width adjust accordingly to a responsive layout before that break point is reached, then it does not matter what specific device width it is.
  14. Yes! you have it twice in media queries 1 floats left the other right, these need to cancelled when it becomes single column.
  15. dsonesuk

    Help importXML google sheets

    Just found YouTube video, they don't start the index of a item from 0 as in JavaScript but 1 unless the vid was wrong! anyway! start from single table then transverse table from to just single td item.
  16. dsonesuk

    Help importXML google sheets

    I should start with something simple and try to access first table //table[0] , see if it works and list all first table content, then move on to the parent tr element of td you wish to target, that should list all td elements within the tr, then list the single td you want.
  17. dsonesuk

    Help importXML google sheets

    The index always start at 0, td[2] will target the 3rd (0, 1, 2 index ref = 1st, 2nd, 3rd elements ) you want td[1] The td index also restart with 0, when you move to another parent tr element, same with tr index when moving to a another table element
  18. That is what using float on middle section will do, it will shrink to total width of the contact content, and the flex can only work to available width of its parent container element the middle section element.
  19. dsonesuk

    submit with xhttp

    1) IF that is a php file that shouldn't happen? if it is php, it might be a php caching problem, try clearing ALL history, session everything before running each. 2) just for a test, create an empty directory without anything in it, and point the url to that! What we are trying to do is send formdate() values that won't be picked up any present pages, this is what i seen from internet and here for standard form, unless all these directories have index file by default, or index file is created on recurving formdata()
  20. dsonesuk

    submit with xhttp

    You are getting exactly what happens when you use xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); you get this '-----------------------------1168277922115 Content-Disposition:_form-data;_name' => string '"jq" 1 -----------------------------1168277922115 Content-Disposition: form-data; name="jjq" 2 -----------------------------1168277922115 Content-Disposition: form-data; name="jqq" 3 -----------------------------1168277922115 Content-Disposition: form-data; name="ojq" 4 -----------------------------1168277922115-- without, you get just this 'jq' => string '1' (length=1) 'jjq' => string '2' (length=1) 'jqq' => string '3' (length=1) 'ojq' => string '4' (length=1) Which is right! for your requirements?
  21. dsonesuk

    submit with xhttp

    IF you do not have a page with page document title 'Idex' and page title 'Mass flow' then it is creating one through the board with back button, and we can't do nothing about that! Its creating the html page and dumping what is coming from form data within it! else where could this document be coming from?
  22. dsonesuk

    submit with xhttp

    I'm confused here? IS this this to do with synergy board? IT seems awfully similar, and seeing rizwansyed comment make me wonder if s_avinash_s and rizwansyed are the same?
  23. dsonesuk

    submit with xhttp

    Well i don't know? everything done with AJAX coding would work in normal circumstance, so the problem lies with the board, unless you can identify how THE BOARD can read the ajax request and prevent loading the "other page", it will be difficult to come up with a viable solution. With e.preventDefault(), it shouldn't go to the "other page", the form input names and values are sent through formdata NOT the form itself, sending to txt file does nothing!
  24. dsonesuk

    Help importXML google sheets

    Perhaps you need to be more specific as there are multiple tables, tr, and td For instance first table, first row "//table[0]/tr[0]", what you are targeting is a list of tr, not a specific tr. Note: I don't know if above is the correct format to do it! that is similar to how you would target specific multiple elements in JavaScript.
  25. dsonesuk

    submit with xhttp

    You don't require xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); unless your board specifically requires it! IF used with php, the code can't read $_POST values. without it it worked fine to retrieve the values and show them. it may work with the board but not for php example below HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0"> <title>Document Title</title> </head> <body> <div id="MassFlowRate" class="tabcontent2"> <br><br> <form action="/massflow.txt" id="myForm" method="post" autocomplete="off" onsubmit="massflow(event)"> <div> <label for="MassFlowDamping">Mass Flow Damping</label> <input type="text" id="MassFlowDamping" name="jq" value="1"> </div> <div> <label for="MassFlowCutoff">Mass Flow Cutoff</label> <input type="text" id="useracc" name="jjq" value="2"> </div> <div> <label for="MassLinenumber">Mass Line number</label> <input type="text" id="MassLinenumber" name="jqq" value="3"> </div> <div> <label for="MassDecimalPlaces">Mass Decimal Places</label> <input type="text" id="MassDecimalPlaces" name="ojq" value="4"> </div> <input type="submit" value="Submit!"> </form> <div id="result">No Results to show</div> </div> <script> function massflow(e) { e.preventDefault(); var myForm = document.getElementById('myForm'); formData = new FormData(myForm); var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById('result').innerHTML = this.responseText; } }; xhttp.open("POST", "massflow.php", true); //xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send(formData); } </script> </body> </html> PHP - massflow.php <?php echo $_POST["jq"] . " aaa<br>"; echo $_POST["jjq"] . " bbb<br>"; echo $_POST["jqq"] . " ccc<br>"; echo $_POST["ojq"] . " ddd<br>"; var_dump($_POST); IF you use massflow.txt as the URL and send this.responseText to the form using document.getElementById('myForm').innerHTML = this.responseText; IT will replace All inputs, ALL content within form with that of the text file. Then replace with a url without a index file, i remember you had a url of '/languages' that worked for a standard form, try something similar.
×