When search input is :focus make the surrounding div black - javascript

On my site unbotttled.com
in the menu the surrounding div of the search form turns black when I hover over it. What I want is when the input field is clicked on or in focus I want the surrounding div to turn black even when I stop hovering. Any help would be appreciated greatly.

You can just use jQuery to find when it is in focus and set the background color to your liking:
HTML:
<div id="out"><form method="get" id="searchform" action="http://www.unbotttled.com/">
<input type="text" class="field" name="s" id="s" placeholder="">
</form>
</div>
jQuery:
$('.field').focus(function() {
$('#out').css('background-color','black');
});
fiddle: http://jsfiddle.net/yZhC3/

You will have to use javascript for this, as far as I know.
with jquery:
$search = $('.my-search-bar-input');
$search.on(':focus', function () {
$search.parent().addClass('.selected');
})
.on(':blur', function () {
$search.parent().removeClass('.selected);
});
and css:
.my-search-container.selected, .my-search-container:hover {
background-color: #333; // Your color
}
Something like that should work.

Related

How do i change the backgroundcolor of a form element when clicked?

I've been trying to figure out how I can change the background color of a form element when it is clicked on.
Heres the code:
<form id="form">
<input type="text" placeholder="text"/>
<input type="password" placeholder="more text" />
</form>
<script>
</script>
I'm trying to make it so the form element where it says "text" turns green when clicked, and the form element where it says "more text" turns red when clicked.
I've tried this, which didn't work:
<script>
let form = document.queryselector('input type="text"');
form.addEventListener('click', () => {
form.style.backgroundColor = 'green'
});
</script>
I'm very new to coding, so any help is very much appreciated! Thanks!
you should write ('input[type="text"]');
<script>
let form = document.querySelector('input[type="text"]');
form.addEventListener("click", () => {
form.style.backgroundColor = "green";
});
</script>
If you just want the input background to change color while it's focused. You can achieve this by using CSS selectors. No need for JS
input[type=text]:focus {
background-color: red;
}
Or if you want the form background to change
form:focus-within {
background-color:red;
}
The issue is with this line:
let form = document.queryselector('input type="text"');
First of all - the querySelector() method is camel cased - note the capital S. Secondly, your selector is not quite correct - you're looking for: input[type="text"]:
let form = document.querySelector('input[type="text"]');
form.addEventListener('click', () => {
form.style.backgroundColor = 'green'
});
<form id="form">
<input type="text" placeholder="text"/>
<input type="password" placeholder="more text" />
</form>
Notice though that this doesn't change the background colour back once you focus out - you might be better off adding event listeners for the focusout, focusin and maybe blur events - but better still, you can use CSS:
form input[type="text"]:focus {
background-color: green;
}
I would recommend add and Id or a css class into your input tag then you can use querySelector --> https://www.w3schools.com/jsref/met_document_queryselector.asp

JQuery Dropdown behavior

really new to JQuery.. like 2 hours new. Began to write a drop down menu for a login box like this:
HTML:
<button id="loginButton">Login</button>
When you hover over that, this JQuery runs:
$('#loginButton').live('hover', function() {
login_drop();
});
function login_drop(){
$('#loginBox').fadeIn();
}
$('#loginButton').live('hover', function() {
login_away();
});
function login_away(){
$('#loginBox').fadeOut();
}
And then this HTML DIV appears directly under the button:
<div id="loginBox">
<label for="email_B">Email Address</label>
<input type="text" name="email_B" id="email_B" />
<label for="password">Password</label>
<input type="password_B" name="password_B" id="password_B" />
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
<span>Forgot your password?</span>
</div>
and the CSS on that DIV is this:
#loginBox {
position:absolute;
top:70px;
right:100px;
display:none;
z-index:1;
}
This all works, but the behavior of it stinks. How do I make it so you can hover over the button put your mouse in the newly appeared DIV and the div won't fade away until your mouse leaves the div?
Sorry if my coding stinks.
Thanks a bunch guys!
--------------------------------EDITS AKA the ANSWERS--------------------
So for all of you reading this down the line. There are so many ways of making this work depending on how you want the user to interact with it.
Here is way 1...This way the login box fades out when your mouse leaves the login button. This is a quick way fo making it work. This answer is thanks to elclanrs besure to Up 1 his answer below if you like this.
JQuery:
$(function(){
$('#loginButton').mouseenter(function(){ $('#loginBox').fadeIn(); });
$('#login').mouseout(function(){ $('#loginBox').fadeOut(); });
});
HTML:
<div id="loginBox">
<label for="email_B">Email Address</label>
<input type="text" name="email_B" id="email_B" />
<label for="password">Password</label>
<input type="password_B" name="password_B" id="password_B" />
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
<span>Forgot your password?</span>
</div>
CSS:
#loginBox {
position:absolute;
top:70px;
right:100px;
width:200px;
height:200px;
display:none;
z-index:99;
background:url(../images/162.png);
}
WAY 2 is adding is a cancel button like Jared Farrish did here:
http://jsfiddle.net/j4Sj5/4/
if you like his answer, be sure to vot him up below!!
and WAY 3 is what I'm attempting now and should be the most user friendly and flashy. I'll post back once I get it to work correctly!
Ah this is a great one to do yourself. Here's how to do it. First off, live might be overkill for what you need to do. In your case you can use a standard hover event handler in jQuery:
$('#loginButton').hover(function() {
$('#loginBox').fadeIn();
}), function(){
$('#loginBox').fadeOut();
});
The real trick here is that you will trigger the mouse out effect as soon as your mouse moves off the button. This will make the menu disappear when the mouse enters the login box!
So what you actually want to do is handle the hover effect on a containing element. Make sure your #loginButton and #loginBox are contained in a parent element like so:
<div id="loginControl">
<button id="loginButton">Login</button>
<div id="loginBox">...</div>
</div>
Then attach the event to the loginButton's parent:
$('#loginButton').parent().hover(function() { ... }), function(){ ... });
Also, if you are using absolute positioning on #loginBox you'll want to also make sure you use position: relative on it's parent (#loginControl in my example):
#loginControl{ position: relative; }
Let me know if you have any trouble.
Getting More Advanced:
If you want to take this a step further you can try out implementing a simple timeout. I learned early on that it's bad for usability to have a dropdown menu that disappears when I accidentally moved my mouse off the dropdown. To fix this I add a simple delay that prevents the dropdown from hiding if the user's mouse returns to the dropdown within a very short period of time (say 250 to 350ms). I have this as a gist on github in case you want to try it out later: https://gist.github.com/71548
EDIT
(Subsequent EDIT: added a timeout to hide after only a mouseover on the show login element, plus some other updates.)
While I still think using mouseenter and mouseout to handle a login form is not the right way to go from a usability perspective, below is code that demonstrates what Jim Jeffers is describing and attempts to handle some of the pitfalls of the approach:
var setuplogindisplay = function(){
var $loginbox = $('#loginBox'),
$loginshow = $('#loginShow'),
$logincontainer = $('#loginContainer'),
$cancellogin = $('#cancelLogin'),
keeptimeout,
closetimeout;
var keepDisplay = function(){
clearAllTimeouts();
keeptimeout = setTimeout(loginHide, 2000);
};
var loginDisplay = function(){
clearAllTimeouts();
if ($loginbox.is(':hidden')) {
$loginbox.fadeIn();
}
};
var loginHide = function(){
clearAllTimeouts();
if ($loginbox.is(':visible')) {
if (!$(this).is('#cancelLogin')) {
closetimeout = setTimeout(function(){
$loginbox.fadeOut();
}, 1500);
} else {
$loginbox.fadeOut();
}
}
};
function clearAllTimeouts() {
if (keeptimeout) {
clearTimeout(keeptimeout);
}
if (closetimeout) {
clearTimeout(closetimeout);
}
}
$loginshow.mouseover(loginDisplay);
$loginshow.mouseout(keepDisplay);
$logincontainer
.mouseout(loginHide)
.children()
.mouseover(loginDisplay)
.mouseout(keepDisplay);
$cancellogin.click(loginHide);
};
$(document).ready(setuplogindisplay);
http://jsfiddle.net/j4Sj5/19/
Note, you have to make concessions to handle the fact mouseouts will fire when you mouse over elements within the #logincontrol element. I handle this by having them loginDisplay() on mouseenter event (it will work on mouseout, but it makes more logical sense on mouseenter).
I would keep in mind usability of the form when trying to access it and try not to get too clever or over-engineer the user experience. Consider:
<input type="button" id="cancelLogin" value="Cancel" />
Use this to close/hide the form, not an action on another element. If you put the close form action on an event like mouseout, you're going to aggravate your users when they move the mouse accidentally or intentionally out of the way, only to find the login form was closed when they did so. The form, IMO, should have the control which fires the event to hide it according to the user's choice.
<span id="loginButton">Show Login</span>
<div id="loginBox">
<label for="email_B">Email Address</label>
<input type="text" name="email_B" id="email_B" />
<label for="password">Password</label>
<input type="password_B" name="password_B" id="password_B" />
<input type="submit" id="login" value="Sign in" />
<input type="button" id="cancelLogin" value="Cancel" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
<span>Forgot your password?</span>
</div>
$(document).ready(function(){
var $loginbox = $('#loginBox'),
$button = $('#loginButton'),
$cancellogin = $('#cancelLogin');
var loginDisplay = function(){
$loginbox.fadeIn();
};
var loginHide = function(){
$loginbox.fadeOut();
};
$button.click(loginDisplay);
$cancellogin.click(loginHide);
});
http://jsfiddle.net/j4Sj5/4/
Instead of reinventing the wheel, I would recommend looking into a jquery plugin like hoverintent. It does most of the work for you.
And, on a related note, .live() is being deprecated in jquery as of v1.8. you should instead use .on().
This should work. Plus you don't need live() which by the way is deprecated in favor on on(). You also don't need those functions for a simple fadeIn()/fadeOut():
$('#loginButton').mouseenter(function(){ $('#loginBox').fadeIn(); });
$('#loginBox').mouseout(function(){ $(this).fadeOut(); });

