Develop Reference

Triggering spellcheck after attribute change

I have a contenteditable div with spellcheck set to false. I have a button that when clicked, changes the spellcheck attribute to true, but the spellcheck won't kick in until I click inside the div. I have tried triggering events for click, focus, blur, change etc. on the div, and nothing causes the red lines to appear. This is in old jQuery 1.8 (legacy app). is there a trick to this?
$('.spellcheck').live('click', function() {
$('#editor').attr('spellcheck', true);
$('#editor').click();
$('#editor').focus();
$('#editor').blur();
$('#editor').change();
});
I have also wrapped the events in a 1 second setTimeout to get past any asynchronous race conditions, but no luck.
HTML Part:
<div id="editor" class="editor" contenteditable spellcheck="false"></div>
<button class="spellcheck">Check Spelling</button>
this isn't really a problem of contenteditable, it happens on a normal div as well.

Click the button, it adds the spellcheck attribute and then sets focus to the #editor div. Spellcheck is active and underlining misspelled words.
Here it is in jQuery 1.8.1:
$('.spellcheck').click( function () {
$('#editor').attr('spellcheck', true);
$('#editor').focus();
});
#editor {
width: 200px;
height: 100px;
border: 1px solid #e0e0e0;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div id="editor" contenteditable spellcheck="false">
somme mispellled wordds
</div>
<button class="spellcheck">Check Spelling</button>
Here's the same code in a different snippet, this one running jQuery 1.2.3:
$('.spellcheck').click( function () {
$('#editor').attr('spellcheck', true);
$('#editor').focus();
});
#editor {
width: 200px;
height: 100px;
border: 1px solid #e0e0e0;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="editor" contenteditable spellcheck="false">
somme mispellled wordds
</div>
<button class="spellcheck">Check Spelling</button>

Onmousedown javascript not triggered

