I'm a bit new to Javascript and jQuery and I'm having trouble animating something correctly. I'm trying to make a <div> move just a few pixels to the left when hovering over something, but when you hover over the thing, the Div immediately moves all the way to the left side of the screen.
Here the jQuery code:
$(window).ready(function() {
$(".article").hover(function() {
$(".suddenlyNinjas").animate({"left": "-5px"}, "slow");
});
});
Also here is the CSS of the div I'm trying to move:
.suddenlyNinjas
{
background-color:black;
height:50px;
width:125px;
position:absolute;
z-index:2;
top:350px;
}
Animate uses it's absolute position if I recall. So instead of moving it over -5 pixels from it's current position, it's moving it to -5px of the entire window.
Have you tried putting a div with position:relative around the suddenlyNinjas div?
If that doesn't work, just subtract 5 from it's current position to get the new target position you want.
Related
I created a carousel/slider of images with slick and now I want to increase the size of an image on hover.
When I try to do that the image is cut-off by the slick container. How can I bring the image to front so I can see the whole thing? I tried using z-index but it doesn't work.
JSFiddle of my code. Here's a screenshot with the problematic hover behaviour.
What I want:
The problem is that slick adding overflow:hidden to the slick-slider class that contains your images.
you can override this by adding this to your css:
.my-slider > div {
overflow:visible;
}
EDIT:
my bad, you should do
.my-slider > div {
overflow-y:visible;
}
so the hidden images will stay hidden.
Overflow being hidden is what's preventing the scaled image from showing entirely. But you can't simply show overflow as this will cause the hidden slides to show.
What you need to do is clone the scaled image outside of the carousel. Here is a working JSFiddle
$(".zoom-it").mouseenter(function(){
var $this = $(this);
var position = $this.offset();
$this.clone()
.addClass('scaled')
.insertAfter($(".my-slider"))
.css({left: position.left, top: position.top});
});
$(document).on('mouseleave', ".zoom-it.scaled", function(){
$(this).remove();
});
With updated CSS
.zoom-it.scaled {
transform: scale(2);
position: absolute;
}
This will clone the hovered image, placing a scaled version on top and removing it when the mouse leaves it.
Another solution that produces the desired functionality is to add padding to the div wrapper slick adds to your outermost carousel container. Just fixed this after hours of struggling with it. Hope this helps someone.
.carousel-class-name > div {
padding: 20px 0px 20px 0px
}
I am trying to bring in a overlay that comes on the top of a image when you hover with your mouse. Currently I have it coming just from the top, and eases down to the bottom. What I am trying to achieve though, is have the overlay split into 2 sections, coming from the top left and bottom right and join in the middle. I know this is hard to understand with just text, so I created an image.
I have seen this done before, but am not sure what it is called, or how to achieve the effect. Help would be appreciated
Here's my stab at it: http://jsfiddle.net/
The basic idea is that you're just doing this, but with the wrapper element rotated. This solution would obviously need to checked for compatibility.
This could be achieved without a .slide element, but would require more manual positioning of the elements.
Here is a basic example using jquery.
Note, the cool kids would do this with css3.
http://jsbin.com/eyilog/1/edit
In this example the divs are absolutely positioned outside the containing element. overflow:hidden; makes sure they are invisible. On hover jquery animates their positions back inside the div, overlaying the content of the div.
To make it diagonal just use transparent images.
$(".text").hover(function() {
$(".topleft").animate({top: "+0px"}, 500);
$(".bottomright").animate({bottom: "+0px"}, 500);
});
<div class="text">
<div class="topleft"></div>
text
<div class="bottomright"></div>
</div>
.text {
background-color:red;
width:100px;
height:100px;
margin:auto;
overflow:hidden;
position:relative;
}
div div {
background-color:black;
height:50px;
width:100px;
position:absolute;
}
.topleft {
top:-50px;
}
.bottomright {
bottom:-50px;
}
I have a div called #Wrap around my page content and have written the following function to shift everything up, so my Navigation at the top goes partially off page and my content has more screen space:
$('.NavShrink').click(function(up) {
$('#Wrap').animate({ top: '-=130px'});
$(this).css('display', 'none');
$('.NavExpand').css('display', 'block');
})
I also have the following to bring it back down again:
$('.NavExpand').click(function(down) {
$('#Wrap').animate({ top: "+=130px"});
$(this).css('display', 'none');
$('.NavShrink').css('display', 'block');
})
My problem at the moment is that the page seems to keep its full height when everything shifts up off screen, which creates 130px of blank space at the bottom of my content. Whats the way around this?
my #Wrap currently just has the style position:relative; but have also tried with height:100%; and height:auto; with no luck.
EDIT: Here's the page: http://www.emilekelly.com/TestFolder/index.html
Use position: absolute on #wrap.
Why?
Because position: relative is moving the #wrap up relative to its current position but the browser still takes into account the space below where it 'should' be.
However position: absolute will adjust the positioning and take it out of context of the normal flow, thus collapsing what is below, which is what you want - to get rid of that space.
I'm looking for a way I can create a div which will be fixed on the page vertically, so if the user scrolls down, the div stays at the same place on the page. But have it positioned absolutely horizontally, so if the users screen is narrower than my webpage, scrolling to the right or left will not cause the div to move with the screen and, in some cases, remain either half visible at the edge of the screen or off the page completely.
This div must be within a "Position:Relative" Div.
I'm fairly sure there is no way to assign different positions to the varying axis of a div but this is the best way to describe the effect which I am hoping to achieve.
I have this so far, which is basically just a Fixed Div within a Relative Div.
CSS
#container {
position:relative;
width:700px;
height:1000px;
top:50px;
left:50px;
background-color:yellow;
}
#blue-box{
position:fixed;
width:100px;
height:100px;
background-color:blue;
margin-top:20px;
margin-left:400px;
{
HTML
<div id="container">
<div id="blue-box"></div>
</div>
I have also created a jsFiddle to help demonstrate the problem.
This works fine for the vertical, but if you resize your web-browser so that it is narrower than the yellow box (container) and then scroll horizontally, the blue box will move with the page. I'm hoping to stop that from happening.
If there is no way to achieve this through CSS, I'm perfectly happy to use JavaScript as long as it works with all modern browsers and both IE7 and IE8. (Which is why I have added the JavaScript tag)
Can anyone help me out?
With JQuery, use the scrollLeft() property of the document! This would work
$(window).scroll(function(event) {
$("#blue-box").css("margin-left", 400-$(document).scrollLeft());
});
See also
http://jsfiddle.net/zhQkq/9/
Good luck!
Edit: If you want it to use your preset margin-left instead of a hard-coded "400", use
$(window).scroll(function(event) {
$("#blue-box").css("margin-left", $("#blue-box").css("margin-left")-$(document).scrollLeft());
});
Using vanilla javascript would be something like this:
var bb = document.getElementById('blue-box');
window.addEventListener('scroll',function(event){
bb.style.marginLeft = window.scrollX + 'px';
});
In modern browsers, as of 2020, you should try to use the CSS position:fixed; instead of JavaScript positioning because it is widely supported now.
Here's my solution (tested in Opera and Firefox): http://jsfiddle.net/cCH2Z/2
The trick is to specify right: 0px;, this will position the box 0px from the right border of the window.
I want an image, that when pressed, shows another image apear from the left of the screen to a point in the background image. I then want to zoom in on that image and make a modal box apear. How can I do this?
The point in the background need to stay the same. When I resize the browser it needs to appear at the same point.
See a working demo of the following code here.
The first part of your problem can be solved using position:absolute within a position:relative container that holds your background image.
#wrapper {
overflow-x:hidden;
width:100%;
position:relative;
}
#absSlide {
width:100px;
position:absolute; top:200px; right:-100px;
}
Make sure the wrapper is as wide as the window and that the overflow-x:hidden so that the slide in div isn't visible before the click. The slide in will be positioned just off stage to the right and top:XXXpx where XXX is the distance from the top of the page where your background element is. Your jQuery would look something like this to animate in the hidden div on click:
$('#showSlide').click(function(e){
e.preventDefault();
$('#absSlide').animate({'right':0},450);
});
You should be able to modify this code so that it works on the left side instead and animate the left property in the jQuery. I didn't want to make it too easy as your question was very general. You should ask a separate question for the rest of your problem after you share the working code for what you're able to implement on the first part.