JQuery tool to show selected DOM elements in real time - javascript

I was recently on CodeSchool's website and took the JQueryAir course that features a web-based text editor that shows - in real time - what elements of the DOM are being selected as you write your JQuery code. It does this by highlighting the selected elements of the html page in light gray.
Does anyone know of text editor (or plugin) that can recreate that functionality? I'm mainly looking to use it for practice purposes. Or if you know of a website that would allow me to do they same thing, that would be great too.
Here is a screenshot to give you an idea of what I mean:
As the JQuery in the bottom panel changes, the html above is highlighted.
Any advice appreciated - thanks!

A simple way to do this (although perhaps not quite as dynamic as you would like) is to use FireBug's console (or similar in Chrome, IE9 etc.). After loading a page containing a jQuery reference in FireFox, go to FireBug's Console tab and paste this.
$("p").css("background-color", "gray");
Hit Enter. You can change the selector to see the results, though they will be additive until you refresh the page. Use the up arrow to bring back your most recent selector to edit.
EDIT: OK, this was before you added the screenshot showing the desired HTML source highlighting. Still, perhaps this method will come in handy at some point.

Related

How can I use inspect elements on Chrome to identify the source of a particular section of a website?

This may sound like a really stupid question for you guys, but how can I use the inspect elements tool on Chrome to identify the source of a particular section of a website? To make it simpler to understand, I want to modify the footer of a particular website (WordPress based).
The problem is that the footer was customized (which means I can’t edit through the WP backend) so I need to find where exactly or what’s generating this footer.
Does this make any sense to you?
I'm pretty sure you can't do this in Developer tools as wordpress is PHP based, chrome only sees the compile code.
What I would do in your situation is to try searching the theme folder for an ID, Class or piece of code that is unique to the footer and try that way.
This can be done by visting the website, right clicking and selecting Inspect.
The developer tools dropdown will appear. In the top left corner there is an icon with a pointer hovering over a screen (this is the inspect element tool). Click this, and move your pointer on to the part of the webpage you wish to find the HTML for.
The html for that part of the website will be highlighted in the developer window, making it easy for you to see.
You can then either , edit inline in the browser to get an immediate view of the changed code (this will not be permanent, or change you code file), or use that location, to return to your WP editor and make permanent changes.

How to find which script modifies css of selected attribute

Is there a way to get information which scripts modified selected DOM element, and in which order?
On my website, I modify width of div A. It appears however, that some other script modifies that width after that, but I do not know which script it is. How can I find it?
Edit:
After searching a bit more, I fount that in firebug you can right click attribute in HTML view, and select "stop javascript on change" (or sth similar, my firefox is not in english), the problem being it resets after reloading the page, what makes it useles for me.
I am using chrome developer tools to debug my page. It supports add breakpoints to dom elements, when attributes of dom is modified by javascript, it breaks the rendering process immediately. I think you can try it.

Programmatically make datalist of input[type=url] appear with JavaScript

In Chrome and as for now the Datalist only appears when typing or double clicking on the input element, e.g. http://jsfiddle.net/r7Y4v/
I'm trying to make the datalist appear sooner. Ideally I would put a little "dropdown arrow" next to the input that when clicked would make the Datalist appear.
I'm looking for a webkit solution.
I can't find anything in the specification how to do this.
Also I noticed that the implementation in current browsers seem to vary quite a bit (click vs dbl-click, arrow-key's, full versus filtered list and how filters match the partial input, etc).
To me, it seems that for now there is still no properly working combo-box and the data-list seems to be in it's infancy.
So it appears you'd currently be better of to roll your own or use a ready library.
It seems to me the 'minimul datalist' library is rather popular (good link to read to).
On that page is a link to it's GitHub code and a demo page.
Side-note: I'd love that some-one gives a better answer! Also, at first I thought it was a good idea to leave out the arrow-button so people could have better styling-options for a drop-down button if they wanted one that they could hook-up to the datalist/autocomplete/combobox. I'm surprised all this still seems unspecified and not natively supported. Please, spec-writers, give us the simple native combo-box (that is overdue for so long) and then add spice like filters!
Edit: There is an open Feature request since August 2012 on the Chromium project that asks for a drop-down functionality:
Issue 152375: Add drop down toggle on input tag with datalist
How about something like this? Since Chrome does place an icon on hover I placed this image so that it would be in the same spot.
input[list]{
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAJCAYAAADtj3ZXAAAAB3RJTUUH3wMHFxkH6cbPfQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAABaSURBVHjaY2RgYDAA4jkMxIEsID6FLrgOiP8TwNNwmSgNxJ/xaDwPxGz4nJSDQ+MHIFYn5B9mqA3omsOJDA9w4P1B0jiTWI0wMIFYf2IDPEB8gxh/4jOAIAAAbfwl/FxzevIAAAAASUVORK5CYII=');
background-repeat:no-repeat;
background-position:right;
background-origin: content-box;
}

Can The Preview Pane in the MarkdownDeep Markdown Editor be Disabled?

I'm working on an ASP.NET MVC project which uses the MarkdownDeep Editor to add a rich editor on top of a basic markdown input textbox (very similar to the Stackoverflow editor window).
Generally it works great. However, in certain scenarios, I would like to disable the preview window. This is automatically generated below the textarea by MDD. Can this be disabled?
Just to be clear, I know I can use CSS to hide the preview. But on some devices it's slow and makes typing painful. I want to entirely turn off that feature. I don't see anything in the docs other than how to customize the preview.
Any ideas?
In the docs it specifically mentions that it is recommended that you have the div preview already in your document because it will be created if it isn't found and consequently, could could a visible page refresh if any re-layout has to occur.
Note: the associated divs are all optional and if missing, the plugin will create them. However... you might experience the page jumping around during load if you do this. ie: it's recommended to explicitly include them.
Thus from the sounds of this, and that there doesn't appear to be any option to turn it off in the API page I would say no, it's not possible.
I am a little confused here: if you don't want the preview, use a regular text area instead of mdd_editor... So, under the scenarios where you don't need the previews, instantiate a plain vanilla editor. What am I missing here?
I know this is old, but I was looking for something else on mdd. I recently had this same requirement.
Just comment out the code
// Update the DOM
if (this.m_divHtml)
this.m_divHtml.innerHTML=output;
in MarkdownDeepEditor.js

HTML code inside controls: ComboBox, TextArea

I'm looking for a way to display full HTML in the components (like ComboBox - Select, TextArea) on a web page. Is it somehow possible to do with the native HTML controls, ex. extending them? Are there any extensions that would be useful for me?
Thanks,
Rafal
Take a look at how CKEditor renders it's view on the client - it's effectively an Rich Text Editor for browsers (there's lots of other alternatives, too):
http://ckeditor.com/demo
http://www.kevinroth.com/rte/demo.htm
http://developer.yahoo.com/yui/examples/editor/index.html
Looking at the construction of these with the IE Developer Toolbar, Firebug etc is a real learning experience.
An approach many people take is to embed their text area in a div, and also have a another div that's hidden. Underneath, are tabs, for example, Editor, Preview. Clicking on preview takes the HTML in the text box and does something like previewDiv.innerHTML = textbox.value;
I'm not sure if this is the kind of thing you want, but an example of this is here:
http://www.freetextbox.com/demos/
Hope this helps.

Categories