jQuery taking control over label's border color

My jQuery function looks like that
$('input[type="text"]').focus(function() {
$("label").css("border-bottom-color", "red");
});
$('input[type="text"]').blur(function() {
$("label").css("border-bottom-color", "#e6e6e6");
});
1) I have a bunch of text inputs in my form. What I want to do is to change bottom border color of focused text boxes label (there is one label for every text box. And I want to change only focused text boxes label's border color). But my functions changes all labels' border colors at once. How to fix that problem?
2) I have 2 forms. with id's form1 and form2. I want to do same things to second form but color will be another. How to modify this func?
My forms are looking like that
<form id="form1">
...
<label for="fname">First Name</label>
<input name="fname" placeholder="please enter your first name" type="text" />
...
</form>
<form id="form2">
...
<label for="job">Your Job</label>
...
<input name="job" placeholder="please enter your job" type="text" />
</form>
How about this fiddle?
http://jsfiddle.net/RvYca/3/
label tag's for attribute references to an input's id attribute, not its name.
I moved the styles to css too.
Use both CSS and JavaScript:
$('input:text, input:password, textarea').focus(
function(){
$(this).prev('label').addClass('focused');
}).blur(
function(){
$(this).prev('label').removeClass('focused');
});
And, in the CSS:
#form1 label.focused {
border-bottom: 1px solid red;
}
#form2 label.focused {
border-bottom: 1px solid green;
}
JS Fiddle demo.
For question 1, use $(this) as your selector:
$('input[type="text"]').focus(function() {
$(this).css("border-bottom-color", "red");
});
$('input[type="text"]').blur(function() {
$(this).css("border-bottom-color", "#e6e6e6");
});
For question 2, do you mean, after the user has selected both items, in either order? They can't both be in focus at the same time.
your selector is not specific enough for manipulating the css. You must be specific about which label you want to update. Something like this:
$('input[type="text"],textarea,input[type="password"]').focus(function() {
$("label[for='" + $(this).attr('id') + "']").css("border-bottom-color", "red");
});

