Image
ul#listcontainer .li1 {
display: block;
width: 210px;
height: 130px;
border: 1px solid red;
position: relative;
}
.li1 span {
position: absolute;
top: 140px;
left: 0px;
right: 0;
width: 220px;
padding: 2px 0;
background-color: #000;
background-color: rgba(0, 0, 0, 0.65);
color: #fff;
opacity: 0;
transition: opacity .5s ease-in-out;
text-align: center;
font-family: Arial;
font-size: 14px;
}
.li1:hover span {
opacity: 1;
}
.li1:hover span:hover {
opacity: 0;
}
<ul id="listcontainer">
<li class="li1">
<img src="images/li1.png"><span><b>Exteriors:</b> <br>Minimal Wear, Battle Scarred<br><br><img src="images/tick.png"><br> </span>
</li>
</ul>
Hello everyone. So I made a tooltip showing after I hover the box with red border. The thing I want is that when I hover over the div with red border - the tooltip begin to moving/following with the mouse. Tried to search how to do it but I didn't found answer. I think it will be some jQuery code... I let you guys tell me. Thanks.
Try this code and no need to change the css as shown in this http://jsfiddle.net/bo113jxu/8/ :
$('.li1').mousemove(function (e) {
$('span', this).css({left: e.pageX - 100, top: e.pageY + 10});
});
EDIT:
The position:absolute will work good as long as there's only one .li1 element, but in case we have more .li1 elements we'd face a problem shown in this jsfiddle demo1; TO fix this the position of .li1 should be set to fixed jsfiddle demo2.. just like what #ViktorMaksimov kudos said in his answer which I was wrong about it.
CSS code:
.li1 span {
position: fixed;
margin-left: -110px;
}
jQuery code:
$(document).ready(function() {
$('.li1').mousemove(function( event ) {
$(this).find('span').css({ //Position the tooltip
'left' : event.pageX + 'px', //Left position - the X position of the mouse
"top" : (event.pageY + 20) + 'px' //Top position - the Y position of the mouse
});
});
});
Firstly the tooltip should be positioned fixed.
When you are moving the mouse inside the <li> element the tooltip will have left position - the position on X of the mouse to the window, and top position the position on Y of the mouse + 20, because the tooltip not to be exactly next to the mouse, because if you move your mouse fast enough the tooltip will hide.
And we are setting margin-left to the tooltip - negative value half of its width to make the tooltip centered to the mouse.
Related
I have a project where I want a div to appear as a large box and three more to appear underneath as smaller boxes and when you click a smaller box, it switches sizes and places with the large box using css transitions to make the movement and size change smooth. Right now I'm attempting to use jQuery and the positioning is not working at all. Here's an example of what I have so far:
https://jsfiddle.net/v3pmhawj/1/
$(function () {
let { left: x1, top: y1 } = $('.full-size-card').offset()
$('.inactive-sheets .card').on('click', function() {
let { left: x2, top: y2 } = $(this).offset()
let curr = $('.full-size-card')
let diffX = x2 - x1
let diffY = y2 - y1
$(this).css({
left: -diffX,
top: -diffY
})
$(this).addClass('full-size-card')
curr.css({
left: diffX,
top: diffY
})
curr.removeClass('full-size-card')
})
})
If anyone has suggestions on ways that involve other libraries or other techniques, I'm all ears. I'd like to be able to move the divs around in the DOM as well but as far as I can tell, you can't css-transition them if you do that since the only way (I know of) is to delete and re-add a copy of the element where you want it in the DOM.
You can create animation effect using transitions only. To achieve this you will have to define width and height of your containers as well as top and left position of bottom elements.
On click, you just have to exchange classes of element that will become small and of element that will become large.
Here is fiddle of an example:
https://jsfiddle.net/fkd3ybwx/210/
HTML
<div class="card-container">
<div class="card large">A</div>
<div class="card small">B</div>
<div class="card small">C</div>
<div class="card small">D</div>
</div>
CSS
.card-container {
position: relative;
}
.card {
transition: all ease 1s;
position: absolute;
font-size: 24px;
border: white 4px solid;
box-sizing: border-box;
cursor: pointer;
}
.small {
width: 100px;
height: 100px;
background: blue;
left: 0;
top: 300px;
}
.small ~ .small {
left: 100px;
background: green;
}
.small ~ .small ~ .small {
left: 200px;
background: yellow;
}
.large {
width: 300px;
height: 300px;
background: red;
left: 0px;
top: 0px;
}
JavaScript
const smallCards = document.querySelectorAll('.card');
smallCards.forEach((smallCard) => {
smallCard.addEventListener('click', (event) => {
const largeCard = document.querySelector('.large');
largeCard.className = "card small";
event.target.className = "card large";
});
});
I cannot seem to find a similar question out there in Google nor Stack Overflow. Here is my situation.
I have a div being used for a background image. I want this image to be hidden except for what is behind a second div that moves around with the mouse.
The moving div is a 250px by 250px circle like this.
<div class="page-mouse-tail"></div>
<style>
.page-mouse-tail {
position: fixed;
float: left;
width: 250px;
height: 250px;
border-radius: 100%;
}
</style>
I move that div around using this Javascript:
"use strict";
var mouseTails = document.getElementsByClassName("page-mouse-tail");
document.addEventListener("mousemove", function (event) {
Array.prototype.forEach.call(mouseTails, function (tail) {
tail.style.left = event.pageX + "px";
tail.style.top = event.pageY + "px";
});
});
Is there anyway I can make it so the background-image div can only be seen by what is "underneath" the mouse-tail div? Like a clip-path that is a circle, but moves with the mouse. I would like to only use CSS and Javascript, if possible. Thank you.
Yes by applying a giant box-shadow to your "page-tail" div
"use strict";
var mouseTails = document.getElementsByClassName("page-mouse-tail");
document.addEventListener("mousemove", function(event) {
Array.prototype.forEach.call(mouseTails, function(tail) {
tail.style.left = event.pageX + "px";
tail.style.top = event.pageY + "px";
});
});
body {
background: url(http://wallpaper.ouzs.com/wallpapers/windows_dual_monitor2880x900.jpg);
background-size: cover;
}
.page-mouse-tail {
position: fixed;
float: left;
width: 150px;
/* for demo */
height: 150px;
border-radius: 100%;
border: 1px solid red;
box-shadow: 0 0 0px 9999px white;
}
<div class="page-mouse-tail"></div>
You can add this to the second div's style:
overflow: hidden;
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.
I want to create a jQuery slime menu. The basic concept is simple. I have some icons with fixed positions on the screen. Some of them are "switches", and if you click them, you need to click on another element to have some effect (imageine something like when you have a building in an RTS. It's not enough to just click on the building's icon, but you need to place it on the map after that action).
I want to display a CSS triangle element after you clicked the icon, and before you click on another "compatible" div. The problem is not here, but I'm not so familiar with CSS transformations.
Here's a fiddle about what I have so far. My problem is that the arrow element is not rotating to the cursor. I also need to change the size of it, so the triangle's bottom center must be at the pointer.
http://jsfiddle.net/PSYKLON/41Lcj653/
The HTML part is simple (the span element is used for debugging):
<div class="fixicon"></div>
<div class="arrow"></div>
<span></span>
The CSS:
span {
float: right;
}
.fixicon {
width: 30px;
height: 30px;
background: #111;
border-radius: 15px;
position: fixed;
left: 10px;
top: 10px;
}
.arrow {
width: 0;
height: 0;
border-style: solid;
border-width: 0 25px 200px 25px;
border-color: transparent transparent #111 transparent;
opacity: 0;
position: fixed;
left: 0;
top: 25px;
transform-origin: 25px 0px;
transform: rotate(0deg);
}
.arrow.show {
opacity: 1;
}
And the JS:
$(function(){
$('.fixicon').click(function(){
$('.arrow').toggleClass('show');
});
$(window).mousemove(function(e){
if(!$('.arrow').hasClass('show')) {
return;
}
var dir = point_direction(25,25,e.pageX,e.pageY);
$('.arrow').css('transform','rotate('+dir+'deg)');
$('span').text(dir);
});
});
function point_direction(x1,y1,x2,y2) {
var dx,dy;
dy = y2 - y1;
dx = x2 - x1;
return (Math.atan(dy/dx) * 360) % 360;
}
So basically, I need to achieve something like this, doesn't matter where the cursor on the screen are:
Thanks for anyone, who can help. :)
I have a div with a text. I want to create a yellow circle background when hovering the div instead of the cursor.
Here is what I got so far: JsFiddle Demo
HTML:
<div id="board">
<div id="ball"></div>
Lorem ipsum dolor sit....
</div>
JQuery:
$(function(){
$("#board").mousemove(function(e){
var ball = $("#ball");
var ballRadius = parseInt(ball.css("width"))/2;
var parentOffset = $(this).offset();
var relX = e.pageX - parentOffset.left - ballRadius;
var relY = e.pageY - parentOffset.top - ballRadius;
ball.css("top",relY + "px");
ball.css("left",relX + "px");
ball.css("display","inline-block");
});
});
I manage to do it, but, when hovering, all my text is being shifted.
Add position: relative to the #board and change #ball from position: relative to position: absolute.
The issue is your positioning. DEMO
#board{
position:relative;
#ball{
position: absolute;
The reason is that relative positioning just lets you moving things around with top and left but the element still effects the layout and positioning of its siblings. Position, absolute ultimately does the same thing, but it removes that element from the layout, so it does not effect any of its siblings or other's positioning.
The other thing both relative and absolute positioning do is they make the element an offsetParent. In other words other absolute or relatively positioned elements contained within will be positioned based on that element. Because of this you need to make the #board either relative or absolute, so that the positioning of #ball will be based on #board.
PS. When storing references to a jQuery object var ball = $('#ball); its considered a good practice to put a $ on your variable. So... var $ball = $('#ball);. That way other developers can easily tell what variables are actually jQuery objects.
You will want to set both the ball and the boards position to absolute
#board{
position:absolute;
margin: 0 auto;
margin-top: 50px;
padding: 15px;
width: 500px;
height: 300px;
border: 1px solid black;
overflow: hidden;
cursor: none;
font-size: 20px;
}
#ball{
position: absolute;
width: 40px;
height: 40px;
background-color: yellow;
border-radius: 100%;
top: -50px;
left: -50px;
display: none;
z-index: -1;
/* transition: all 0.1s;
-webkit-transition: all 0.1s;*/
}
http://jsfiddle.net/Zt7h3/18/
I managed to change it up a bit.
http://jsfiddle.net/Zt7h3/19/
var relY = e.pageY - parentOffset.top - ballRadius - $(this).height();
I put the ball div at the bottom, and then subtract the height of the div to determine current Y.