I try to create a plugin for personal use, that will place clouds in my web page randomly.
Lets see now what is my idea:
I have create an image with all my clouds.
In my CSS I have create a general class called .cloud that is applyed to all cloud elements and four classes .cloud_1 .cloud_2 .cloud_3 .cloud_4 for each cloud element I like to place in my document.
Here are the css classes I use:
.cloud
{
display: block;
position: absolute;
background: transparent url(../img/clouds.png) no-repeat 0px 0px;
}
.cloud_1
{
width: 800px;
height: 350px;
background-position: 0px 0px;
z-index: 1;
}
.cloud_2
{
width: 800px;
height: 469px;
background-position: 0px -350px;
z-index: 2;
}
.cloud_3
{
width: 800px;
height: 405px;
background-position: 0px -819px;
z-index: 3;
}
.cloud_4
{
width: 630px;
height: 314px;
background-position: 0px -1225px;
z-index: 4;
}
From the other hand I use jQuery to place generate and place my clouds randomly into my document with random top and left.
The problem I have is that, if I set the position to absolute for .cloud selector the clouds that go out of the document width they activating the horizontal scroll bar. If I set it to fixed, the clouds are attached to the same position while I scroll down and so on.
What is the best solution in order to place my clouds with no horizontal scroll bar and not stay fixed in the same position ?
Extra info
I forgot to tell you that the clouds will animated to the right !
Produced code example
<div class="cloud cloud_3"></div>
and jQuery will adding style attributes like that:
<div class="cloud cloud_3" style="top: 280px; left: 120px;"></div>
Also jQuery will change the left css position in order to animated
Place all the clouds in a <div> with overflow: hidden, and make it the full size of your document. Set that div to z-index: -1 so that it is behind the rest of your content.
Put the clouds into a containing div withoverflow: hidden set on it. Then when the left position of the cloud is greater than the width of the containing div, move it back to the left so it will scroll accross to the right again.
Related
I am trying to do something basic (beginner in programming).
I try to take a large image and a smaller container, and move the image up or down inside while the user scrolls.
So you can .
Move the yellow up or down while the user can see the red in the same position (kept in doc flow).
If i create an image using this :
<div class="cvrContainer top left">
<div class="cvrPhoto" id="photo0" style="background-image: url(https://picsum.photos/900/850);"></div>
</div>
Should i set cvrPhoto to be larger then cvrContainer say 200% ?
How do i move it up/down with JS while keeping overflow hidden.
I do not ask how to calculate, only how to set it and move the only yellow inside
If you want to create simple parallax effect, you can achieve this effect by position fixed, add position: fixed on .cvrPhoto div.
.cvrContainer {
padding: 30px;
width: 100%;
height: 2000px;
overflow: auto;
background: url(https://picsum.photos/900/850);
}
.cvrPhoto {
height: 300px;
width: 200px;
position: fixed;
top: 57px;
background: yellow;
}
<div class="cvrContainer style=" background-image: url(https://picsum.photos/900/850); "">
<div class="cvrPhoto"></div>
</div>
I solved it by using css for the inner image (not background image but img tag) :
.prlxPhoto
{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}
and move it left/right for example with :
var e = document.getElementById("1");
e.style.marginLeft = equotion+'px';
How do you pin items to the place where they appear when they are first encountered on the screen?
I have a few elements that have their position set to absolute. After you first encounter the item, I would like them to become fixed to that position when you continue to scroll on the screen.
(ie, item on the bottom left corner of the screen and would like to keep it pinned there when scrolling after the item is encountered)
I've been using ScrollMagic, but when the items are pinned they are shifted to the middle.
EDIT Figured something out using jQuery
To make an element move with your screen in a fixed position, you can to the following:
yourElement{
position: fixed;
top: 300px;
left: 400px;
}
Hope this helps!
You have to work with layers, take a look:
.layer1{
position: fixed;
z-index: 1000;
bottom: 10px;
left: 10px;
background-color: red;
height: 30px;
width: 30px;
}
.layer2{
height: 1000px;
}
<div class="layer1"></div>
<div class="layer2">
Normal content
</div>
My Goal:
So I am making a webpage with a map of the USA as the "background image" and on top of that map I have about 10 markers pointing to specific location. The markers are NOT part of the picture thats just me adding them with absolute positioning and top and left with a percentage.
The Problem:
As I scale down the page or scroll up and down the markers that I have set with absolute positioning begin to move out of the spot they are suppose to be on because the background-image is getting smaller do to it displaying 100%.
The Question:
How can I achieve what I want with the markers on the map where they are suppose to be not moving as the window is being scaled down?
Now I know of only 1 solution and this solution can take a VERY LONG TIME. What I was thinking is instead of positioning the markers that I want on the map with percentage I can do it with pixels and then use a TON of media queries and keep on adjusting it. Not only is this solution going to take extremely long but it also does not seems like the correct way to go about this.
HTML:
<div class="container main-content"><!--the map background image is set here-->
<div class="row relative">
<div class="eq-content-wrap">
<div class="eq-content">
<div class="marker"></div> <!--the marker that is positioned absolute-->
</div>
</div>
</div>
CSS:
html, body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: #000;
}
body{ overflow: hidden; }
.main-content{
background: url('assets/img/map1.jpg') no-repeat top center;
background-size: contain;
height: 100% !important;
width: 100% !important;
}
.eq-content-wrap{
position: absolute;
width: 500px !important;
top: 22%;
left: 40%;
}
.marker{
height: 40px;
width: 40px;
border-radius: 100%;
background-color: red;
position: absolute;
top: 50%;
margin-top: -20px;
}
The problem is that your background image's size is set to 100%: background-size: 100%. This means that when the browser tries to scale the content, the background does not scale with it (it stays 100%).
Your best bet is to remove the background-size property completely. This allows the markers to stay in place when the page scales, however, you won't get the full-screen background effect that you currently have (unless you have a larger image).
The background will still move, however, once the browser window width is less than the image's width. This is because you have the background-position set to top center. The center is what causes it to move once the browser window width is less than the image width. Change center to left and it will fix that issue. You'll also need to set the marker's container to be based to the left as well for this to work on wider screens though. Basically, removing all center properties would help, but the screen wouldn't be centered on a wide screen.
Try substituting css :before pseudo element for .marker ; set percentage unit values utilizing calc()
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: #000;
}
body {
overflow: hidden;
}
.main-content {
background: url(http://lorempixel.com/400/300) no-repeat top center;
background-size: contain;
height: 100% !important;
width: 100% !important;
}
.eq-content-wrap {
position: absolute;
width: 500px !important;
top: 22%;
left: 40%;
}
.main-content:before {
content: " ";
height: calc(12.5%);
width: calc(5%);
border-radius: 100%;
background-color: red;
position: absolute;
top: calc(50%);
left: calc(50%);
margin-top: calc(1%);
}
<div class="container main-content">
<!--the map background image is set here-->
<div class="row relative">
<div class="eq-content-wrap">
<div class="eq-content">
<div class="marker"></div>
<!--the marker that is positioned absolute-->
</div>
</div>
</div>
jsfiddle http://jsfiddle.net/o79rpawc/
I've been trying layout with css the div (dark blue) so that changes size according to the size of the window without covering the bottom panel, I thought that with the height to 100% official, but not understand because it ignores the panel below, and ends moving off the page
now that see not let me post pictures, so something is also what I have:
html:
<div id="container">
<div id="message">hi i'm a message</div><!--i can see this div-->
<div id="darkBlue"></div>
<div id="anotherPanel">you can't see me</div>
</div>
and this css
#container{//This container is attached to the right side
right: 0;
width: 300px;
position: fixed;
height: 100%;
top: 0;
color: white;
padding: 20px;
}
#darkBlue{//this div cover the next div
height: 100%;
border: 1px solid white;
background: #3a5193;
bottom: 100px;
}
#anotherPanel{//i can't see this div.......
height: 100px;
botton: 0px;
}
Not sure if you can solve with css, or have to resort to using javascript (which is something I want to avoid), anyone knows some property who can help me?
UPDATE: This is the picture of what layout attempt: https://www.dropbox.com/s/t9nl5mb3sq85m3j/repro.png
Using bottom top left right you must define position. In your case remove bottom from #darkBlue #anotherPanel and add to #darkBlue height: calc(100% - 100px)
DEMO
Update
If you don't want to use calc then add margin-bottom:-100px; to #darkBlue
DEMO
You have a typo in the CSS of anotherPanel. You have botton instead of bottom. Also when using this CSS properties, is good to set the position.
Try this:
#anotherPanel{
height: 100px;
width: 300px;
bottom: 0px;
background: #F00;
position:absolute;
}
Is this the droid you are looking for?
Best.
If you assign a height of 100% to a child element it will take up 100% of the height of the parent element. If you want the element to cover the whole container without being in the document flow of the parent element you can try to do the following:
#darkBlue {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #3a5193;
}
Edit: #Niels has mentioned an additional detail I've not mentioned before. For this to work the parent elements position needs to be set to either fixed, absolute or relative
So if I want to have two divs, each of 100% of the entire page, side by side, given that the wrapper has overflow:hidden, how should I go about implementing it?
I have tried using inline-block but it did not work.
I have tried using float too but it caused errors.
I want the second div to be hidden so I can change it's left as an animation, sort of like a slide.
Thanks in advance!
If I've understood you correctly, you can achieve what you're after using inline-block. You just have to be a little careful with white space (i.e. you need to make sure you've got no white space between the two child div elements). I've stopped the divs from wrapping by setting white-space: nowrap;.
<div class="foo">
<div> woo woo !</div><div> woo woo !</div>
</div>
.foo {
overflow: hidden;
white-space: nowrap;
}
.foo > div {
display: inline-block;
vertical-align: top;
width: 100%;
background: aqua;
}
.foo > div + div {
background: lime;
}
Try it out at http://jsfiddle.net/8Q3pS/2/.
Edit: Here's an alternative implementation using position: absolute;: http://jsfiddle.net/8Q3pS/5/. That way you'll be able to animate the second one into view using left. Note that you'll need to set a height on the parent div.
.foo {
position: relative;
width: 100%;
height: 1.5em;
overflow: hidden;
}
.foo > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: aqua;
}
.foo > div + div {
left: 100%;
background: lime;
}
This should be purely a matter of positioning one of the divs off the page using absolute positioning and transitioning the left property using either hover state or javascript.
Hover the red div.
Codepen Example
Could you not set max-width to 100%, not set the actual width and float them side by side? With both overflow:hidden, as they expand it should create horizontal scrollbars.