How to move/position DIV container by changing CSS values using Javascript? - javascript

I got two div containers as blocks with some fixed width and maybe height and display: block;
<div class="one"></div>
<div class="two"></div>
When you hover your mouse over container .one I need somehow to apply margin-top (or padding-top) to container .two so it moves couple pixels below while mouse is over .one and when you move mouse pointer aside, .two comes back to it's original position.

.one:hover + .two
{
margin-top: 2px;
}
second div must be followed by first div
.one:hover ~ .two
{
margin-top: 2px;
}
If some other element present between one and two, try this.

For your javascript (jQuery) solution:
$( ".one" ).hover(
function() {
$('.two').css('marginTop', '5px');
}, function() {
$('.two').css('marginTop', '0');
});
For smoother movement:
$( ".one" ).hover(
function() {
$('.two').animate({
marginTop: "5px"
}, 500 );
}, function() {
$('.two').animate({
marginTop: "0"
}, 500 );
});
Added a Demo

Related

Sliding div out with css and jquery without triggering scrollbar?

I've been wrestling with this for way too long.
Problem: I'm trying to make the image slide off of screen when the button is pressed, which I have successfully done, but not adequately. There are two problems:
I don't want to hide overflow on the body to hide the horizontal scroll being triggered when the div moves off the screen.
When I click on the button for a second time, I want the div to slide in from the right back to the original position. I haven't been able to figure this one out. I know I can do it, but creating another css class, but I know there has to be an easier way.
JSFiddle
CSS:
#abs {
position: absolute;
height: 200px;
width: 200px;
background-color: grey;
left: 0;
top:0;
transition: transform 3s;
}
.open {
transform: translateX(1050px);
}
.hide {
display: none;
}
p {
text-align: center;
}
JS:
$('#clickMe').on('click', function(){
$('#abs').toggleClass('open');
if($("#abs").hasClass("open")) {
setTimeout(
function() {
$("#abs").hide();
},
2500);
} else {
$("#abs").show();
}
})
Hi Please refer to the fiddle.https://jsfiddle.net/cdx7zeo2/1/
I modified your code to use jQuery animate.
$('#clickMe').on('click', function(){
var right = parseInt($('#abs').css('left'));
console.log(right);
if(right === 0){
$( "#abs" ).animate({
left:'2500px'
}, 1500);
}else{
$( "#abs" ).animate({
left:'0px'
}, 1500);
}
})
Also modified the id test to have overflow-y hidden, so that you don't need to tough overflow property of body. Note, here we are not using open class anymore.
#test {
position: relative;
height: 500px;
width: 500px;
background-color: black;
overflow-y:hidden;
}

jQuery (fully) expand and (partially) collapse div on mouse hover

I'm trying to implement rating functionality on my website.
I have the following HTML:
<div class="rating-container">
<div class="stars">
</div>
</div>
The stars div gets populated with 10 fa fa-star font-awesome star icons during runtime via jQuery
My CSS looks like this:
div.rating-container div.stars {
display: block;
}
div.rating-container div.stars i {
font-size: 20px;
color: white;
cursor: pointer;
margin-right: 3px;
padding: 3px;
}
..And the final result looks like this:
What I want to do now is to only show 1 star instead of 10 when the page initially loads. Hovering over the 1 star should expand the stars div so that all 10 stars show and the user can rate - once the mouse leaves the stars div, it goes back to only showing one star. I'm trying to achieve this using jQuery's $(this).animate({ width: someWidthHere }); on the $(".stars").hover()function but I can't seem to get it right.
Any help/pointers would be greatly appreciated.
Thanks in advance!
Update: per request, here is the (silly) test code I've tried:
$(function () {
$(".stars").hover(
function () {
$(this).animate({ width: '100%' });
},
function () {
$(this).animate({ width: '10%' });
}
);
});
Which gives me this on hover:
Hopefully I understand your question correctly. You can get trigger an event for on and off like this:
$( ".stars" ).hover(
function() {
$( ".stars" ).animate({ width: "100px" },1000);
}, function() {
$( ".stars" ).animate({ width: "20px" },1000);
}
);
Just an FYI, I think it might be better to just use css transitions and just use the .toggleClass() to expand and contract the div. It works better with some mobile browsers that have less processing power but either way works.
This is how you would do that with css:
.stars {
width:20px;
-webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
transition: width 1s;
}
.stars:hover{
width:100px;
}

