Blur exception based on clicked element - javascript

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.

Related

Closing a pure html/css modal dialog causes a new history entry

I am using
http://domain.com/page1.htm#modal
to open a modal dialog using css and the :target pseudo selector.
Problem comes when I close that using <a href>close</a>. This closes the modal window correctly but also adds a new history entry. So history now looks like:
http://domain.com/page1.htm
http://domain.com/page1.htm#modal
http://domain.com/page1.htm
Is there some way of preventing the action tag from creating this new history entry?
Below is an example of messing with the history..
So as an example, when you close the dialog, you could just do history.go(-2); to remove the last 2 history items.
$('#removeHist').click(function () {
history.back();
});
$('#pushdaft').click(function () {
history.pushState({},'daft title', '?someparam');
console.log('pushed location: ' + location.href);
});
window.onpopstate = function(event) {
console.log('location now: ' + location.href);
}
console.log('hello');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
One
Two
<button id="pushdaft">Add history</button>
<button id="removeHist">Remove History</button>
Final solution used, yes it does use Javascript but falls back to a mostly working senario if Javascript is not available:
document.querySelector(".close").onclick = function() { history.back(); return false; };
<a href title="Close" class="close"></a>
For a CSS only pop up, you should use a checkbox or radio input instead of :target.
Then you will be opening the pop up with the pseudo class :checked, which doesn't create a history entry.
Example on CodePen
<body>
<div class="pop-wrapp">
<input type="checkbox" id="open" name="mobile-pop">
<label for="open" class="open-pop">☰</label>
<div class="popup">
<label for="open" class="close-pop">×</label>
<div>Text inside of the pop up</div>
</div>
<label for="open" class="close-pop-overlay"></label>
</div>
</body>
<style>
*, *::before, *::after {
box-sizing: border-box;
transition: all 0.35s ease;
}
body {
font-size: 2rem;
}
label {
cursor: pointer;
}
#open {
/* hiding the checkbox */
display: none;
}
.popup {
position: absolute;
left: -100%;
top: 10vw;
background: white;
padding: 5vw;
z-index: 200;
width: 80vw;
}
#open:checked ~ .popup {
left: 10vw;
}
/* An overly, to be able to click outside of the popup and close it */
#open:checked ~ .close-pop-overlay {
position: fixed;
inset: 0;
background: #00000040;
z-index: 100;
cursor: initial;
}
</style>

show loading div with overlay on submit while waiting

My divs are not showing when I click on submit.
I can get them to show if I do a window.onload() but the divs have to have display: none; by default;
How can I make it so these divs show when I hit submit because my form takes about 30 seconds to process, it has a lot of fields.
HTML
<div id="overlay-back"></div>
<div id="overlay">
<div id="dvLoading">
<p>Please wait<br>while we are loading...</p>
<img id="loading-image" src="img/ajax-loader.gif" alt="Loading..." />
</div>
</div>
Submit Button
<div class="form-buttons-wrapper">
<button id="submit" name="submit" type="submit" class="form-submit-button">
Submit
</button>
</div>
CSS
#overlay {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
z-index : 995;
display : none;
}
#overlay-back {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : #000;
opacity : 0.6;
filter : alpha(opacity=60);
z-index : 990;
display : none;
}
#dvLoading {
padding: 20px;
background-color: #fff;
border-radius: 10px;
height: 150px;
width: 250px;
position: fixed;
z-index: 1000;
left: 50%;
top: 50%;
margin: -125px 0 0 -125px;
text-align: center;
display: none;
}
jQuery
<script>
$(function() {
$('#submit').on('submit', function() {
$('#dvLoading, #overlay, #overlay-back').prop("display", "block").fadeIn(500);
});
});
</script>
The reason I am displaying none by default in css because if someone has javascript disabled I do not want any inteference
Please provide your own custom form validation as I have no context to supplement that. This should be placed in a document ready OR in a setInterval JavaScript function (the latter typically yeilds much better results).
$('button#submit').click(function() {
If (formValid === true && $('#dvLoading, #overlay, #overlay-back').not(':visible');)
{
$('#dvLoading, #overlay, #overlay-back').toggle(500);
$('button#submit').toggle(500); //hide this to prevent multiple clicks and odd behavior
} else {
var doNothing = "";
}
});
Try this:
<script>
$(function() {
$('#submit').on('click', function(evt) {
evt.preventDefault();
$('#dvLoading, #overlay, #overlay-back').fadeIn(500);
});
});
</script>
The fadeIn will make the div visible.
.prop sets the properties of the element, not the style.
Changed to use the click event

