I'm trying to create some interactive spots on my website when a user rolls over the hotspot, I want the popup to be full width. relative to the container .hotspot-wrp. Currently, the popup flows outside of the viewable area and on mobile the content isn't viewable.
.hotspot-wrp {
display: block;
position: relative;
background: #636e72;
width: 80vw;
margin: 0px auto;
height: 200px;
}
.hot-spot {
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(227, 193, 122, 0.8);
position: absolute;
cursor: pointer;
transition: all ease 350ms;
margin-left: -12px;
margin-top: -12px;
}
.tooltip {
position: absolute;
background: #fff;
border: 1px solid #E8C378;
width: 100%;
padding: 15px;
display: none;
margin-top: 30px;
-webkit-transform: translateX(0%);
transform: translateX(0%);
z-index: 9999;
}
.hot-spot:hover .tooltip,
.hot-spot:active .tooltip {
display: block;
}
<div class="hotspot-wrp">
<div class="hot-spot" style="top:43.8776%; left:4.4476%;">
<div class="tooltip">
<h3>Test</h3>
<p>Some demo text will be in here.</p>
</div>
</div>
<div class="hot-spot" style="top:4.0816%; left:63.4146%;">
<div class="tooltip">
<h3>Test</h3>
<p>Some demo text will be in here.</p>
</div>
</div>
</div>
JSFiddle - http://jsfiddle.net/L7ksfdmc/
Add overflow: hidden; to the parent container.
.hotspot-wrp {
display: block;
position: relative;
background: #636e72;
width: 80vw;
margin: 0px auto;
height: 200px;
overflow: hidden;
}
.hot-spot {
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(227, 193, 122, 0.8);
position: absolute;
cursor: pointer;
transition: all ease 350ms;
margin-left: -12px;
margin-top: -12px;
}
.tooltip {
position: absolute;
background: #fff;
border: 1px solid #E8C378;
width: 100%;
padding: 15px;
display: none;
margin-top: 30px;
-webkit-transform: translateX(0%);
transform: translateX(0%);
z-index: 9999;
}
.hot-spot:hover .tooltip,
.hot-spot:active .tooltip {
display: block;
}
<div class="hotspot-wrp">
<div class="hot-spot" style="top:43.8776%; left:4.4476%;">
<div class="tooltip">
<h3>Test</h3>
<p>Some demo text will be in here.</p>
</div>
</div>
<div class="hot-spot" style="top:4.0816%; left:63.4146%;">
<div class="tooltip">
<h3>Test</h3>
<p>Some demo text will be in here.</p>
</div>
</div>
</div>
Just as Emil said use overflow:hidden and for making your tooltip full width, choose the required length in pixels to increase the width. If you use width:100% in .tootltip css, it will only acquire the width of its parent div's width. So use absolute length as per requirement or length of text inside tooltip.
Related
The Element is not resizing and browser is not re-calculating the position of the Element even though all the widths and heights are mentioned in percentages only. This code basically renders a Squared DIV with Two elements one with Centered and another at right top corner of the SQuare.
<html>
<head>
<style>
.board {
font-size: 8em;
}
.cellContainerOuter {
width: 100%;
padding-bottom: 100%;
position: relative;
background-color: yellow;
border: 1px solid black;
}
.cellContainer {
width: 100%;
padding-bottom: 100%;
position: absolute;
display: table;
}
.cellContainerInner {
padding-bottom: 50%;
padding-top: 50%;
padding-left: 50%;
padding-right: 50%;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text {
border: 0px dotted white;
position: absolute;
bottom: 20%;
top: 20%;
left: 20%;
right: 20%;
overflow: hidden;
text-overflow: clip;
display: block;
}
.weight {
position: absolute;
right: 0px;
top: 0px;
margin: 2px;
border: 1px solid white;
}
</style>
</head>
<body>
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
</body>
</html>
Any help to resolve this issue is highly appreciated.
CodePen: https://codepen.io/mdileep/full/MGrNgw/
Refactored your CSS.
Let me know if this is the behaviour you are expecting.
OR with responsive you mean to change your height of 6 as well?
body {
margin: 0;
}
.cellContainer {
position: relative;
background: yellow;
width: calc(100vw - 20px);
height: calc(100vh - 20px);
margin: 10px;
}
.cellContainerInner {
border: 1px solid;
height: 100%;
display: flex;
}
.weight {
font-size: 8em;
position: absolute;
right: 0px;
top: 0px;
border: 1px solid;
}
.text {
flex: 1;
font-size: 8em;
/* border:2px solid; */
align-self: center;
text-align: center;
}
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
I have div with 3 divs in it.
In left and right div are text and in center div needs to be toggle switch.
Here is code
<div class="doctors-appointment">
<div class="Row">
<div class="Column">
<b>Doctor's appointment</b>
</div>
<div class="Column">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="Column">
<b>For internal purposes</b>
</div>
</div>
</div>
But toggle switch not in div
Here is screen:
I get styles from there w3school
Here is css for divs
.doctors-appointment {
clear: both;
width: 100%;
margin-top: 100px;
color: #1d69b4;
font-size: 20px;
}
.Row {
display: table;
width: 100%; /*Optional*/
table-layout: fixed; /*Optional*/
border-spacing: 10px; /*Optional*/
}
.Column {
display: table-cell;
background-color: red; /*Optional*/
}
Where is my problem?
Add this CSS
.doctors-appointment {
clear: both;
width: 100%;
margin-top: 100px;
color: #1d69b4;
font-size: 20px;
}
.Row {
display: table;
width: 100%; /*Optional*/
table-layout: fixed; /*Optional*/
border-spacing: 10px; /*Optional*/
}
.Column {
display: table-cell;
background-color: red; /*Optional*/
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<div class="doctors-appointment">
<div class="Row">
<div class="Column">
<b>Doctor's appointment</b>
</div>
<div class="Column">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="Column">
<b>For internal purposes</b>
</div>
</div>
</div>
You can make just with your input and with some styles, you do not need actually a new span.
Here I upload a codepen using sass.
Your input should be like:
<input class="switch" type="checkbox" />
And the styles:
.switch{
-webkit-appearance: none;
height: 1rem;
width: 3rem;
background-color: gray;
border-radius: 43px;
position: relative;
cursor: pointer;
&::after {
top: 1px;
left: 2px;
content: '';
width: 0.8rem;
height:0.8rem;
background-color:lightgray;
position: absolute;
border-radius: 100%;
transition: 1s;
}
&:checked {
background-color: blue;
&::after {
transform: translateX(2rem);
}
}
&:focus {
outline-color: transparent;
}
}
https://codepen.io/jdtorregrosas/pen/qLzvye
Bear with me on this... little hard to explain. So what I'm attempting to do is have a block of text remove the background of a div directly behind it. The image linked below was done is Illustrator and now I'm trying to find a solution within HTML & CSS.
Illustrator screenshot of what I'm trying to accomplish
.grid-item {
position: relative;
width: 300px;
height: 200px;
padding: 5px;
}
.grid-container {
position: relative;
width: 100%;
height: 100%;
background-color: #eee;
}
.grid-container img {
position: absolute;
}
.grid-item-overlay {
position: absolute;
top: 5px;
left: 5px;
bottom: 5px;
right: 5px;
background-color: rgba(0,0,0,0.5);
}
span {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
font-weight: 700;
font-family: sans-serif;
font-size: 40px;
text-align: center;
color: #fff;
}
<div class="grid-item">
<div class="grid-container">
<img src="https://unsplash.it/300/200/?random">
<div class="grid-item-overlay">
<span>Text Here</span>
</div>
</div>
</div>
The objective is to have the span text create a transparent mask of the grid-item-overlay background.
I'm open to any suggestions! :)
You could try working with mix-blend-mode,
mix-blend-mode : The mix-blend-mode CSS property describes how an
element's content should blend with the content of the element's
direct parent and the element's background.
.grid-item {
position: relative;
width: 300px;
height: 200px;
padding: 5px;
}
.grid-container {
position: relative;
width: 100%;
height: 100%;
background-color: #eee;
}
.grid-container img {
position: absolute;
}
.grid-item-overlay {
position: absolute;
top: 5px;
left: 5px;
bottom: 5px;
right: 5px;
background-color: rgba(0,0,0,0.5);
}
span {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
font-weight: 700;
font-family: sans-serif;
font-size: 40px;
text-align: center;
color:rgba(255,255,255,1);
mix-blend-mode: overlay;
}
<div class="grid-item">
<div class="grid-container">
<img src="https://unsplash.it/300/200/?random">
<div class="grid-item-overlay">
<span>Text Here</span>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-container">
<img src="https://unsplash.it/300/200/?random">
<div class="grid-item-overlay">
<span class="text">Text Here</span>
</div>
</div>
</div>
Add this css to your css File
.text{
color: rgba(255, 255, 255, 0.1);
}
.grid-item-overlay:before{
position: absolute;
content:" ";
top:0;
left:0;
width:100%;
height:100%;
display: block;
z-index:0;
background-color:rgba(255,0,0,0.5);
}
I added a button to my code, I wanted to make it transparent but then it made a huge gap at the top and I want the button to eb placed in the middle but I really have no idea on how to do it.
Here are some image examples
https://i.gyazo.com/3b6d5f86f5a6ec84ca61e499b2411079.jpg[^]
https://i.gyazo.com/d086228702c62d79bf5fdeb518089c7e.jpg[^]
as you can see in this picture I changed the background color to transparent
why is it making that huge gap at the top? The button is still there but since its a white background I cant see it and I would like to move the button down to the middle
}
button {
background-color: Transparent;
background-repeat:no-repeat;
cursor:pointer;
overflow: hidden;
outline:none;
height: 38px;
line-height: 40px;
border: 2px solid white;
display: inline-block;
float: none;
text-align: center;
width: 120px;
padding: 0px!important;
font-size: 14px;
color: #fff;
}
button:hover {
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
/*Menu CSS*/
#sidebar {
background: #151718;
width: 200px;
height: 17%;
display: block;
position: absolute;
left: -200px;
top: 0px;
transition: left 0.3s linear;
z-index: 1000;
}
#sidebar.visible {
left: 0px;
transition: left 0.3s linear;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
ul li a {
background: #1C1E1F;
color: #ccc;
border-bottom: 1px solid #111;
display: block;
width: 180px;
padding: 10px;
text-decoration: none;
}
#sidebar-btn {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 150px;
cursor: pointer;
margin: 20px;
position: absolute;
top:0px;
right:-60px;
}
#sidebar-btn span {
height: 1px;
background:#ffffff;
margin-bottom: 5px;
display: block;
}
#sidebar-btn span:nth-child(2) {
width: 75%;
}
#sidebar-btn span:nth-child(3) {
width: 50%;
}
/*Menu CSS*/
</style>
</head>
<body>
<div id="sidebar">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- Buttons for email subscriptions and stuff -->
<!-- Full Width Responsive Slider -->
<div class="container">
<div style="background-color: transparent; text-align: center; padding: 10px"><button>Contact Us</button></div>
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/wp5.jpg">
<img src="images/wp6.jpg">
<img src="images/wp7.jpg">
</div>
<!-- Full Width Responsive Slider -->
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</body>
</html>
please you can add in
.button{
position:fixed;
top:40%
}
Here is the layout wanna to achieve. If there something you don't understand, you can ask.
I suggest try construct your css and your html.
Example
CSS
.centering{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
DEMO
I am using the Jquery Draggable UI: http://jqueryui.com/draggable/
I'm working on a project where I can drag four images into 4 different containers. What I want to do is change the size of the image to the size of the container that it is dropped into. The image should revert back to its original size when it is taken outside of the container.
EXAMPLE: http://jsfiddle.net/W8yaz/546/
Here is my code as of right now:
HTML
<div class="bordered-boxes">
<ul>
<li class="squaredotted">
<div style="width:205px; height: 205px; border: 1px dotted #eee;" class='snappable'>
</div>
</li>
<li class="squaredotted">
<div class="" style="width:175px; height: 175px; border: 1px dotted #eee;">
</div>
</li>
<li class="squaredotted">
<div class="" style="width:145px; height: 145px; border: 1px dotted #eee;">
</div>
</li>
<li class="squaredotted">
<div class="" style="width:110px; height: 110px; border: 1px dotted #eee;">
</div>
</li>
</ul>
<div class="" style="position: absolute; text-align: left; top: 50%; transform: translateY(-50%); left: 760px; font-weight: bold; font-size: 15px; opacity: .7; font-style: italic;">
<p>Least
<br />Important</p>
</div>
<div class="" style="position: absolute; text-align: left; top: 50%; transform: translateY(-50%); left: -95px; font-weight: bold; font-size: 15px; opacity: .7; font-style: italic;">
<p>Most
<br />Important</p>
</div>
</div>
<div class="card-wrapper animation">
<ul>
<li class="square">
<div class="container">
<div class="card" id="incapacitation-icon">
<div class="front">
<img src="assets/icons/icon-incapacitation.svg" width="100%" />
<div class="more-info">
<img src="assets/icon-info.svg" />
</div>
</div>
<div class="back">
<section>
<h4>Incapacitation</h4>
<p>Confining Dangerous People</p>
</section>
<div class="close-icon">
x
</div>
</div>
</div>
</div>
</li>
<li class="square">
<div class="container">
<div class="card" id="deterrence-icon">
<div class="front">
<img src="assets/icons/icon-deterrence.svg" width="100%" />
<div class="more-info">
<img src="assets/icon-info.svg" />
</div>
</div>
<div class="back">
<section>
<h4>Deterrence</h4>
<p>Setting an Example</p>
</section>
<div class="close-icon">
x
</div>
</div>
</div>
</div>
</li>
<li class="square">
<div class="container">
<div class="card" id="rehabilitation-icon">
<div class="front">
<img src="assets/icons/icon-rehabilitation.svg" width="100%" />
<div class="more-info">
<img src="assets/icon-info.svg" />
</div>
</div>
<div class="back">
<section>
<h4>Rehabilitation</h4>
<p>Breaking the Cycle of Crime</p>
</section>
<div class="close-icon">
x
</div>
</div>
</div>
</div>
</li>
<li style="margin-right:0;" class="square">
<div class="container">
<div class="card" id="retribution-icon">
<div class="front">
<img src="assets/icons/icon-retribution.svg" width="100%" />
<div class="more-info">
<img src="assets/icon-info.svg" />
</div>
</div>
<div class="back">
<section>
<h4>Retribution</h4>
<p>An Eye for An Eye</p>
</section>
<div class="close-icon">
x
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
CSS
.card-wrapper li {
height: 203px;
position: relative;
list-style-type: none;
}
.card-wrapper .card {
width: 100%;
height: 100%;
position: absolute;
perspective:800px;
}
.card-wrapper .card div {
display: block;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
z-index:10;
}
.card-wrapper .card .front {
}
.card-wrapper .card .back {
background: #8d797a;
z-index:0;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
border: 3px solid white;
}
.card-wrapper .card .back h4{
font-size: 20px;
color:#4b3839;
margin-bottom:5px;
font-weight: bold;
}
.card-wrapper .card .back section {
padding: 20px;
text-align: center;
padding-top:30px;
}
.card-wrapper .card .back p {
font-size: 18px;
font-weight: 200;
color:white;
margin: 0px;
line-height: 30px;
}
.card-wrapper .card.flip .front {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
z-index:0;
}
.card-wrapper .card.flip .back {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
z-index:10;
}
.card-wrapper .more-info {
font-size: 2em;
width: 1.5em !important;
text-align: center;
line-height: 1.5em;
background: #FFF;
color: #fff;
border-radius: 50px;
position: absolute !important;
top: -28px;
right: -18px;
height: 1.5em !important;
}
.card-wrapper .close-icon {
font-size: 2em;
width: 1.5em !important;
text-align: center;
line-height: 1.5em;
background: #FFF;
color: #fff;
border-radius: 50px;
position: absolute !important;
top: -28px;
right: -18px;
height: 1.5em !important;
}
.card-wrapper .card .close-icon {
display: none;
}
.card-wrapper .card.flip .more-info {
display: none;
}
.card-wrapper .card.flip .close-icon {
display: block;
}
.card-wrapper {
position: absolute;
width: 90%;
left: 0;
right: 0;
margin: auto;
top: 50%;
transform: translateY(-50%);
}
.bottom-row {
position: absolute;
width: 60%;
left: 0;
right: 0;
bottom: 70px;
margin: auto;
}
.bottom-row li {
list-style: none;
width: 20% !important;
display: inline-block;
margin-right: 3% !important;
height: 117px !important;
position: relative;
}
.bottom-row .back {
display: none;
}
.bottom-row .more-info {
display: none;
}
.bottom-row .more-info2 {
display: none;
}
.bordered-boxes {
position: absolute;
width: 75%;
left: 0;
right: 0;
margin: 0 auto;
display: none;
top: 50%;
transform: translateY(-50%);
}
.bordered-boxes ul {
display: table;
width: 100%;
margin: 0px;
padding: 0px;
}
.bordered-boxes ul li {
display: inline-block;
vertical-align: middle;
margin-right: 4%;
}
Javascript
$('.square').draggable({
snap: '.squaredotted',
snapMode: 'inner',
snapTolerance: 25,
});
The answer is here:
How to find out about the "snapped to" element for jQuery UI draggable elements on snap
$(".draggable").draggable({
snap: ".snap",
stop: function(event, ui) {
/* Get the possible snap targets: */
var snapped = $(this).data('draggable').snapElements;
/* Pull out only the snap targets that are "snapping": */
var snappedTo = $.map(snapped, function(element) {
return element.snapping ? element.item : null;
});
/* Process the results in the snappedTo array! */
}
});