Jump to content

iwato

Members
  • Posts

    1,506
  • Joined

  • Last visited

  • Days Won

    4

Everything posted by iwato

  1. I will need some more time for your last observation, as I cannot replicate what you have described. All of my browsers are very old, and my operating system is obsolete. Also, I am very tired. it has been a long day. Something to investigate again tomorrow! In any case, thank you! Roddy
  2. Dsonesuk: You are the Wizard of CSS. By setting float to none my Contact/Info page now fills the entire width of the #middle section. Thank you! Roddy
  3. Thanks, funce! Unfortunately, I did not receive your entry until just now. In a way I am glad, else I would likely not have fixed other problems associated with the panel. I just spent the entire day reformatting the entire page. The use of flex-box has resolved the problem nicely. Roddy
  4. Is there anything short of forcing a page reload that can resolve this issue? Roddy
  5. So, if I change the value of the float property for the #middle section to none for smaller viewports, the problem will go away. Is this what you are suggesting? Roddy
  6. BACKGROUND: I have a flexbox (#contact_div) that creates a column of rows (.content_item). Each row represents another flexbox that is divided into two columns (.contact_info and .contact_data). Now, each row of columns is neatly spaced across the entire width of the parent #contact_div when in full-screen browser mode. As the width of the viewport is made smaller, however, spacing problems begin to arise. in smaller viewports the width of each row is no larger than that of the widest content contained in each of the two columns. I would like the columns to fill the entire width of the original box (contact_div). I have experimented with the flex statement, but to know avail. #contact_div { display: -webkit-flex; display: flex; flex-direction: column; justify-content: start; } .contact_item { display: -webkit-flex; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; } .contact_info { padding: 0 1em; font-variant: small-caps; font-weight: bold; text-align:right; color: #4E7F4E; } .contact_data { padding: 0 1em; } You can find a visual display of the problem by clicking on the option Info in the Contact menu in the navigation bar of the Grammar Captive mainpage. After the panel has been inserted narrow your viewport and observe how the problem appears and then disappears as you narrow your viewport ever further. This problem does not appear to be smartphone related. CSS strikes again! QUESTION: Any ideas? Roddy
  7. BACKGROUND: There appears to be no end to my iPhone alignment woes. I can only hope that these same problems are not occurring on other devices. The DILEMMA: In the navigation bar of the Grammar Captive mainpage find the menu option GC Tutor under the heading Products and click on the option. At the outset the alignment should be well-behaved both in your computer and iPhone viewports. Now scroll down to the section entitled What? in the GC Tutor panel and click on the And much more ... toggle switch at the bottom of the section. Proper alignment is lost and cannot be regained until one clicks again in the navigation bar. Unfortunately, all of the old tricks and some newly imposed modifications fail. Any ideas? Roddy
  8. Unfortunately, the MacOS 10.7.5 of my computer browser does not accommodate the IOS 10.3.3 of my iPhone. Perhaps further research on the internet will reveal something. Roddy
  9. BACKGROUND: What seemed to work everywhere before, still works in one environment, but not in another. Although I suspect the problem lies in the following deprecation warning, there is no direct reference to the problematic webpage, and I have no investigative tools to research the problem in the environment in which the problem appears. The WARNING: DILEMMA: One has only to compare the way time appears in my webpage's Time Schedule in MacOS 10.7.5 and IOS 10.3.3. In the former, AM and PM are clearly displayed; in the latter, both appear as undefined. QUESTION One: What do you believe to be the likely source of the problem, and how would you go about fixing it. QUESTION Two: What webtools are available to me and other iPhone users? PROBLEM SOURCE: Grammar Captive mainpage. See Time Schedule under the menu heading Availability in the page's navigation bar. Roddy
  10. The following works, but not universally as stated. Actually both are required. #yp_container #current_referral_url { display: inline-block; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; } .ellipses { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } Roddy
  11. iwato

    set avatar

    I am confused did you receive an error message or not? Roddy
  12. Unfortunately, neither #yp_container #current_referral_url { overflow-wrap: break-word; word-wrap: break-word; } nor #yp_container #current_referral_url { width: 100%; overflow-wrap: break-word; word-wrap: break-word; } nor #yp_container #current_referral_url { display: inline-block; overflow-wrap: break-word; word-wrap: break-word; } work in the iPhone viewport. The URL holds steadfast and unbroken, and the section's width extends beyond the left margin. In contrast, in a normal computer browser environment, the URL breaks just as it should, and the containing div fills the viewport with all of its margins, borders, and padding in tact. Any further ideas would be appreciated. Roddy
  13. When I go to the Chart.js installation page I am provided with sever alternatives for installation: 1) npm - I have largely failed in this regard. After more than two weeks, I still have not gotten it to work. 2) Bower - A deprecated package manager. 3) CDN - Probably the easiest solution, but it exposes me to updates that I may or may not want and potential third party interference. 4) jsDelivr - What appears to be still another foreign package manager with which I have zero experience. 5) GitHub - A place that is usually quite reliable, but that would require that i build the application from the downloaded library. Once again, something that I have never done before -- well, at least not manually. On top of this Chart.js recommends not to use this alternative. Among the above alternatives what would you recommend and why? Roddy
  14. Based upon the following you would then conclude that Chart, Chart(), and peanutButter are all being treated the same -- namely, non-existent. Chart ReferenceError: Chart is not defined Chart() ReferenceError: Chart is not defined peanutButter ReferenceError: peanutButter is not defined myChart <canvas id="myChart"> This, however, need only prove one of two things, need it not? One, I have installed Chart.js properly, but I do not know how to access it. Two, I have not installed Chart.js properly, and under no circumstance am I able to access what has not been properly installed. Because all of the following commands appear to work, I believe that at least part of the installation has succeeded. node -v npm -v which node which npm My problem is that I am working with cPanel in a completely foreign operational environment -- namely, Centos 7.5 -- with near zero effective support from my host server support team. After two weeks I have watched my server crash three times. On this last time, my server was down for more than 12 hours. I am seriously considering finding a new host, but dread the thought of having to start all over again. Do you know anything about working with cPanel in a Centos 7.5 environment? Roddy
  15. It turns out that the poorly behaved iPhone keyboard is not the only source of misbehavior. A similar phenomenon occurs with the use of <select> elements. When the visitor goes to select a menu option, the iPhone fills the viewport with a selection panel native to the iPhone. After the selection has been made and the select panel has been closed, however, it is left up to the visitor to readjust the width of his viewing screen so that it fits properly into the viewport. I thought Apple was smart. Alas, it turns out to be lazy. Please advise. Roddy
  16. Did you notice the semi-colon in the middle of the following line of code? $headers .= "Content-type:text/html; charset=UTF-8\r\n"; Roddy
  17. Typing XMLHttpRequest produces the same result as typing myChart nothing appears but what I have typed. Roddy
  18. When I type Chart in the Web Console it returns the following: Chart --->: clear When I type in myChart or Chart() it returns essentially nothing myChart and Chart() What does any of this tell you? Roddy
  19. BACKGROUND: In an effort to obtain good responsive design I feel compelled to leave out certain elements that are unresponsive. I am loathe to do this. I have identified the element that is causing the distortion. The element retrieves and displays the referring URL. Unfortunately, in its effort to render the URL fully, the element causes the div to extend beyond the boundaries of the viewport and distorts the page. Now, I have tried to overcome this problem in the following manner, but it fails. #yp_container #current_referral_url { max-width: 100%; overflow-wrap: break-word; } Is there a better way to break up the URL so that it fits? Roddy
  20. ALERT: This question can be answered by both new and old users who do not like pop-ups, because it is an iPhone -- an environment in which the now infamous/famous Grammar Captive splash panel is forever suppressed. BACKGROUND: After many excruciating hours the responsive design of Grammar Captive is nearly complete. One of the several known outstanding problems that remains occurs when one uses Grammar Captive's custom search engines with an iPhone. In order to enter one's search word or phrase the iPhone keyboard appears. It works like a bad wine that starts with an attractive bouquet and flavor, but ends with a strong, even foul, after taste. An alternative analogy is a misbehaved (innocent or malevolent) child that leaves his parents or older siblings to clean up after his after he has played. In effect, the keyboard takes up the entire width of the viewport, but does not return the webpage that hosts the form input control that evokes it. Although I was able to find a possible solution on StackOverflow it has proven difficult to implement. PROPOSED SOLUTION: Add an id attribute to the page's meta tag that hosts the viewport control and reference that tag when the search is submitted. Before Search: <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1"> After Search: $('#viewport').attr('content', 'width=device-width, initial-scale=0.5'); I believe the reason that this works for others, but not for me is that Javascript cannot find #viewport. This is because of the sequencing of the Javascript that produces the dynamically loaded center panel. In brief, overview.js is loaded with overview.html (the Grammar Captive mainpage) search_letter.js is loaded by overview.js after the search panel has loaded, but before a search is made. If the After Search modification is to be implement, then it must be implemented after the search has been completed. QUESTION ONE: Am I likely correct in my assessment? QUESTION TWO: If so, how might I resolve the problem? Roddy
  21. So, the conclusion is that the constructor Chart must be defined elsewhere, else the expression new would produce nothing or even an error. Is this correct? In other words, my installation of Chart.js has succeeded. Simply, I do not yet know how to use it. It is much easier for a native English speaker to learn French, then it is to learn, say Japanese. Yes confusion often arises between English and French, because they are so close, but to not damn the good, when the bad is small in comparison. Roddy
  22. Hello Funce! Chart.js is installed at the root level as an npm package.json. As far as I know, the scope could not be any greater. When I refresh the page the console refreshes automatically. There are no class definitions. This is Javascript -- not PHP. QUESTION: Is this telling me that the require statement is unnecessary, or is it telling me that no matter how you use the new expression it will always produce an object? Roddy
  23. BACKGROUND: I recently installed chart.js using npm but had much trouble in do doing and would like now to verify that it is working properly. Accordingly, I ran the following two pieces of code followed by console.log(typeof myChart) in my browser's console. var Chart = require('chart.js'); var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, {}); and var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, {}); only to discover that the results were the same -- namely, object QUESTION: Is this telling me that the require statement is unnecessary, or is it telling me that no matter how you use the new expression it will always produce an object? OBSERVATION: Indeed, when I enter the chart.js sample code, the <canvas> item does not fill with the intended chart. Please advise. Roddy
  24. Dsonesuk. It is only forced, if you insist on being a new visitor each and every time that you return. Grammar Captive rewards fidelity. It is the first thing you read on the mainpage after you have been introduced to the site's host and the content of the site. Truly, it is too bad. I used to enjoy your help, for you are by far the W3Schools leading expert on CSS. Roddy
  25. It took nearly a day's work, but I believe that the task is complete -- not for all pages mind you, but at least now I know what needs to be done for the rest. Please check wherever you can, and earn yourself a trophy! It is too bad about Dsonesuk. He used to be so helpful. The key pages to toggle in any and all orderings are: Introduction / About Visitor Profile / Event Profiles Introduction / Disclaimer and Invitation Introduction / Free Consultation Roddy
×
×
  • Create New...