I've tried to add a hover class to my html element with the following code:
.block {
height: 50px;
width: 200px;
background: yellow;
}
.shadow {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block"
onmouseover="$(this).addClass('shadow');"
onmousedown="$(this).toggleClass('shadow');"></div>
The class will be added on mouseover but it won't be removed onmousedown.
Why?

Your code is correct. Check this link:
https://www.w3schools.com/code/tryit.asp?filename=FWXV3Y8JXYTI
Note: onmosedown means when the mouse button is pressed! It's different from mouseout.

CSS focus on child element change a parent element

I want to style a form that has the label and input inside the form field and when I'll write something inside the input (probably with focus), I want the borders to light up with some blue. Now I have something like this:
HTML
<div class="login-form-field">
<label for="email" class="login-form-label">Email:</label>
<input class="login-form-input" autofocus="autofocus" type="email" value="" name="user[email]" id="user_email">
</div>
CSS
.login-form-input{
margin-left: 20px;
width: 90%;
outline: none;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: 0 0 0px 1000px white inset;
}
.login-form-label {
font-size: 13px;
font-weight: 300;
padding-left: 20px;
}
.login-form-field{
width: 100%;
border-radius: 0px;
height: 6rem;
border: 0.5px solid grey;
box-shadow: 0px 0px 0px;
}
I already tried to select the parent to made some change and other stuff I found on google. The closest I got was to highlight with blue when the mouser was over it with :hover, but i need the color to stay as I'm with the input selected.
.login-form-field:hover {
border-color: blue !important;
}
Here is the JSFiddle, if anyone could help I would be grateful!

You can now do this in pure CSS so no JavaScript is needed.
The new CSS pseudo-class :focus-within would help for cases like this and will help with accessibility when people use tabbing for navigating, common when using screen readers.
.login-form-field:focus-within {
border-color: blue !important;
}
The :focus-within pseudo-class matches elements that either themselves
match :focus or that have descendants which match :focus.
You can check which browsers support this http://caniuse.com/#search=focus-within

You can do like this, where you add an extra div, absolute positioned, which acts as the border, ... and no script is required.
.login-form-input {
margin-left: 20px;
width: 90%;
outline: none;
}
.login-form-label {
font-size: 13px;
font-weight: 300;
padding-left: 20px;
}
.login-form-field {
position: relative;
width: 100%;
border-radius: 0px;
height: 6rem;
box-shadow: 0px 0px 0px;
}
.login-form-field input ~ .login-form-field-border {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 0.5px solid grey;
z-index: -1
}
.login-form-field input:focus ~ .login-form-field-border {
border: 2px solid blue;
}
<div class="login-form-field">
<label for="email" class="login-form-label">Email:</label>
<input class="login-form-input" autofocus="autofocus" type="email" value="" name="user[email]" id="user_email">
<div class="login-form-field-border"></div>
</div>

CSS does not have native support for parent selecting. If your goal is to have .login-form-field have a blue border on focus you're going to have to rely on JavaScript to add the respective CSS.
The following CSS:
.login-form-field.highlight {
border-color: blue;
}
With the following jQuery
$('.login-form-field').hover(function() {
$(this).toggleClass('highlight');
});
Would achieve that goal. I should note that jQuery is certainly not necessary here; it's just what I prefer to use.

React with jquery:
$( document ).ready(function() {
console.log( "ready!" );
$('.login-form-input').focus(function() {
$(this).parent().css( "border", "#99f 2px solid" );
});
$('.login-form-input').focusout(function() {
$(this).parent().css( "border", "" );
});
});

Although this is an old answer. I am answering this so anyone who lands here can use just CSS to achieve this.
Use CSS3 pseudo element: focus-within
You could do:
form:focus-within {
border-color: blue !important;
}

if you want to give the border color when the input is active you can add like this:
.login-form-input:focus {
border:1px solid blue;
}

trying to toggle a container on one click

I am trying to make a div container expand and contract every time an even handler is clicked.
However, every time I load the page, I have to click the even handler twice to expand it for the first time, after that it works with one click but I would like to only click it once to get it to expand upon page reload.
CSS:
#bodywrap1{
border-radius: 5px;
height: 00px ;
width: 80% ;
overflow: hidden;
border-top: solid 2px rgba(0,0,0,0.3) ;
border-bottom: solid 2px rgba(0,0,0,0.3) ;
Javascript:
function expand(){
$("#bodywrap1").toggle(function(){
$("#bodywrap1").animate({height:600},200);
});
}
HTML:
<h2 onclick = "expand()" id = "expandv">Expand</h2>
Here is the site im working on, and the page specifically.
http://hourtimeagent.com/html/c++.php

Toggle works based on the display property, so set the display: none to the bodywrap1
When the first click happens, since the display is not set, instead of displaying the element toggle() hides it, to fix it set
#bodywrap1 {
border-radius: 5px;
height: 0;
width: 80%;
overflow: hidden;
border-top: solid 2px rgba(0, 0, 0, 0.3);
border-bottom: solid 2px rgba(0, 0, 0, 0.3);
/*new property*/
display: none;
}

The reason it's taking two clicks is because the .toggle hides the #bodywrap1, and then on second click it shows the #bodywrap1 and animates the height.
I fixed this by using .toggleClass instead and changed some things around with the css
http://jsfiddle.net/PUCLM/1/
HTML
<h2 id="expandv">Expand</h2>
<div id="bodywrap1">
</div>
CSS
#bodywrap1{
border-radius: 5px;
height: 0px;
width: 80%;
overflow: hidden;
border-top: solid 2px rgba(0,0,0,0.3) ;
border-bottom: solid 2px rgba(0,0,0,0.3) ;
background: blue;
}
#bodywrap1.theclass {
height: 600px;
}
jQuery UI (you can only animate height with jQuery UI, not plain jQuery)
$('#expandv').click(function() {
$("#bodywrap1").toggleClass('theclass', 500);
});