How to make divs rise up from other divs?

I know how to stack divs on top of divs by doing position:absolute for the parent and position:relative for the children, but how can I make a div "rise up" from another div? An example of what I want to achieve is here. Scroll to the bottom and hover your mouse over the artwork.
What you can do is absolute position that pop-up in a relative positioned box, for example:
<div class="featured-image">
<div class="caption">
<p>This is where your text goes</p>
</div>
</div>
Now that you have that, you'll want to make the caption invisible unless scrolled over. So, a simple way to do this with just CSS is:
.featured-image { position:relative; width:300px; height: 400px; }
.caption { position:absolute; bottom:0; display:none; }
.feature-image:hover > .caption { display:block; }
The last line makes it seen when you mouse-over the image.
Then you could animate it with jQuery easily. That appears to be what they're using.
$(document).ready(function(e) {
$(".caption").hide();
});
var show = function() {
$(".caption", this).stop(true, true).show(500)
};
var hide = function() {
$(".caption", this).stop(true, true).hide(500);
};
$(".featured-image").hover(show, hide);
HTMl
<div id="pic">
<div>
</div>
</div>
CSS
#pic {
position: relative;
background: yellow;
width: 100px;
height: 100px;
overflow: hidden;
}
#pic div {
position: absolute;
bottom: -50px;
background: black;
height: 50px;
width: 100px;
}
JQuery
$('#pic').hover(
function(){
$(this).find('div').stop(true, true).animate({
'bottom': '+=50'
}, 100);
},
function(){
$(this).find('div').stop(true, true).animate({
'bottom': '-=50'
}, 100);
}
);
jsfiddle: http://jsfiddle.net/Z6eLa/2/
Introduce yourself to jQuery and z-index.
http://api.jquery.com/slideDown/
The trick here is slidedown will make your top div slide down. The only thing that comes to my mind, is instead of expanding that bottom div up, do the opposite. Get the top div, and have it slide-up, while the other div is displayed behind it. It should give the appearance of the bottom div 'sliding-up'.
Note, sorry if this doesn't work. I'm actually not sure if you can get it to slide only halfway up instead of all the way...good luck though!
You don't need JS for that, just use css3 transitions.

css transition on mouseover

I have the following css for my drop down menu in my banner:
#nav-menu li a
{
background-image:url('../images/menu_background.png');
background-repeat:repeat-x;
background-position: left top;
height: 35px;
}
#nav-menu li a:hover
{
background-image:url('../images/menu_background_hover.png');
background-repeat:repeat-x;
background-position: left top;
height: 35px;
}
It works fine, except that I would like some animation effect when I hover over the <li> tag. Currently, it just replaces the background colour of the <li> when i hover over it.
I tried the example code below which changes the margin-left of the li tag but I do not know how to animate the css transition on hover:
$j(document).ready(function () {
//When mouse rolls over
$j("#nav-menu li").hover(function () {
$j(this).filter(':not(:animated)').animate({
marginLeft: '9px'
}, 'slow');
},
function () {
$j(this).animate({
marginLeft: '0px'
}, 'slow');
});
});
Thanks a lot for any suggestion.
A quote from this post,
Blockquote
I guess you would have to work around this by not using genuine background-images, but div elements containing the image, positioned using position: absolute (or fixed) and z-index for stacking. You would then animate those divs.
Blockquote
I got this working by removing the j after the $ in the variable names.
Fiddle: http://jsfiddle.net/XjxBj/
$(document).ready(function () {
//When mouse rolls over
$("#nav-menu li").hover(function () {
$(this).filter(':not(:animated)').animate({
marginLeft: '9px'
}, 'slow');
},
function () {
$(this).animate({
marginLeft: '0px'
}, 'slow');
});
});​

