We Keep Coding

javascript: show share button by selecting of text from an article

If a user select some text from the article of a webpage then show share and copy button for the following selected text.
I want to do something like this..
the guardian

There is no inbuilt event for text selection but you can use
onmouseup this would be invoked whenever user releases his left mouse button. After every such event we can check if the user has selected any text or not
window.getSelection() to test for any text selection. If the selected text is not an empty string, you can invoke your function which would show up required buttons
Here is an example with code (note - uses jQuery)
SOURCE

Simple .on('keydown') jQuery event not responding until next key is pressed

I'm making a page for a friend and I have a hidden text field and when the user types the text is transposed into a div so that it looks like they're typing on the screen rather than in an input field.
Here is a link to the page: http://merkd.com/godis.php
Here is the function that I use to respond to the key strokes:
$('#hiddenInput').keydown(function() {
var input = $('#hiddenInput').val();
var html = '<div style="float: left;">'+input+'</div><div id="cursor">|</div>';
$('#typingArea').html(html);
});
The text-field is visible right now so that you can see the problem. When text is entered or deleted, it doesn't respond until the next keypress. So if I type a single letter, nothing shows up until I type the next letter.
I looked at the jQuery .on() documentation but I couldn't find anything on this. Any help is much appreciated.
P.S. I know it should be in a separate question, but is there an easy way to make a text-field always in focus? I want to make it so that no matter where the user clicks or whatever, if they type, the text will still show up.

Use .keyup() event because when you first press (keydown), the letter is never typed so the var html is getting previous value. For second part you can bind keypress event in document to focus your input field.

how to change the text color using jquery or javascript

I have a two items(rows) in the list box
I love to work with jquery
i love to work with javascript
I have textbox and button when I enter love in the text box when I click button i need to loopthrow this list box to find the text love and change that love text color? to yellow.
thanks

first of all, jQuery is javascript, it's a library written in javascript.
So, If I understand your problem, you have 3 interactive elements on your page:
a list box containing a list of words
a text field for the user to enter a word
a button for the user to click when he has written the text.
And you want the option to change color when the user clicks the button.
the code for thsi would be something like this:
$("#mybutton").click(function(){
var text = document.getElementById("mytextinput").value
$("#lstCodelist option").each(function (){
if(this.text()===text)
this.css('color':'yellow');
});
});
this is what happens:
line 1: I define a click handler when the button gets clicked.
line 2: I get the text from inside the textbox, I use getElementById to avoid the overhead of using jQuery for something that simple
line 3: I loop over each of the items in the list.
line 4: if the string in the textbox equals the text inside the option:
line 5, change the css property of the list option.
So no, this is not affecting the text, it only edits the css.

for changing text box color, you can add class to the element
addClass("myClass yourClass");
http://api.jquery.com/addClass/

Running function only if a certain element isn't burring

im making an application that creates a text input where ever you click. I was having a problem where whenever you would click inside the field another text field would appear but i managed to fix that. I have one last major issue that I just can't solve. I know ou can't use blur() and focus() as arguments (though it would be nice) but i need to find a way so that after you enter text into the input field and out click, it just blurs the input box and doesn't create another until the user clicks again.

Just create a variable to keep track or only use a certain ID for the input you create, then check for that variable or input element before creation..
if(!$("#myDynamicInputElement").length){
//TODO: Create your element..
}

How to prevent multiple html selection box displayed on screen?

I have been working on the last bit of my php + ajax based datagrid project.Everything works as I designed except one thing : I cannot stop user opening multiple selection boxes...
Go my research page and use username "ChenxiMao" and password "accedo" to login(without double quotes).
Note that perhaps the images used in this datagrid would not be displayed when page is loaded for the first time(weird, I am trying to fix this, browser incompatibilities, perhaps).
If you double click on one cell in the "CONSULTANT" column, a html select box would be displayed, you can select one consultant to assign him to this task or unassign the consultant from this task. No problem for this.
The problem is : when user leaves this selection box OPEN, he/she can still open another selection box... My jquery code cannot stop people from opening multiple selection boxes.
You can ctrl-U to see the source code on this page, and check the content inside the "gridview-helper.js" for what I have been done.
I want to let user only open a single selection box. When he/she leaves the cell, the selection box should be closed, without changing the html inside...
Puzzled, screwed up for this afternoon...
Thanks for any suggestons in advance!

JavaScript is single-threaded, so you can add a mutex variable and check its value before opening a new select box.
At the top of gridview-helper.js:
var is_choice_visible = false;
In your double-click handler:
$(this).dblclick(function()
{
if (is_choice_visible)
return;
is_choice_visible = true;
...
For your select box, add an onblur handler which sets is_choice_visible back to false and deletes itself.
Unrelated tip: Growing a string in a loop is slow on older versions of Internet Explorer. It's more efficient to append to an array and join the array, e.g.:
var html = ["<select>..."];
for (var i in consultantnames)
{
html.push("<option>...</option>");
}
html.push("</select>");
return html.join("");

Have you tried using the onmouseout event on the cell, and removing the child dropdown box element if mouse out is triggered? Seems that should work.