Hover textbox remains fixed when selected

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>

Mouse up event triggered while selecting text inside input, causes modal window to hide

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') ) { ... }

Making a simple tooltip with only HTML and CSS

I want my tooltip element (the <span>) to appear above everything on the page but still relative to its parent element (the <td>). I'm trying with JS but would like a no-script solution.
JS to show/hide the <span>:
window.AETid = "AE";
function tooltip(tid) {
document.getElementById(tid).style.display="block";
}
function hideTooltip(tid) {
document.getElementById(tid).style.display="none";
}
HTML:
<td class="ht" onmouseover="tooltip(window.AETid);" onmouseout="hideTooltip(window.AETid);">
Send reminders?
<span class="tooltip" id="AE">If this option is selected, e-mail reminders will be sent to the client before each appointment.</span>
</td>
CSS for .tooltip:
.ht { position: relative; }
.tooltip {
color: #ff0000;
display: none;
z-index: 100;
position: absolute;
right:0px;
bottom: 0px;
}
Currently, the tooltip appears as expected when I hover over the <td>, but it appears within the element, thus changing the size of the <td> and thus the <tr> and thus the whole dang <table>. I want the tooltip to appear, well, like tooltips do: above and not effecting the rest of the page. z-index doesn't seem to do it alone in my case...
Using position: fixed instead of absolute on the tooltip <span> kept the element from interrupting the DOM, but literally positioned it after everything else on the page (at the bottom)
All help is greatly appreciated
I found a method to make a very lightweight tooltip with no JS!
.ht:hover .tooltip {
display:block;
}
.tooltip {
display: none;
color: red;
margin-left: 28px; /* moves the tooltip to the right */
margin-top: 15px; /* moves it down */
position: absolute;
z-index: 1000;
}
<table>
<td class="ht">Send reminders?
<span class="tooltip">this is the tooltip alshdgwh gahfguo
wfhg fghwoug wugw hgrwuog hwaur guoarwhg rwu</span>
</td>
</table>
Totally awesome and props to this guy!
just use abbr tag ?
<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p title="Free Web tutorials">W3Schools.com</p>
Just curious what is wrong with the title attribute of the td???
<td title="If this option is selected, e-mail reminders will be sent to the client before each appointment.">
Send reminders?
</td>
Solution for tooltip ON TOP (always even if no space available)
.ht:hover .tooltip {
display:block;
}
.ht{
position: relative;
}
.tooltip {
display: none;
color: red;
z-index: 1;
position: absolute;
top: -50%;
transform: translatey(-50%);
}
<br><br><br><br>
<br>
<br>
<div class="ht">Send reminders? <br/> xaxaxa <br/> xaxaxa <br/> xaxaxa
<span class="tooltip">this is the tooltip alshdgwh gahfguo
wfhg fghwoug wugw hgrwuog hwaur guoarwhg <br/> sdfaasdfrwu<br/> sdfaasdfrwu<br/> sdfaasdfrwu</span>
</>
Try this its simple and compact,
I made it myself
.info:hover .tooltip {
color: red;
visibility: visible;
opacity: 1;
transition: opacity 1s
}
.tooltip {
visibility: hidden;
opacity: 0;
transition: opacity 1s
}
}
.tooltip:hover {
visibility: visible
}
.info {
cursor: help
}
<span class="info">Text<span class="tooltip">MSG</span></span>

Categories