I have some very simple code but I encountered an issue. I have a background image which is zoomed in upon scroll. I would like to relatively position an element relative to the background image which takes up the full width and height of the screen. How could I do this? I thought it would be as simple as having relative and absolute containers. For better context here is the image (https://imgur.com/rc8Ia3d). I am attempting to place an element on the screen of the camera. Do I have to think of a more outside of the box approach? Thank you.
Here is some of the very simple code
<script type="text/javascript">
$(window).scroll(function() {
var scroll = $(window).scrollTop();
$(".hero-zoom img").css({
width: (100 + scroll/5) + "%",
top: -(scroll/10) + "%",
});
});
</script>
header img{
width: 100%;
max-width: none;
position: absolute;
top: 0%;
left: 50%;
transform: translateX(-50%);
}
Related
Let's say I have a div that follows the mouse cursor on my screen. This is done by handling the document mousemove event and setting its left and top position based on the event data.
For this example let's say it has a width and height of 10.
It is desired for it to always be centered on the cursor. To make this happen the left and top need to be horizontally offset by half of div's width and vertically offset by half of the div's height. This allows it to be perfectly centered on the mouse cursor.
document.querySelector(".circle").style.left = e.x - (width / 2)
However, this is done in many places in the application and it seems cumbersome. Is it possible to instead set the origin such that when I set the left and top properties, I do not need to offset by half the width and height, since the origin would be at the center of the div?
The only thing I could find was the transform-origin property, but this seems to only apply to the transform CSS properties, and not properties like left, margin-left, etc.
Can this be done?
You could use:
transform: translate(-50%, -50%);
This calculates the percentage from the width and height of the element itself.
Example snippet:
const move = document.getElementById("move")
const mouseMoveHandler = e => {
move.style.left = e.pageX + 'px';
move.style.top = e.pageY + 'px';
}
window.addEventListener('mousemove', mouseMoveHandler)
#move {
position: absolute;
transform: translate(-50%, -50%);
}
<div id="move">I follow the cursor</div>
You can offset it absolutely relative to a parent who is 0x0 and positioned relatively, and further make the parent move with your mouse.
<!DOCTYPE html>
<html>
<head>
<style>
.origin {
position: relative;
width: 0px;
height: 0px;
}
.circle {
position: absolute;
top: -10px;
right: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 3px solid red;
}
</style>
</head>
<body>
<div class="origin">
<div class="circle"/>
</div>
</body>
</html>
See more details: https://www.w3schools.com/css/css_positioning.asp
I am trying to use Dat GUI to add some controls to a Three.js project. I really like the look and feel of the controls provided by Dat GUI. However, I am having some problems positioning the menu within the page. I really need to centre the menu horizontally and vertically and also set a custom width and height for the menu. Surely this must be possible?
Currently I am trying the following. The menu is almost centering horizontally, so something is working. But it is not centering vertically (its just stuck to the top of the page) and the size of the menu is not changing at all (the width and height parameters have no effect).
Can anyone help me out with this?
javascript:
var gui;
var MenuClass = function()
{
this.speed = 0.5;
};
var theMenu = new MenuClass();
gui = new dat.GUI();
gui.domElement.id = 'gui_css';
gui.add(theMenu, 'speed', -5, 5);
css:
#gui_css
{
position: absolute;
left: 50%;
top: 50%;
width: 400px;
height: 200px;
}
Try:
to add a div which is a container for your dat.GUI element
<div id="gui_container"></div>
then in code
var gui = new dat.GUI({ autoPlace: false });
gui.domElement.id = 'gui';
gui_container.appendChild(gui.domElement);
and then in styles
#gui_container{
position: absolute;
top: 50%;
left: 50%;
}
#gui{
transform:translate(-50%, -75px);
}
Note, that -75px in transform:translate(-50%, -75px); means that gui.domElement has no height attribute and you set translation by y-axis approximately a half of its height as you see it on the screen.
jsfiddle example
try this:
position: absolute;
top: 0;
left: 0;
right:0;
bottom: 0;
this will center the element horizontally and vertically as long as it has width and heigth or else it will stretch the element.
I have been trying to scale an image in javascript so it is 15% of the screen width. The problem is now that javascript automaticcaly scales from the top down and i want to scale from bottom to top. Thank you in advance!
ps: jquery library is included.
html:
<img id = "image" src = "https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
js:
document.getElementById("image").width=window.innerWidth * 0.15;
First, you do not need jQuery, nor any JavaScript at all to get this to work as you would like. It can be done in pure CSS.
Second, this is not an issue with the way images scale, but an issue with positioning the image after it has been scaled.
Please see my jsfiddle showing how to accomplish this with pure CSS and position how you would like.
HTML:
<div id='imagewrapper'>
<img id = "image" src = "https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
</div>
CSS:
#image {
width: 15vw;
position: absolute;
bottom: 0;
right: 0;
}
#imagewrapper {
position: relative;
width: 768px;
height: 576px;
}
I have html sturcture
<div id="bg" class="layer">
<img id="trackmap" src="images/back_2416.jpg" width="1208" height="768" class=" ui-draggable map-icon" usemap="#main-map" data-zoom-image="images/background_zoom.jpg" data-big="images/background_zoom.jpg" style="position: relative; left: -439px; top: -272.6px; margin: 0px; display: inline-block; height: 1327.2px; width: 2088px;">
<div id="nav-text">LOREM IPSUM.</div>
</div>
Jquery
var windowHeight = $("#trackmap").height();
var windowWidth = $("#trackmap").width();
var text_height=((windowHeight)-(100));
$("#nav-text").css("top",windowHeight);
Css
.layer {
position: absolute;
width: 1208px;
height: 768px;
}
#nav-text{
z-index: 200;
color: white;
position: absolute;
font-size: 10px;
margin-left: 715px;
width: 310px;
height: 10px;
position: fixed;
bottom: 5px;}
I just want to fix the nav-text to the bottom right whatsoever.. Now i problem i am facing is theres zoom function on the trackmap.. which increases the height and width of the image ..so the text comes in between of the image ..intereferring with the image.. I have tried taking the image width height using jquery ..but somehow its not working
I am not sure I am following your issue here, but it sounds like you are trying to get a div to be in the bottom-right of another div no matter what size it is. That can be done by setting the parent div position to relative which you have, and the child div position to absolute. You have that set but then override it by setting the position to fixed lower in the CSS. You will also want to set the bottom to 0 and the right to 0.
This will position the child div to the bottom right of the parent div. Then you can get rid of your jQuery. Hopefully this helps.
Ok.. I am in a hurry to catch the bus.. but here's a fiddle that illustrates the idea..
basically you will need to use the scrolltop and left parameters to do so:
$(".container").on("scroll", function() {
$(".nav-text").css("top", $(this).prop("scrollTop") + 130);
$(".nav-text").css("left", $(this).prop("scrollLeft") + 120);
});
but move the scrolls first.. sorry I need to go now..
You can achieve this by not fixing the .layer width and height, using display:inline-block; to prevent the div from filling the whole container width. At that point, the .layer size will match the image size whatever it is.
Finally you just need to set the text to absolute position and bottom and right properties too.
.parent{
display:inline-block;
position:relative;
}
.children{
position:absolute;
bottom:0;
right:0;
}
Here is the fiddle explaining
And here is the proof it works even if the image size is changed(click on the image).
Fiddle 2
Im trying to add a footer at the bottom of this content that doesn't overlay the content but moves it up.
The only way I can see it working would be something like, when browser is at the bottom remove 'fixed' class on the left red '#work'.
js fiddle DEMO
Updated js fiddle DEMO
HTML
<div id="header-block">
Header-block, this sits here in the background
</div>
<div id="content">
<div id="work">
This content should be fixed when at the top
</div>
<div id="description">
This content should scroll -
</div>
</div><!-- end content -->
<div id="footer">
This should appear at the bottom
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
#header-block {
background: green;
width: 100%;
position: fixed;
z-index: 1;
height: 300px;
top: 0;
}
#content {
margin-top: 300px;
width: 100%;
position: relative;
z-index: 2;
}
#work {
background: red;
width: 50%;
height: 100vh;
float: left;
position: absolute;
}
#description {
background: blue;
width: 50%;
height: 1200px;
float: right;
font-size: 30px;
}
#footer {
background: black;
width: 100%;
height: 100px;
position: absolute;
z-index: 3;
bottom: 0;
}
If I understand your question correct, this should do the trick (although it depends very much on JavaScript unfortunately).
// Fix work column on scroll
contentStart = $("#content").offset().top ;
contentSize = $("#content").height() ;
window.onscroll = function(){
if( window.XMLHttpRequest ) {
var position=window.pageYOffset;
// calculate the position of the footer and the actual seen window
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $("#footer").offset().top;
if ( position > 300 && !(docViewBottom >= elemTop)) {
$('#work').css({'position':'fixed', 'top':'0', 'height':'100vh'});
} else {
// if the footer is visible on the screen
if(docViewBottom >= elemTop) {
$('#work').css({ 'top': 0 - (docViewBottom - elemTop) }); // scroll the #main div relative to the footer
} else {
$('#work').css({'position':'relative', 'top': 'auto'}) ;
}
}
}
}
For further informations about the calculations, perhaps this question on stackoverflow is useful.
Edit: Andrew Haining posted his answer in between of my answer, perhaps give his link a try and maybe it's a better (more proper) solution. Unfortunately I haven't actualised this page when I was testing your code in JSFiddle and I didn't see his answer.
If you want to use my script, make sure you can test it with different resolutions. It works just fine for my resolution in JSFiddle, I didn't test any other.
I'm not 100% sure what you want, but if you remove the position: absolute and the bottom: 0 from the footer, and put a div with class='clearboth' above the footer, it seems to do what you need.
CSS
.clearboth {
clear: both;
}
This is a drawing of what I see on your fiddle;
Do you want the red and the blue to always be touching the black?
I don't see the red overlying the black
You should use jQuery to add a class containing the position:fixed value when the scroll position of the page is less than the inline position of the #work div. Once it scrolls past the position, remove the class and have the element fall back in line.
You can achieve this using the following jQuery methods.. .scrollTop() .offset().top() and $(window).height().
This tutorial will give you an understanding of what you need to do to achieve the necessary results, you will just have to change the calculation slightly using $(window).height(), $('#footer').height() and a few other changes to get what you desire.
Based on the question you asked i think this is what you mean. The red div should be fixed when it gets to the top but be absolute when it is below the top for scrolling and the black footer should be below the red while scrolling, check this code i have done for you. just add this jquery script and run it.
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function() {
$(window).scroll(function () {
console.log($(window).scrollTop());
if ($(window).scrollTop() >= 322) {
$('#footer').css("z-index","1");
$('#work').css(
{
"background": "red",
"width": '50%',
'height': '100vh',
'float': 'left',
'position': 'fixed',
'top': '0'
});
}
if ($(window).scrollTop() <= 322)
{
$('#work').css(
{
"background": "red",
"width": "50%",
"height": "100vh",
"float": "left",
"position": "absolute"
});
};
});
});
</script>
If not exactly a parallax, this is somewhat close to how parallax works, containers moving at different speeds, and some containers sitting fixed or scrolling when they attain a particular top/bottom offset in the viewport.
There's plugin that can do it. Skrollr
You can use Skrollr along with skrollrcss, and it'll make sure how the containers take position on screen based on scrolltop of the window and the container specifically.