Chrome translator add DOM and breaks code - html

Chequear traducir correos-app se pifia
I have my app with a sidebar working ok, with this rendered code (the actual code is pure php and javascript, that's why I paste a screenshot of the chrome dev inspector):
and looks like this:
But when I use the Chrome Translator, it changes my code in DOM, it gets like:
And of course, it's rendered as:
Why happens that? any idea on how to avoid it? I need to use the translator. Thanks.

Related

HTML code indentation issues in google chrome browser

click this links to see the screenshots
full source code of the home page
source code of the external file
full source code of the home page (in google chrome inspect
view)
full source code of the home page (in google chrome page source
view)
I have been keeping the code indentation in that web pages from the beginning in my code editor. but when i see my site on google chrome, the indentation is not set properly. can I know why is this? I googled this, yet coudn't find an answer or a solution.
It is not Google Chrome's fault. Your files simply get compiled to this form, the browser displays them exactly as they look like.
But why they look like this? In your case PHP's include does only purely textual replacement, as in the picture bellow:
The effect is the same as if you copied the contents of the external file and pasted them to the main file, replacing the include tag.
If you would really insist on having the code indented properly after the include does its job, you would have to add new spaces at the beginning of each line (but first) of the included file. It would shift the text to the right (in this case 4 spaces) and in the result the indentation would be preserved.
However, I'd discourage you from doing so -- it is only the code that is generated, probably no one is going to work with the compiled result. Proper formatting of code is only meant to make the human work easier -- it has no effect on how the page will eventually look like, when rendered by browser. Thus, it probably would suffice if you kept the two source files formatted as they currently are and left the output as is, even though it is not indented well.
If you'd like to have the code properly formatted in the page source view, please remember that you can simply use the "pretty print" button in the lower left corner of the preview:

Why can't I click a link to open a file from an MVC web page

I've got a simple MVC web page that pops up a dialogue box with a list of hyperlinks to files. They're properly prefixed with "file://" and the links work properly if copied to the clipboard and pasted into a browser window. However, from within the dialogue, clicking on the linked files returns... nothing.
Nothing at all happens. The behavior is identical in Firefox, Internet Explorer, and Chrome. No warnings, errors, etc.
Visually my dialogue looks like this:
If I "inspect element" on one of the links, for example, the top one for "javascript notes.txt", it looks like this:
This IS a valid hyperlink. As mentioned above, I can copy the link into the address bar of a browser and the linked file opens fine. I can also copy the full HTML of the element into notepad, wrapped in tags and save as an .html file, and the link works just fine from there. The links just don't work in the dialogue--from any browser.
I'm displaying the links in a Kendo grid currently. Thinking that might be a problem, I got rid of the grid temporarily and tried displaying them in a plain HTML . Same problem--clicking on the links produces no result at all.
Am I fighting something deeper here? Like, I'm using a jquery dialogue to show the list. do jquery dialogues do something to block hyperlinks from working?
TIA for any help.
As per Amy's comment on the original question, browsers seem to block the file:// links when opening from a page retrieved via http. The workaround I implemented came from the excellent article linked below: I coded a simple action method in a controller that returns not a view but a File, and changed the hyperlinks to invoke that controller method via http. Works like a charm.
see: http://rachelappel.com/upload-and-download-files-using-asp-net-mvc/

how get inspect element of the page web

I want to get inspect element of the page web . I've tried Jsoup to get html but it only returns the source code. So is there a way to get the code fully like the one in the Inspect elements? or is there a way to get code from Inspect Elements? Thanks !
First of all I recommend using Chrome. Then use Inspect Element to get the code. If you want to actually download all of the source code, you should just go to File -> Save Page As... to get all the code.
Save the code to your desktop and you'll have everything you need to open the site locally in your browser.

How does iCloud.com hide its source code?

I know you can't hide HTML / Javascript / CSS because it's run on the client side, but how does iCloud.com hide its HTML?
When I view the page source on iCloud.com I just get presented with loads of Javascript, but when I go to inspect element in Chrome I can see the HTML.
I was just curious as to how they did this.
If you look closer at the page source you'll see this:
#noscript div#container{position:absolute;top:0;left:0;right:0;bottom:0;min-height:500px;}
#noscript div#overlay{position:absolute;top:0;left:0;right:0;bottom:0;min-width:600px;min-height:550px;background:#0B080E;opacity:.84;}
#noscript div#container div.float-center-canvas{z-index:101;position:absolute;background-image:url
....
It seems all the markup is generated in javascript and if javascript isn't enabled they run noscript. Not that anyone would be able to use iCloud without JavaScript in the first place...
All that javascript you see when viewing the source is responsible for generating the document that you can then inspect in developer tools once the page is loaded. Nothing is hidden; it's just that the document doesn't get generated until after the page is loaded.

Source code viewer through Html page

Hi im demonstrating the html tags that are new in CSS3 and I'm making a documentation for the easy viewing and interpretation on comparing both the source code and the output.And its its really hard for me going to the source code and then selecting the file and browsing it on the browser
It would be great if I could view both the source code and the output
on the same html page.
For example(I m talking from the page I ve attached below) if I select Source code the source code must be displayed on the screen or from any of the text editors.
I don't know whether it is possible to do so,If possible it would be great
if anyone of you could guide me.
To get the source of just one element, do this:
HTML: <div id="one"><span id="two"></span></div>
JS:
document.getElementById('one').innerHTML // returns <span id="two"></span>
document.getElementById('one').outerHTML // returns <div id="one"><span id="two"></span></div>
To get the source of the entire page, do this:
document.doctype + document.documentElement.outerHTML
document.doctype returns the doctype, and document.documentElement.outerHTML returns the code for the <html> tag and everything inside it.
Use the developer tools you have in all modern browsers (the most advanced ones being Chrome and Firefox).
You typically open such a toolset using the Ctrl-Uppercase-i shortcut.
Then you have a lot of useful tools, as described here for Chrome or here for Firefox.
One of them seems to be exactly what you need. For example in Chrome, the first tab, called "Elements", shows you the source code with a lot of goodies (interpreted css with reasons, element displayed when you hover the mouse, search, etc.).
I'd suggest you take the time to read the linked documentation, as this is an essential tool of any web developer. And you won't be able to stop using those tools as soon as you go deeper in javascript or css.