Somehow, in my website, the last word appearing in a contenteditable is marked as misspelled, even when it is the correct spelling.
Here is an example of such an entry with the last word clearly marked as misspelled:
Just in case there is the HTML code surrounding that contenteditable <div> tag.
Note: as mentioned by Carl below, that screenshot shows the HTML as loaded and not the HTML as used once jQuery ran against it. I have a simplified sample below that includes that data. Also it shows a ! at the end of the string, which makes it work right... (Any other character after the word, and the spelling works fine.)
I tried to replicate that problem in jsfiddle without luck, so I create a simplified version of the page with just that one widget:
http://alexis.m2osw.com/contenteditable/ContentEditableProblemSimplified.html
IMPORTANT NOTE: On first load, it works properly because Firefox does not check the spelling of words at that time. You have to click in that field once and the effect happens.
This happens in FireFox v53.0, it has been like that for a while though.
Related
When I try to use Google Chrome's spell checker to correct the spelling of words in a text field or text area, Chrome crashes and displays the “Aw, Snap!” error message. This issue is only present on Chrome.
This is the sample code for reproducing the issue.
As soon as I right click on the red underlined word, Chrome crashes and it displays the error page. If there are multiple misspelled words in text field, only the last word causing an issue. I don’t have any issue with using spell checker for other words expect the last one, “mssage” in this case. I also don’t have any issue when there is another correctly spelled word after the misspelled word. In this case, it doesn’t crash.
In general, what I observed is that if the misspelled word is the last word in the text field, then the crash occurs; otherwise, it works as expected. I have checked all log files including Chrome local logs, but there is no log message related to this issue, and I am not able to debug it. I found a few partial solutions, but still couldn’t understand the root cause of this issue.
Partial solution-1: If we remove the text from the Button, the issue is resolved. As you can see, the button doesn’t have any text written on it, and in this case, it works as expected.
Partial solution-2: If we swap the order of the Button and Text Field, the issue is resolved. When I add components to the layout, the order makes a difference. When the button is added before the text field, the issue isn't there.
Partial solution-3: This is the solution I am currently using since the first 2 solutions require me to change my layout. If I add the suffix (sample code included) to the text field, the issue is resolved; however, the suffix has to have text in it, otherwise it doesn’t solve the issue. I added Label with “.” and set opacity to “0” to make it invisible on the user end.
Thank you so much.
I was able to reproduce your issue in Chrome Version 91.0.4472.114 in macOS and it works after upgrading to Version 92.0.4515.107.
It was already reported in bugs.chromium.org and it's fixed in latest Chrome.
I am getting random quotes in my HTML (see image below), and I can't for the life of me figure out how to get rid of them. I have traced it right back to my model and there are now quotes there. I have also compressed all my code and there are still quotes.
Any one had this bug???
Here's my PHP code
<ul><?php foreach ($account_media as $value) : ?><li class="span2"></li><?php endforeach; ?></ul>
I am using CodeIgniter
UPDATE: ok this is from a while ago but thought i would update you all with my solution. DO NOT COPY AND PASTE FROM JSFIDDLE really hard to debug (paste code into text editor save as plain text and then delete the old code and replace with plain text version)
Why are you using Inspect Element instead of View Source? What does View Source show?
Quotes might appear as an indication for empty in element inspection. Or in your case, it might show that <li> tags are non-blocks and are separated.
And please, people, read/write it right, I'm so sick of seeing ignitOrs. It's CodeIgnit E r. And I don't point it out just because I'm some correct terminology freak, but because it makes your questions be parsed incorrectly by search engines.
The space between <li> elements is a css issue, refer to this article: Remove Spacing between li
Chrome does this normally. It is nothing to be worried about.
View the source in the future for an absolute rendering of your HTML instead of inspecting the elements.
See screenshot below.
Is there a way to bookmark or link to an HTML page (which I am not author of) without having an anchor in the HTML code?
I want the page to get scrolled down to a particular section when accessed from a bookmark or hyperlink even if there is no anchor tag in the destination page.
Note: the destination page has an anchor tag as "foo" then bookmarking like http:/...hello.html#foo will not only take the user to hello.html, but also automatically scroll down to the section of the page so that the anchor tag "foo" is at the top of the screen.
It's the year 2020, there is a draft by WICG for Text Fragments, and now you can link to text on a page as if you were searching for it by adding the following to the hash
#:~:text=<Text To Link to>
Working example on Chrome Version 81.0.4044.138:
Click on this link Should take you to another answer page and highlight the link there
You only need to have the appropriate id attribute on an element to use it like a bookmark...
Test
...
<p id="test">Hello world</p>
See the W3C specification: Anchors with the id attribute
Older specifications also allowed navigation based on the name attribute, but this attribute has been removed from the latest HTML specifications (but if there is a name attribute it may be used in the same way as an id attribute).
If there is no id or name attribute where you wish to navigate to, there is no way of navigating to the specific point within the page, only to the page itself. In this case you may want to quote the pertinent information and supply a citation with a link or perhaps ask the author if they would add an id.
This is a copy of #AbderrahmaneTAHRIJOUTI's answer but updated with some extra info.
It's the year 2020, and now there is a draft by WICG for Text Fragments, and now you can link to text on a page as if you were searching for it by adding the percent-encoded quote to the URL like this:
#:~:text=<percent-encoded-text-quoted-from-site>
For example, this link highlights the syntax from the spec.
One can also highlight multiple sections as well by chaining query parameters with ampersand (&):
#:~:text=<quote-1>&text=<quote-2>
For example, see these highlights to the spec.
Even ranges can be set in case of a longer quote (at least in Chrome):
#:~:text=<begin-text>,<end-text>
For example, highlighting an entire paragraph in the spec.
For some reason, in Chrome 89.0.4389.90 the above links may only work if one (1) clicks on them, (2) goes to the address bar by clicking in it or by F6, and (3) hits Enter. Not sure why this is when Google search constantly offers links like this in the results which work out of the box (e.g., a link to Azure Vault)
Support
It's still spotty, but most major browsers support it (except for Firefox...). To check the current status of adoption, check out https://caniuse.com/?search=%3A~%3A
There is a relatively recent W3C Working Group Note on Selectors and States which would allow linking to selected text.
Here is a Firefox webextension partially implementing the link format (allowing you to "create" a link, based on the selection, as well as, obviously, open such a link, highlighting the correct selection):
https://addons.mozilla.org/en-US/firefox/addon/precise-links/
As of 2019 it seems to work fine.
Its source code is available here.
The Firefox extension "Web Marker" does exactly what you want.
https://addons.mozilla.org/en-US/firefox/addon/web-marker/
You can find its source code and documentation here:
http://liveurls.mozdev.org/tech.html
If the page supports being embedded as an iframe, you can link to a document that embedds it and then autoscrolls the document. The issue is that we can't get the height of the page, so instead we just hijack the scrolling event to make the page taller once we approach the bottom:
data:text/html,<html><body style="margin:0; padding:0;"><iframe id='i' src='http://forecast.weather.gov/MapClick.php?CityName=Las+Vegas&state=NV&site=VEF&textField1=36.175&textField2=-115.136&e=0' width=100% frameborder=0 margin=0 scrolling=no style="height: calc(100vh + 170px + 200px);"></iframe></body><script>window.scrollTo(0, 170);window.onscroll = function(e) {if((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 200) {document.getElementById('i').style.height = window.innerHeight + window.scrollY + 200;}};</script></html>
Modern browsers will try to scroll to an element with an ID that matches the hash part of the URL (i.e. if you have <h1 id="foo">, then #foo would get you there).
If everything else fails, you can use jQuery. Get the hash part from the document URL with window.location.hash. You can then interpret that in JavaScript to determine an element in the page.
Use scrollTop to move there (see Scroll to an element with jQuery).
See also: https://api.jquery.com/scrolltop/
I must be not getting something, but sadly your solution is not working for me... The attached document's jargon confuses me a bit as the dilettant I am. :-(
Though, it gave a nice clue... Hence, I found this link with a simpler way to do this (in my case, link to a specific part of a text in some other author's blog post without ID tags):
Share or link to quotes and text in Chrome
https://support.google.com/chrome/answer/10256233?hl=en-GB&co=GENIE.Platform%3DDesktop
To create a link that opens directly to highlighted text:
On your computer, open Chrome.
Go to a page with text that you want to share.
To highlight the text that you want to share, click and hold, then drag your mouse.
To open the context menu, right-click on the highlighted text.
Select Copy link to highlight.
If you can’t select this option, this feature may not work for the selected content.
Paste the link anywhere; for example, into an email or message thread.
Tip: To remove the highlight from the text in the linked content, right-click the highlighted text and select Remove highlight.
If you want to link to a specific part of a PDF file online, this solution also worked for me:
https://helpx.adobe.com/acrobat/kb/link-html-pdf-page-acrobat.html#:~:text=Open%20a%20PDF%20file%20to,end%20of%20the%20link's%20URL.
Just posting this in case someone is still lost as I was.
Cheers!
The AnchorMe addon from Firefox just solved this for me. Ctrl + double click on your desired destination and voilà.
I have a problem with a project that I have been working on for a while now. When I open an entry, the inputs all have data in them. However when I go to actually print the entry (using the print-mode, CTRL+P), I notice that the select, and textarea fields are missing the selected or input text on paper. What's going on here? I have googled for hours and can't come up with anything relevant... help! Thanks!
Link to Project (Click "Demo" to create a session - required)
Link to Entry (Click this after you click the 1st link)
Update : Before now I have just been using Google Chrome to test printing. However, when I tried FireFox, it printed alright, is there anything special I need to do to get Chrome to work??...
RESOLUTION : I am using jQuery and I found that by removing the ui-corner-all class from the inputs before printing, I could then print. Thanks anyways!
If you're using Internet Explorer, then this discussion thread may help you (summary: IE can get confused when printing malformed docs). Check your doctype tag matches your output (the w3c markup validator is very useful)
Edit - I see you're using chrome, but I suggest you still check your page is well formed :)
RESOLUTION: I'm using jQuery and I found that by removing the ui-corner-all class from the inputs before printing, I could then print. Thanks anyways!
This is something of a follow-up question to my question here. You can find the HTML source in a text file here.
When I load that page in IE8, I get the "Done, but with errors on page." message in my status bar. The detail view shows
Expected identifier
sms Line: 147
Code: 0 Char: 67
and I see absolutely no problems anywhere near there. In IE8, the page is still behaving erratically w/r/t the randomly losing focus as mentioned in my other question.
When I load the same exact page in Firefox (using Firebug) the console shows no errors and the page works perfectly. Any thoughts on what's going on here? This is driving me nuts and making me want to give up on even trying to write an IE friendly page.
Edit: Thanks for all the comments! This page is written as a JSP, so I edit in Eclipse. I found an Eclipse warning about the onblur event for the username field. I switched it from
onblur="alert(document.activeElement + ' class:' + document.activeElement.class)"
to
onblur="alert(document.activeElement)"
and that made the bizarre IE page error vanish. I had been trying to give more info (namely, its CSS class) about specifically which element is stealing focus - to my own detriment, apparently, since Javascript was interpreting the '.class' part in the Java(script) sense there is no class property (I should have been using className).
And, no, the page doesn't validate. But the errors were mostly/all ones that just didn't make sense to me, such as
Line 14, Column 41: Attribute "LANGUAGE" is not a valid attribute. Did you mean "language"?
But I'm still stuck trying to figure out why, as I enter text in the username & password fields, focus randomly switches to a div (working on figuring out which div currently).
Edit 2: It's the div between the two "global nav" comments, at the very top of the body. Still no idea why it's happening, though.
The problem appears to be the line
onBlur="alert(document.activeElement + ' class:' + document.activeElement.class)"
when you take off the ".class" it loads without issue. Are you sure ".class" is valid?
Does your HTML validate?
I agree, IE does a terrible job giving developers information about page errors. I only support IE on the principle that users shouldn't have to download twenty-odd browsers to go to their favorite websites. Web developers have a responsibility to make it "just work". Browser developers have a responsibility to communicate with each other and conform to standards.
Run your javascript through JSLint. You probably have a missing semicolon somewhere or a comma at the end of an object property that shouldn't be there. Firefox is more forgiving than IE when it comes to those types of syntax errors.
Edit: The inline js in your page seems to be OK. Check the contents of qm_scripts.js.
When I remove the .class from document.activeElement.class the error goes away.
The real issue is that you need to be able to debug your JS in IE 8, correct? There is a tool for that! :)