Overlay div onto td cell using jquery.position upon mouseover event

I have a large table with numbers only and a small font-size, which makes it hard to see. Increasing font-size is not a option, but I want to supply a zoom like effect (without having to use browser zoom) using a simple div overlay upon hovered td cell if it has any content.
The div should be centered on the td cell and the content of the div should be replaced the text content of hovered td cell.
Where is my error ?
Note: I am using .delegate() instead of .hover() because I already am doing other stuff which require delegate.
HTML
<div id="mine"><table border="1" cellspacing="2" cellpadding="2">
<tr><td></td><td></td><td>1</td><td>2</td></tr>
<tr><td>3</td><td></td><td></td><td>5</td></tr>
</table></div>
<div id="your">vale</div>
CSS
#your {
position: absolute;
width: 40px;
height: 30px;
z-index: 100;
border: 1px solid green;
text-align: center;
vertical-align: middle;
}
JS
$(document).ready(function() {
$('#mine').delegate('td', 'mouseover mouseleave', function(e) {
if ($(this).text().length > 0) {
if (e.type == 'mouseover') {
$('#your').position({
my: "center bottom",
at: "center top",
of: this,
offset: "0 -20", // Place it above td cell
collision: "none"
});
$('#your').clearQueue();
$('#your').text($(this).text()).fadeIn(200);
} else {
$('#your').delay(300).fadeOut(200);
}
}
});
});
Edit I am seeing #your flying all over the place at first run, then the next few hovers it works, but then it begins to pop up all weird places - including outside #mine.
If your problem is the flicker that happens, it's because you have it fading out #your when you leave the td, which you leave the second #your appears (because #your appears under your mouse cursor at that time since you are hovering directly over the td)
Way to fix this is to remove the mouseleave from #mine and create a separate listener for mouseleave specifically for #your. So when your mouse leaves #your it will fadeOut #your.
$(document).ready(function() {
$('#mine').delegate('td', 'mouseover', function(e) {
if ($(this).text().length > 0) {
if (e.type == 'mouseover') {
$('#your').position({
my: "center",
at: "center",
of: e,
collision: "none"
});
$('#your').clearQueue();
$('#your').text($(this).text()).fadeIn(200);
}
}
});
});
$('#your').mouseleave(function() {
$(this).fadeOut(200)
});
Also, alter your CSS so that #your doesn't start out visible.
#your {
position: absolute;
display: none;
width: 40px;
height: 30px;
z-index: 100;
border: 1px solid green;
text-align: center;
vertical-align: middle;
}
Using an overlay div, which is larger than the element it overlays was a bad idea - it had to be somewhere else.
Here is what I ended up doing as splitting up "mouseover" & "mouseleave" was NOT an option, due to other things preformed.
JS
$(document).ready(function() {
$('#mine').delegate('td', 'mouseover mouseleave', function(e) {
if ($(this).text().length > 0) {
if (e.type == 'mouseover') {
var off = $(this).offset();
$('#your').css({ // Using .position() was buggy. Styles ALWAYS works
opacity: '', // Remove it if fadeOut didnt finish properly, eg too fast mouse movement
left: (off.left -14)+'px', // 14 is half of box width
top: (off.top -20 -37)+'px', // 37 is height of font within box. 20 is to place it above
});
$('#your').clearQueue().text($(this).text()).show(); // fadeIn wasnt really needed
} else {
$('#your').delay(900).fadeOut(150); // long delay to allow moving mouse to another cell without box disappearing fast, else fade out fast
}
}
});
});

Categories