I have a div that can be revealed from several buttons on the screen. I'd like it so the div always appears 15px from the top of the screen, even if the window is scrolled to the bottom. But, i dont want it to be fixed. (meaning you should be able to scroll away from it.
#tip {
background: #fff;
width: 300px;
z-index: 100;
display: none;
position: absolute;
top: 15px;
right: -330px;
-webkit-border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
border-radius: 0 5px 5px 5px;
}
What Javascript solution do I need here?
Without jQuery, the best I could suggest is this:
document.getElementById('tip').style.top = document.scrollTop + 15;
You can try with http://code.google.com/p/jquery-scroll-follow/ - the element will be attached to viewport and will follow it as you scroll http://kitchen.net-perspective.com/sf-example-1.html
Related
I created a modal dialog using CSS3, it works perfectly. But my site is responsive and the modal has to appear on several items inside an iframe (see here: http://labs.tageswoche.ch/interaktives/filmPortraits/ and here: http://master.tw.felix.sourcefabric.net/de/2014_11/international/652865/Drei-Jahre-B%C3%BCrgerkrieg-und-kein-Ende-in-Sicht.htm). In the iframe it doesnt work, but it works as expected on the real site.
The modal dialog is implemented on the first two pictures.
And here the code:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
Here is a jsfiddle I used to implement the modal dialog:
http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/
What i want to achieve is that the modal appears where the mouse click was (or more or less) so that also on mobile devices on the last images of the wall. Right now the modal appears on top. How can I implement this? I have no clue.
One thing I'd like to say about your design is, do not make separate modal window htmls for each person's modal, use one modal and change its innerhtml as you click on different people so you write less code, easier to maintain (if you add changes to your modal, you do one change in one location etc)
Also, the nature of modal windows is, it has a semi transparency background, with the modal window floating (not in css context) in the middle of it.
If you see this css bit below you'll understand better:
.modalDialog > div {
width: 600px;
position: relative;
margin: 5% auto;
padding: 5px 20px 13px 20px;
background: #fff;
}
The bit that says "margin: 5% auto;" causes this behaviour, what you need to do is change this to the same notation the padding is set and for each position of the image, give it certain values, ie margin: 10px 10px for a modal window that just shows at the top left corner of the window etc if you're not too fussy about exact mouse location.
If you are, than use "onclick" event of your outermost background div with width/height equal to the overall size of every person's image included, than use the event object to get mouse location values (read this link http://www.w3schools.com/jsref/event_clientx.asp)
I didn't write it for you so that you can do it yourself and learn, hope this helps!
I used a position:fixed div with overflow: auto; as a transparent div in the back of some pop up.
The problem is when I scroll to see this pop up bottom or top, this overlap appears.
How could I keep using this div as a background with the ability to scroll without this overlapping?
HTML
<div class="popup_screen_bg">
<div class="popup_screen">
<!-- update partner "form" -->
</div>
</div>
CSS
.popup_screen_bg{
position: fixed;
min-width: 100%;
min-height: 100%;
height: auto;
z-index: 1000;
overflow: auto;
background: url('popup_transparent.png');
padding-bottom: 20px;
}
.popup_screen{
position: absolute;
min-width: 80%;
min-height: 80%;
left: 10%;
top: 10%;
background-color: #EEE;
border: 8px solid rgba(0, 0, 0, 0.5);
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
box-shadow: none;
}
Note: This problem appears only in Chrome.
. You can see that it is scrolled down in google chrome, and there is no overlap. Maybe there's another reason? Or maybe it's just a glitch, since you said it is working on all other browsers. If you also look in the right, there are your styles, and your div is at the top of the interior of <body>.
So I want my div background to scroll be the height of the window even when you scroll down.
However It seems to only be the height of the original window size. When I scroll down I am seeing the background of my body.
I've searched this site for similar questions and all I'm finding is to use height: 100%;
but that is not working.
Here is my CSS code:
div#graycontainer {
margin: auto;
margin-top: 50px;
width:1000px;
background-color: #D9D9D9;
height: 100%;
/*box-shadow: 10px 10px 7px #888888;*/
/*border: 3px solid #888889;*/
border-radius: 1px;
}
I don't believe there is any problem with my other code and using this site as a last resort.
Thanks for any help!
Using height: 100%; will only create the image with the height of the browser. What you want to do is something that doesn't depend on the scroll position. In the case that you want the image to stay in place on scroll, you might use position. First use position: fixed; This will set the image at its very position. And after that you can use the z-index to make sure it stays above the background. Use this:
#image_at_back {
margin: auto;
margin-top: 50px;
width:1000px;
background-color: #D9D9D9;
height: 100%;
/*box-shadow: 10px 10px 7px #888888;*/
/*border: 3px solid #888889;*/
border-radius: 1px;
position: fixed;
z-index: -1; // to make it a background
}
You can read more here.
When you add the fixed position, try to add some text to make the scroll bar visible. Then when you scroll it, the image stays at its position.
How can I positionate a fixed element at the left side of the div with processing resize events?
Here's example: http://jsfiddle.net/yHErk/10/
Now on my screen resolution .skicked is right at the left side of .container. But if I'll simply resize the result window, it'll change. Is there a simple way to do that thing I want?
Thank you.
Currently your .sticked div has no relative parent to hold it so it is moving according to the re-size.
Add .sticked div inside the container div.
CSS
.container {
width: 300px;
margin-left: auto;
margin-right: auto;
border: 1px solid;
background: #dedede;
padding: 10px; position:relative
}
.sticked {
position: absolute;
top: 100px;
left: -50px;
border: 1px solid;
border-radius: 5px;
padding: 10px;
background: white;
}
​DEMO
Firefox is putting a gray border on most of my images. The border is sometimes on the bottom or off to the right. If I add padding to the images sometimes the border will go away.
The images are not links and I have basically covered every option in CSS to eliminate the problem but have had no success:
body img{
padding: 0;
border: none;
text-decoration: none;
outline: none;
overflow: hidden;
-webkit-border-radius: 0;
-khtml-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 0 0 #000;
-moz-box-shadow: 0 0 0 #000;
}
Hopefully someone has encountered this before or has some information to help?
try adding an attribute to your html img tag like border="0"