THE FIDDLE
When a user hovers over a chevron icon next to a name on my website a div appears with options.
The Problem: The names can have different lengths and I would like to display the div below the chevron no matter how long the name is.
Here is my code:
HTML
<div class='settings'><i class='icon ion-chevron-down'></i></div>
<div class='settings-wrapper'>
<ul class='settings-bubble'>
<li>Bearbeiten</li>
<li>Löschen</li>
</ul>
</div>
SCSS
// The chevron icon
.settings {
display: inline;
position: relative;
padding: .1em 0 0 .5em;
opacity: 0; // I display the chevron on hover using jquery
}
// The options bubble
.settings-wrapper {
position: relative;
}
.settings-bubble {
position: absolute;
top: 0;
left: 0;
width: auto;
height: auto;
margin: 0;
padding: 0 .6em;
opacity: 0;
z-index: 9999;
li {
position: relative;
display: block;
a { float: left; }
}
}
I would be very thankful for any kind of help!!
If I change left: 0 to right: 0it looks like this:
When the icon is hovered, there is an event handler that displays the div. In that handler, you can inspect the x and y coordinates of the icon. When you display the div, you can modify its style to be positioned relative to the icon. For example:
var chevron = document.getElementById('chevron');
var popup = document.getElementById('popup');
chevron.addEventListener('mouseover', function(e) {
popup.classList.remove('hidden');
popup.style.left = e.target.offsetLeft + 'px';
});
chevron.addEventListener('mouseout', function(e) {
popup.classList.add('hidden');
});
.hidden {
display: none;
}
#popup {
position: absolute;
border: 1px solid #000;
}
<h1 contenteditable="true">Some long title <span id="chevron">></span></h1>
<div id="popup" class="hidden">popup</div>
I left the title editable so you can make it longer and see the popup change position.
In .settings-bubble change left: 0; into right: 0; and it will stick to the inner right side of the parent instead of the inner left.
EDIT: the trick is to add the div containing the bubble into the div containing the string of arbitrary length, and attach that bubble inside that div to the inner right-hand side, as illustrated by this fiddle.
Related
So I have a 360 Virtual tour using pannellum, I have this hotspot code desing in css
.custom-hotspot {
height: 30px;
width: 30px;
border-radius: 50%;
background: rgb(253, 253, 255);
}
I would like that when u click the hotspot popup an image but without using html tags only css and javascript, I try using this
.custom-hotspot:hover {
content: url(https://i.ibb.co/5c9zFfq/DCIM-100-MEDIA-DJI-0293-JPG.jpg); /* no need for qoutes */
width: 100px;
height: 100px;
border-radius: 20%;
}
but this is not a popup image and its not the same.
Does anyone know a solution for this?
If by popup you mean separate browser window then no..
But if you want to display the image next to the cursor on element hover you can display it as the background in a pseudo element.
.custom-hotspot:hover::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border-radius: 20%;
background-image: url(https://i.ibb.co/5c9zFfq/DCIM-100-MEDIA-DJI-0293-JPG.jpg);
}
Make sure that the parent element has a defined position property like position: relative or absolute. Otherwise the image will be displayed at the top of the closest grandparent that has it defined.
edit..
.clicked::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border-radius: 20%;
background-image: url(https://i.ibb.co/5c9zFfq/DCIM-100-MEDIA-DJI-0293-JPG.jpg);
}
Javascript:
// this gets HTML collection of all elements with the 'custom-hotspot' class
const elementCollection = document.getElementsByClassName('custom-hotspot');
// add a click listener to each element
elementCollection.forEach(e => {
e.addEventListener('click', handleClick, {passive: true});
});
/// here we toggle our 'clicked' class
function handleClick(event) {
// if '.target' does not work as expected try '.currentTarget'
event.target.classList.toggle('clicked');
}
I'm trying to make a short pop up in my web app for when a user clicks on a code to copy it. The trouble I'm having is trying to figure out to make it not shift everything in the parent div.
The gif below is what currently happens after all my attempts and googling of trying to solve this problem. What I'm trying to get to happen is have that copied message bubble just appear to the top right of the span with the room code.
This fiddle is a stripped down version of the interaction. I've tried all the different display and positionings and I'm not really sure where to go from here. Thanks in advance to everyone.
https://jsfiddle.net/k6ey1duc/36/
.container {
background-color: #008afa;
width: fit-content;
margin: auto;
padding: 20px
}
.text {
display: inline;
}
.pop-up {
display: none;
background-color: #fe0c0d;
}
#show-hide {
display: block;
margin: auto;
}
<body>
<script>
$(document).ready(function() {
var x = false;
$('#show-hide').on('click', function() {
if (!x) {
$("#pop-up").css({
"backgroundColor": "#fe0c0d",
"display": "inline"
});
x = true;
} else {
$("#pop-up").hide();
x = false;
}
});
});
</script>
<div class='container'>
<p class='text'>
Hello there! <span>Here is a span.</span>
</p>
<div id='pop-up' class='pop-up'>
Here is a pop-up
</div>
<button id='show-hide'>
Click for pop up
</button>
</div>
</body>
Adding position: absolute; to .pop-up will prevent the container from making any space for the element which is what you are trying to prevent. Additionally, adding position: relative; to .container will give you freedom to position .pop-up anywhere relative to the container.
Another solution is replacing the display: none; display: inline; with visibility: visible; visibility: hidden;. The main difference between these two is that display will remove the entire element from the layout whereas visibility will only hide the element but retain the elements space. This will solve the resizing container problem but will not give you the advantages of stacking and positioning that position: absolute does.
.container {
position: relative;
background-color: #008afa;
width: fit-content;
margin: auto;
padding: 20px
}
.pop-up {
position: absolute;
display: none;
background-color: #fe0c0d;
}
Use position:relative and postion:absolute.
.container {
background-color: #008afa;
width: fit-content;
margin: auto;
padding: 20px;
position: relative;
}
.pop-up {
display: none;
background-color: #fe0c0d;
position: absolute;
left:100%;
width:inherit;
}
I am creating an advanced administration panel, and I'm playing the part of editing items, I like it when I clicked to edit an item he would fill the entire space of its parent, however I have no idea how to make the element back to its original position with animation, any idea how to do this? I tried this so far:
Here is a pen: http://codepen.io/anon/pen/WvGONp
HTML
<div id="container">
<div class="single-item">
<div class="title">home</div>
<a class="edit" href="#"></a>
</div>
<div class="single-item">
<div class="title">Gallery</div>
<a class="edit" href="#"></a>
</div>
<div class="single-item">
<div class="title">Contact</div>
<a class="edit" href="#"></a>
</div>
</div>
SCSS
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
html, body, #container {
height: 100%;
min-height: 100%;
}
#container{
& > .single-item{
position: relative;
background-color: #d9d9d9;
border-radius: 2px;
margin-bottom: 15px;
padding: 15px;
z-index: 1;
& > .edit{
display: block;
position: absolute;
background-color: #000;
top: 15px;
right: 15px;
width: 20px;
height: 20px;
}
&.active{
z-index: 2;
}
}
}
Javascript
$("#container").on("click", ".edit", function(e){
e.preventDefault();
var el = $(this);
var elParent = el.closest(".single-item");
var curElTop = elParent.position().top;
var curElLeft = elParent.position().left;
elParent.toggleClass("active", function(){
elParent.css({
position: "absolute",
top: curElTop,
left: curElLeft
}).animate({
top: 0,
right: 0,
bottom: 0,
left: 0
});
});
});
CSS3 transition will help you create smooth animation for full screen width & height.
But if still for some reason, you want to do it in jQuery, here is the solution :
While clicking second time on the "edit" button, you just have to say :
$("<element_reference>").removeAttr("style");
It will remove the styles what was applied previously, get back the element to its normal view.
Or you can also change the position from "absolute" to "static", both will give you the same result. Refer this question for animating position using jQuery.
Hope it helps.
I've discovered the easiest way to do things like this is:
Put CSS transition properties on the item.
Make a new class that you add onto the item when it's clicked, to make it fullscreen. Take off the class when the item is closed.
CSS transitions tend to be faster and smoother.
I looked around what I would like to achieve, but I wasn't able to find any suitable answer.
Basically I can't make the code to correctly detect mouse entering and leaving a div that is overlapping another div.
This is my current situation:
Working demo: http://jsfiddle.net/2f5xx73y/
HTML:
<div style='height: 100%; width: 100%;padding: 30%;'>
<div class='box'>
<div class='inner-box'>Merry xmas!</div>
</div>
<div class='box'>
<div class='inner-box'>Happy new year!</div>
</div>
</div>
CSS:
.box {
height: 100px;
width: 100px;
display: inline-block;
position: relative;
background-color: green;
}
.inner-box {
height: 100%;
width: 100%;
position: absolute;
opacity: 0;
z-index: 1;
}
.zoomed-inner-box {
height: 160%;
width: 160%;
top: -30%;
left: -30%;
position: absolute;
background-color: red;
z-index: 1;
}
JS:
$(".inner-box").mouseenter(function () {
$(this).attr("class", "zoomed-inner-box");
});
$(".inner-box").mouseleave(function () {
$(this).attr("class", "inner-box");
});
As you can see there are two boxes which become bigger when hovered overlapping the other box.
Going right to left everything works fine, in fact the red div goes away as soon as the mouse leave it. This doesn't happen in the opposite direction, where a mouseleave event it's fired as soon as the cursor enters the green div behind the red one, while I want the red div to go away when the mouse completely leave it.
I also tried using the :hover selector for the inner-box class but it has the exact same behaviour. Do you know a nice solution to this problem?
Just change the z-index on .zommed-inner-box to overwrite the .inner-box's z-index. That way the currently hovered box has a higher z-index than .inner-box :
.inner-box {
height: 100%;
width: 100%;
position: absolute;
opacity: 0;
z-index: 1; <---- original z-index
}
.zoomed-inner-box {
height: 160%;
width: 160%;
top: -30%;
left: -30%;
position: absolute;
background-color: red;
z-index: 2; <---- higher z-index
}
FIDDLE
I'm having trouble getting an overlay to appear on top of the visible portion of another div. The problem is, the container div has overflow, and if the user has scrolled inside that div, the overlay will not cover the scrolled portion. My question is: how can you position a div to fill the visible portion of another div using jQuery - or, alternatively, is there a way to accomplish this using just CSS?
Here is a jsFiddle demonstration, and here's the markup:
HTML
<div class="container">
<div class="overlay"></div>
<div class="content">
<p>Content here</p>
<p>Overflow content here</p>
</div>
</div>
CSS
div.container { position: absolute; height: 100px; width: 100px; overflow-y: auto; }
div.overlay { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #F00; opacity: 0.5; }
div.content p { margin-bottom: 100px; }
and JS (load on DOM Ready)
$('div.container').click(function(){
$('div.overlay').toggle();
});
In order to achieve what you were asking for I did the following
CSS
.container {
/* setting this to relative means
overlay is positioned relative to its parent */
position: relative;
}
.overlay {
/* element taken out of normal flow */
position: absolute;
/* removed bottom and right properties otherwise
updating top property has no effect */
height: 100px;
/* When scrollbar appears width decreases to less than
100px hence having to set to 100% to allow automatic calculation */
width: 100%;
}
JavaScript
Using jQuery I now set the top property appropriately
$(".container").scroll( function( ) {
$(".overlay").css({ top: $(this).scrollTop( ) });
});
Fiddle here
Assuming you really want to cover only the visible portion:
http://jsfiddle.net/GNCaT/1/
<style type="text/css">
div.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
height:100px; /* fixed height, set by CSS or javascript, no bottom */
background: #F00;
opacity: 0.5;
}
</style>
<script>
$('div.container').click(function(){
$('div.overlay').css('top', $('div.container').scrollTop() + 'px').toggle();
});
</script>
This will position the overlay to the top of the visible portion of the container.
You can use the DOM property scrollHeight :
$('div.container').click(function(){
$('div.overlay').css("height", this.scrollHeight).toggle();
});
http://jsfiddle.net/p6k2Z/1/
EDIT :
In order to just overlay the visible portion, you can use this :
$('div.container').click(function(){
$('div.overlay').css({
top: this.scrollTop,
height: $('div.container').css("height")})
.toggle();
});
http://jsfiddle.net/p6k2Z/3/