I am trying to animate image from left to right and then right to left at the bottom. This is the code i am using which is working fine.
This is the Demo.
function moveRight(){
$("#b").animate({left: "+=300"}, 2000,moveLeft)
}
function moveLeft(){
$("#b").animate({left: "-=300"}, 2000,moveRight)
}
$(document).ready(function() {
moveRight();
});
<div id="animate">
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; top:50px"/>
</div>
I want this animation at the bottom of the screen with the transparent div background. When i am adding this line
<div id="animate" style="position:fixed; bottom:0px; right: 5px; z-index: 999">
Then the animation is not working. Any one can help me in this issue? Thanks in advance.
just remove top:50px; from your image style and use css for animate div
#animate{
position: fixed;
bottom: 0;
overflow:hidden;
left:0;
right:0;
height: 100px;
background: #eee;
}
DEMO
Try adjusting top property to calc(70%); 70% of parent element height
<div id="animate">
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; top:calc(70%)"/>
</div>
jsfiddle http://jsfiddle.net/oa5pcfqe/2/ , https://jsfiddle.net/oa5pcfqe/2/embedded/result/
Try following:
<div id="animate" style="position:fixed; height:100px; bottom:0px; left: 5px; z-index: 999">
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; top:0px"/>
</div>
Check Fiddle.
Just remove the parent "animate" div and style the image "bottom" as "0px".
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; bottom:50px"/>
Demo
https://jsfiddle.net/oa5pcfqe/5/
Related
I have an interesting issue or objective here. I have an image that is a yellow rectangle with 3 red rectangles in it. I'd like to add clickable buttons as an overlay on top of the picture, right over the red rectangles.
Thing is, I would like those buttons to always be exactly over each red rectangles, same size/position, no matter the aspect ratio of the pciture, the screen resolution of the user, or the zoom percentage of his browser (as if the buttons were part of the image)
As an example, I've included a picture where the yellow rectangles and the red rectangles are part of the same image, and the dotted green line would be the overlay buttons or their respective divs.
[Not enough reputation for picture, but here] : https://i.imgur.com/ms4xmMZ.png
MY HTML SO FAR
<body>
<div class="image-container">
<img src="img/justelimage.png" alt="Nature" class="video" />
<a href=“#”></a>
</div>
</body>
MY CSS SO FAR WORKS BUT THERE SHOULD BE A BETTER WAY ?
(works when I resize window, and change browser's zoom percentage, but what if we change the aspect ratio?)
.image-container {
display: inline-block;
position: relative;
margin-left: auto;
margin-right: auto;
width: 80vw;
height: auto;
z-index:0;
}
.video {
position: absolute;
width: 100%;
height: auto;
z-index:1;
}
.image-container a{
position: absolute;
margin-top:4.5%;
margin-left: 57%;
width:28.3vw;
height: 7vw;
color:white;
border: 0.25vw solid green;
z-index: 999;
}
}
Any idea how I could manage to get this in a more logical way?
Any suggestions would be gladly appreciated. Thanks!
I'd wrap the anchor in a div to center it. That way you could style
anchor separately with px while maintaining its position relative to the img.
<body>
<div class="image-container">
<img src="img/justelimage.png" alt="Nature" class="video" />
<div class="link-container">
<a href=“#”></a>
</div>
</div>
</body>
.link-container {
position: absolute;
top: 50%;
left: 50%;
}
If you also style the .image-container with a background color
and opacity you can toggle those values on :hover.
The best way to keep buttons in place with respective to an image will be to have the container as
position: relative;
and buttons inside the div as
position: absolute;
and placed top and left with px or any unit that doesn't change with size.
But one major thing you can do is have your image as the background of image-container.
That way buttons always stay on top of the image and u can restrict resizing of the container to make the buttons stay in position better.
I hope this helps.
.image-container {
position: relative;
background-image: url("https://cdn.pixabay.com/photo/2014/12/28/13/20/wordpress-581849_960_720.jpg");
background-size: contain;
background-position: center;
width: 600px;
height:200px;
}
.btn{
width:20px;
height:20px;
background-color: green;
border:none;
position: absolute;
}
.one{
top:10px;
left:300px;
}
.two{
top:100px;
left:100px;
}
.three{
top:50px;
left:200px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="image-container">
<button href="#" class="btn one"></button>
<button href="#" class="btn two"></button>
<button href="#" class="btn three"></button>
</div>
</body>
</html>
Is it possible to absolutely position elements inside a fixed position container? For example:
<div style="position:fixed; left:0; top:0">
<div style="position:fixed; left:0; top:0;"></div>
<div style="position:fixed; left:200px; top:120px;"></div>
</div>
I want to be able to move, using jQuery, the container div to the left and right (and it's children along with it), but this obviously doesn't work (moving the container's left property does not affect the children).
I tried something like this:
<div style="position:fixed; left:0; top:0">
<div style="position:relative; width:100%; height:100%;">
<div style="position:fixed; left:0; top:0;"></div>
<div style="position:fixed; left:200px; top:120px;"></div>
</div>
</div>
...but it doesn't work. I know I could ultimately just drop the container and animate each of the fixed position children at the same time, but I'd really prefer not to. I'll probably end up adding more children later, and that would mean managing the animations/movements of each one (now that I think of it, I could just add a class to each child, and have jQuery animate the left property of all occurances of that class, but I'd still prefer to resolve my initial problem if possible).
Hacks are welcome!
use relative for the children, not fixed.
<div style="position:fixed; left:0; top:0">
<div style="position:relative; left:0; top:0;"></div>
<div style="position:relative; left:200px; top:120px;"></div>
</div>
The children should be position absolute (because they are positioned absolutely within the fixed container).
See this demo:
http://jsfiddle.net/74dE7/2/
#fixed-box {
position: fixed;
height: 300px;
width: 300px;
background: red;
right: 10px;
top: 10px;
}
#absolute-box {
position: absolute;
left: 10px;
bottom: 10px;
background: blue;
height: 50px;
width: 50px;
}
<div id="fixed-box">
<div id="absolute-box">
</div>
</div>
I am trying to move my divs with the texts hallo1 and hallo2 to my canvas element and make it centered.
Does anyone have and idea on how to achieve this?
Below is code:
<canvas id="canvas1">hi</canvas>
<div>
hallo1
</div>
<div>
hallo2
</div>
<canvas id="canvas2"></canvas>
<div>
hallo1
</div>
<div>
hallo2
</div>
<canvas id="canvas3"></canvas>
<div>
hallo1
</div>
<div>
hallo2
</div>
<canvas id="canvas4"></canvas>
<div>
hallo1
</div>
<div>
hallo2
</div>
put everything in a div and center it with text-align:center;. If you still need it to be on the left side of the screen use float:left;, like this:
fiddle
#everything {
text-align:center;
float:left;
}
One posibility without modifying your layout is simply adjusting the position:
div {
position: relative;
left: 80px;
top: -125px;
}
fiddle
A version that adjusts to different text widths is to use 13ruce1337 answer and adjust it vertically
#everything {
text-align:center;
float:left;
position: static;
}
div {
position: relative;
top: -125px;
}
I have to redefine everything position, because the style to the text div would modify it
fiddle 2
I am trying to make a image gallery similar to one in anntaylor site.
I am able to change the main image on mouse hovering by changing the source of image.
Here is the code I applied:
<div id="navimage1"><img src="p1.png" name="p1" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p1.png'" onLoad="qwe();"/></div>
<div id="navimage2"><img src="p2.png" name="p2" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p2.png'" onLoad="qwe();"/></div>
<div id="navimage3"><img src="p3.png" name="p3" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p3.png'" onLoad="qwe();"/></div>
<div id="navimage4"><img src="p4.png" name="p4" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p4.png'" onLoad="qwe();"/></div>
<div id="viewpoint"><img src="p1.png" name="mainimage" alt="" /></div>
The CSS for the above code is :
#viewpoint { top: 180px; width: 60%; left:30%; right:0; height: 720px; position: absolute;}
#navimage1 { left:10%; width:20%; height:180px; top: 180px; position: absolute;}
#navimage1:hover {background-color: #6d6767;}
#navimage2 { left:10%; width:20%; height:180px; top: 360px; position: absolute;}
#navimage2:hover {background-color: #6d6767;}
#navimage3 { left:10%; width:20%; height:180px; top: 540px; position: absolute;}
#navimage3:hover {background-color: #6d6767;}
#navimage4 { left:10%; width:20%; height:180px; top: 720px; position: absolute;}
#navimage4:hover {background-color: #6d6767;}
The problem is on changing the image I am not able to get the fading effect.
Please provide with a suitable JavaScript code to get the fading effect.
Not going to go into details too far.. but doing a similar project and here's how I handled it...
<div id="slides">
...
<img src="..." class="trans prev" data-id="image1" />
<img src="..." class="trans shown current" data-id="image2" />
<img src="..." class="trans next" data-id="image3" />
...
</div>
Then in CSS, I use CSS3 transitions, where the .trans class is opacity of 0, and a z-index of 100, where .trans.shown is set to opacity 1 with a z-index of 200.
Javascript is used to pull the current image, remove the "shown" class, and update the classes as appropriate... .prev and .next set the left position to -100% and 100% respectively.
I also only maintain the current, prev and next images in the stack.. other images are removed from the DOM... this keeps things pretty light/fast. Combined with the jquery.swipe plugin for tablet support. Would show the link to the final product, but will not be up until next month.
jQuery fadeIn - http://api.jquery.com/fadeIn/
jQuery with the fadeIn (http://api.jquery.com/fadeIn/) and fadeOut methods (http://api.jquery.com/fadeOut/) should work for you
I want to create an Element, which is very thin, and very high. I want the element to be visible all time, even if you scroll to the right. It should be position:fixed to the right, and left, but it should be scrollable down and up.
I searched with google, but couldn't find an appropiate way to solve the problem.
I only found this site:
http://demo.rickyh.co.uk/css-position-x-and-position-y/
This is exactly, what I want to have, BUT I am using jQuery, and not MooTools. I am looking for the same function in jQuery. I do not really want to use 2 Frameworks. Does anyone know help? Anything? I have been looking several hours, but I can't find something that fit to my needs in jQuery.
Here's a solution with jquery
jsfiddle demo
the html
<div style="width:1000px;height:1000px;">
<div id="box1" class="box" style="left:20px;top:20px;">
My position-x is fixed but position-y is absolute.
</div>
<div id="box2" class="box" style="left:20px;top:120px;">
My position-x is absolute but position-y is fixed.
</div>
<div id="box3" class="box" style="left:20px;top:220px;">
Im positioned fixed on both axis.
</div>
</div>
the code
$(window).scroll(function(){
var $this = $(this);
$('#box1').css('top', 20 - $this.scrollTop());
$('#box2').css('left', 20 - $this.scrollLeft());
});
and some css
.box
{
width:400px;
height:80px;
background:gray;
position:fixed;
}
Depending on a previous answer that helped me with what I was trying to do, keeping a header div with position-y fixed, a left div with position-x fixed, and a content div which would scroll on both x and y.
Figured I would post my jsfiddle in case anyone finds it useful:
My jsfiddle demo
The HTML
<body>
<div style="width:5000px;height:1000px;">
<div id="box1" class="box">
My position-x is fixed but position-y is scrollable.
</div>
<div id="box2" class="box">
My position-y is scrollable but position-x is fixed.
</div>
<div id="box3" class="box">
My position-x and position-y are both scrollable.
</div>
</div>
The code
$(window).scroll(function(){
var $win = $(window);
$('#box2').css('top', 0 -$win.scrollTop());
$('#box1').css('left', 120 -$win.scrollLeft());
$('#box3').css('left', 120 -$win.scrollLeft());
$('#box3').css('top', 20 -$win.scrollTop());
});
The CSS
.box {
position:fixed;
}
#box1 {
top: 0px;
left: 120px;
width: 1000px;
height: 20px;
background-color: #FF0000;
z-index:150;
}
#box2 {
top: 0px;
left: 0px;
width: 120px;
height: 520px;
background-color: #00FF00;
z-index:200;
}
#box3 {
top: 20px;
left: 120px;
width: 1000px;
height: 500px;
background-color: #0000FF;
color: white;
z-index:100;
}