7. Let's .focus()! Works, but stays red!


#1

https://www.codecademy.com/courses/web-beginner-en-JwhI1/1/3?curriculum_id=50a3fad8c7a770b5fd0007a1

The "input"-field is supposed to turn red when focused, i.e. after I click on it. And it works, there is no Error message afterwards. BUT:

The outline STAYS there, when I click outside of the inbox, so when it's not focused anymore. All it does is, it becomes a little thinner. Is that normal?

I did try setting the outline-style to solid, both directly in the css and in the javascript-file using

$(this).css('outline-style', 'solid'); (script.js, before the line that changes the outline-color)
&
outline-style : solid; (stylesheet.css, created a thick, black border)

but it didn't change anything.

I use Safari.

$(document).ready(function()
{
    $('input').focus(function()
    {
        $(this).css('outline-color', '#FF0000');
    });
});


#2

I just tested your code in my browser(Chrome) working fine! So, I think it might be a browser issue. How does your html and CSS look?


#3

HTML:

<!DOCTYPE html>
<html>
    <head>
		<title>Time to Focus!</title>
		<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
		<script type='text/javascript' src='script.js'></script>
	</head>
	<body>
		<form>
			Name: <input type='text' name='name'></input>
		</form>
	</body>
</html>

CSS:
input {
font-family: Verdana, Arial, Sans-Serif;
outline-style:solid; (creates a thick, black border around the input-box)
}

Okay, now it gets weird: I tried Chrome, and got the same problem: The red border stayed. Then I deleted the "outline-style" in CSS and it worked perfectly. Deleting the same line in Safari made it not work at all anymore: The outline stays blue, as I click on it.

So yep, it's a browser issue :confused:


#4

In chrome,in your CSS file get rid of the outline-style:solid; It should work fine. Oh ok. It says in the exercise actually, the outline-style:solid; is for firefox only.


#5

That's what I did and it solved the issue in Chrome, but Safari doesn't seem to want to work correctly, no matter what.


#6

I just downloaded safari and gave it a try it works! Perhaps, your browser is not up to date.

Also have a look at this link:Stackoverflow


#7

It says "
Oops, try again. Please follow the instructions on the Full Preview page to test your code."


what else i need to do?
Here's my jQ code
$(document).ready(function(){
$('input').focus(function(){
$(this).css('outline-color','#FF0000')
})
});


#8

Cancel, it works, i don't know why


#9

For anyone that seems to have this working but getting the error message "Oops, try again. Please follow the instructions on the Full Preview page to test your code.", it is because you have ignored the first instruction telling you to turn "input" into a jQuery element. Correct code:

$(document).ready(function () {

var $input = $("input");

$($input).focus(function() {
    $(this).css("outline-color","#FF0000")
});

});


#10

I tried both sets of code and for some reason it doesn't change color. Could it be my browser?
$(document).ready(function(){
$('input').focus(function(){
$(this).css('outine-color','#FF0000');
});
});
OR
$(document).ready(function(){
var $(input) = $("input");
$($(input)).focus(function(){
$(this).css('outine-color','#FF0000');
});
});


#11

@webrockstar54776,

Have a close look at

'outine-color'


#14