Develop Reference

Make element selected/active (like when you using tab)

I am trying to make element lets say button active on page open. By active I mean when u pressing tab buttons elements, tabs and stuff us getting active one after one. But how can I achieve that element is selected defaulty on page start.

Try using:
element.focus();
Link to javascript documentation

All HTML elements have a Boolean attribute autofocus. It does not only work on form elements such as buttons, input fields, dropdowns, but also on focussable elements like <div contenteditable="true">.

Getting control where caret was displayed last

I am creating an app where it is required to add or delete lines to a HTML table.
I programmed the function to add a line to the table in jQuery, like:
function othaddrAddLine(evt) {
var oarow = $("span#othaddrRowToAdd > table > tbody").html();
$("div#tabs-othaddrs > table#TableOthAddr > tbody").append(oarow);
}
$(document).ready(function () {
$("button#othaddr-add").click(othaddrAddLine);
$("button#othaddr-del").click(othaddrDelLine);
});
where that span contains hidden text.
Now I want to program the othaddDelLine function, where I want to delete the line of the table that was in focus.
How can I program this in jQuery or JavaScript? Is it possible to get the text input control where the caret was, in order to get the parent <tr> element and then delete the row.
Thank you.

I would do it in this way:
Add a focus event listener to all the inputs you have in your table, including the ones you add dynamically.
Whenever one of those elements is focused, keep a reference to it in a variable. This will be the "last" focused element.
If the user clicks delete, you can use the reference to that "last" focused input and get its parent in order to delete it.
Hope that helps.

is it possible to change an element on responsiveness?

just wondering if it's possible to change a div to an input at a certain breakpoint?
I have a div that contains some names in and then when I switch to mobile, I want this div to become editable so I can change the names.
I guess I have 2 options, change the element type or make the onChange function only applicable on mobile.
is either possible?
can post code but essentially just want a guide or solution how to do this

First, to detect a mobile browser, you can use
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
Then, on your page, use two elements - the div and the input (or a textarea) and just keep one of them hidden at all times. It seems like you want to listen for a click on the DIV to enable the INPUT, or? And you'll want a key listener on the input to update the DIV as well as another listener to handle hiding the input field and showing the DIV again

Capture click and keystroke events in Javascript, override default behavior?

I've written some JavaScript code using jQuery that listens for the user to click the mouse on different parts of my page with and without holding down the shift key.
I have a table on my page. The idea is that the user can select rows in the table by clicking on them. The user can select multiple rows by clicking one row, holding down shift, and clicking another row. (This is how the user expects to select multiple rows, but holding down the shift key, right?)
Anyways, my code works in Internet Explorer, but I have a problem. My code reads the users selection, but the browser simultaneously highlights the text between the two mouse click locations.
How can I make it so that my code can select the rows based on the user clicks and the browser doesn't select the text?
Update I tried the following code:
$('tr').bind('mousedown',function() { return false; } );
With this code in my page, when I click one row, hold down shift and click another row, the text between the two rows is highlighted. This is what I'm trying to suppress. Please note that the text highlights before I release the mouse button.
Update #2 I tried the following code:
$('tr').bind('mousedown',function(e) {
e.preventDefault();
return false;
});
Unfortunately, this doesn't seem to do anything at all.

It's the mousedown event you want to suppress.
Have a look at event.stopPropogation() and event.preventDefault().

The return value of an event handler is ignored by specification (jQuery might to additional stuff).
You may be looking for preventDefault and returnValue (this latter one was invented precisely because the return value of a handler is ignored).
You may also want to look into the CSS3 property extension -moz-user-select: none.

Try this
$(function(){
$("tableSelector").bind('selectstart mousedown',function () {
return false;
});
});

Switchable selectable text

I have a table which is filled with data from a database. Some javascript allows a user to select certain rows and take some actions. I allow users to click one row and then to shift click another row to create a group (as well as alt-click to select/deselect individual rows).
The problem is I don't like how the text highlights when they shift click. Is there some CSS setting or javascript/jQuery solution to disable the selectable text (cross browser preferablly or just in firefox).
If possible I also want to be able to let the user select text to copy and paste sometimes or inside a textbox form input inside the same table so I would like to be able to enable and disable the selecting of text somehow. Any ideas?

this should do the trick:
$('td').disableSelection();
example:
http://jsfiddle.net/GhfuJ/1/

Here's one way you could completely disable text selection:
$("selector").bind($.support.selectstart ? "selectstart" : "mousedown", function(event) {
event.preventDefault();
});
This is how jQueryUI implements its disableSelection() method.
You could tailor your selector to exclude textarea elements, or wrap code inside the event handler with an if block that evaluates a boolean that gets set under certain circumstances (For example, you could turn on booleans when the user is clicking or shift/alt + clicking).