I have downloaded the zip from https://github.com/loopj/jquery-tokeninput and tried the demo.html in firefox and in chrome. In firefox after adding token cursor is being shown up:
version in 1.6.1
In google chrome after adding token cursor is NOT being shown up: But when we start typing cursor is shown.
I have tried the loopj version http://loopj.com/jquery-tokeninput/demo.html given there, cursor is being shown in google chrome also.
I have looked into js file but couldn't find anything.
How to fix this issue;
Final Edit: This bug was fixed in Pull Request #557.
UPDATED SOLUTION:
On line 725(ish), there is input_box.width(0), in the add_token method. By giving the input a width of zero, the cursor is hidden from view. I've set this to 1 in my project, which allows me to now see the cursor, I'm yet to find any negative effects, and from what I can see the worst that could happen would be a slightly premature linebreak, which in my implementation I can definitely deal with!
Hope that helps!
ORIGINAL ANSWER: I use a different theme for this plugin in Chrome, but haven't encountered this problem. I was going to suggest posting a bug report, but I guess this could be your post anyway?
Am I reading your post right that the demo's work correctly, just the file you downloaded doesn't? The Demo's run on version 1.6.0 - perhaps try replacing your .js file with that one, and see if that solves your problem as a temporary fix.
Related
On some browsers (mostly phone I've noticed), the HTML form will pop up the keyboard, the input fields will glitch and the keyboard disappears; all within a second. This prevents the user from typing.
Here is a video: https://youtube.com/shorts/srxawz9z1IM?feature=share
The form can be found here:
pavepro.com/order
Any and all help is appreciated.
I inspected the code, and think that it might be a viewport problem, but I can't confirm it and I am self taught. Don't know who to ask!
Can you run it with access to the debug console? You might want to try this via Browser Stack, where you can run on mobile, and have access to the debug console to be able to Inspect Elements, and check for Javascript errors. (I'm sure there are other ways to do this too). My hunch would be it's a javascript error, that is causing this odd behaviour. You may wish to initially check the developer tools on desktop - and see if anything odd is being output on the console, or any errors - even if you don't get the odd behaviour on desktop, this may give you a clue.
Further to your comment I took the follow steps:
Run under Android studio / Chrome to reproduce the problem (I didn't see any obvious errors either)
Took a copy of the page using (save as) and run it on a local server on localhost (putting in my IP address to run it through Android Studio / Chrome)
This allowed me to reproduce this locally
I then edited the file - removing everything from the header - the problem was gone.
I isolated that the issue was due to jQuery calls in the page - removing jQuery the problem goes, adding it back in it comes back.
I then put jQuery back and isolated each < script > tag in your body, I found the following causes the issues:
< script type="text/javascript" src="https://www.pavepro.com/wp-content/themes/Divi/js/scripts.min.js?ver=4.19.5" id="divi-custom-script-js" >< / script >
By removing the DIVI javascript the strange behaviour goes. Now I think you need to look into the custom Javascript that is within the form within Divi, within Wordpress. As the script is minimised it's hard to see what's actually causing the problem. Hopefully now you know what's causing the issue you can debug that jQuery/javascript code further.
I don't know what happened in my Google Chrome Console, I can't see any longer the source of my console.log.
If I write a console.log in my code, I can see the result in the console but not the source of my code, now instead of the source I see "consolePlugin", and when I click on it, it redirects me to a file called consolePlugin.ts.
It's very annoying, because I would like to debug sometimes from inside the console of Chrome, or know where this console.log comes.
Thanks for your help.
I hope you found a solution by now but having just fixed this here was my solution;
In the Chrome Console I clicked on the "consolePlugin.ts" which took me to the Sources tab and showed me that the output was coming from a file in webpack.
consolePlugin in the Sources tab
I then went to Chrome settings (the gear icon) and then to Ignore List where I added the file "consolePlugin.ts".
My console logs are now back to normal. Hope this helps
Ignore List addition
I don't know why this is happening but most of the time when I experience a strange behaviour from devtools I reset settings and it solves the problem.
Click here :
And then :
When I write some code, and then click Tab to autofill from context menu the cursor is now in the wrong position. It should be before ";" but for some reason it is after ";". Worked fine for about a year, and now suddenly something like this, any ideas?
This problem is related to snippets in vscode.
The easiest way to solve this is to use the snippet extension.
Install "HTML CSS Support" extension made by "ecmel" to visual studio code. Close the program and open it again and you are ready. Problem fixed.
Extension URL: https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css
Long way:
You can write your own or update snippets, to solve this.
Documentation to make your own snippets: https://code.visualstudio.com/docs/editor/userdefinedsnippets
I had same issue. I tried all of the solution proposals and searched snippets for it but can't found anything.
I was already using the html css support extension by ecmel. I deleted and reinstalled it, Closed the vscode program and open it again but I couldn't get any results. Finally downgraded vscode to 1.64 version from here and now cursor works like a charm. I wanted to write this answer for friends like me who did not get any results.
Every other website I visit, the inspector works as expected:
But in many of the sites I'm editing within apache server (using xampp) somehow they doesn't show the "filename.css:lineNumber" data
Also, every change I try to do in the inspector in thse sites, doesn't do anything to the code shown in the source tab.
I've tried refreshing, hard refreshing with cache, closing and opening the tab, closing and opening chrome again. The same problem occurs.
In other sites the inspector works well, but not in many of the localhost sites.
Has someone experienced this before? Is there a way to fix this?
If you are using a client-side CSS generator library such as Lea Verou's excellent -prefix-free or client-side Less, you will not see source information as it has all been processed and reinjected as style elements.
Client-side Less has a property [dumpLineNumbers] to include source line info as a comment in the generated source. (I'm not sure if this will display in Chrome's inspector - but I think it might)
The only "fix" I know of for -prefix-free is to temporarily remove it, obtain the source info for reference, then put it back in.
I have had the exact same problem (not using a css generator), and it appears to be a known bug with the current version of Chrome, the solution is to use the more up to date Beta version known as Chrome Canary - Here's the link :)
https://www.google.co.uk/intl/en/chrome/browser/canary.html
Try to check what the format of your CSS file is. I had the same trouble with the UNIX and Macintosh formats. For example, try to open you CSS file in Notepad++ and in the bottom right corner of the window you'll see your current format. If you see UNIX or Macintosh there, click it with the right button of your mouse and change to DOS/Windows. Then save your file and refresh your page in Chrome. It definitely helped in my case.enter image description here
I am the developer of a webapplication.
Chrome displays my Javascript-and-AJAX-generated webpages correctly, but when I try and print them (via its native function) I get a blank page.
Printing works just fine on other browsers.
I have tried and print server-side-generated pages with Chrome and they get printed fine.
What can be wrong on the webpages of my web application? I think the issue is that those pages are dynamically generated by Javascript and AJAX.
I am saying that because I have just found out that I can't even save those pages correctly with Chrome (all the dynamic HTML is not shown).
I am on Google Chrome 13.0.782.112.
How can I debug and fix this issue?
Is there any workaround?
Is anybody managing to get dynamic-generated content printed with Google Chrome?
This problem is driving me crazy!
P.S.: some of my users are reporting the same problem on Safari :-(
UPDATE: upgraded to Chrome 14.0.835.202 but the issue is still there...
I've had exactly the same problem, though not in Chrome (although I didn't actually test with Chrome). On certain browsers (and I cannot remember which ones offhand - but it was either in IE or FF), any content that is added into the DOM by JavaScript is not printed. What is actually printed is the original document that was served to the browser.
I successfully solved this using the following JavaScript function:
function docw()
{
var doct = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">";
document.write(doct + document.getElementsByTagName('html')[0].innerHTML);
}
This is called when JavaScript page manipulation has finished. It actually reads the entire DOM and then re-writes the whole document back into itself using document.write. This is now enabling printing for my particular project on both IE and FireFox, although I'm pretty sure one of those did already work in the first place, and the other one didn't (can't remember which from memory, and it's not a project I can pull out to test at the moment). Whether this will solve the problem in Chrome I don't know, but it's worth a try.
Edit Terribly sorry, but I'm a complete pleb. I just re-read my old comments and this solution had nothing to do with printing; it was actually to fix a problem where only the original served document would be saved when saving to file. However, that said, I still wonder if it's worth a shot.
This helped me with a related problem - how to view/save dynamically generated HTML itself. I came up with the following bookmarklet.
javascript:(function(){document.write('<pre>'+(document.getElementsByTagName('html')[0].innerHTML.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'))+'</pre>')})()
I run this and 'select all' / copy, and then (in Linux) do 'xclip -out' to direct the large amount of clipboard data to a file.
Trevor's answer totally worked for me- with jquery I simply did something like
$("html").html $("html").html()
worked perfectly