Webpage doesn't render for some Chrome users - html

Two of our users report that one of our web pages (http://vdgsa.org/pgs/ads.html) is failing to render properly. Apparently the text of each classified ad is blank, and not taking up space on the screen. For most of our users the page renders correctly.
The common denominator appears to be that the users experiencing problems are using Google Chrome. However, when I look at this page on my computer using the same version of Chrome and the same OS (Windows 7) as one of those users, the page looks fine. Both the HTML and CSS validate. Since I can't duplicate the prob, I'm at a bit of a loss.
Any suggestions?

I use the Chrome extension "AdBlock" and don't see the text of the adds.
If I disable adblock and refresh the page, it works normaly (I see the text)
If you download one of the main filter used by AdBlock: the "Easy List", you will find many references to the words "ad_titem" / "ad_title", etc...
You may try to use other names for your CSS class names "ad_item" and "ad_title"

Related

Can I label browser tabs across-origins?

I have a number of embedded devices with a web-based front end, each on a different randomly assigned ip address.
I often want to check between these devices but, when they're open in different tabs, it is hard to tell which is which.
I have attempted to embed these pages in iframes with a header labelling each one, but CORS prevented the pages from showing.
Is there a way I could get the opening page to label a tab or window to help me distinguish between similar looking pages? Failing that, and possibly in SuperUser territory, is there any way I could manually label the tabs in my browser once they're open?
Here's a partial answer. There are a number of third-party plugins for Chrome which allow the user to manually rename tabs. I have installed one called Simple Tab Renamer and it seems to be doing the job.
An automated system would be nicer, but I suspect security policies would prevent that.
https://chrome.google.com/webstore/detail/simple-tab-renamer/ailhpmlejogfdcpoflidmobgkgdemaog

Why do HTML Entities get garbled in View Source?

I've seen this behavior across several different browsers over the years (Chrome, Firefox, and Opera, at least), but most recently it happens only in Opera and Chrome - I think Firefox fixed it at some point. If I have a page which pushes a fairly sizeable chunk of data (several thousand lines of HTML) to the browser, if I use any HTML Entities in the data, they come through malformed when you view the source code.
For example, I put a "lower right pencil" entity ( ✎ - or ✎) throughout the contents of a page in order to label "Edit" links. However, when I load the same page in any browser and click "View Source", I see a random code that often does not match what is actually hard coded into the page HTML. Some examples include:
&x#x2#x270E;, &#x#x270E;, &#x270#x270E;
Examining a Fiddler capture of the actual source code being sent to the browser shows that the browser indeed receives the CORRECT codes. Something seems to go awry as soon as the browser tries to display it in a view-source tab.
It happens with other codes too, becomes &nbnbsp; or &nnbsp; etc. Mysteriously, these randomize with each refresh. Once in a while they come through correct, though most of the time they get garbled. The codes appear to render correctly on the front-end, is this just a bug in every major browser, or should I be concerned about data loss when pushing somewhat large data sets over HTTP?
Past Tests
I ran two tests to confirm this:
(1) Spammed a single character into a valid HTML5 page's contents hosted on a public facing AWS LAMP server. Viewed the contents in Opera and viewed source. Most were okay, but about half way down it starts to trip up, and continues sporadically throughout:
&#x27#x270E;
(2) Spammed a single character into a valid HTML5 page's contents hosted on an intranet Windows server and served over a NetExtender VPN. Same result as the first test.
&#x270#x270E;✎
Steps to Reproduce:
I have tested this on many different systems (Linux - like Ubuntu, Windows 7 and Windows 10 so far) on several different networks. However, I would appreciate if others could confirm this.
Create a valid HTML page and paste a single HTML Entity (either decimal or hexidecimal representation) between the body tags.
Copy and paste the character to fill up several hundred lines of content (less may be required, but more will be most likely to produce the same issue). For example: ... etc.
Save the page on your web server.
Load the page in a new Opera window.
Right click anywhere in the page and click "Page source"
Copy the source code and either manually examine it or just paste it into the W3 Validator at https://validator.w3.org - it will help to point out the incorrectly formatted HTML Entities.
Opera 49.0 Illustration
See below how the Code Inspector shows the correct HTML Entity code. However, when you view Page Source for the same section, the code gets malformed.

Can the html page run from local URL converted into pdf with colour in chrome

I have created a html page with bootstrap control and my own css. I am running the page through visual studio in chrome. I want this page to get converted into pdf with colours as it is displayed in chrome. I have not connected any printer to my system. If i give ctrl+P, my page is getting displayed without colours.
I have used 'save as pdf' extension of chrome for conversion.
It is saying 'cant access your local url'. Is there a way to print the page in the same way as it is seen in browser as a pdf
Bootstrap controls like progress bar not getting appeared in print.
Chrome “Save As PDF” works fine. You need to tick the “print background graphics” checkbox otherwise by default backgrounds are ignored.
However, the problem is that Bootstrap has included a reset for print media. What it does is to overwrite all background to white and foreground color to black, with !important.
What kills is the !important
I would recommend you to use one of the free online HTML-to-PDF conversion solutions.
Here's one for example: http://www.htmlpdf.com/
Keep in mind that some solutions may not give you the expected results. In this case just try another.
After you have found a working solution, just print the converted-HTML-to-PDF file that you downloaded.
Chrome itself acts as a pdf writer and reader, as we already know. I'm not sure why the colours are missing in the preview for printing, still, give this a try:
After Ctrl+P, you'll see the Print - Cancel options, below which there is a Destination for you to choose.
It has Recent, Local and Cloud destinations with a choice from the local ones being displayed. Go ahead and change it to Save as pdf.
Now you can save the whole webpage with the colours too.
Take a look at this
I had the same issue but found an easy solution.
Simply get the google chrome extension called : FireShot
Get it here: https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=en
It will take full page screenshot of your HTML page and even local Html pages.
Then capture the full page.
After it will lead you to a new page with saving option.
Beside “Email” I suggest you to click on “PDF”. Then it will lead you to Gmail so you can send yourself the PDF.
I don’t suggest to click on print, because in my case when I saved it, there was an issue with the pixels.
Very easy.
GoFullPage - Full Page Screen Capture — works great for this case.

Facebook like button no longer shows up in Google Chrome

I am developing a bulk sms application using JSF. I added the facebook like button but it doesn't show up on chrome (it shows up in IE). I checked the console and found a message - "Failed to load resource: net::ERR_BLOCKED_BY_CLIENT". My other site that formerly used to display the button also no longer shows it. Any help will be appreciated. Thanks
I stumbled across this question because I was searching for "net::ERR_BLOCKED_BY_CLIENT" while developing a website using a purchased template.
The issue was that I checked "block social media buttons" in AdBlockPlus settings. I did not use any tracking buttons on my website, though.
The template used banned names in classes and file names. For example, there was a CSS class icon-social-facebook and an image icon-social-facebook.png. It turned out that AdBlockPlus was configured to use this list https://easylist-downloads.adblockplus.org/fanboy-social.txt which blocked website elements with "icon-social-" in their names.

Get opened pages in Chrome

I want to know whether it's possible to get Information about opened pages in Chrome (page title, url) from third party app (not extensions)?
You can try use the Accessibility techniques. Chrome implemented IAccessible interfaces in Chromium that any screen readers can read. If you implement a screen reader like application you can easily get those data. But to do that, you would need to understand how accessible applications work.
Or you can check out ManagedSpy, where the source code is provided: http://msdn.microsoft.com/en-us/magazine/cc163617.aspx
It's definitely possible using Fiddler. In the Web Sessions list, it shows all the URLs that are accessed, and the program (and PID) that accessed them, including Chrome. If you click on one of the URLs and look under Inspectors on the right, then Text View on the lower section, you can see the <title> section for each page.