Below script will create effect fade in and fade out when user hover mouse into login box
<script>
$("#login").hover(function() {
$("#loginForm").slideToggle('500').css('display', 'block');
}, function() {
$("#loginForm").slideToggle('500')
});
</script>
but when i want select my email from <input type="name" name="email_address" />
this div #loginForm will automatically closed :
so how to keep this box always show when user select their email address from autocomplete list ?
This issue only happen in browser mozilla firefox.
FYI : change to <input type="name" name="Email" /> .. this will list your gmail email address
Jsfiddle
As the drop-down is created by the browser, jQuery thinks the mouse leaves #login and will slide up again. To prevent this from happening, you could add an delay to the slideUp animation. I created a fiddle to show you what I mean.
$("#login").hover(function () {
$("#loginForm").clearQueue().slideDown(500);
}, function () {
$("#loginForm").delay(1500).slideUp('500');
});
Note the clearQueue() method. This will make sure that when the user has selected an email and has its mouse over the element with #login it will prevent the slideUp() from happening.
I rewrote your HTML and script. I'm keeping the login box open if the textbox is still on focus. Also changed slideToggle to slideUp/slideDown You can try this
HTML
<form>
<p id="login">
<span class="label">Login Here</span>
<span id="loginForm">
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field"><input type="name" name="email_address" id="email"/></span> </span>
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field"><input type="password" id="pass"/></span> </span>
<span class="form-elements">
<span class="submit-btn"><input type="submit" value="Submit" /></span>
</span>
</span>
</p>
</form>
Script
$("#login").hover(function() {
$("#loginForm").slideDown('500').css('display', 'block');
}, function() {
if($('#email').is(":focus") || $('#pass').is(":focus")) return false;
$("#loginForm").slideUp('500')
});
Demo: http://jsfiddle.net/r6sQP/4/
I think it will be better without 500 millisec:
$("#loginForm").slideToggle().css('display', 'block');
Related
The following is the chose I am using to let the user manually choose working/starting time.
<input type="checkbox" class="testmethod" id="beastmode" name="beastmode" tabindex="5">Beast Mode</input>
<div class="input-group date" id="id_1">
<input type="text" name="day11" value="09:00 AM" class="form-control"
placeholder="End time" title="" required/>
<div class="input-group-addon input-group-append">
<div class="input-group-text">
<i class="glyphicon glyphicon-time fa fa-clock-o"></i>
</div>
</div>
</div>
<script>
$("#beastmode").click(function () {
if ($(this).prop('checked') === true) {
$('#id_1,#id_2').show();
} else {
$('#id_1,#id_2').hide();
}
});
</script>
By default the field should be hidden, but it is not. Instead even in the checkbox is not checked, the field is visible and to make it hidden I had to check the box and uncheck it again. Then the input field goes hidden. How can i fix this ?
Here is the jsfiddle link, it shows the same problem.
https://jsfiddle.net/shijilt/bs02m98w/
The code is only changing the visibility after clicking the #beastmode element. There's no explicit default otherwise.
You can hide it when the page loads:
$(function () {
$('#id_1,#id_2').hide();
});
Or, even better, style it to be hidden by default in your CSS:
#id_1,#id_2 {
display: none;
}
That way it's hidden by default from the styling itself, regardless of whether or not any JavaScript code successfully executes.
Example
Almost you code is fine. Try this it will work definitely.
<input type="checkbox" class="testmethod" id="beastmode" name="beastmode" tabindex="5">Beast Mode</input>
<div class="input-group date" id="id_1" style="display:none;">
<input type="text" name="day11" value="09:00 AM" class="form-control"
placeholder="End time" title="" required/>
<div class="input-group-addon input-group-append">
<div class="input-group-text">
<i class="glyphicon glyphicon-time fa fa-clock-o"></i>
</div>
</div>
</div>
<script>
$("#beastmode").click(function () {
if ($(this).prop('checked') === true) {
$('#id_1').show();
} else {
$('#id_1').hide();
}
});
</script>
First you have to hide div where id=#id_1 there are many ways to hide but i use simple method to hide it by display: none; in the style.
Second when you click on checkbox if its true its show the div where id=#id_1 else it will hide the div. If you pass two ids which is wrong because its not found #id_2 in the page that's the reason which not show/hide your content.
I have a search box, when user enters any text and press enter or clicks on search icon it should redirect to search page.
Functionality is working fine in desktop, but only in android devices it is not working , if i press enter or clicks on search icon nothing happens.
I've tried adding focus, kepyess, touchstart but nothing helps. Please help
Updated:
I've identified that there are two search mockup one for desktop and another for mobile.
While searching in mobile device, input text value is null because it is taking the value of desktop search.
I've updated the script but still it is not taking the mobile input value. Please let me know what i'm doing wrong
$(".newsroom_search-box,.newsroom_search-box_mobile").submit(setupNewsroomSearch);
$('.search_banner-q_newsroom,.search_banner-q_newsroom_mobile').click(function() {
$('.search_banner-q_newsroom,.search_banner-q_newsroom_mobile').focus();
});
$(".search_desktop-newsroom-submit,.search_desktop-newsroom-submit_mobile").click(setupNewsroomSearch);
function setupNewsroomSearch(e) {
e.preventDefault();
if ($(".search_banner-q_newsroom,.search_banner-q_newsroom_mobile").val().trim().length === 0) {
return false;
} else {
alert('called');
var tracking = '&ei=newsroom_search';
redirectToSearchPage($(".search_banner-q_newsroom").val(), "newsroom", "commbank_all", tracking);
}
}
Desktop Mockup
<div class="newsroom-search-wrapper">
<form class="newsroom_search-box">
<div class="search-box">
<input type="text" class="search_banner-q_newsroom" aria-label="Search" name="query" placeholder="${newsRoomBrowseContainerModel.searchText}" />
<i class="icon-search search_desktop-newsroom-submit" aria-hidden="true"></i>
</div>
</form>
</div>
Search Mockup
<div class="newsroom-search-wrapper_mobile mobile-search">
<form class="newsroom_search-box_mobile">
<div class="search-box">
<input type="text" class="search_banner-q_newsroom_mobile" aria-label="Search" name="query" placeholder="${newsRoomBrowseContainerModel.searchText}" />
<i class="icon-search search_desktop-newsroom-submit_mobile" aria-hidden="true"></i>
</div>
</form>
</div>
Using twitter bootstrap, I have created a button with an input box beside it. I'm trying to then access that value in my view using jQuery but for some reason I can't get anything back besides "undefined". Here's my code:
jQuery:
var browserInput = $("#browserInput").val();
console.log(browserInput);
Html:
<div class="col-lg-4">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" id="addBrowser">
<span class="glyphicon glyphicon-plus"></span>
Add
</button>
</span>
<input id="browserInput" type="text" class="form-control" style="display: none;" >
</div>
</div>
If this is your actual code layout, you won't get a value because the DOM isn't loaded at the time you are requesting the value.
You should try to wrap your function in document ready
$(document).ready(function() {
var browserInput = $("#browserInput").val();
console.log(browserInput);
});
If you want to have the value on keyup or interaction with the input box, you can also do it like
$(document).ready(function() {
$('#browserInput').on('keyup',function() {
var browserInput = $("#browserInput").val();
console.log(browserInput);
});
});
I'm going to undelete my answer because apparently it helped the poster solve his issue...
<input id="browserInput" type="text" value="" class="form-control" style="display: none;" />
Seems that having the value="" in the <input> tag made a difference for him.
I wonder if he meant "" instead of undefined.
I have a form, viewable here: http://dev.calgunsfoundation.org/get-help/hotline/
And, I have some jQuery:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.ginput_container label').each(function(i,e){
fielddesc = jQuery('<div>').append(jQuery(e).clone()).remove().html();
jQuery(e).siblings('.ginput_container input:email').before(fielddesc);
jQuery(e).siblings('.ginput_container input:text').before(fielddesc); //moves sub label above input fields
jQuery(e).siblings('.ginput_container select').before(fielddesc); //moves sub label above select fields (e.g. country drop-down)
jQuery(e).siblings('.ginput_container .gfield_radio input').after(fielddesc); //keep label above radio buttons
jQuery(e).siblings('.ginput_container .gfield_checkbox input').after(fielddesc);
jQuery(e).remove();
});
});
</script>
Problem is that this line:
jQuery(e).siblings('.ginput_container input:email').before(fielddesc);
doesn't seem to work at all.
(It's currently commented out on the site itself.)
When I enable that line, the form doesn't show up. When I disable it, everything works (but, of course the 'Enter Email' and 'Confirm Email' labels don't show up correctly.
The code, when the jQuery isn't running is shown here:
<li id="field_3_3" class="gfield gfield_contains_required">
<label class="gfield_label" for="input_3_3">
Email
<span class="gfield_required">
*
</span>
</label>
<div class="ginput_complex ginput_container" id="input_3_3_container">
<span id="input_3_3_1_container" class="ginput_left">
<input type="email" name="input_3" id="input_3_3" value="" tabindex="17">
<label for="input_3_3">
Enter Email
</label>
</span>
<span id="input_3_3_2_container" class="ginput_right">
<input type="email" name="input_3_2" id="input_3_3_2" value="" tabindex="18">
<label for="input_3_3_2">
Confirm Email
</label>
</span>
</div>
</li>
It seems like I'm targeting the right thing, I want the input:email and to move the label that's currently BELOW the input, to now be ABOVE the input. But, obviously I'm doing something wrong.
:email isn't a valid :selector -- this is the root of the problem
jQuery(e).siblings('.ginput_container input:email')
you could use the id selector instead for those two inputs :
jQuery(e).siblings('#input_3_3, #input_3_3_2')`
or generic :
jQuery(e).siblings('input[type=email]')
generic for both text/email :
jQuery(e).siblings('input[type=email], input[type=text]')
I have a login form. When the inputs get focused the "forgotten password" and "remember me" elements get shown by adding a css class, when they blur, the elements are hidden again by removing the class "sho". I would like the elements to keep the class "show"if I click either one of them or the login link
$(document).ready(function() {
$('.login *').focus(showlogin);
$('.login *').blur(hidelogin);
});
function showlogin(){
$('.login .hidden').addClass("show");
}
function hidelogin(){
$('.login .hidden').removeClass("show");
}
Html:
<form class="login">
<input type="text"/>
<input type="password"/>
<a class="loginbutton" href="#">Log in</a>
<br />
<a class="hidden" href="#">Forgotten password</a>
<label class="hidden"><input type="checkbox" /> Remember me</label>
</form>
Instead of binding to blur, bind to a click outside the login form.
Here's some code I have in my page that closes my login box when I click outside it, you can adapt it to your needs:
$(document).mousedown(function (e) {
if ($(e.target).closest("#signin").length == 0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});