I am trying to add a border to a div element when the moust is hovering on the div, but I found after the border is aded, the boder will occupy some space and make the content move. See the snippet below. Is it possible to avoid move the content in this case when the border is displayed?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/lib.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#test-id').hover(function() {
console.log("test-id");
$('#test-id').css('border', '5px dotted');
},
function() {
$('#test-id').css('border', 'none');
}
);
});
</script>
</head>
<body style="margin-bottom:0px;margin-top:0px;">
<div>
<div style="width: 300px;">
</div>
<div id="test-id">
jfdjkfjdsfjaldsjfsjf
</div>
</div>
</body>
</html
>
Use CSS 'outline' property instead of border. Which will not occupy element space.
Hope will help you.
Try maintaing the border all the time, and just change the color from transparent to whatever color you want it to have when its visible. You could also use a the background color as the "off" color, but that means it has to overly a solid colored element.
Bin ,
Yes border is also cacluated as part of width. So do one thing give a border before itselef with the same color as background , once you mouseover you can change the color , so that it won't push the other ones down.
This is the behavior how the css render.
You need to set the margin to prevent this.
$('#test-id').css('margin', '-5px');
1 Solution is that you make the with: on hover -2px or another one on normal state, with the border color seted to the box color (or background color of the body).
ex 1:
<body>
<div class="container"></div>
</body>
body { background: #ccc; }
.container { width: 200px; height: 200px; background: #fff; }
.container:hover { width: 198px; border: 1px solid #000; }
ex 2: (best solution)
<body>
<div class="container"></div>
</body>
body { background: #ccc; }
.container { width: 200px; height: 200px; background: #fff; border: 1px solid #fff; } // or #ccc
.container:hover { border: 1px solid #000; }
Related
Scenerio:
Here is my HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id='textbox'>
<div id="sibling"></div>
<div id='canvasParent'>
<canvas id="myCanvas" style="border:1px solid #000000">
</canvas>
</div>
</div>
</body>
</html>
Here is the js for the same.
function outputsize() {
console.log(canvasParent)
canvasParent.clientWidth = textbox.clientWidth - sibling.clientWidth;
myCanvas.width = canvasParent.clientWidth;
}
outputsize();
new ResizeObserver(outputsize).observe(textbox);
Here is the css for the same.
#textbox {
display:flex;
flex-direction:row;
border:1px solid green;
flex:1;
}
#sibling {
width:200px;
border:4px solid yellow;
}
#canvasParent {
border:2px solid red;
flex:1;
}
First div have 2 child divs namely sibling and canvasParent, sibling has fixed width, whereas canvasParent will take the remaining width.
Currently it is not behaving as expected once we decrease window width then the first div(sibling) is decreasing its width, and the width of other div is constant, whereas I want sibling div to remain at its fixed width once user decrease the window width and the other div to shrink/grow.
Here is the JSBIN for the same having css, js for the described scenerio.
Expectation:
Once we resize the window, the first div (sibling) will keep its fixed width and the other div having canvas inside it will shrink/grow based on window resizing, and the canvas inside it will take its parent width(logic for canvas to take its parent div is already written in js file.)
And resizing works fine, once I remove the canvas element from the second div.
Here is the JSBIN that show first div to remain at fixed width and other div to shrink/grow once user reduces windows width.
You can use CSS Grid to get the effect:
#textbox {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 1fr;
grid-template-areas: ". .";
grid-column-gap: 10px;
}
#sibling {
background: red;
}
#canvasParent {
background: black;
}
#myCanvas {
width: 100%;
background: pink;
}
<div id="textbox">
<div id="sibling"></div>
<div id="canvasParent">
<canvas id="myCanvas"></canvas>
</div>
</div>
You can design CSS Grids here: https://grid.layoutit.com/?id=2NkZ4JY
I'm trying to build a 3D viewer with three.js, that has full height but leaves space for a side panel. The vertical layout works as expected, but as soon as I append the render's dom element, a horizontal scroll bar appears.
Attached is a minimal working example. I would expect to just see the (black) canvas element and the red body. But after v.append(renderer.domElement), the page gets larger (filled with blue, html element) and a horizontal scroll bar appears. It seems the page is larger than its body.
See https://jsfiddle.net/5jnvt4jh.
Has anybody an idea, what may be happening there? I couldn't find any margin or padding with Chrome and Firefox. Thanks :).
MWE
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<style>
html {
background-color: blue;
}
body {
margin: 0px;
height: 100vh;
background-color: red;
}
#viewer {
height: 100%;
width: 80vw;
background-color: green;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js"></script>
</head>
<body>
<div id="viewer"></div>
<script>
var v = document.getElementById('viewer');
var renderer = new THREE.WebGLRenderer();
v.append(renderer.domElement);
renderer.setSize(v.clientWidth, v.clientHeight);
</script>
</body>
</html>
Change style of body to:
body {
margin: 0px;
height: 100vh;
background-color: red;
overflow:hidden;
}
jsfiddle: https://jsfiddle.net/raushankumar0717/5jnvt4jh/2/
What is the simplest way to do the following?
When user moves his mouse over the red box- the green box appears
If user moves his cursor from red to green box- the green box doesn't disappear
When user moves his cursor away from the green box (and not back to the red box)- the green box vanishes.
The red box doesn't touch the green box- like on the picture.
Here's what I tried but that doesn't solve the problem:
$('#red').mouseenter(function()
{
$('#green').show();
});
$('#green').mouseleave(function()
{
$('#green').hide();
});
The problem here is that the green box vanishes once you move your cursor from red one.
I think you are trying to make this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.red {
width: 200px;
height: 200px;
background-color: red;
}
.green {
display: none;
width: 200px;
height: 200px;
background-color: green;
}
.divider {
height: 200px;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="divider"></div>
<div class="green"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".red").mouseenter(function(){
$(".green").show();
});
$(".green").mouseleave(function(){
$(".green").hide();
});
});
</script>
</body>
</html>
I'm trying to resize a box (orange box), but my issue is that I can ONLY resize it to the right and bottom , but I cannot resize it to the top (I only want to be able to resize it to the top).
Also after re-sizing it to the top I don't want it to resize the green box (I want the green box to be static, meaning that I don't want it to change its size, the orange box should be over it). I have tried and cannot come up with good results. Using jQuery or pure JavaScript works fine with me.
Here's my code:
<html>
<head>
<meta charset="utf-8">
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script><!-- CSS -->
<script>
$(function() {
$( "#orangeBox" ).resizable();
});
</script>
</head>
<body>
<div id="greenBox" class="ui-widget2">
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</div>
<p></p>
<div id="orangeBox" class="ui-widget">
<p>This is the Orange Box</p>
</div>
</body>
</html>
CSS code:
.ui-widget {
background: orange;
border: 1px solid #DDDDDD;
color: #333333;
}
.ui-widget2 {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#orangeBox {
width: 300px; height: 150px; padding: 0.5em;
text-align: center; margin: 0;border:2px solid black;
}
#greenBox {
width: 340px; height: 150px; padding: 0.5em;
text-align: center; margin: 0; border:2px solid black;
}
You can do it like this:
$(function() {
$( "#orangeBox" ).resizable({
handles:'n,e,s,w' //top, right, bottom, left
});
});
working example Link in JSFiddle : http://jsfiddle.net/sandenay/hyq86sva/1/
Edit:
If you want it to happen on a button click:
$(".btn").on("click", function(){
var height = $("#orangeBox").offset().top; // get position from top
console.log(height);
$("#orangeBox").animate({
height: "+="+height+'px'
}, 1000);
});
and add this in your HTML:
<button class="btn">Click here to resize</button>
Working fiddle: http://jsfiddle.net/sandenay/hyq86sva/4/
Try this in your script :
$(function() {
$( "#orangeBox" ).resizable({
handles: 'n, e, s, w'
});
});
Hope this helps !!
This example seems like to change red color into blue from bottom. But, I want to change the red color into blue from top position by scrolling. Could you show me the good solution? It's okay if there are using javascript.
Here is another example what I want to. When you scroll down at this site, the gray line change into red.
<div id="scroll1"></div>
<div id="scroll2"></div>
Css part
#scroll1 {
background-color: red;
width: 50px;
height: 800px;
}
#scroll2 {
bacground-color: blue;
width: 50px;
height: 800px;
}
#scroll1{
background-color:blue;
width: 50px;
height:800px
}
#scroll2{
background-color:red;
width: 50px;
height:800px
}
According to approach used in example, this can be done by css. Just replace color.
When you say scroll do you mean a gradual fade into the other color? Or do you want the change to happen instantly?
Either way you are going to be faced with javascript as CSS is quite limited when it comes to feature-rich UI.
If you want to gradually change your colour you don't need two divs.
Create one div but with a gradient colour as the background-color.
The gradient is from red to blue, so when you scroll you don't need to change you CSS/JavaScript because the gradient will be different.
Look at my example on JSFiddle.
Check this out . I guess this is what you want.
html
<html>
<head></head>
<body>
<div id="contents"> </div>
<div id="container"></div>
</body>
</html>
style sheet
#container{
width:5px;
height:400px;
background-color: red;
Position:absolute;
border:1px #000 solid;
}
#contents{
width:5px;
height:400px;
position:fixed;
background-color: white;
border:1px #000 solid;
}
jquery script
$(document).ready(function(){
$("body").height(1000);
$(window).scroll(function() {
var newSize = $("#contents").height() * (1 - $(window).scrollTop() / ($(document).height() - $(window).height()));
$("#container").animate({height:newSize+"px"},500);
});
});
the demo is available here DEMO