Did any come across this buggy thingy with jquery draggable before when you add right: 0; bottom: 0; to your popup box?
The box jumps away from your cursor when you click on the handler
jquery,
$(".popup").draggable({
cursor: "move",
handle: ".popup-outer",
cancel: ".popup-inner"
});
html,
<div class="popup-outer popup">
<div class="popup-inner">
<div class="box-close">x close</div>
<div class="ajax-response"></div>
</div>
</div>
css,
.popup-outer{
position:absolute;
top:0;
left:0;
right: 0; //this causes the bug
bottom: 0; //this causes the bug
max-width: 1000px;
height:500px;
margin: auto;
padding:6px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius: 4px;
background: url(../image/trans_black.png);
}
.popup-inner {
text-align:left;
background-color:#ffffff;
margin:0px;
padding:20px;
overflow:hidden;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius: 2px;
border:0px solid #999;
color:#333333;
border:0 solid red;
cursor:default;
}
any idea how can I fix it?
Related
This question already has answers here:
Double border with different color [duplicate]
(8 answers)
Closed 8 months ago.
I want create this type gallery. I have multiple images in it. So when I hover on it then images should changes automatically.
Now I'm facing one issue i.e. How to add two borders like this using css or any other style-sheet.
You can add some box-shadow together. The first one is gray. The second one is white as a border with a one-pixel movement than the previous.
body{
background:#efefef;
}
.wrapper {
position: relative;
padding:10px;
}
.image {
width: 100px;
height: 100px;
background: #000;
border: 1px solid #FFF;
position: absolute;
box-shadow: 5px -5px 0 gray,6px -6px 0 white,11px -11px 0 lightgray,12px -12px 0 white;
}
<div class="wrapper">
<div class="image"></div>
</div>
It can be done with three elements. One element is the image itself, and it has a tiny 1px white border. Then there are two elements behind the image that have grey background and also white border.
Look at this example, pretty much the same, just change the div with class image for an actual img element and invert the positioning and you are ready to go.
.wrapper {
position: relative;
}
div {
width: 100px;
height: 100px;
background: #000;
border: 1px solid #FFF;
position: absolute;
}
.first {
left: 5px;
top: 5px;
z-index: -1;
background-color: #777;
}
.second {
left: 10px;
top: 10px;
z-index: -2;
background-color: #AAA;
}
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
<div class="image"></div>
</div>
try this
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:black;
}
.imageContainer{
display:inline-block;
position:relative;
width:100px;
height:100px;
top:200px;
left:200px;
padding:50px;
background: url("https://media.cntraveller.com/photos/611bf0b8f6bd8f17556db5e4/1:1/w_2000,h_2000,c_limit/gettyimages-1146431497.jpg") no-repeat center center/cover;
}
.divOne{
position:absolute;
border-top:3px solid grey;
border-right:3px solid grey;
width:100%;
height:100%;
top:-6px;
left:6px;
z-index:-1;
}
.divTwo{
position:absolute;
border-top:3px solid grey;
border-right:3px solid grey;
width:100%;
height:100%;
top:-10px;
left:10px;
z-index:-1;
}
</style>
</head>
<body>
<div class="imageContainer">
<div class="divOne"></div>
<div class="divTwo"></div>
</div>
</body>
</html>
I am making a tooltip box which involve personal introduction text,my target is a tooltip box with Arrow is displayed if I using a mouse to hover a profile picture.........
I have tried some methods online but they are not workable ...... can anyone help me?
here is my css code for the tooltip box
.tooltip {
display:none;
position:absolute;
border:1px solid #333;
background-color:#161616;
border-radius:5px;
padding:10px;
color:#fff;
font-size:12px Arial;
}
Here is my html code example
<table style="width:100%">
<tr>
<td><img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" class="masterTooltip" title="Name: Ching Yuet To;
Hobby: Hiking, Watching movie;
I believe that it would be fun that we can carry out research study
independently. I think it is meaningful to participate and promote synthetic
biology research.
I can learn a lot and make many international friends in Boston! "></td>
Use ::before selector to make the arrow like the example
.tooltip-element {
display:none;
position:absolute;
border:1px solid #333;
background-color:#161616;
border-radius:5px;
padding:10px;
color:#fff;
font-size:12px Arial;
bottom:100%;
left:0;
}
.tooltip-element::after{
content:'';
position:absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 7px 5px 0 5px;
border-color: #161616 transparent transparent transparent;
bottom:-8px;
left:5px;
}
.tooltip{
position:relative;
}
.tooltip:hover .tooltip-element{
display:block;
}
<br><br><br><br><br><br><br>
<span class="tooltip">
<span class="tooltip-element">contnet tooltip</span>
test</span>
Basic Tooltips Image With Arrow
/* --- Tooltip || Begin --- */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltipText {
visibility: hidden;
max-width: 300px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 0.5em;
position: absolute;
z-index: 1;
word-wrap: break-word;
}
.tooltip:hover .tooltipText {
visibility: visible;
}
.tooltipTextRight {
left: 110%;
top: 0px;
}
/* --- Tooltip || End --- */
/* --- Tooltip Arrow || Begin --- */
.tooltip .tooltipArrow::after {
border-width: 5px;
border-style: solid;
content: "";
position: absolute;
}
.tooltipArrowRight::after {
border-color: transparent black transparent transparent; /* right */
top: 0px;
right: 100%;
margin-top: 5px;
}
/* --- Tooltip Arrow || End --- */
img {
width: 200px;
height: 200px;
object-fit: cover;
}
<div class="tooltip">
<img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" title="Name: Ching Yuet To;" />
<span class="tooltipText tooltipTextRight tooltipArrow tooltipArrowRight">
<p>Hobby: Hiking, Watching movie;</p>
<p>I believe that it would be fun that we can carry out research study independently. I think it is meaningful to participate and promote synthetic biology research.</p>
</span>
</div>
I created this box. I want this box to open when I hover my mouse over the part that is still visible. Now when I hover my mouse nothing happens. I think the error must be the JS file. Calling the function goes okay because if put for example an
alert("test")
in the close box function everything works except the box.
HTML:
<div class="box" onmouseover="boxclose();">
<h4 class="AlarmHeader"> Alarm Times!</h4>
</div>
CSS:
.box{
height: 150px; width: 400px;
background-color:black;
border-radius: 20px 20px 0 0;
padding: 5px;
position:fixed;
bottom:-100px;
right:5px;
JS:
function boxclose() {
document.getElementsByClassName("box").style.bottom="0px"
}
Useful link: https://www.w3schools.com/cssref/pr_pos_bottom.asp
You're using getElementsByClassName, which returns a list instead of one element, so you just need to tell it which element to target:
document.getElementsByClassName("box")[0].style.bottom="0px"
Working example:
function boxclose() {
document.getElementsByClassName("box")[0].style.bottom="0px"
}
.box{
height: 150px; width: 400px;
background-color:black;
border-radius: 20px 20px 0 0;
padding: 5px;
position:fixed;
bottom:-100px;
right:5px;
<div class="box" onmouseover="boxclose();">
<h4 class="AlarmHeader"> Alarm Times!</h4>
</div>
You dont need javascript there, you can do that with css, too i will add a transition, try the following:
.box{
height: 150px; width: 400px;
background-color:black;
border-radius: 20px 20px 0 0;
padding: 5px;
position:fixed;
bottom:-100px;
right:5px;
transition:all .8s cubic-bezier(1,.65,1,.61);
}
.box:hover {
bottom:0;
}
<div class="box">
<h4 class="AlarmHeader"> Alarm Times!</h4>
</div>
If i'm not wrong changing your js file like this will work,
function boxclose() {
document.getElementsByClassName("box")[0].style.bottom="0px"
}
Hello If i Properly understand you then please try this.
.box-popup {padding: 5px 10px; border:1px solid #ddd; position:relative;}
.box-popup span {display: none;}
.box-popup:hover span {display: block; padding: 10px; width: 200px; height: 100px; border:1px solid #eee; position: absolute; left:0; top: 30px;}
<div class="box-popup">
Hover
<span>
Hover Data
</span>
</div>
I have a image, I want to add some effects. Hover overlay div I was able to add it. Now what I want to do is to add onclick event and change to another overlay div.
Here is my code, or see the CodePen Here
<div id="box">
<div id="overlay">
<span id="plus">+</span>
</div>
CSS:
body { background:#e7e7e7;}
#box { width:300px;
height:200px;
float: left;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
margin:5% auto 0 auto;
background:url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
background-size:cover;
border-radius:5px;
overflow:hidden;}
#overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;}
#box:hover #overlay {
opacity:1;}
#plus { font-family:Helvetica;
font-weight:900;
color:rgba(255,255,255,.85);
font-size:96px; }
I have only hover effect, when I click it should change Plus (+) to Minus (-) and at the bottom of the image div to appear a small div where will be placed a small description.
When the second overlay div is triggered, and I press back on Minus (-) it should change back. I will add here a image so that you can see what I'm trying to do.
In the image bellow you can see the blue div that should appear onclick event.
Firstly, the image appears to be content so it should inline HTML and not a background image and I have proceeded on that basis.
Forked Codepen Demo
Revised HTML
<div class="box">
<img src="http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg" alt="" />
<div class="overlay">
<h1 class="plus"></h1>
</div>
<div class="description">
<p>Lorem ipsum dolor.</p>
</div>
</div>
CSS wise, I have taken advantage of absolute positioning, pseudo elements and a little CSS3 transform to get everything in place. The latter allows flexibility in changing some font-sizing choices for the +/- and border sizes of pseudo element (the arrow).
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.box {
width:300px;
height:200px;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
margin:5% auto 0 auto;
border-radius:5px;
overflow:hidden;
position: relative;
}
.box img {
display: block;
}
.overlay {
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background:rgba(0,0,0,.75);
text-align:center;
opacity:0;
-webkit-transition: opacity .25s ease;
}
.box:hover .overlay {
opacity:1;
}
.overlay .plus:before {
content:"+";
margin: 0;
padding: 0;
position: absolute;
top:50%;
left:50%;
font-family:Helvetica;
font-weight:900;
color:rgba(255,255,255,.85);
font-size:6rem;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
.overlay.clicked .plus:before {
content:"-";
}
.description {
display: block;
position: absolute;
width:100%;
height:30%;
background-color: lightblue;
bottom:-30%;
text-align: center;
transition: bottom 0.25s ease;
}
.description:after {
content:"";
position: absolute;
width:0;
height:0;
left:50%;
border-style:solid;
border-color: transparent transparent lightblue transparent;
border-width: 16px;
top:0;
-webkit-transform:translate(-50%, 100%);
}
.overlay.clicked + .description {
bottom:0%;
}
.overlay.clicked + .description:after {
-webkit-transform:translate(-50%, -100%);
}
Finally, a little JQuery to add a clicked (or active) interaction by way of .toggleClass.
Jquery
(function($) {
$(".plus").click(function () {
$(this).parent().toggleClass("clicked");
});
})(jQuery);
use jquery
$(document).ready(function(){
var trigger = $(".plus");
var overlay = $(".overlay");
trigger.click(function(){
overlay.toggle('fast');
})
});
I have a pop up div working on click. I need to have the pop up appear in the browser where the user is looking. Right now on short pages the pop up div is no where to be found and on long pages you have to scroll way down to even see the pop up.
So far I have tried a couple different things in my popUpDiv with no luck.
margin: 30px auto 0;
top: 50%;
left: 50%;
margin-left: -155px;
margin-top: -700px;
Here is my css:
/*STYLES FOR CSS POPUP*/
#blanket {
background-color:#111;
opacity: 0.65;
*background:none;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
}
#popUpDiv {
padding: 40px;
position:absolute;
background-color: #f3f3f3;
height:255px;
border:5px solid #000;
z-index: 9002;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
border-radius: 10px;
margin-left: -155px;
margin-top: -700px;
}
#popUpDiv a {position:relative; top:0px; right:10px}
/*END CSS POPUP*/
Here is what I have in my php file:
<!--POPUP-->
<script type="text/javascript" src="http://domain.com/js/css-pop.js"></script>
<div id="blanket" style="display:none;">
</div>
<div id="popUpDiv" style="display:none;">
Pop Up content Here
</div>
<!-- / POPUP-->
There's more than a few ways to do what you're trying to do in jscript, but the cadillac way to do it might be modal popups: http://www.script-tutorials.com/css3-modal-popups/ .
Position: fixed will solve your problem. Your use of position: absolute is causing all the drama.
#popUpDiv {
padding: 40px;
position:fixed;
background-color: #f3f3f3;
height:255px;
border:5px solid #000;
z-index: 9002;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
border-radius: 10px;
}