Your html is not correctly written, remove from <head> tags h1 and h2.
<head>
<link rel="stylesheet" type="text/css" href="../css/c++.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<h1>C++</h1>
<h2 id = "expandv">Expand</h2>
<h1>Variables</h1>
<!-- ... -->
Change your javascript for the following:
$(function() {
function expand() {
$("#bodywrap1").toggle(function(){
$("#bodywrap1").animate({height:600},200);
});
}
// Click function for #expandv item
$("#expandv").on("click", function() { expand(); });
// Initialize a hidden wrap
$("#bodywrap1").css("display", "none");
});
Working jsfiddle: http://jsfiddle.net/TFZ4R/

Button press effect not working in css

I want to have this button pressed effect in css. I mean for example lets say I press a button then I want to change its css so that it looks pressed. Here is something that I tried. But it's not working. I used example from a site. But the button's size gets smaller and it looks different. Here is the link for the code http://jsfiddle.net/goku/GdD34/
.pressed{
position:relative;
top: 3px;
color: #fqq;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
input.happy {
background-image: url(/img/happy.png);
background-color: transparent;
background-repeat: no-repeat;
border: none;
width: 64px;
height: 64px;
margin: 10px;
cursor: pointer;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow: 0px 3px 5px #000;
-moz-box-shadow: 0px 3px 5px #000;
-webkit-box-shadow: 0px 3px 5px #000;
}
$('.happy').click(function() {
alert('hello');
$('.happy').attr('class','pressed');
});
<input type="button" class="happy">

Just used the :active pseudo-class.
input.happy:active { /* Your style */ }

This is happening because you're replacing the class and not adding a new one. you should use :
$('.happy').addClass('pressed');
Instead of :
$('.happy').attr('class','pressed');
Because when u do that you remove all the css you previously applied to it. Your other option it to add the width/height or any other css to the pressed class.

There are a few things in your code (fiddle):
I guess you want to use a javascript framework (like jQuery), you did not select one in the fiddle.
You have a typo in the fiddle, inside the function it says $('happy') so no element will be found.
You remove the class "happy" within the javascript and replace it with pressed. Maybe you want to apply both $('.happy').attr('class', 'happy pressed'); But then for change .pressed to input.pressed and move below .happy
Perhaps you don't want all buttons to change, use use $(this).attr(...) inside the function

I'd suggest you change the order of your CSS, the and the JS to:
<style>
input.happy {
background-image: url(/img/happy.png);
background-color: transparent;
background-repeat: no-repeat;
border: none;
width: 64px;
height: 64px;
margin: 10px;
cursor: pointer;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow: 0px 3px 5px #000;
-moz-box-shadow: 0px 3px 5px #000;
-webkit-box-shadow: 0px 3px 5px #000;
}
input.happy.pressed{
position:relative;
top: 3px;
color: #fqq;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
</style>
<script>
$(function(){
$(".happy").click(function(){
$(this).addClass("pressed");
});
});
</script>
<input type="button" class="happy">
Note, the "$(function(){" bit says "do this after page load". "addClass" will add the class to the list of classes for an element, but the event must be assigned after the DOM has loaded.
Also, you must use '$(this)' instead of '$(".happy")' inside the click function as to only apply the style to the button that was clicked.

You had some syntax errors.
Best event for this isn't .click(), its .mousedown();
When you click the Button without Releasing:
$('.happy').mousedown(function() {
$('.happy').attr('class','pressed');
});
I believe now it's working : http://jsfiddle.net/HKZ7M/
Then when you release the mouse, give it back the old class.
When you Click the Button then Release it
$('.happy').mousedown(function() {
$('.happy').attr('class','pressed');
$('.pressed').mouseup(function() {
$('.pressed').attr('class','happy');
});
});
It's working : http://jsfiddle.net/Xx2Gn/
Important Note: The .pressed button is smaller than the .happy button, when you release the mouse you have to make sure that the pointer will be above the new .pressed button, that's why you must make them the same size.