JavaScript: setting direction of css change on mouseover? - javascript

In the following code, (see example fiddle), if you mouseover the green, the height of the two red boxes will change, but the height expands down. Is there a way to make the height expand upwards?
css:
.one{
position: absolute;
left: 110px;
top: 0px;
background: green;
}
.two {
position: absolute;
left: 70px;
top: 40px;
background: red;
height: 25px;
font-size: 25px;
}
.three {
position: absolute;
left: 200px;
top: 40px;
background: red;
height: 25px;
font-size: 25px;
}
html:
<div class="one">15,000,000</div>
<div class="two">700</div>
<div class="three">800</div>
javascript:
$('.one').mouseover(function(){
$('.two, .three').css('height','50px');
}).mouseout(function(){
$('.two, .three').css('height', '25px');
});

Just alter the top of the boxes as well:
$('.one').mouseover(function(){
$('.two, .three').css({ height : '50px', top: '15px'});
}).mouseout(function(){
$('.two, .three').css({ height : '25px', top: '40px'});
});
http://jsfiddle.net/wyxJ7/12/

Try this,
http://jsfiddle.net/Gbwjj/
Its more of a CSS issue than a JavaScript one

You can use change the 'top' css attribute at the same time so that the user perceives it as the height expanding upwards. Here's an example using animate().
$('.one').mouseover(function(){
$('.two, .three').animate({
height:"50px",
top:"-=25"
});
}).mouseout(function(){
$('.two, .three').animate({
height:"25px",
top:"+=25"
});
});

Related

How do I move an element diagonally and after another animation in jQuery?

I have an HTML/CSS element:
<div id="box">
<p> BOX </p>
</div>
#box {
width: 100px;
height: 200px;
background-color: skyblue;
position: absolute;
left: 0px;
top: 200px;
text-align: center;
font-family: Times New Roman;
}
I need it to move from its position in the middle of the page diagonally down and to the left (to the left corner). I've tried this:
$(function() {
$("button").click(function() {
$("#box").animate({
left: $(window).width() - 200
bottom: $(window).width() - 200
}
});
});
How do I do this with jQuery and have it done after it's been on the page a few seconds (for a different animation to occur first)?
Consider the following.
$(function() {
$("button").click(function() {
$("#box").animate({
left: $(window).width() - 100,
top: $(window).height() - 200
});
});
});
#box {
width: 100px;
height: 200px;
background-color: skyblue;
position: absolute;
left: 0px;
top: 40px;
text-align: center;
font-family: Times New Roman;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box">
<p>BOX</p>
</div>
<button>Go</button>
You were using width property for both. You must use width and height. Also it's better to use top versus bottom in this case. You can use bottom, yet I would suggest something like:
bottom: $("#box").height()
In this way, the property of the top will be N Pixels from the "Bottom".
See More: https://www.w3schools.com/cssref/pr_pos_bottom.asp

I can't move my div

I'm always having trouble with the combination of CSS and JQuery. Can someone tell me what i'm doing wrong here? I just want to move my div. Thanks all for the solutions, I'd like to know a little further. How can i move it more than once in different directions?
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
jQuery(document).ready(function () {
jQuery("#hello").mouseenter(function () {
jQuery("#hello").animate({ left: '150px' }, slow);
});
});
</script>
<div id="hello">
Hello World!
</div>
<style>
#hello{
color: gray;
background-color: gold;
width: 125px;
height: 125px;
position: fixed;
left: 350px;
top: 350px;
border-width: 2px;
border-color: lavender;
text-align: center;
}
</style>
Your div needs a position set when using left, right, top or bottom css propertiy, so there will be no change even though your code seems correct.
Try to set a position to your div, for example relative.
<style>
#hello{
color: gray;
background-color: gold;
width: 125px;
height: 125px;
position: fixed;
left: 350px;
top: 350px;
border-width: 2px;
border-color: lavender;
text-align: center;
position: relative;
}
</style>
<script>
jQuery(document).ready(function () {
jQuery("#hello").mouseenter(function () {
jQuery("#hello").animate({ left: '150px' }, 'slow');
});
});
</script>
If You are using slow/fast option You need to put 'slow' into brackets
jQuery("#hello").animate({ left: '150px' }, 'slow');
You can set animation time with milliseconds without brackets.
The duration parameter of your animate() is undefined (Uncaught ReferenceError: slow is not defined).
It should be either "slow"
jQuery("#hello").animate({ left: '150px' }, "slow");
or
var slow = 200;
jQuery("#hello").animate({ left: '150px' }, slow);
Fiddle (with error)
Fiddle (Updated)
I would recommend the CSS way :hover if its just about mouseover event. If there is more functionality to add, this is better.

Show div expanding out from middle out in jquery

