Div containing input disapears on mouseout - javascript

I would like to keep a div visible while the mouse is in the bounds of the div, the code works until it hovers over the input. I would like a sign up form appear onmouseover and when the sign in is complete and the mouse moves off the div is no longer visible. jsFiddle Demo
HTML
<div class="members">
Members
<div id="sign-up-form" class="sign-up-form">
<input type="text" name="firstName">
</div>
</div>
JS
var signUp = document.getElementById('signUp');
var signUpForm = document.getElementById('sign-up-form');
signUp.onmouseover = function(){
signUpForm.style.display = 'block';
}
signUpForm.onmouseout = function(){
signUpForm.style.display = 'none';
}
CSS
#signUp{
position: relative;
background-color: red;
color: white;
padding: 6px;
}
#sign-up-form{
display: none;
position:absolute;
top: 32px;
left: 8px;
background-color: rgba(0,83,159,0.6);
padding: 15px;
}

I would do it this only with CSS:
#sign-up-form {
display: none;
}
.members:hover #sign-up-form {
display: block;
}

This example uses mouseover and mouseout event listeners and a function that will listen to all children elements before changing the display of the signUpForm element.
function outVis(event) {
var e = event.toElement || event.relatedTarget;
if (e.parentNode == this || e == this) {
return;
}
signUpForm.style.display = 'none';
}
http://jsfiddle.net/9xhb532v/1/

Related

Hide an expanded menu when clicking outside of the container: how to use code snipet

I have a menu that open a sub-menu section onclick (let's name the container: "sub-menu").
I would like "sub-menu" to disapear if the user click outside of it / on the rest of the page.
It seems to be solved on How do I detect a click outside an element?
But I can't get how to use the code snipet from the second most popular answer:
export function hideOnClickOutside(selector) {
const outsideClickListener = (event) => {
const $target = $(event.target);
if (!$target.closest(selector).length && $(selector).is(':visible')) {
$(selector).hide();
removeClickListener();
}
}
const removeClickListener = () => {
document.removeEventListener('click', outsideClickListener)
}
document.addEventListener('click', outsideClickListener)
}
Could you please guide me on how to use it?
I edited, and included a basic example. -> I want sub menu to also close when clicking on the "white" space. But not on the parent "main menu" element.
document.getElementById("main-menu").addEventListener("click", function() {bouttonexpand('sub-menu-class')});
function bouttonexpand(id) {
var elemeacacher = document.getElementsByClassName(id);
if (elemeacacher[0].style.display != "none"){
for(var y=0;y<elemeacacher.length;y++)
elemeacacher[y].style.display = "none";
}
else {
for(var y=0;y<elemeacacher.length;y++)
elemeacacher[y].style.display = "block";
}
}
#main-menu {
display:inline-block;
height:20px;
width:100px;
background: blue;
padding: 5%;
}
#sub-menu {
display:inline-block;
height:50px;
width:50px;
background: red;
display: none;
}
<div><div id="main-menu">Main menu</div></div>
<div><div id="sub-menu" class="sub-menu-class">Sub menu</div></div>
Thanks
By using jQuery, you can bind to the document click event and hides the div container when the clicked element isn’t the container itself or descendant of the div element.
var container = $("#sub-menu");
if (!container.is(event.target) && !container.has(event.target).length) {
container.hide();
}
If you want to hide that container without being tested the container itself or descendant of the div element just remove the condition and simply use container.hide();.
Also, rather than setting display: none; on sub-menu in the CSS, set it manually so that you can toggle the sub-menu from the very first click.
Have a look at the snippet below:
var x = document.getElementById("sub-menu");
x.style.display = "none";
$(document).click(function (evt) {
if ($(evt.target).is('#main-menu')) { // control click event if it's main-menu
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
else {
var container = $("#sub-menu");
if (!container.is(event.target) && !container.has(event.target).length) { // if you don't want that remove the condition and write container.hide(); only
container.hide();
}
}
});
#main-menu {
display: inline-block;
height: 20px;
width: 100px;
background: blue;
padding: 5%;
}
#sub-menu {
display: inline-block;
height: 50px;
width: 50px;
background: red;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div id="main-menu">Main menu</div>
<div id="sub-menu" class="sub-menu-class">Sub menu</div>

clicking for show div but hide again + make body position stay

