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/
Related
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>
The end result should look something like the picture attached (Link to illustation).
Each part of the picture is individual png images drawn in Illustrator and each of these have their own CSS class.
My problem is how to make the position of each individual block (png) in order to make them look like this.
Which CSS attributes can I play around with to position them like this.
I realized also that they cannot be centered vertically because then they will not appear to be in the middle of each other.
I have used ng-repeat earlier to draw circles (as round div's), but then I get all the circles in only one dimension.
Any ideas how this can be done and what I need to have in mind when doing it?
Fiddle is here: https://jsfiddle.net/tyt4ft3g/1/
Whatever you have attempted is absolutely correct and is the best possible way of doing that object.
Basically you have to provide position: absolute to all your img elements and have a common position: relative parent. You have to position them correctly with the right and bottom properties so that each image appears on the center of its predecessor.
Also, provide a higher z-index to the images on top (i.e the smaller images on the left should have a higher z-index than the ones on the right in decreasing order).
Updated fiddle.
Refer code for a better perspective:
.parent {
width: 300px;
height: 200px;
position: relative;
}
.copper {
height: 30px;
right: 72px;
bottom: 28px;
position: absolute;
z-index: 3;
content: url(http://i.imgur.com/LeIGPou.png);
}
.ins {
height: 60px;
right: 37px;
bottom: 16px;
position: absolute;
z-index: 2;
content: url(http://i.imgur.com/3bMaW3t.png);
}
.power {
height: 70px;
right: 0;
bottom: 16px;
position: absolute;
z-index: 1;
content: url(http://i.imgur.com/jFYquAI.png);
}
<div class="parent">
<img class="copper">
<img class="ins">
<img class="power">
</div>
I'm using Twitter Bootstrap and I want to implement a overlay panel when mouse hover the img tag, like in Stackoverflow when details is showed when the focus is in the image of the user.
This image illustrate:
Someone how I do this?
Thanks.
Whatever you want as the "hovering" object, just give position: absolute, then have a :hover selector, for example:
HTML
<div>
<div class="Profile">
Basic Profile
<div class="Overlay">
Put overlay stuff here.
</div>
</div>
</div>
CSS
.Profile{
position: relative;
}
.Overlay{
position: absolute;
top: 100%;
left: 0px;
opacity: 0;
height: 0;
}
.Profile:hover .Overlay{
height: auto;
opacity: 1;
}
So now, when a user hovers over the .Profile div, the .Overlay contained within it will appear, then add any additional styling for transitions and making it pretty.
Example JSFiddle
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