Menu
I can't find a specific style element in my code which I've been able to edit by using the code editor in both Chrome and Firefox (firebug). Which brings me to my question, why is the view source so different from the actual code? I know JQuery and Javascript are doing something to it (adding classes and junk...) because I'm using the modal from the JQuery UI, but why can't I find the style elements??? Where are they???
Source Code:
<div id="modalEmail-ESI" title="Email - ESI" class="infoModal">
From Code Editor:
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-modalEmail-ESI" style="display: block; z-index: 1004; outline: 0px; position: absolute; height: auto; width: 800px; top: 205px; left: 577px;"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-modalEmail-ESI">Email - ESI</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div><div id="modalEmail-ESI" class="infoModal ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; height: 282px;" scrolltop="0" scrollleft="0">
In the "inspect element" code, there is a style attribute width:800px; that I want to change, but I've searched for it in the code and it's apparently non-existent.
Is that style attribute dynamically generated?
UPDATE: Based on your feedback, how can I update the width of the email modal when the style attribute is dynamic?
417
There's a powerful tool hiding in your browser: Inspect Element. Right-click on any webpage, click Inspect, and you'll see the innards of that site: its source code, the images and CSS that form its design, the fonts and icons it uses, the Javascript code that powers animations, and more.
The source is the raw HTML that is unadulterated by any client-side scripts. It is the direct response of the HTTP request to the server. The DOM, on the other hand, is the same HTML structure that has been modified by JavaScript. Source Code reads the page's HTML as if you opened it in a text editor.
Inspect element is one of the developer tools incorporated into the Google Chrome, Firefox, Safari, and Internet Explorer web browsers. By accessing this tool, you can actually view — and even edit — the HTML and CSS source code behind the web content.
You can copy by inspect element and target the div you want to copy. Just press ctrl+c and then your div will be copy and paste in your code it will run easily.
When you say "view source", I'm assuming you're talking about the editor, not the actual "View Source". When you "view source" from the browser, you get the HTML as it was delivered by the server, not after javascript does its thing.
When you're in the editor in your dev tools, you're looking at the DOM as it exists at the moment, which includes inline styles, parsing corrections, and other things that are the result of javascript running.
165
There should be no difference between the "actual code" and "view source", since the latter shows you the former.
The source will differ from the view in a DOM inspector because that will show the current state of the DOM after:
34
I agree to Joe Enos, but there are some other things that might be the cause.
You might be viewing a Source of an email, for example: 
The object that you are viewing is an email, that gmail is automatically editting the divs and at the same time adding few more classes or ids to make sure their User Interface doesn't get hacked or broken.
You are using some linkage to other CSS or JS files like mine. Here: 
This is the site layout for my website, that I am using as the code. But what happens once it is executed! Is almost opposite, here: 
In the inspect element you can see that there is alot of class being added to the HTML, which we never did. Where did that came from? Its JS or CSS @media queries I am not sure on this one. But it came from there, you can see I have linked many JS and CSS files.
Coming to the point!
What you're saying that the Source Code is so much different from the real one, you're kinda wrong. Because when you use a function to write ot remove the class, you actually know where you are calling the function. For example this:
function writeClass() {
$('div').addClass('someword');
}
And you will always know that this class was added to this element on page load.
Other wise the browser itself never adds anything to the DOM.
And yes, you can change the css properties dynamically. Use this:
$('element').css('width', '800px');
This line would override any other CSS property for that element with the one that you are just providing. Or in other words, the jQuery over writes the DOM properties that you get from Server.
One more thing:
You cannot use jQuery to permanently change the values of CSS file, you must use some Server side language for that. jQuery can change the web page content once, when the page reloads they are shifted back.
Hope I am close to the point! :) Cheers,
6
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
