I am creating a popup with a blacked out background. I want the popup to disappear when the background is clicked. Whilst the popup appears, the background does not appear to be clickable with jQuery. Even when I insert an "alert()" into the code, nothing happens.
HTML:
<div id="blacked_out_background"></div>
<div id="tr_panel">
<ul>
<li>Item 1</li>
<li>Item 1</li>
</ul>
</div>
CSS:
#blacked_out_background
{
position: fixed;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
opacity: 0.5;
background-color: #000;
text-align: center;
z-index: 2000;
}
#tr_panel
{
position: relative;
margin: auto;
bottom: 600px;
width: 300px;
background-color: #eee;
border-radius: 5px;
border: 2px solid #111;
background-color: #FFF;
opacity: 1;
z-index: 3000;
}
jQuery:
$("#blacked_out_background").click(function () {
$("#blacked_out_background").hide();
});
Related
I have a parent <a> with an href attribute. I have a child <p> and I want a small box to be opened when I click on child element.
The problem is when I click on the child element, it opens the small box but after a second the parent link opens up too. I don't want the parent link to be opened when I click on child element. I added event.stopPropagation() but it doesn't change anything. I also added z-index property but no changes either.
In my JS Fiddle demo you can see a live example; but here is my code so far:
.parent {
background-color: blue;
display: inline-block;
width: 400px;
height: 300px;
z-index: 1;
}
.child {
color: black;
background-color: yellow;
display: inline-block;
width: 100px;
height: 50px;
z-index: 2;
}
[title] {
position: relative;
display: inline-flex;
justify-content: center;
}
.child:focus::after {
content: attr(title);
position: absolute;
top: 90%;
color: #000;
background-color: #fff;
border: 1px solid;
width: fit-content;
padding: 3px;
font-size: 10px;
z-index: 20;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<a class="parent" href="https://www.google.com/">
<p class="child" title="This is mobile tooltip" tabindex="0" (click)="$event.stopPropagation();">Click</p>
</a>
JS Fiddle demo
PS: I cannot use jQuery.
Thanks.
Let me explain What I did was create a variable that changed whenever it hovered on the element or off the element. Next Whenever the user clicked on it I just ran a check to see if the mouse was not hovering on the element and executed a code if was on the element I ran a other code
var mouse = false;
function mouseStatus(n) {
mouse = n;
}
function parent() {
if (mouse == false) {
console.log('parent');
window.open('www.google.com');
}
}
function child() {
console.log('child');
}
.parent {
background-color: blue;
display: inline-block;
width: 400px;
height: 300px;
z-index: 1;
}
.child {
color: black;
background-color: yellow;
display: inline-block;
width: 100px;
height: 50px;
z-index: 2;
}
[title] {
position: relative;
display: inline-flex;
justify-content: center;
}
.child:focus::after {
content: attr(title);
position: absolute;
top: 90%;
color: #000;
background-color: #fff;
border: 1px solid;
width: fit-content;
padding: 3px;
font-size: 10px;
z-index: 20;
}
<a class="parent" onclick="parent()">
<p class="child" title="This is mobile tooltip" onmouseover="mouseStatus(true);" onmouseout="mouseStatus(false);" onclick="child()">Click</p>
</a>
call a function instead :
onEvent(event) {
event.stopPropagation();
return false;
}
calling the function with
(click) ="onEvent($event)"
I have the following set of HTML elements
The unordered list with the class options is not displayed at page load:
I want do display it when the element <div class="select-box"> is clicked. For this purpose I have:
I don't know why, bit console.log(selectBox) returns an empty array.
How can I fix this?
/* Select Boxes */
function selectBoxToggle() {
let selectBox = document.querySelectorAll('.select-box');
console.log(selectBox);
selectBox.forEach(function(item) {
let options = item.querySelectorAll('.options');
item.addEventListener("click", options.style.display = 'block');
console.log(options);
});
}
// On document load
document.addEventListener("DOMContentLoaded", function() {
selectBoxToggle();
});
.select-box {
position: relative;
}
.select-box .caret {
position: absolute;
right: 1px;
top: 50%;
color: #999;
transform: translateY(-50%);
}
.select-box .selected-value {
height: 33px;
line-height: 32px;
border-bottom: 1px solid #ccc;
}
.select-box .options {
display: none;
position: absolute;
min-width: 100%;
background: #fff;
z-index: 99;
left: 0;
top: 33px;
margin-top: 1px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="select-box">
<div class="selected-value">Item 1</div>
<ul class="options elevation-1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<span class="material-icons caret">arrow_drop_down</span>
</div>
You might want to toggle a class instead
/* Select Boxes */
const selectBoxToggle = () => {
document.querySelector('.select-box').addEventListener("click",function() { // now you can use "this"
this.querySelector('.options').classList.toggle("hide")
});
}
// On document load
window.addEventListener("load",selectBoxToggle);
.select-box {
position: relative;
}
.select-box .caret {
position: absolute;
right: 1px;
top: 50%;
color: #999;
transform: translateY(-50%);
}
.select-box .selected-value {
height: 33px;
line-height: 32px;
border-bottom: 1px solid #ccc;
}
.select-box .options {
position: absolute;
min-width: 100%;
background: #fff;
z-index: 99;
left: 0;
top: 33px;
margin-top: 1px;
}
.hide { display:none }
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="select-box">
<div class="selected-value">Items</div>
<ul class="options elevation-1 hide">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<span class="material-icons caret">arrow_drop_down</span>
</div>
Did you try putting li rather than options?
I want to have a fixed container (a leaflet map) that a list with informations about the selected map item can be scrolled over.
I came up with this
https://jsfiddle.net/m5ntbyxs/5/
My list, that can be scrolled over the map, should start at the bottom of the screen and able to scroll up until it reveals all its content. I am using a translate to position the list further down on the screen. When no item is selected on the map, the list should scroll back down and not be visible. Just setting the transform: translateY(100vh) does only work, when the user has not previously scrolled up the list. Then the amount the user would have scrolled the list, would still be visible.
But it has another problem: it uses fixed layout, which takes the container out of the flow so it can not live properly in an app shell that also displays a title bar and nav bar.
Is there a way to achive this kind of effect without fixed element?
jQuery is not an option to solve this.
made it work like so:
html :
<div class="box">
<div class="menu"><h1>div.menu</h1></div>
<div class="map">
<p class="title">div.title</p>
<div class="out" id="scroll">
<li class="empty"></li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>etc...</li>
</div>
</div>
<div class="down"><p>div.down</p></div>
</div>
css :
body {
background-color: darkslategray;
text-align: center;
box-sizing: border-box;
width: 100%;
height: 100vh;
}
.box {
color: gainsboro;
width: 100%;
height: 100%;
min-height: 200px;
display: flex;
flex-flow: column nowrap;
}
.menu {
text-align: center;
border: solid 1px;
padding: 10px 0 0;
flex: 1 1 auto;
order: 1;
&>h1 {
border: solid 1px;
}
}
.map {
display: block;
background: teal;
text-align: center;
position: relative;
overflow: hidden;
flex: 10 10 auto;
order: 2;
&>.title {
position: absolute;
border: solid 1px;
background: teal;
margin: 0 1%;
width: 98%;
padding: 16px 0;
font-size: 24px;
z-index: 2;
}
&>.out {
overflow-y: auto;
position: absolute;
height: 100%;
width: 98%;
margin: 0 1%;
display: block;
border: solid 1px white;
z-index: 1;
&::-webkit-scrollbar {
display: none;
}
&>.empty {
content: "";
margin: 0;
height: 90%;
margin: 5px;
border: solid 1px;
position: realtive;
background: none;
}
&>li {
list-style-type: none;
padding: 10px;
margin: 5px;
border: solid 1px;
font-size: 16px;
}
}
}
.down {
text-align: center;
display: block;
position: relative;
border: solid 1px;
flex: 1 1 auto;
order: 3;
}
I want to change the display of the elements with the .slide-prev and .slide-next classes. As I'm using a slide plugin, it automatically creates the navigation elements outside the ul, so the only way the display change worked was with javascript. The problem is that it did not work as it should.
When I move the mouse over the div with the class .intro-noticias the elements appear, and when I leave they disappear, so far so good. The problem is when I hover over the elements .slide-prev and .slide-next, they are shaking, disappearing depending on where the arrow is and do not activate the hover.
It may be that I let something simple go by, but I really have not found it, if anyone knows what's causing it, I appreciate it.
Video demonstrating the problem
$(".intro-noticias").hover(function() {
$('.slide-prev,.slide-next').css("display", "block");
}, function() {
$('.slide-prev,.slide-next').css("display", "none");
});
.intro-noticias {
width: 100%;
height: 85vh;
margin-top: 70px;
}
.slide-prev {
z-index: 20;
position: absolute;
top: 70px;
left: 0;
text-indent: -9999px;
height: 40px;
width: 40px;
border: solid 1px #fff;
background: rgba(0,0,0,0.5);
display: none;
}
.slide-prev:after {
content:"icon";
width: 20px;
height: 20px;
position: absolute;
bottom: 9.5px;
left: 2px;
display: block;
background: url("img/icones/previous.png") left center no-repeat;
}
.slide-prev:hover {
background: red;
transition: all 0.2s ease-in;
}
.slide-next {
z-index: 20;
position: absolute;
top: 70px;
left: 40px;
text-indent: -9999px;
height: 40px;
width: 40px;
border: solid 1px #fff;
background: rgba(0,0,0,0.5);
display: none;
}
.slide-next:after {
content:"icon";
width: 20px;
height: 20px;
position: absolute;
bottom: 9.5px;
right: 2px;
display: block;
background: url("img/icones/next.png") right center no-repeat;
}
.slide-next:hover {
background: red;
transition: all 0.2s ease-in;
}
<ul>
<li>
<div class="intro-noticias">
<div>
<h2></h2>
</div>
</div>
</li>
</ul>
Previous
Next
You can wrap ul and anchors into the <div class="cont"> and bind events mouseenter and mouseleave to this div.
<div class="cont">
<ul>
<li>
<div class="intro-noticias">
<div>
<h2></h2>
</div>
</div>
</li>
</ul>
Previous
Next
</div>
$(".cont").mouseenter(function() {
$('.slide-prev,.slide-next').css("display", "block");
});
$(".cont").mouseleave(function() {
$('.slide-prev,.slide-next').css("display", "none");
});
I am trying to move content left and right using on click event and need to stop by margins on the left or right. list-items generating dynamically. Here is the code I tried so far but no worth. By my code it is moving the container left and right. But I need to move list-items left and right.
How can I do this.?
function moveList(px) {
$('.list').animate({
'marginLeft': px
});
}
.list {
white-space: nowrap;
overflow: auto;
height: 85px;
padding: 10px 0;
margin: 25px 0;
position: relative;
}
.list-item {
display: inline-block;
min-width: 20%;
max-width: 150px;
padding: 10px 0;
border-radius: 3px;
background: #eee;
border: 1px solid #ddd;
margin: 0 5px;
cursor: pointer;
text-align: center;
}
#right-arrow {
width: 40px;
height: 40px;
display: block;
position: absolute;
right: 0;
top: 35px;
z-index: 999;
border-radius: 50%;
background: url(img/right-arrow.png) no-repeat #000;
}
#left-arrow {
width: 40px;
height: 40px;
display: block;
position: absolute;
left: 0;
top: 35px;
z-index: 999;
border-radius: 50%;
background: url(img/left-arrow.png) no-repeat #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="right-arrow" onclick="moveList('-=50px')"></div>
<div id="left-arrow" onclick="moveList('+=50px')"></div>
<div class="list">
<div class="list-item">1</div>
<div class="list-item">2</div>
<div class="list-item">3</div>
<div class="list-item">4</div>
<div class="list-item">5</div>
<div class="list-item">6</div>
<div class="list-item">7</div>
<div class="list-item">8</div>
<div class="list-item">9</div>
<div class="list-item">10</div>
</div>
Try script like this:
function moveList(px) {
$(".list-item:first-child").animate({
'marginLeft': px
});
}
It will be easier for you if you create a element that wraps the .list-items with:
position: absolute;
top: 0;
left:0;
Then, instead of modify the margin, you should modify the left value.
If you want to use semmantic content for your web it's better to use another HTML structure, not only div. For example:
<nav> <!-- As this is containing page navigation elements-->
<ol> <!-- As this is an ordered list of elements-->
<li> <!-- Each list element-->
First element
</li>
<li>
Second element
</li>
</ol>
</nav>
Simply translate them.
Define this (given that clicker is the selector for your click event).
var xValue = -5;
$("#clicker").on('click', function(e) {
e.preventDefault();
$(".list-item").css("transform","translateX("+xValue+")");
xValue -= 5;
});
Translate will not mess with your markup, and only move the objects it's working on to the left (in this case).
By keeping xValue you can keep moving them to the left by repeatedly clicking clicker.