We Keep Coding

On input focus make background look like modal

On my webpage, I have a footer which has a textarea box. When the user clicks in the textarea, I want the rest of the page to darken by 60%, kindof like they are in a modal. I am a noob when it comes to advanced css so I am unsure of the properties to apply.
I am using bootstrap 3, javascript and knockout. I know how to detect when the user is in the text area I just want to change the background so everything else is opaque.
A jsFiddle would be wonderful as well :)

We use a combination of CSS and JQuery JavaScript for that. You'd basically use some Overlay method first to overlay the whole page (e.g. See Technique #1 from the Link).
With the help of JavaScript, We attach to events of the forms to:
Show the Overlay
Make the required form elements, e.g. the first Div inside the form, appear above the Overlay ("z-index" CSS attribute)
CSS:
Overlay has Z-Index 10, so give the relevant element the Z-Index 11 to appear on top:
form > div { z-index: 11; }
this JQuery JavaScript can look like this:
$(document).on("focus", "textarea", function() {
$(".overlay").show();
});
Beware, this is not only a "background" topic, if you want to prevent users to do any interaction with the page, you need an overlay which actually blocks clicks. Also, in our case, we also had to prevent any links to be triggered which are below the overlay. Users were still able to go through the links using the TAB key on they keyboard to navigate to a button and click it using the Space key, so we also added JavaScript code to prevent that when in editing mode.
EDIT: a very basic Fiddle

Here is how I would do this - When the user clicks in the text area, set a class on body, and style the class.
with jQuery (you can use vanilla js too)
$('.my-textarea').on('focus', function() {
$('body').addClass('dark');
});
$('.my-textarea').on('blur', function() {
$('body').removeClass('dark');
});
body.dark {
background-color: #333;
opacity: 0.6;
}

A good solution is to make a modal appear behind the input and not just making the background darker, this can be accomplished with css alone
...
<style>
textarea:focus{
z-index: 901;
position: relative;
}
textarea ~ .textarea-modal{
position: fixed;
background-color: transparent;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 900;
pointer-events: none;
transition: background-color .5s ease;
}
textarea:focus ~ .textarea-modal{
pointer-events: auto;
background-color: rgba(0,0,0,0.3);
}
</style>
...
<div>
<textarea></textarea>
<div class="textarea-modal"></div>
</div>
...
feel free to change the selectors to target specific elements, however at the moment when you focus on the textarea a modal would appear below it with other elements behind.

Asp.net wizard control active/current tab loses CSS effect on postback

I have a wizard control which I have customized using Jquery and Css to look like this :
But I want it to look like this:
The blue one being the currect/active link/tab.
I tried using this:
.tab a:active
{
background: none repeat scroll 0% 0% #EEEEEE;
color: #FFF;
cursor: default;
}
But it shows the effect only as long as I keep the mouse key pressed. As soon as postback occurs it loses its effect, which makes sense but how do i make it stay?

Dropdown on focus not positioning itself above following div

I've got a drop down div on focus of a <input type='text'> box as follows
http://jsfiddle.net/Newtt/7ffdF/
I need the dropdown box to appear above the container-box div that follows the search box. Currently it's pushing the div downwards. Is there a way I can make this text box behave like a select tag without having to use the select tag.
My CSS for the dropdown div is
display:none;z-index:200;
On focus of the search box, the div appears using:
$('#text-box').focus(function(){
$('.dropdown').show();
});
I also need the div to disappear on removing focus.
Summarizing, I've got two questions:
Regarding the positioning of the drop box
Toggling of the dropdown on and off focus of the search box.
Thanks!

You can use position:absolute; for the dropdown. And also use Jquery event blur on text field to hide it
JS FIDDLE DEMO
JS
$(document).ready(function(){
$('#text-box').focus(function(){
$('.dropdown').show();
});
$('#text-box').blur(function(){
$('.dropdown').hide();
});
});
CSS
.container-box {
height:400px;
width:400px;
background: #ccc;
}
.dropdown{
display:none;
position:absolute;
z-index:200;
}
.dropdown ul {
padding :0;
background : #ddffaa;
}
Styling the drop-down is in your hands :)

You can use position: absolute; to stop the dropdown from being in document flow, so it doesn't interrupt other elements.
You can also use .blur() for what to do when there's no focus.
http://jsfiddle.net/7ffdF/12/
CSS:
.dropdown {
display: none;
z-index: 200;
position: absolute;
background-color: #eee;
width: 400px;
}
And jQuery:
$('#text-box').blur(function() {
$('.dropdown').hide();
});

Set the div position to absolute....
div.dropdown{
width:170px;
border:1px solid #ccc;
position:absolute;
background-color:#fff;
}
I set up a good example for you on this JS Fiddler

How to disable temporary cursor with javascript?

Following my code:
HTML:
<div>test</div>
CSS:
div:hover{
background-color: black;
}
How to disable temporary cursor when the cursor is over (even ignoring :hover) the div and enter key is pressed and reenable when the cursor is moved with pure javascript?

Well you could use CSS pointer-events which will stop all mouse events working, which includes :hover.
CSS
div:hover {
background-color:black; /* will not happen */
}
div {
pointer-events: none;
}
Demo

You can force specific cursor shapes with the CSS cursor attribute.
div {
cursor: pointer; /* or any other shape available in the link above */
}

Create a transparent gif and use this code:
cursor: url("transparent.gif"), default;

Invert the color of text?

I have a page that scrolls sideways and I have a floating menu. I want the text in the menu to invert the color that is under it. Is there a way to do that with HTML5, Javascript, and/or jQuery?
Added: How would you invert an image when it goes over different parts of the page? CSS?
This is the bit of CSS I use for the menu
body{
background:#000;
font-family:Georgia;
font-size: 34px;
font-style: italic;
letter-spacing:-1px;
width:12000px;
position:absolute;
top:0px;
left:0px;
bottom:0px;
}
ul#banner{
position: fixed;
line-height: 45px;
margin: 0 30px; padding: 0;
}

step1. Get the position of your menu
step2. Remove your menu and get an element that is placed on the position
maybe you can use document.elementFromPoint
step3. Invert the element's color and apply it on your menu
step4. Show your menu again
step5. Repeat it whenever you need to change menu's color(scroll, etc.)

Try to use:
var color = // color in hex.
color ^ 0xFFFFFF (XOR bit operator) to get it?

I wrote a test page.
demo here.
inside body can't write width, or will make the page appears the scroll bar.
including the following knowledge point:
css cover:
.nav .selected .nav-01{background:#f93;}
.nav .selected .nav-02{background:#3c3;}
.nav .selected .nav-03{background:#36c;}
jquery plugin:
(function($){
$.fn.extend({
first: function(){ },
second: function(){}
});
}(jQuery));
jquery call
$(document).ready(function(){
$('#content').scrollPage({
pTag : '.list',
menu : '.nav',
speed : 600
});
})