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>
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>
Made an in-depth search and learnt on how to create some stylish custom created textboxes to achieve a better graphic look. I have two issues to complete this mesh-up of textboxes so that they serve a total functioning of a common textbox.
I'm unable to execute the :focus on the parent div container, although the code is perfectly fine in CSS because when going by Inspect Element (Chrome), Force Element to> :focus it does what I want but in the real-time it never does nevertheless clicking on its children or itself.
I want to add the :hover effect on the child div container (the left black coloured div) in which it'll expand the :after transition for a certain amount of pixels (assuming +20px/+30px).
The desired and the final result should look like in the picture below:
#submitForm {
border:2px grey inset;
border-radius:10px;
display:table;
margin: 10px auto 0;
height: 500px;
position:relative;
width: 800px;
}
#submitForm #btnSend {
bottom:20px;
display:block;
height: 50px;
position:absolute;
right: 20px;
width:100px;
}
#submitForm .highlights {
border-bottom:5px solid #2E8DEF;
border-radius:15px;
float:left;
height: 45px;
margin-top: 40px;
margin-left:40px;
width: 520px;
}
#submitForm .highlights:focus {
border-bottom:none;
outline: 0;
-webkit-box-shadow: 0px 0px 6px 2px rgba(105, 185, 250, 0.8);
-moz-box-shadow: 0px 0px 6px 2px rgba(105, 185, 250, 0.8);
box-shadow: 0px 0px 6px 2px rgba(105, 185, 250, 0.8);
}
#submitForm .tags, #submitForm .textarea {
float:left;
font-size: 25px;
font-family: calibri;
font-style: italic;
height: 40px;
position:absolute;
text-align: center;
}
#submitForm .tags {
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
background: #333333;
color: #2E8DEF;
height:40px;
padding-top:5px;
text-align: center;
width: 120px;
z-index:3;
}
#submitForm .tags:after {
background: #333333;
content:" ";
display: block;
left: 90px;
height: 100%;
position:absolute;
top: 0;
width: 30%;
z-index:-1;
transform-origin: bottom left;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}
#submitForm .tags:hover {
text-shadow: #2E8DEF 0px 0px 5px;
}
#submitForm .tags:after:hover {
/* Code for expanding the skewed .tags:after */
}
#submitForm .textarea {
background-color:#F0F0F0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-left: 120px;
overflow: hidden;
padding-top: 5px;
width: 400px;
appearance: field;
-moz-appearance: field;
-webkit-appearance: field;
}
#submitForm .textarea:focus {
outline:0;
}
<forms id='submitForm'>
<div id='formName' class='highlights'>
<div class='tags'>Name</div>
<div class='textarea' contenteditable></div>
</div>
<div id='formSurname' class='highlights'>
<div class='tags'>Surname</div>
<div class='textarea' contenteditable></div>
</div>
<div id='formAddress'class='highlights'>
<div class='tags'>Address</div>
<div class='textarea' contenteditable></div>
</div>
<div id='formCity' class='highlights'>
<div class='tags'>City</div>
<div class='textarea' contenteditable></div>
</div>
<div id='formPhone' class='highlights'>
<div class='tags'>Phone</div>
<div class='textarea' contenteditable></div>
</div>
<button id="btnSend" type="button" onclick='submitListOfProducts()'>Submit</button>
</forms>
And, the link to JS fiddle:
http://jsfiddle.net/xa3nwhj4/1/
Vishal provided the reason for the hover effect not working - this is my addition to it:
- focus only fires on the textarea, but you want to change the style of the parent div
so lets change the css entry for #submitForm .highlights:focus to #submitForm .focusedhighlights
and then let jquery do the magic:
$(".textarea").focus(function(){ //event handler, to fire when a textarea gets focused
$(this).parent().toggleClass("focusedhighlights") //toggle class on parent element for highlight effect
});
$(".textarea").focusout(function(){ //event handler to fire, when textarea gets unfocused
$(this).parent().toggleClass("focusedhighlights") // toggle class to remove highlight effect
});
see working fiddle here: http://jsfiddle.net/vo59rgnd/2/
The :focus is not working because you are adding focus to .highlights which is a <div> and not input element.
And to expand the onhover. The CSS should be like this
#submitForm .tags:hover {
text-shadow: #2E8DEF 0px 0px 5px;
width:160px;
}
#submitForm .tags:hover:after {
left:130px;
}
See the demo here : http://jsfiddle.net/Lrdmuzu6/
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?
I want to place the div exactly in the center whose size is changing dynamically.
<div id="containall">
<div style="display:none" align="center" id="mainDiv">
<div class="mainDiv" id="paste"></div>
<div class="midDiv" id="popup">X
<img id="bearimage2" style="visibility:hidden;">
<canvas id="tools_sketch" width="200" height="200"></canvas>
</div>
</div>
</div>
I am changing the size of canvas dynamically according to image it holds.
the css for POPUP div is like
#popup {
width:600px;
height:400px;
background:url(/BugClipper/bccss/bgtrans_bc.png);
position:absolute;
left:400px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
margin:-600px 0 0 0;
border:2px solid #333;
}
NOw when the popup size is changed to hold canvas, it goes to the right side of screen and i have to scroll to view full image on canvas.
Please guide me how to set css so that it always display on middle of screen
You can apply this CSS to the popup div:
#popup {
width: 50%;
margin: 0 auto;
}
try this css
#popup {
width:50%;
height:400px;
background:url(/BugClipper/bccss/bgtrans_bc.png);
left:400px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
margin:0 auto;
padding:0;
border:2px solid red;
}
Try this:
#popup {
top: 50%;
left: 50%;
width: 600px;
height: 400px;
margin: -200px 0 0 -300px;
position: fixed;
}
Fiddle
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;
}