I've created a search bar when, a user hover overs a button a textbox will appear. What i want to do is keep the text box to stay visible once the user has pressed the text box. So if the user accidentally removes the mouse over the text box or button whilst typing the text box remains in the same place.
Here's my code:
$('#search-button, #search-text').hover(function searchbox () {
$('#search-text').addClass("fixed-textbox");
},function () {
$('#search-text').removeClass("fixed-textbox");
});
#search-text {
left:300px;
position:relative;
}
.search:hover #search-text {
left:0;
position:relative;
}
.search {
background: gray;
display: inline-block;
padding: 10px;
overflow:hidden
}
<div class="search">
<input id="search-text" type="text" placeholder="type here" />
<button id="search-button">SEARCH</button>
</div>
I've done it this way to add transition effects on to the search-text. I was thinking of adding a class on the textbox using javascript, but unsure if this way would work. Also i notice the text box changes position if you type in it with out hovering over the section.
Try adding this new CSS style to keep the box visible when it has focus:
#search-text:focus {
left: 0px;
}
Functional example:
#search-text {
left:300px;
position:relative;
}
#search-text:focus {
left: 0px;
}
.search:hover #search-text {
left:0;
position:relative;
}
.search {
background: gray;
display: inline-block;
padding: 10px;
overflow:hidden
}
<div class="search">
<input id="search-text" type="text" placeholder="type here" />
<button id="search-button">SEARCH</button>
</div>
Just add a check to see if the textbox has focus:
$('#search-button, #search-text').hover(function searchbox () {
$('#search-text').addClass("fixed-textbox");
},function () {
if(!$("#search-text").is(":focus")){
$('#search-text').removeClass("fixed-textbox");
}
});
//hide if focus out
$("#search-text").on("focusout", function(){
//Only if textbox does not have a value
if($("#search-text").val() == null || $("#search-text").val() == ""){
$('#search-text').removeClass("fixed-textbox");
}
});
I think this should do roughly what you are looking for. I decided to use the blur event, rather than the hover event, meaning that the textbox won't disappear until the user clicks elsewhere and they don't have to click on it to start typing.
There's also an animation for the input.
var VISIBLE_CLASS = 'fixed-textbox';
$(function() {
var $text = $('#search-text'),
$button = $('#search-button');
function toggle(bool) {
return function() {
if(bool) {
$text.addClass(VISIBLE_CLASS);
$text.focus();
} else {
$text.removeClass(VISIBLE_CLASS);
}
}
}
$button.on('click', toggle(true));
$button.on('hover', toggle(true));
$text.on('blur', toggle(false));
});
#search-button {
/* show above during animation */
z-index:10;
position:relative;
}
#search-text {
left:300px;
position:relative;
-webkit-transition-duration:0.3s;
}
#search-text.fixed-textbox {
left:0px;
-webkit-transition-duration:0.3s;
}
.search {
background: gray;
display: inline-block;
padding: 10px;
overflow:hidden
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
<input id="search-text" type="text" placeholder="type here"/>
<button id="search-button">SEARCH</button>
</div>
Related
Trying to figure out how to keep the DIV from fading when you click on it. I just want the DIV to fade after you click off anywhere else on the screen, everywhere but the actual "testdiv" and the input field. Skills aren't that strong with javascript, so any help would be appreciated. Thanks.
$(document).ready(function(){
$('.showdiv').focus(function(){
$('.testdiv').fadeIn(1000);
}).focusout(function(){
$('.testdiv').fadeOut(1000);
});
});
body {
padding: 50px
}
.showdiv {
width: 100%;
height: 30px;
padding:10px}
.testdiv{
display:none;
margin-top:0;
width:auto;
background-color: #efefef;
padding: 20px;
font: 12px Arial, san serif;}
*:focus{
outline:none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" class="showdiv" Placeholder="Search by Keyword"/>
<div class="testdiv">
<input type="checkbox"> Search only open source materials
</div>
Here is a JSFiddle example.
I'm not in love with this because it could be confusing to the user, but it works. It doesn't work if you tab to the checkbox.
$('.showdiv').focus(function() {
$('.testdiv').fadeIn(1000);
}).focusout(function() {
$('.testdiv').fadeOut(1000);
});
$('.testdiv input').change(function() {
$('.testdiv').stop(); // end animation on the faded element
$('.showdiv').focus(); // return focus to reinstate the focusout handler
});
Demo
How it works
I am building a demo search box where the search results show up when the input field is not empty while focusing in. When you blur the search results container hides.
Problem
The problem appears when I click the search results container. The input field blurs with the result that the search results container hides.
How to make it work so that the search results container does not hide when clicking it (or an element inside it).
HTML
<div class="searchbox">
<input class="input">
<div class="search-results">
// Results
</div>
</div><!--End .searchbox-->
jQuery
$('.searchfield .input').focusin(function() {
// When value is not empty show search results
if ($(this).val() !== '') {
$('.searchbox .search-results').fadeIn(10);
}
// Other code
}).focusout(function() {
// Hide search results
$('.searchbox .search-results').fadeOut(10);
// Other code
});
I fixed my problem by adding a delay on the fadeout during the blur. This way I was able to click the button inside the container.
$('.searchfield .input').focusin(function() {
// When value is not empty show search results
if ($(this).val() !== '') {
$('.searchbox .search-results').fadeIn(10);
}
// Other code
}).focusout(function() {
// Hide search results
$('.searchbox .search-results').delay(300).fadeOut(10);
// Other code
});
You don't necessarily need JS / jQuery.
Try with required attribute and CSS's :valid to achieve the desired
.searchbox {
position: relative;
}
.searchbox .search-results {
position: absolute;
top: 100%;
visibility: hidden;
opacity: 0;
transition: 0.3s;
background: #eee;
padding: 1rem;
}
.searchbox .input:valid + .search-results {
visibility: visible;
opacity: 1;
}
<div class="searchbox">
<input class="input" required>
<div class="search-results">
<p>Register to use this feature</p>
<button>JOIN NOW</button>
</div>
</div>
<p>Lorem ipsum...</p>
If you prefer jQuery instead:
$(".input").on({
"input focus": function() {
$(this).closest(".searchbox").toggleClass("showInfo", !!$.trim(this.value));
},
"blur": function() {
$(this).closest(".searchbox").removeClass("showInfo");
}
});
.searchbox {
position: relative;
}
.searchbox .search-results {
position: absolute;
top: 100%;
visibility: hidden;
opacity: 0;
transition: 0.3s;
background: #eee;
padding: 1rem;
}
.search-results:hover,
.searchbox.showInfo .search-results {
visibility: visible;
opacity: 1;
}
<div class="searchbox">
<input class="input">
<div class="search-results">
<p>Register to use this feature</p>
<button>JOIN NOW</button>
</div>
</div>
<p>Lorem ipsum...</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Might not seem obvious at first, but the :hover helps to keep the element visible when interacting with it's content.
Using the last example of this guide (http://www.learningjquery.com/2009/02/slide-elements-in-different-directions), I am trying to get a div to toggle 'behind' a button.
Desired Result Example:
Initially the div including input fields, Button B, and Button C will be hidden. When 'Slide it' button is clicked, the div slides in FROM behind the button until a specific distance (margin) is met between the RIGHT side of the div and the 'Slide it' button.
Upon clicking the button again (and/or when 'Esc' key is pressed), the div will slide "into" the button.
Here is the script, followed by the demo:
$('#button1').click(function() {
var $marginRighty = $('.inner');
$marginRighty.animate({
marginRight: parseInt(
$marginRighty.css('marginRight'),10) == 0 ?
$marginRighty.outerWidth() : 0});
});
https://jsfiddle.net/ishq786/xqb5a7dq/
Fiddle: https://jsfiddle.net/xqb5a7dq/6/
$('#button1').on('click', function() {
animateDiv();
})
$(document).keyup(function(e) {
if (e.keyCode === 27 && $('.inner').hasClass('visible')) {
animateDiv();
}
})
function animateDiv () {
$('.inner').toggleClass('visible');
$('.inner').animate({
width: 'toggle',
},350);
}
.toolbar {
width: 100%;
display: inline-block;
overflow: hidden;
white-space: nowrap;
margin: 0px auto;
padding: 5px 0px;
background-color: skyblue;
}
#divA,
#divB {
display: inline;
}
.inner {
float: right;
display: none;
padding-right: 20px;
}
#button1 {
float: right;
margin-right: 5px;
}
input,
button {
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='toolbar'>
<div>
<button id="button1">Slide it</button>
</div>
<div class="inner is-hidden">
<div id="divA">
<input type="text" />
<input type="password" />
</div>
<div id="divB">
<button>Button B</button>
<button>Button C</button>
</div>
</div>
</div>
Fiddle.
I've solved some of your problems. I confess I'm not exactly sure how you want the outcome to look so I'll leave the tweaking to you. But two main things;
I have used css to get one on top of the other. I positioned the inner div 100% right, position: relative, and the button over the top now has its parent div set from the right with position: absolute so that it can overlap with no footprint. I literally moved the button lower in the HTML so I didn't have to mess about with z-index, haha.
I moved your Javascript into a separate function so you can call that with a keypress or however you like. This means you won't have code duplication.
I have div containing a form. When user clicks outside of the div it hides - this part works bit to good.
The problem is that while user is selecting text inside div(input, paragraph,...) and his mouse
leaves the modal(clicked state), mouseup event is triggered which causes my div to hide.
How do I ignore the mouseup event when user is selecting text?
Here is what my HTML mark up looks like:
<div class="body">
<button id="show-modal">Toggle modal</button>
<div class="modal">
<input type="text" name="opportunity-name" \>
<button>Submit</button>
</div>
</div>
CSS:
.body {
position: absolute;
width: 100%;
bottom: 0;
top: 0;
height: 100%;
background: green;
}
div.modal {
background: blue;
width: 200px;
height: 130px;
margin: 0 auto;
text-align: center;
padding-top: 70px;
}
JS:
var $modal = $('div.modal');
$('#show-modal').click(function () {
$modal.fadeIn();
});
$(document).mouseup(function (e) {
if (!$(e.target).is('div.modal *, div.modal')) {
$modal.fadeOut(100);
}
});
Here's a fiddle
How do I ignore the mouseup event when user is selecting text?
Check if the text input has focus. Ex:
if ( $(input).is(':focus') ) { ... }
I am currently constructing a menu that consists of 2 hyperlinks, "Sign In" and "Sign Up". My goal is to have this menu work in such a way that when either hyperlink is clicked on, the appropriate div will appear below. For example, the user clicks on "Sign Up", then the "Sign up" form appears below. I have no issues with these <div>'s appearing, I have made a functioning script that uses the .slideToggle() function. Before I go any further, please view my website on a device with a screen size of 1400px or more, and click on both the "Sign Up" and "Sign In" hyperlinks. (http://www.codesrce.com)
If you noticed when you click on "Sign Up" or "Sign In", for the first click on each the text turns a greenish color, and then when you click on the other, it reverts back to white, and the one you most recently clicked on turns green. The problem is, what I am looking for is not working. It works for a brief moment, then gets messed up when you click them more than 3 times. Here is my question:
How can I make this menu work in a way that when either "Sign Up" or "Sign In" is clicked on, it changes the font color, but also when that same link is clicked again, or another the other link is clicked on, it reverts back to its original color, leaving that newly clicked link with a new text color until that one is clicked again or the other link is clicked on? I hope I am making sense. I will provide my code so far, and hopefully someone can help me out!
Basicaly, If one hyperlink is active with the greenish color, then the other one should be non-active with the white font color, and if neither one is active, then have both be white.
Colors
Greenish: #4AE6AB
White: (Obviously) #fff or white
Code
HTML:
<div id="BottomTop">
<div id="UserMenuBar">
<a class="ToggleSignInForm">Sign In</a><a class="ToggleSignUpForm">Sign Up</a>
</div>
</div>
<div class="SignInFormToggled" id="SignInForm">
<form id="signinform" onsubmit="return false;">
</form>
</div>
<div class="SignUpFormToggled" id="SignUpForm">
<form name="signupform" id="signupform" onsubmit="return false;">
</form>
</div>
CSS:
#SignInForm {
background: rgb(154,234,204);
height: 120px;
}
#SignUpForm {
background: rgb(154,234,204);
height: 120px;
}
.SignInFormToggled {
display: none;
}
.SignUpFormToggled {
display: none;
}
.ForgotPasswordFormToggled {
display: none;
}
#BottomTop {
background: #333333;
height: 40px;
width: 100%;
margin: 0px;
}
#UserMenuBar {
background: #333333;
/* Old browsers */
height: 40px;
width: 1400px;
margin-left: auto;
margin-right: auto;
line-height: 40px;
font-family: 'Gotham Rounded Book', Myraid Pro, Segoe UI, Helvetica Neue, Arial;
}
#UserMenuBar a {
padding-top: 30px;
padding-right: 20px;
color: #fff;
font-size: 16px;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-ms-transition: color 0.3s ease;
transition: color 0.3s ease;
}
#UserMenuBar a:hover {
color: #4AE6AB;
cursor: pointer;
}
#UserMenuBar a.active {
color: #4AE6AB;
}
#UserMenuBar a.notactive {
color: #fff;
}
#SignInFormContainer {
width: 1400px;
height: 120px;
margin-left: auto;
margin-right: auto;
}
#SignUpFormContainer {
width: 1400px;
height: 120px;
margin-left: auto;
margin-right: auto;
}
JS:
$(function () {
$('.ToggleSignInForm').click(function () {
$('.SignInFormToggled').slideToggle();
$('.SignUpFormToggled').css("display", "none");
$(this).toggleClass('active');
if ($('.ToggleSignUpForm').hasClass('active')) {
$('.ToggleSignUpForm').toggleClass('notactive');
} else {}
});
});
$(function () {
$('.ToggleSignUpForm').click(function () {
$('.SignUpFormToggled').slideToggle();
$('.SignInFormToggled').css("display", "none");
$(this).toggleClass('active');
if ($('.ToggleSignInForm').hasClass('active')) {
$('.ToggleSignInForm').toggleClass('notactive');
} else {}
});
});
$(function () {
$('.ToggleForgotPasswordForm').click(function () {
$('.ForgotPasswordFormToggled').slideToggle();
});
});
Code Cleanup:
Your div's are mismatched. You have more closing tags for div than opening tags.
Also, you can get rid of the else statement if it is blank. You don't have to have an else statement if it is not needed.
You have three DOM document.ready functions but you just need one.
Solution:
Change:
$('.ToggleSignUpForm').toggleClass('notactive');
To:
$('.ToggleSignInForm').toggleClass('notactive');
$('.ToggleSignInForm').toggleClass('active');
UPDATE
Add:
$('.active').removeClass('active');
Before:
$(this).toggleClass('active');
JSFiddle Demo
The problem lies in the classes. In css, the last listed class overrides all previous classes for the elements involved. After you click a few times, the notactive class ends up at the end and overrides the active class. To solve this, simply toggle the active class when you toggle the notactive class. This makes sure only one of these classes is implemented at any given time, and will solve the problem.
The JS will look like this:
$(function () {
$('.ToggleSignInForm').click(function () {
$('.SignInFormToggled').slideToggle();
$('.SignUpFormToggled').css("display", "none");
$(this).toggleClass('active');
if ($('.ToggleSignUpForm').hasClass('active')) {
$('.ToggleSignUpForm').removeClass('active').addClass('notactive');
} else {}
$('.active').removeClass('active');
});
});
$(function () {
$('.ToggleSignUpForm').click(function () {
$('.SignUpFormToggled').slideToggle();
$('.SignInFormToggled').css("display", "none");
$(this).toggleClass('active');
if ($('.ToggleSignInForm').hasClass('active')) {
$('.ToggleSignInForm').removeClass('active').addClass('notactive');
} else {}
$('.active').removeClass('active');
});
});
I found an answer. Javascript is weird sometimes, but this code works!
Thank you #imbondbaby and others for leading me in the right direction.
JS:
$(function () {
$('.ToggleSignInForm').click(function () {
$('.SignInFormToggled').slideToggle();
$('.SignUpFormToggled').css("display", "none");
$(this).toggleClass('active');
if ($('.ToggleSignUpForm').hasClass('active')) {
$('.ToggleSignUpForm').toggleClass('notactive');
$('.ToggleSignUpForm').toggleClass('active');
}
if ($('.ToggleSignUpForm').hasClass('notactive')) {
$('.ToggleSignUpForm').toggleClass('active');
}
if ($('.ToggleSignUpForm').hasClass('notactive')) {
$('.ToggleSignUpForm').toggleClass('active');
$('.ToggleSignUpForm').toggleClass('notactive');
}
if ($('.ToggleSignUpForm').hasClass('active')) {
$('.ToggleSignUpForm').toggleClass('notactive');
}
});
$('.ToggleSignUpForm').click(function () {
$('.SignUpFormToggled').slideToggle();
$('.SignInFormToggled').css("display", "none");
$(this).toggleClass('active');
if ($('.ToggleSignInForm').hasClass('active')) {
$('.ToggleSignInForm').toggleClass('notactive');
$('.ToggleSignInForm').toggleClass('active');
}
if ($('.ToggleSignInForm').hasClass('notactive')) {
$('.ToggleSignInForm').toggleClass('active');
}
if ($('.ToggleSignInForm').hasClass('notactive')) {
$('.ToggleSignInForm').toggleClass('active');
$('.ToggleSignInForm').toggleClass('notactive');
}
if ($('.ToggleSignInForm').hasClass('active')) {
$('.ToggleSignInForm').toggleClass('notactive');
}
});
});
FIDDLE