I was building a page, and got into a problem which I was struggling with for awhile. The source code is here: https://gist.github.com/zafartahirov/077b3e9ca7fe9958c9e1 - sorry it's not on JSbin, I still cannot figure out how to use multiple files there.
The page works fine on Chrome, but gives me an error Firefox: TypeError: value is not a non-null object in webcomponents.js and Exception caught during observer callback: destributeNodeInto... in polymer.js.
The page is running on http://zafar.cc - but I am expecting to push a different version there once this problem is fixed. The GitHub repo for the page is here: https://github.com/zafartahirov/zafar.cc
Please, advise... :)
EDIT: The live example of the errors could be seen here: http://bl.ocks.org/zafartahirov/raw/077b3e9ca7fe9958c9e1/ - sorry about importing element/... - forgot to change it in the index.html
In elements/zaf-dropdown/zaf-dropdown.html:16 you have:
<shadow></shadow>
I bet you want to replace it with
<content></content>
or even simply drop it. This change fixes the behaviour in browsers not having native support for webcomponents yet.
P. S. IMHO, this is not a best idea to stole the design from polymer paper-elements project.
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 upgraded my project's Angular version from 9 to 13 recently. Since videogular2 package is no longer supported with this version, I migrated the application to use #videogular/ngx-videogular and I exactly followed process for migration mentioned on the github page.
After migration, it appears my "Play video" button and controls like full screen, video scroll are missing. This is due to absence of class on the DOM. I compared other environments we have before changes and DOM looks a bit different. It doesn't have "vg-icon-play_arrow" on the DOM at all. This is how it looks -
We are maintaining local videogular.css and I see its already imported in style.scss which is correctly mentioned in Angular.json. I am not an expert in front end and not sure how can I find out why this is class "vg-icon-play_arrow" and flex is missing on "div" element "overlay-play-container"
Any suggestions on how to approach finding whats the problem? or what might be solution?
Here is how DOM looks
Note: I already tried using node_modules css which is recommended by #videogular/ngx-videogular by directly using in Angular.json instead of project videogular.css but it gives same results. Also all fonts files are latest as per recommendation
If I access http://django-guardian.readthedocs.org/en/latest/installation.html I see the raw content without any styling. The CSS files appear to load fine, but not having any affect. If I build the documentation manually on my local box it works fine.
I reported the problem as a bug and found that django-guardian provides its own theme that wasn't working. As the custom theme probably wasn't required I have removed it and now it works fine.
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.
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