I'm new to javascript, I'm wondering how to get .contact from a 30% width to 40% when I go with my mouse over .contact. This works, but while .contact gets bigger I want .div to get smaller from 70% width to 60%, so .div won't get under .contact.
This is what I have at the moment:
var width = 30;
var maxWidth = 40;
var interval = null;
var contact = document.getElementById("contact");
function myMove() {
interval = setInterval(function() {
if (width>= maxWidth){
return clearInterval(interval);
}
contact.style.width = ++width + "%";
},5);
}
.contact{
background-color:red;
width:30%;
float:left;
}
.div{
background-color: blue;
width: 70%;
float: right;
}
<div class="content">
<div class="contact" id="contact" onmouseover="myMove()">
<h3> Text</h3>
<p>More textt</p>
</div>
<div class="div">
<h3> Text</h3>
<p>More textt</p>
</div>
</div>
Do you know how to do this?
if you set width:500px; and height:300px; (or whatever size you want) the div should stay the same size. Also, you can set overflow:hidden; so that if whatever is in the div goes beyond those bounds, it is not shown, and does not resize the div. Save this answer. Show activity on this post.
Create the div inside the navigation div, but give it position:absolute; width:200px; height:200px; top:0; left:0; that should place it top left of the navigation without affecting the height of the navigation.
first add a parent div/wrap and put those two divs of yours into it. Overall, whatever size you add to the min-width itll scale the parent div down to the size specified. once the window is sized down past your specified size, itll behave like any other window. this is my way of doing it.
Using width, max-width and margin: auto; Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins: This <div> element has a width of 500px, and margin set to auto.
You can do this with only CSS
.contact {
background-color: red;
width: 30%;
float: left;
transition:1s linear;
}
.div {
background-color: blue;
width: 70%;
float: right;
transition:1s linear;
}
.contact:hover {
width: 40%;
}
.contact:hover + .div{
width: 60%;
}
<div class="content">
<div class="contact" id="contact">
<h3> Text</h3>
<p>More textt</p>
</div>
<div class="div">
<h3> Text</h3>
<p>More textt</p>
</div>
</div>
And for a more flexible way you can consider flexbox where you only need to change the hover element and the other one will shrink by default
.content {
display: flex;
}
.contact {
background-color: red;
flex-basis: 30%;
transition: 0.5s linear;
}
.div {
background-color: blue;
flex-grow:1;
}
.contact:hover {
flex-basis: 40%;
}
<div class="content">
<div class="contact" id="contact">
<h3> Text</h3>
<p>More textt</p>
</div>
<div class="div">
<h3> Text</h3>
<p>More textt</p>
</div>
</div>
UPDATE
If you want a permanent change you can try animation:
.content {
display: flex;
}
.contact {
background-color: red;
flex-basis: 30%;
transition: 0.5s linear;
animation:big 0.5s linear forwards;
animation-play-state:paused;
}
.div {
background-color: blue;
flex-grow:1;
}
.contact:hover {
animation-play-state:running;
}
@keyframes big{
to {flex-basis: 40%;}
}
<div class="content">
<div class="contact" id="contact">
<h3> Text</h3>
<p>More textt</p>
</div>
<div class="div">
<h3> Text</h3>
<p>More textt</p>
</div>
</div>
You don't need javascript for this, sibling selector works.
Or in javascript, shrink the div on the right while expanding the div on the left.
var width = 30;
var maxWidth = 40;
var interval = null;
var contact = document.getElementById("contact");
var div = document.getElementById("div");
function myMove() {
interval = setInterval(function() {
if (width>= maxWidth){
return clearInterval(interval);
}
contact.style.width = ++width + "%";
div.style.width = (100-width) + "%";
},5);
}
.contact{
background-color:red;
width:30%;
float:left;
}
.div{
background-color: blue;
width: 70%;
float: right;
}
<div class="content">
<div class="contact" id="contact" onmouseover="myMove()">
<h3> Text</h3>
<p>More textt</p>
</div>
<div class="div" id="div">
<h3> Text</h3>
<p>More textt</p>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With