I want to show my div when the user generates the trigger. The animation which I want to use showing the div is such that the div is rendered starting from its centre and then gaining its height by expanding in both directions(up and down) gradually. Here is the snippet of what I have tried. The div starts rendering from left. What I want is it starts rendering from middle of its height.
$("#km1").click(function() {
$(".homePopup").animate({
width: "730px",
height: "200px"
}, 800);
})
.homePopup {
position: absolute;
z-index: 100;
width: 400px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Know more
<div class="homePopup"></div>
You could animate the margin as well to achieve this effect.
Set the initial margin-top and margin-bottom half of the final height; and margin-left and margin-right half of the final width. Then when you increase the width and height, decrease the margin as well.
$("#km1").click(function() {
$(".homePopup").animate({
width: "730px",
height: "200px",
margin: '0'
}, 800);
})
.homePopup {
position: absolute;
z-index: 100;
width: 0px;
margin: 100px 365px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Know more
<div class="homePopup"></div>
I divided the width and height by four to and added that to the left and top to obtain the center animation requested.
$("#km1").click(function() {
$(".homePopup").animate({
width: "730px",
height: "200px",
left: "0px",
top: "0px"
}, 800);
})
.homePopup {
position: absolute;
z-index: 100;
width: 400px;
background-color: red;
left: 182px;
top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Know more
<div class="homePopup"></div>
You need to position the element in the middle from the beginning. I'm setting the left absolute position to 50%, then moving the element back -50% of itself so that it is in the middle.
Check out CSS transform:
http://css-tricks.com/almanac/properties/t/transform/
$("#km1").click(function() {
$(".homePopup").animate({
width: "730px",
height: "200px"
}, 800);
})
.homePopup {
position: absolute;
z-index: 100;
width: 0;
background-color: red;
left: 50%;
transform: translateX(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Know more
<div class="homePopup"></div>
******UPDATE******
Here is the css to run the animation from the middle of the window's height:
.homePopup {
position: absolute;
z-index: 100;
width: 0;
background-color: red;
top: 50%;
transform: translateY(-50%);
}

jQuery/CSS animate div width from left to right

I'm trying to use jQuery to animate a div with a background picture decreasing in width from left to right whilst being absolutely positioned.
I need to make this compatible with IE8 hence using jQuery.
Here is a basic JSFiddle demo link with what I have so far, but it animates from right to left:
JSFiddle link
jQuery(document).ready(function($){
$(document).on('click', '.splat', function(e){
$(this).animate({width:"0px"},800);
});
});
.splat {
width: 400px;
height: 400px;
background: blue;
position: absolute;
top: 100px;
left: 100px;
}
<div class="splat"><!-- --></div>
I need it going in a different direction, like the following image:
Hoping someone could point me in the right direction (no pun intended!). Thanks in advance.
You may use a wrapper and position the child div with right:0.
See this demo
If i can understand your question, solution is replace left with right :)
http://jsfiddle.net/V4XCb/6/
.splat {
width: 400px;
height: 400px;
background: blue;
position: absolute;
top: 100px;
right: 100px;
}
You can like this:
<div class="box">
<div class="splat"></div>
</div>
.box{
width:200px;
height: 200px;
}
.splat {
height: 200px;
width: 100%;
background: blue;
float: right;
}
If you could wrap your elem with a wrapper which is relative positioned element and do the following:
.splatWrapper {
width: 400px;
height: 400px;
background: green;
position: relative; //<-----needed
top: 100px; //<------------needed
left: 100px; //<------------needed
}
.splat{
width: 400px;
height: 400px;
background: blue;
position: absolute;
top: 0; //<----------needed
right: 0; //<----------needed
}
Try this fiddle
You can use Scale Effect in Jquery :
jQuery(document).ready(function($){
$(document).on('click', '.splat1', function(e){
$(this).hide("scale");
});
});
Fiddle : http://jsfiddle.net/V4XCb/14/

jQuery Help - Appear underneath rather than on top

I have the following jQuery which I need adapting:
$(document).ready(function(){
$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
});
});
CSS:
.rss-popup {
margin: 100px auto;
padding: 0;
width: 100px;
position: relative;
}
div.rss-popup em {
background: url(../images/rssbuttonbubble.png) no-repeat;
width: 100px;
height: 49px;
position: absolute;
top: -70px;
left: -0px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}
#rss-icon {
width: 42px;
height: 42px;
background: url(../images/rssbutton.png) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;
}
The HTML:
<div class="rss-popup">
RSS Feed
<em>Subscribe to our RSS Feed</em>
</div>
I want to make the rssbuttonbubble.png appear underneath rather then from above, can any make any suggestions as to how I can achieve this?
Just adjust your top values in the animation and css to be the distance you want:
$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "70"}, "fast");
});
And in CSS change top: -70px; to:
top: 70px;
This will make it appear below, then just decrease those values if you want it higher, increase if you want it lower.
Nick's answer is correct. You will want to attempt to do this via CSS but just in case you can't you could also achieve something similiar via Jquery. There is an offset() function that returns the onscreen position of a matched element. Once you have that you can then set the position of another element to this position and add the source elements height to the Y coordinate.
See the jQuery documentation here.

Categories