I need to hide a datepicker when a user moves their mouse away from an input where the datepicker is active. While it works, it works a bit too well. It also hides the datepicker when I try to mouse over it. Resizing the div isn't the best idea either as this is a dynamically generated data entry form. And only date fields are being generated with the .herd-evt-date class.
I need to know what to do to have jquery check if I'm mousing away from the textbox but not the datepicker. How does one do this?
$('#herd-evt-entry-tbl').on('focus','.herd-evt-date',function() {
$(this).datepicker({
onSelect: function() {this.focus();},
onClose: function() {this.focus();},
dateFormat: 'dd-mm-yy'
});
});
$('#herd-evt-entry-tbl').on('mouseleave','.herd-evt-date',function() {
$(this).datepicker('hide');
});
HTML:
<div id='herd-evt-menu-div'></div>
<div id='herd-evt-detail-div'>
<h2><div id='herd-evt-name-div'>Mating Event</div></h2>
<button id='herd-evt-back-btn'><-Back</button>
<button id='herd-evt-columns-btn'>Column Info</button>
<button id='herd-evt-file-upload-btn'>Upload File</button>
<button id='herd-evt-save-btn'>Save Valid</button>
<input type='hidden' id='herd-load-id-hdn' value='0' />
<input type='hidden' id='herd-evt-id-hdn' value='0' />
<table id='herd-evt-entry-tbl' border=1></table>
</div>
<div class='herd-event-columninfo-display'>
<div><button id='herd-event-columninfo-close-btn'>X</button></div>
<table id='herd-evt-columninfo-tbl'></table>
<button id='herd-evt-columninfo-upd-btn'>Update</button>
</div>
<div class='herd-evt-dup'>
<button style='float: right; ' id='herd-evt-dup-close'>X</button>
<table id='herd-evt-dup-tbl'>
<thead><th></th><th>Stig</th><th>Tattoo</th><th>Ident</th><th>Herdstat</th><th>State Day</th><th>Sex</th><th>Gen Level</th><th>Transponder</th><th>French Ident</th></thead>
<tbody></tbody>
</table>
</div>
</div></td></tr></table>
<div style='clear: both'/>
</div>
</div>
You could approach it like this:
$("#herd-evt-entry-tbl").hover(function () {
// Do something on Mouse Over.
}, function () {
// Do something on Mouse Off.
});
So if the entire div is the element herd-evt-entry-tbl then when the div element is hovered on or off it will perform your task. It will also be able to rebind the display to your visible object. Which your line $(this).datepicker('hide'); is actually applying display: none;, which may need to be modified when you mouse over again.
Related
I am creating an admin panel and I have a panel on the left side of my page that I want to bring up different data.
I created a JSFiddle to show what I am doing.
The issue I am having is I want the dashboard home message...
<div id="dashboard_home">Welcome to the Admin Dashboard</div>
To be the only div that shows up on page load. Then when a panel seletion is clicked on, for the dashboard home message to go away and then only that new panel selection's div to show up.
Then once another panel selection is clicked on, I want the previous selection to hide and the new one to display and so fourth for all of the selections.
What do I need to do?
HTML
<div class="panel_out">
<div class="panel">
<input type='button' class="panel_buttons" id='user_request_button' value='User Requests'>
<input type='button' class="panel_buttons" id='message_button' value='Message Center'>
<input type='button' class="panel_buttons" id='draft_order_button' value='Draft Order'>
<input type='button' class="panel_buttons" id='draft_input_button' value='Draft Input'>
<input type='button' class="panel_buttons" id='announcements_button' value='Announcements'>
<input type='button' class="panel_buttons" id='dues_button' value='League Dues'>
</div>
</div>
<div class="dashboard_selection">
<div id='user_requests'>User Requests</div>
<div id='message_center'>Message Center</div>
<div id='draft_order'>Draft Order</div>
<div id='draft_input'>Draft Input</div>
<div id='announcements'>Announcements</div>
<div id='dues'>Leauge Dues</div>
</div>
JS
jQuery(document).ready(function () {
jQuery('#user_request_button').on('click', function (event) {
jQuery('#user_requests').toggle('hide');
});
jQuery('#message_button').on('click', function (event) {
jQuery('#message_center').toggle('hide');
});
jQuery('#draft_order_button').on('click', function (event) {
jQuery('#draft_order').toggle('hide');
});
jQuery('#draft_input_button').on('click', function (event) {
jQuery('#draft_input').toggle('show');
});
jQuery('#announcements_button').on('click', function (event) {
jQuery('#announcements').toggle('show');
});
jQuery('#dues_button').on('click', function (event) {
jQuery('#dues').toggle('show');
});
});
Demo
You're adding far too many bespoke events when you don't need to. Normalise your IDs to match the button IDs and derive one from the other,
e.g. <input id='user_requests_button' /> finds <div id="user_requests">
Show the div you want, then use siblings() to get the elements that you want hidden, and hide them.
Trigger the click event on the first button on load to show the first one only when the page loads (if you don't do this with CSS).
jQuery(document).ready(function () {
$('.panel_out input').on('click', function(){
// derive the ID
var id_to_show = '#' + this.id.replace('_button', '');
// show one and hide the others
$(id_to_show).show().siblings().hide();
}).first().trigger('click'); // trigger the first on page load
});
Trigger the click event on the first button on load to show the first one only when the page loads (if you don't do this with CSS).
On a click hide all panels first. And then open the desired one with .show()
So i would do it this way:
$('.panel').click(function(e){
$('.panel').hide();
$(e.currentTarget).closest('panel').show();
});
I have a chat application based on WebSockets. Next to every message there should be a rating button. I need to prohibit selfratings by setting the corresponting buttons to disabled. The problem is that the messages and their buttons are generated dynamically and the code snippet doesn't work.
$(".btn").prop("disabled", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button class="btn">Click</button>
you have to call the
$(".btn").prop("disabled", true);
right after the dynamic generated html snippet is inserted into the DOM-Tree.
or you add the disabled right on the generation of the html node.
<button class="btn" disabled>Click</button>
something like this? http://jsfiddle.net/swm53ran/172/
<button class="add">Add</button>
<div class="section" id="template">
This is a section
<button class="rate">Rate This!</button>
</div>
$(document).ready(function() {
$('.add').on('click', function(e) {
e.preventDefault();
var clone = $('#template').clone(true).attr('id', '');
clone.find('.rate').prop('disabled', true);
clone.appendTo('body');
});
});
I have a text field which should hide when it loses focus. I also have a button. The problem is, when you click the button, the text field first loses focus, which moves the button, preventing it from receiving the click event.
HTML:
<div>
<p> Focus on the text field, and then click the button </p>
<div id="hideMeOnFocusOut">
<input type="text" id="focusMeOut" autofocus>
<br><br><br>
</div>
<button id="clickMe">click me</button>
</div>
JS:
$(function() {
$('#focusMeOut').on('focusout', function(e) {
$('#hideMeOnFocusOut').hide();
});
$('#clickMe').on('click', function(e) {
alert('clicked!');
});
});
http://jsfiddle.net/u86ycf5e/
The button should still move. But it should also receive the click event.
Add a container with a height around the element you are hiding: Fiddle
.container {
height: 50px;
}
HTML
<div class="container">
<div id="hideMeOnFocusOut">
<input type="text" id="focusMeOut" autofocus>
<br>
<br>
<br>
</div>
</div>
Alternatively, you could make the element hide after a short delay via setTimeout like so:
$('#focusMeOut').on('focusout', function (e) {
setTimeout(function() {
$('#hideMeOnFocusOut').hide();
}, 250);
});
Other fiddle
Try ...
$('#focusMeOut').on('focusout', function(e) {
$('#hideMeOnFocusOut').hide();
if (e.relatedTarget.id==="clickMe") {
$("#clickMe").trigger('click');
}
});
This will check to see if the button was clicked and fire it ...
Hide the text box instead with:
$('#focusMeOut').on('focusout', function(e) {
$(this).hide(); //this line changed
});
and optionally set the height of the <div> to prevent button moving with this CSS:
#hideMeOnFocusOut {
height:80px;
}
You might want to rename your IDs more appropriately now.
http://jsfiddle.net/u86ycf5e/4/
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();
});
});
I'm new to JQuery and I can't create reusable dialog box. Here is my code
$(function () {
$("#baseDialog").dialog({
autoOpen: false,
modal: true,
width: 520,
show: "blind",
hide: "explode"
});
$("#baseDialogOpener").click(function () {
$("#baseDialog").dialog("open");
return false;
});
I use this dialog box like this:
<input id="baseDialogOpener" type="button" value="Update" />
<div id="baseDialog" title="Test Dialog" class="divClass">
<!-- here goes some ASP .NET MVC 2 code -->
</div>
The problem is that I want to reuse this dialog many times in many pages but with different html content and I have no idea how to do this, because I can't use class attribute because of styles that I need to use too. I cant use id attrubutes with the same values at the same page.
And there is no way I can use it like this? Maybe with another attribute than id (class is reserved for css)?
<input id="baseDialogOpener" type="button" value="Update" />
<div id="baseDialog" title="Test Dialog" class="divClass">
<form>...</form>
</div>
<input id="baseDialogOpener" type="button" value="Update 2" />
<div id="baseDialog" title="Test Dialog 2" class="divClass">
<form>...</form>
</div>
Looking forward to your answes.
UPDATE: I have the code above executed by using class attribute, but all dialogs appear at once when I click button. Any way to fix this?
The dialog box can load content from an .htm file from the server when it's opened.
You can use something like this :
$("#baseDialogOpener").click(function () {
$("#baseDialog").load('content.htm');
return false;
});
UPDATE: This code shows how to have the same .click() display different contents based on the button.
$("dialogButton.").click(function () {
$("#baseDialog").load($(this).data('content'));
return false;
});
<input type="button" value="first" id="button1" class="dialogButton" data-content="content1.htm" />
<input type="button" value="second" id="button2" class="dialogButton" data-content="content2.htm" />
You can use multiple class in place of your id.
For instance, instead of:
<div id="baseDialog" title="Test Dialog" class="divClass">
Use
<div title="Test Dialog" class="divClass baseDialog">
Then you can reference it in your javascript:
Where you have
$("#baseDialogOpener").click(function () {
$("#baseDialog").dialog("open");
return false;
});
Try
$(".baseDialogOpener").click(function () {
$(this).children(".baseDialog").dialog("open");
return false;
});
$(this) just grabs whatever was clicked, so you can have multiple classes of the same kind.