Develop Reference

Modify Contents of Editable Div on Twitter Post

I'm writing a chrome extension which helps the user type things on twitter. When writing a tweet on twitter, twitter opens an editable div container. When the user types into it, twitter (which is using some web-framework presumably) generates sub-divs and spans with the text the user types and places them within the content-editable div.
The thing is when one manually changes the span value (for instance, through inspect elements), and then types something again, the value in the span will just revert back to what it previously was (before the inspect elements edit). This is probably because the actually typed string is stored somewhere in javascript, and everything gets overwritten again when the user types into the div.
I've been trying to find a way around this using JQuery but with no success. I don't really know how to start. If it were just a regular input tag, you could call something like $("input").val("new value"), easy-peasy... but I don't know how one could go about doing that for an editable div that gets updated by javascript running somewhere on the page.
For a while, I just thought it would be impossible...
BUT NOW I do know it is possible. If you download the Grammarly extension and use the Grammarly popup-editor (which opens a new window to edit text), then submit that, the twitter editable-content div updates appropriately and everything works like magic.
Sorry if this isn't a standard programming question, but I couldn't find anything on the web that comes close to what I'm trying to do. Maybe I'm just not experienced enough and am missing something really obvious. I tried looking at the twitter and Grammarly source code but it's all minified garbled javascript that I can't read...
Thanks for any help and insight!
EDIT: the twitter url in question is: https://twitter.com/compose/tweet The div in question is the one with contenteditable="true" attribute (you can search it in the inspector)

Mentio JS menu being added to bottom of the page

I'm trying to implement a Twitter style #mention interface using Angular JS and a library called MentioJS ()
The issue i'm having, is that after content is dynamically added to the page, I'm getting a rogue menu on the bottom of the page. I was able to replicate on the documentation page here:
http://jeff-collins.github.io/ment.io/?#/
By just hitting "Submit" at the bottom without changing anything. In Chrome, I see the default menu that opens in the first input show up again at the bottom of the page.
Any ideas why this might be happening?

I've encountered the same issue, as many others I think.
I've emptyed the array with the options for mentio-items (after pressing submit), which worked for me.
I`m sure this is not the right solution, but it fullfiels my needs.

I had the same issue with with ment.io, but as #Mihai Lazar pointed out after clearing array on submit, issue was resolved.
Regards..

contentbuilder.js keep toolbar visible at all times

Im currently working with the contentbuilder.js script to prepare a simple page to allow content editing.
Whilst I love this particular script, I havent been able to find a way to keep the toolbar visible at all times. The readme file doesnt give out too much information, but im wondering if anyone has worked with this before and managed to keep the toolbar visible at all times, but when the text isnt in focus, make the buttons disabled.
thanks in advance

hey I used the following on my page to make it show up as long as the builder had focus
$("#<%=contentarea.ClientID%>").mousedown(function(event) {
jQuery("#rte-toolbar").stop(true, true).fadeIn(200);
});

Meteor: Prevent template from re-rendering

So I have a page which displays some data (questions) coming from a collection in a ul.
Link to example (feel free to fiddle around, it's just sample data!)
If the user clicks on the button in the bottom right a previously hidden div is shown with a textarea so the user can post a new question. That all works fine. Problem is that if a new question is posted from another user while the user is typing a new question, this user gets thrown back into the "questions view" because the ul is rerendered because of the new entry.
What I want is that the user, who is currently typing a new question, does NOT instanly see the new question so he can continue typing in the textarea in the div. --> What I need is a way to prevent the ul (its template) from rerendering.
I tried {{#constant}} and all that stuff + had a look into that post but it can't get it to work.
What I need is a way to prevent the rerendering onclick of the "post a question" button and of course a way to continue rerendering after the question is posted and the textarea + its div is hidden again.
I hope you guys can help! thx!
best regards P

I think that it's not necessary to wait with rendering the new question, since the dialog is opaque anyway, so it won't be a difference to the user. You need only to make sure that the dialog itself will not be rendered.
There are three ways to achieve it:
Put dialog only in {{#constant}} block.
Put dialog and question list to separate {{#isolate}} blocks.
Put dialog and list in separate templates. That's the most robust and thus recommended method.

Try putting unique ids on your questions:
id="question_{{_id}}"
Then meteor can be smarter about what it is updating.

create a "show up" window when you click register?

im a backend programmer who wants to have a window that appears in front of the current window when clicking "register".
so that you dont have to redirect to another page.
i think u guys know what i mean.
how do i do that? is it with jquery or javascript? is ajax involved?
and what is that kind of popup box called?

You want to write a div into your HTML that contains your login fields (i.e. the popup window). Set it to position:absolute; and position with CSS so it floats above the page contents and doesn't interrupt the flow when it appears. Get it all nice and positioned where you want it, then set it to display: none; so it will wait for javascript to make it appear.
Then (using jQuery), write something like this:
$('#register').click(function() {
$('#popup').show();
});
where #register is whatever gets clicked (can be most anything with id="register").
What happens whenever that form is submitted is up to you, and not any different from the options you'd have with any other HTML form. jQuery can help with AJAX if you decide to go that route and not send the surfer to another page to process the form.

It can be done using quite a few totally different approaches. As Sam said it's the concept of modal boxes.
You could do it completely on the client side using CSS and JavaScript (alternative), or via AJAX and some third-party libs.
Try being a bit more specific - what's the the backend/frontend environment? Is performance an issue (eg. minimal client-server communication)?

I believe you're referring to a modal form. You can search for modal popup javascript. There is a good javascript component called Lightbox that will help as well.
EDIT:
I mentioned Lightbox, but Lightbox Gone Wild is the one I meant. As others have pointed out, using a modal tool like this all you do is write the html you want to be displayed in the modal popup. That link is a good tutorial on the concept and explains things well.