How to bind to browser change of input field? (jQuery)

Please take a look at this:
http://jsfiddle.net/sduBQ/1/
Html:
<form action="login.php" method="post" id="login-form">
<div class="field">
<input name="email" id="email" type="text" class="text-input" value="E-mail" />
</div>
<div class="field">
<input name="code" id="code" type="password" class="text-input" />
<div id='codetip'>Access Code</div>
<label class="error" for="code" id="code_error"></label>
</div>
<br />
<div class="container">
<a id="submit" class="link-2">Access</a>
</div>
</form>
CSS:
a {
border: solid 1px #777;
padding:5px;
}
#codetip {
position:absolute;
margin-top:-20px;
margin-left:5px;
}
Javascript:
$('#email').focus(function(){
if($(this).val()=='E-mail'){$(this).val('');}
});
$('#email').blur(function(){
if($(this).val()==''){$(this).val('E-mail');}
});
$('#code').focus(function(){
$('#codetip').hide();
});
$('#code').blur(function(){
if($(this).val()==''){$('#codetip').show();}
});
$('#codetip').click(function(){
$(this).hide();
$('#code').focus();
});
$('#submit').click(function(){
$(this).submit();
});
The problem is that at least in Chrome(haven't tried other browsers yet) when the Chrome Password Manager saves your password and prefills the password for you when you pick the email. I use jquery to hide/show a div over the top of the password input field as a label, hiding that div when the user clicks into the password field (as can be seen in the above jsfiddle code). I need to know how to hide that div when Chrome prefills the password field...
I've haven't run into this myself, but it appears to be a common issue, based on a few quick Google Searches.
FireFox capture autocomplete input change event
http://bugs.jquery.com/ticket/7830
One easy hack you could do is set up some code that runs every second or two via setInterval, and checks to see if the field has a value.
Something like this...
var code = $('#code');
var codeTip = $('#codetip');
var interval = setInterval(function(){
if (code.val()!=''){
codeTip.hide();
clearInterval(interval);
}
}, 1000);
I had the same issue. None of the solutions I found worked nicely enough. I ended up with this:
If it doesn't matter that your input fields have a background, I handled it just in CSS.
jsfiddle
I just gave the .inputPlaceholder { z-index: -1; } so that it aligned behind the input field and then set the input { background: transparent; } so you could see the div behind it.
Google's default -webkit-autofill style has a yellow background, so that just covers up your placeholder behind it all. No need to mess around with custom plugins/events/setIntervals.

How to do this box in Javascript?

I'm trying to do the following sort of thing in Javascript, where you click on the down arrow and it expands downward and displays options (I'll have some input fields and checkboxes and text and stuff in there).
Can anyone please help me out or point me in the right direction, I've tried google searching but I have no idea what they're even called in the Javascript world. "Javascript expanding box", "javascript drop down box", "javascript expanding modal dialog", etc. Nothing seems to hit.
Here's the example:
http://imageshack.us/f/810/examplebe.jpg/
There will be a submit button in the top section (not in the expand section), which will submit the options in the drop down menu as well as the options in the section near the submit button.
Thanks!
Set your markup something like this:
<div class="expandingBox" id="expandingBox">
<div id="expandingBoxContent">
//Content here
</div>
</div>
Expand
and in your CSS, the expandingBox class should be set to:
.expandingBox
{
height: <your initial box height here>
overflow: hidden;
// other styling here
}
Then to get it to expand, you can do something like:
$('#expandButton').bind('click', function(){
var contentHeight = $('#expandingBoxContent').height();
$('#expandingBox').animate({ height: contentHeight }, 1000);
}
a little demo. it may help you
HTML:
<input id="login_button" type="button" value="∨" />
<form name-"myForm" id="login_form" style="height:150px">
<div id="toggle" style="width:150px; height:100px;position:absolute;top:30px;left:20px;background:#9BCDFF;display:none;padding:10px">
<label for="name">Name:</label>
<input type="text" name="name" />
<label for="password">Password:</label>
<input type="text" class="password" />
</div>
<input type="submit" id="#submit" value="Submit" style="position:absolute; top:150px"/>
</form>
JQUERY:
$('#login_button').click(function(e) {
$('#toggle').slideToggle(1200,
function() {});
});
$('#submit').click(function() {
$('form[name=myForm]').submit(function() {
alert('form submit');
});
});
$('#toggleBtn').click(function(){ $("#toggleBox").toggle();});
If you're using jQuery, I think you might want to look at the jQuery UI implementation of the collapsible accordion.
THere is an inbuilt jquery effect 'SlideDown'. Check it here: http://api.jquery.com/slideDown
It should not be really difficult. You can use jQuery animation effects for that.
Some code example, just to give you direction:
// html
<div id="some-container">Click me!</div>
<div id="some-container-to-show">Hey, I'm appeared on screen!</div>
// js
$(function () {
$("#some-container-to-show").hide();
$("#some-container").live("click", function () {
$("#some-container-to-show").slideDown();
});
});

Categories

Resources