When I change text using JavaScript The text does not appear in the HTML "View source". Is it possible to inject information to the HTML "View source". (When I write View source I mean to While you pressing on the right mouse button in the browser you can view the source code That returns from the server)
View Source shows you only the HTML it received from the server's response. Your JS changes happen afterward.
Firebug and Chrome's debugger show you the source dynamically so you can see the DOM and HTML as it has been changed. But view source will only ever show you what the browser received from the server.
Well,
You have said it right. When you "View source" you see what was received from the server, and elements that you added dynamically using javascript do not exist there.
If you want to see elements which you added later, you can do that using Inspect element (CTRL + SHIFT + I), which will show you current html structure displayed in browser.
When you "view source" in a browser, it is opening a window and printing the source code to the current page. This text is totally static, nothing will change its contents besides manually refreshing.
If you want the HTML source you are looking at to reflect changes you make to the page, you need to use your browsers Dev Tools. Try Right Click->Inspect Element instead of Right Click->View Source
Some techniques:
In some browsers Ctrl-A to select the whole rendered page content
and, with a right click View Source of selection, gives the source as generated by
rendering scripts. (often <script> elements are gone and replaced
by the rendered content)
Augment the address bar URI by prepending view-source: to get the
original source.
Use the menu bar or right click View Source interfaces.
With these techniques and FF it is possible to get different sources for a "static" page in the rendering chronology.
Technique #1 is interesting when automated ... along the lines of:
generate a page that displays the time in seconds,
select whole page,
render the source view of the selection
repeat periodically
quasi code:
setInterval ( write Date() to page, select all, write view source of selection to page ) every second
Related
I am facing a strange issue while identifying the element on one of the webpages in my application. There are links on the page and I need to click those links and perform the necessary steps.
When I right click on those links then it immediately takes me to that page, I am not able to inspect that link element. When I use inspect tool tip and mouse over any of the link then it highlights a big window where all the links are located and in the elements section nothing shows up, at least I thought I will find those links in view source. Any help is greatly appreciated.
enter image description here
just press ctrl+shift+i
to open the inspect tool , sometime website will have event listeners for right mouse click to some other tasks . IN such case you can open dev tool using this short cut
I'm in the middle of building the file uploading part of our system, and our design has two flows in which you can upload a file:
Drag 'n drop onto the page
Click the "Upload file" button which presents a modal.
If I drag 'n drop a file onto the page, I want to show a small popup in the bottom corner showing the upload progress of each file.
If I go through the modal, I get the option to drag 'n drop or browse files. It then shows me the same progress in the modal, however I have the option of closing the modal which should then show me that same small box in the corner with the upload progress.
From what I've been able to determine from the docs of FilePond, this doesn't sound like it would be possible. Every demo I've found links the FilePond instance to a single input and since it builds its own UI, the drop zone would also be built. Fine for the modal window but not for the full page drag 'n drop. So I have a couple of questions:
Can I make anything a dropzone without it building the UI?
If so, when I drop files can I specify where to display the uploading progress?
Is it possible to move the progress from one area of the DOM to another (going from modal to the corner)?
I'm building this in Vue.j, so the plan was to use Vuex to manage the uploads and their progress which would make it easy to render the progress in different parts of the DOM. I love the look of FilePond for what it offers visually but if I can't get it to work with our designs then we may need to look at something else.
I'm trying to implement the Magnific-popup on a website. Source is a jquery ( html articles with a header paragraphs...) object loaded as inline type. The shown source is on the same page as the popup. To this point it is working fine, popup is working, content is loaded.
Now I'm unsure whether this is standard behaviour or not: In the background the shown article is hidden, while the rest of the articles are still there. When closing the popup, the shown article stays hidden.
tl;dr: Magnific-popup hides the source of the opened information, not making it visible again after closing the popup.
Am I doing anything wrong or is it just the expected behaviour of Magnific-popup?
Any hints/solutions appreciated.
its general behavior.
when you close the popup once, it adds class "popup-hide" to hide the popup content, though which may not be applied by you in its html
i hope you are referring to something like this : http://www.hoopsvilla.com/2014/04/2014-nba-playoffs-bracket-tree-updated-scores-stats-schedule.html (when you click the trigger (the team logo), the inline-content gets hidden once the popup is closed.)
i'll try to get more (solution) on this later.. :)
I'm currently trying to embed a mailchimp sign up form using the HTML widget from impress pages, and at first, it seems to work perfectly fine.
I drag the block onto the screen, a popup comes up, then I paste the form code into it, and then voila! A pretty looking, rendered form appears. I then go ahead and press publish... and bam! My HTML widget is gone, and all that's left is an empty block within the layout asking me to click to add text!
I have no idea what's going on here, does anyone have any ideas? I'm using a custom theme, and I'm wondering if the workaround is to hard-code a widget for my client and just use that (although it looks like it'll be a big drain on my time)
If you get "Forbidden" as a response after pressing save, you should have a look at the answer here impresspages html widget not saving
I am working on a Javascript Based site, which uses the Dojo Framework.
I am using a DataPicker. I wish to change the background color of the datePicker, and hence I wish to look at where in the CSS is the color being set, so that I can override it in my CSS.
Usually I use FireBug and 'Inspect Element in FireBug' to view the HTML and CSS together. (or even Google Chrome's developer tools)
However this datepicker is a dynamically created component, and If I right click, or move my mouse into the Firebug window, the date picker is shutdown/destroyed. (You can check out the sample on the linked page itself)
Is there a way to inspect the CSS on these kinds of dynamic elements, using Firebug, or something else?
The best approach I've found for the dijit popup widgets is (using chrome)
Open the popup (in this case the date picker)
Right click on the element
Select "Inspect Element" from context menu
Chrome will open and transfer focus to the developer tools without blurring the focus of the page, keeping the popup open, allowing you to modify attributes and css rules and getting instant feedback.