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>
Related
I created a pop up window and the background color of it that darken the page is not displaying over the entire page. It only displays in the first 100% of the page. If you scroll down, the page turns back to the normal div background-color.
I created a fiddle to help illustrate what I mean. Scroll down and click the blue text. That will make the popup window appear. Then if you scroll up you will see that the gray background-color is only displaying in the first 100% viewport, but then going back to white when you scroll down. I want the entire page to turn that gray color when clicked on.
My Fiddle
https://jsfiddle.net/3x42sdd8/1/
I have set the height to 100%, so I'm not sure why that isn't taking any effect on the entire page.
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #FFFFFF;
z-index:1001;
-moz-opacity: 0.3;
opacity:.30;
filter: alpha(opacity=30);
}
Change the position to fixed for your overlay, as the absolute will position it at 0, 0 of your document while the height: 100% gives it 100% of the height of your viewport. Position fixed fixes it to position 0,0 of your viewport.
Here is an example that shows you the difference between position absolute (red) and position fixed (blue):
#push {
height: 5000px;
}
#absolute, #fixed {
background: rgba(255,0,0,.5);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#fixed {
position: fixed;
background: rgba(0,0,255,.5);
}
<div id="push"></div>
<div id="absolute"></div>
<div id="fixed"></div>
Check this out - https://jsfiddle.net/3x42sdd8/2/
Just updated position
.black_overlay{position:fixed;}
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
I have asked questions like this and have not really got an answer that really helped me! I know it is probably very easy and i just can't figure it out!
I have been studying jQuery for a few days now and have the basics down but cant create the right function to make this effect happen! Please visit the website below!
There are a few things i would like to know about! The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.) The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
The next part i would like to know is when you click one of the icons a whole another window pops out. I kind of have an idea of how these both happen but i cant put all the pieces together. Please help me out! I know it cannot be that difficult. Even if you know of any jQuery plugins that can help achieve these results, would be even better!
http://intothearctic.gp/en/
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates"></div>
</div>
</div>
CSS
#sidemenu {
width: 60px;
height: 100%;
min-width: 60px;
height: 100vh;
max-width: 60px;
background-color: #383D3F;
background-size: 100% 100%;
background-attachment: fixed;
margin-top: -8px;
margin-bottom: -8px;
margin-left: -8px;
position: absolute;
}
#regionsContainer {
width: 60px;
height: 481px;
min-height: 481px;
min-width: 60px;
max-width: 60px;
max-height: 481px;
background-color: #383D3F;
position: relative;
top: 25%;
bottom: 25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background-image:url(../_images/_header/regionsUnitedStates.png);
}
#regionsUnitedStates:hover {
background-position:bottom;
}
you can do that using position: absolute like mentioned by fizzix before, and for each of your question with this html example
<div id="sidemenu">
<div id="submenu" class="not-open">
Sub
<div id="submenu-inner">
inner
</div>
</div>
<div id="submenu-item1">
item
</div>
</div>
1 The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.)
This can be achieved with jQuery on document ready, and using setTimeout if you want to further delay it, then add a class to the element, like this
CSS :
#sidemenu {
background: #000;
width: 50px;
height: 100%;
position: absolute;
left: -50px;
transition: left ease-in-out 0.5s;
}
#sidemenu.show {
left: 0;
}
jQuery :
$(function() {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
2 The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
This can be achieved with only CSS on hover, what you need is put the floating element inside the element you want to hover, in this example submenu-inner inside submenu, then add some CSS
#submenu {
background: #fff;
height: 50px;
margin: 150px 0 0 0;
text-align: center;
position: relative;
}
#submenu.not-open:hover #submenu-inner {
left: 50px;
opacity: 1;
}
#submenu-inner {
opacity: 0;
position: absolute;
transition: all ease-in-out 0.5s;
top: 0;
left: 250px;
height: 50px;
background: #f00;
}
firstly, the inner element is transparent and positioned more to the right using left, then on hover, set the position right beside the container, by setting the left CSS again to the width of the container
3 The next part i would like to know is when you click one of the icons a whole another window pops out
it's the same with number 1, except this one triggered by onClick event
here's the working example on JSFIDDLE
I dont think any plugin is required.
You can use translate to keep the menu hidden.transform:translate(90%)
Please refer this example:JSFIDDLE
The entire site is using absolute positions. This means that they are positioned on the page with pixel co-ordinates. They then using jQuery animate to move the top and left positions.
I have made a brief example of how to do this HERE. You can edit this to your liking.
If you are interested in seeing what the site was built with, you can see a whole list HERE
So I have two images, one is a half of a ribbon and the second one is a full ribbon with facebook etc links on it. I need to have the first one in the middle of a page, so when you click it it would expand out. I figured i need to use hidden overlay or something but I am totally new at javascript.
Can someone provide an example or help me with this?
I tried to understand what you want and tell me if this is what you meant.
You can wrap the two images in two sepatare divs and then wrap them in a div with position relative.
Then you give to the two divs position absolute.
On the click of the first div you change the second div left position (or the top if you want a vertical effect).
Here is the html with divs only:
<div style="position: relative">
<div id="frontDiv">
aaaaaaaaaaaa
</div>
<div id="backDiv">
bbbbbbbbbbb
</div>
</div>
Here the CSS:
#frontDiv{
height: 20px; width: 45px;
background: red; position: absolute;
z-index: 1; left: 0px; top: 0px;
}
#backDiv{
height: 20px; width: 30px;
background: blue; position: absolute;
z-index: 0; left: 0px; top: 0px;
}
And here the javascript (in jQuery):
$("#frontDiv").click(function(){
$("#backDiv").animate({"left":"45px"}, 300); //{"top":"20px"} for vertical effect
});
At the end you can position the wrapper div wherever you want.
Full example at this fiddle: http://jsfiddle.net/w7RVe/
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.