i make profile form, i clicked this, form is show but hidden instally
I want to click the link if the form appears without disappearing again, and if clicked outside in the form, from hidden and the web position stay without scrolling to up
i code used
$('.profile-link').click(function(e) {
$(".profile-frm").addClass("show-prfrm");
});
$(document).mouseup(function(e) {
var container = $(".profile-frm");
var clickfuncion = $('.profile-link').click;
if (container.is(':visible')) {
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
e.preventDefault();
$('body').width($('body').width());
container.removeClass("show-prfrm");
}
}
});
I think the only tricky part is to put a click handler on the document and do different things when the target element is the button, the menu, or anything else.
const button = document.querySelector('button');
const menu = document.querySelector('#menu');
document.addEventListener('click', event => {
menu.classList.add('hide');
if (event.target == button || event.target == menu)
menu.classList.remove('hide');
});
#menu {
position: absolute;
top: 50;
border: 1px solid #555;
background-color: #555;
border-radius: 10px;
height: 175px;
width: 100px;
}
.hide {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<button>Menu</button>
<div id="menu" class="hide"></div>

How to keep selection but also press button?

I have this text. On select, a div will appear that has multiple colors. On click of the blue div or the first color div, the text should highlight the text that is currently highlighted. This only works if I remove the conditional if statement for the #blue_box. I think the click element is removing the selection of the text before the program can retrieve the text. How can I keep the click element, but also track the selection?
$("#actual_verse").mouseup(function() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
if (/\S/.test(text)) {
$("#blue_box").click(function() {
var range = document.getSelection().getRangeAt(0);
var contents = range.extractContents();
var node = document.createElement('span');
node.style.backgroundColor = "yellow";
node.appendChild(contents);
range.insertNode(node);
});
// Tool Tip
var ele = document.getElementById('tooltip');
var sel = window.getSelection();
var rel1 = document.createRange();
rel1.selectNode(document.getElementById('cal1'));
var rel2 = document.createRange();
rel2.selectNode(document.getElementById('cal2'));
window.addEventListener('mouseup', function() {
if (!sel.isCollapsed) {
var r = sel.getRangeAt(0).getBoundingClientRect();
var rb1 = rel1.getBoundingClientRect();
var rb2 = rel2.getBoundingClientRect();
//this will place ele below the selection
ele.style.top = (r.bottom - rb2.top) * 100 / (rb1.top - rb2.top) + 'px';
//this will align the right edges together
ele.style.left = (r.left - rb2.left) * 100 / (rb1.left - rb2.left) + 'px';
//code to set content
ele.style.display = 'block';
}
});
// End of Tool Tip
}
});
/* Tool Kit */
#tooltip {
position: absolute;
display: none;
border: grey solid 1px;
background: #373737;
padding: 5px;
border-radius: 3px;
}
#cal1 {
position: absolute;
height: 0px;
width: 0px;
top: 100px;
left: 100px;
overflow: none;
z-index: -100;
}
#cal2 {
position: absolute;
height: 0px;
width: 0px;
top: 0;
left: 0;
overflow: none;
z-index: -100;
}
.boxes {
width: 15px;
height: 15px;
cursor: pointer;
display: inline-block;
margin-right: 2px;
position: relative;
top: 3px;
}
#blue_box {
background: #AAF6FF;
}
#green_box {
background: #D6FFAA;
}
#orange_box {
background: #FFBF98;
}
#purple_box {
background: #D7D5FC;
}
#red_box {
background: #FF9B9F;
}
#yellow_box {
background: #FFF8AA;
}
.highlight {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='actual_verse' class='context'> Hello There! </span>
<div id='cal1'> </div>
<div id='cal2'> </div>
<div id='tooltip'>
<div id='blue_box' class='boxes' title='Blue'></div>
<div id='green_box' class='boxes' title='Green'></div>
<div id='orange_box' class='boxes' title='Orange'></div>
<div id='purple_box' class='boxes' title='Purple'></div>
<div id='red_box' class='boxes' title='Red'></div>
</div>
<br>
<br>
I believe the following changes accomplish what you desire.
Changes:
Moved $("#blue_box").click(function(){} out of your #actual_verse mouseup event handler. You were adding yet another click handler for the blue box every time there was a mouseup event on #actual_verse. It should only be added once. Alternately, you can define the function in the global scope and name it. Then you can add it and remove it multiple times.
Add a mousedown handler on the #tooltip which just calls event.preventDefalut(). The mousedown event is the one that clears the selection. This happens before the click event, so by the time you were getting to your click handler there was no selection.
Add selection.removeAllRanges(); to the end of the blue_box click handler to clear the selection to show the highlight. I'm assuming this is desirable. For me as a user, this is what I expect to happen.
Create hideTooltip() and add it to the end of the blue_box event handler. As a user, I expect the tooltip to disappear once I have made that click.
Remove the window.addEventListener('mouseup', but leave the code which it was executing. I'm not sure why that code was a window mouseup handler. Where it was being added as an event listener resulted in yet another copy of the handler added every time the #actual_verse mouseup event handler executed, just like was happening with the blue_box click handler.
$("#tooltip").mousedown(function(event) {
event.preventDefault();
});
//Only add the listener once, not another listener each mouseup
$("#blue_box").click(function() {
var selection = document.getSelection();
var range = selection.getRangeAt(0);
var contents = range.extractContents();
var node = document.createElement('span');
node.style.backgroundColor = "yellow";
node.appendChild(contents);
range.insertNode(node);
selection.removeAllRanges(); //Clear the selection, showing highlight
hideTooltip();
});
function hideTooltip() {
document.getElementById('tooltip').style.display = ''; //hide the tooltip
}
$("#actual_verse").mouseup(function() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
if (/\S/.test(text)) {
// Tool Tip
var ele = document.getElementById('tooltip');
var sel = window.getSelection();
var rel1 = document.createRange();
rel1.selectNode(document.getElementById('cal1'));
var rel2 = document.createRange();
rel2.selectNode(document.getElementById('cal2'));
if (!sel.isCollapsed) {
var r = sel.getRangeAt(0).getBoundingClientRect();
var rb1 = rel1.getBoundingClientRect();
var rb2 = rel2.getBoundingClientRect();
//this will place ele below the selection
ele.style.top = (r.bottom - rb2.top) * 100 / (rb1.top - rb2.top) + 'px';
//this will align the right edges together
ele.style.left = (r.left - rb2.left) * 100 / (rb1.left - rb2.left) + 'px';
//code to set content
ele.style.display = 'block';
}
// End of Tool Tip
}
});
/* Tool Kit */
#tooltip {
position: absolute;
display: none;
border: grey solid 1px;
background: #373737;
padding: 5px;
border-radius: 3px;
}
#cal1 {
position: absolute;
height: 0px;
width: 0px;
top: 100px;
left: 100px;
overflow: none;
z-index: -100;
}
#cal2 {
position: absolute;
height: 0px;
width: 0px;
top: 0;
left: 0;
overflow: none;
z-index: -100;
}
.boxes {
width: 15px;
height: 15px;
cursor: pointer;
display: inline-block;
margin-right: 2px;
position: relative;
top: 3px;
}
#blue_box {
background: #AAF6FF;
}
#green_box {
background: #D6FFAA;
}
#orange_box {
background: #FFBF98;
}
#purple_box {
background: #D7D5FC;
}
#red_box {
background: #FF9B9F;
}
#yellow_box {
background: #FFF8AA;
}
.highlight {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='actual_verse' class='context'> Hello There! </span>
<div id='cal1'> </div>
<div id='cal2'> </div>
<div id='tooltip'>
<div id='blue_box' class='boxes' title='Blue'></div>
<div id='green_box' class='boxes' title='Green'></div>
<div id='orange_box' class='boxes' title='Orange'></div>
<div id='purple_box' class='boxes' title='Purple'></div>
<div id='red_box' class='boxes' title='Red'></div>
</div>
<br>
<br>

How to have two different bgcolor changing events

I'm trying to have a bgcolor change for an element on mouseover, mouseout, and onclick. The problem is Javascript overwrites my onclick with mouseout, so I can't have both. So is there any way to have mouseover reset after mouseout?
function init() {
document.getElementById('default').onmouseover = function() {
tabHoverOn('default', 'grey')
};
document.getElementById('default').onmouseout = function() {
tabHoverOff('default', 'yellow')
};
document.getElementById('section2').onmouseover = function() {
tabHoverOn('section2', 'grey')
};
document.getElementById('section2').onmouseout = function() {
tabHoverOff('section2', 'yellow')
};
document.getElementById('section3').onmouseover = function() {
tabHoverOn('section3', 'grey')
};
document.getElementById('section3').onmouseout = function() {
tabHoverOff('section3', 'yellow')
};
}
function tabHoverOn(id, bgcolor) {
document.getElementById(id).style.backgroundColor = bgcolor;
}
function tabHoverOff(id, bgcolor) {
document.getElementById(id).style.backgroundColor = bgcolor;
}
var current = document.getElementById('default');
function tab1Highlight(id) {
if (current != null) {
current.className = "";
}
id.className = "tab1highlight";
current = id;
}
function tab2highlight(id) {
if (current != null) {
current.className = "";
}
id.className = "tab2highlight";
current = id;
}
function tab3highlight(id) {
if (current != null) {
current.className = "";
}
id.className = "tab3highlight";
current = id;
}
window.onload = init();
body {
width: 900px;
margin: 10px auto;
}
nav {
display: block;
width: 80%;
margin: 0 auto;
}
nav > ul {
list-style: none;
}
nav > ul > li {
display: inline-block;
margin: 0 3px;
width: 150px;
}
nav > ul > li > a {
width: 100%;
background-color: #ffff66;
border: 1px solid #9b9b9b;
border-radius: 12px 8px 0 0;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
font-family: arial, sans-serif;
}
main {
display: block;
width: 80%;
margin: 0 auto;
border: 1px solid #9b9b9b;
padding: 10px;
}
main > h1 {
font-size: 1.5em;
}
.tab1highlight {
background-color: #339966;
color: white;
}
.tab2highlight {
background-color: #ff6666;
color: white;
}
.tab3highlight {
background-color: #6600ff;
color: white;
}
main img {
border: 5px solid #eeefff;
width: 80%;
margin-top: 20px;
}
<body>
<nav>
<ul>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</nav>
<main>
<h1>Exercise: Navigation Tab #5</h1>
<ul>
<li>
Combine the navigation tab exercises #1, #3, and #4 in one file, including <br>
<ul>
<li>temporarily change the background color of a tab when the cursor is hovering on it.</li>
<li>set the foreground and background color of the tab being clicked.</li>
<li>change the background color of the main element based on the selected tab.</li>
</ul>
<p>
To test, click on a tab and then move your mouse around. For example, the third tab is clicked, the tab background color is switched to blue. Then hover the mouse over the third tab, the background color of the tab should be switch to light green and then back to blue after the mouse moves out.
</p>
<img src="menu_tab5.jpg">
</li>
</ul>
</main>
It's generally a good idea to keep CSS out of JavaScript completely if you can help it. A better strategy for solving the hover problem is to use the CSS pseudo selector :hover rather than coding the color changes in JavaScript. If you give all your tabs the same class, you only have to write the CSS once:
.tab {
background-color: yellow;
}
.tab:hover {
background-color: grey;
}
Once you've done that, you can also relegate the click styling to CSS by creating an event handler that adds and removes a special class each time a tab is clicked.
In the CSS file:
.tab.clicked {
background-color: blue;
}
And then in JavaScript, something like:
var tabs = document.getElementsByClassName('tab');
for (i = 0; i < tabs.length; i ++) {
tabs[i].onclick = function (ev) {
for (i = 0; i < tabs.length; i ++) {
tabs[i].classList.remove('clicked');
}
ev.currentTarget.classList.add('clicked');
};
}
I've created a JSFiddle to illustrate.
Try updating a Boolean variable.
var Ele = document.getElementById('default');
var clicked = false;
Ele.onclick = function(){
clicked = true;
// add additional functionality here
}
Ele.onmouseover = function(){
clicked = false;
// add additional functionality here
}
Ele.onmouseout = function(){
if(!clicked){
// add additional functionality here
}
}

How to use GETELEMENT with an specific position

I have seen this code ( http://jsfiddle.net/eMNfd/21/ ), but I want to know how to make the new div can be created to the right of the blue, that is, in horizontal mode.
document.getElementById("text").onclick = function () {
var ok = true;
if (ok === true) {
var div = document.createElement('div');
div.className = 'new-rect';
//div.style.backgroundColor = "black";
document.getElementsByTagName('body')[0].appendChild(div);
}
};
.new-rect {
background: black;
width: 20%;
height: 30px;
}
<div id="text" style="width:20%;height:30px;background-color:blue;"></div>
Thanks to all.
You can use float for this (has to be set on all divs to work), you can also use inline-block:
document.getElementById("text").onclick = function () {
var ok = true;
if (ok === true) {
var div = document.createElement('div');
div.className = 'new-rect';
//div.style.backgroundColor = "black";
document.getElementsByTagName('body')[0].appendChild(div);
}
};
body {
font-size: 0; /* to get rid of the space between the divs */
white-space: nowrap; /* to prevent wrapping on multiple lines */
}
div {
display: inline-block; /* to add divs horizontally */
}
.new-rect {
background: black;
width: 20%;
height: 30px;
}
<div id="text" style="width:20%;height:30px;background-color:blue;"></div>

Categories

Resources