I am trying to create an effect similar to that of:
background-attachment:fixed;
However I want to apply this affect to all elements contained within a div not just the background.
When you scroll down the div will move up the screen but it's contents some of which will be hidden in the overflow will come into view.
<div class="parent"> <!--- will move on scroll. Overflow hidden. --->
<div class="child"></div><!--- won't move on scroll --->
<div class="child"></div><!--- won't move on scroll --->
</div>
Ideally this will be a HTML and CSS solution, but I can stretch to some jQuery or DOM calls with JavaScript. Bear in mind that I would like to use this effect multiple times on one page, so it will need to be relatively succinct.
Apologies if this question has already been asked but I found it difficult to describe so perhaps I am using incorrect keywords in my searches. Any suggestions on how to better phrase this question will be appreciated.
Did you try to fix the position of a DIV:
<style type="text/css">
#mydiv{
position: fixed;
left: 10px;
top: 50px;
}
</style>
<div id="mydiv">
Some content here
</div>
It could be you needed.
Related
I have an Angular project in which I have some components that run inside of other components, what I'm trying to do is to create a popup component which will have the same size and placement regardless of from where it is triggered.
I got the suggestion to use Bootstrap modals instead, but ran into this problem trying to implement it in Angular. While that problem may be solved, the question of problem of a div breaking out of its containing div still stands.
I've been searching different ways of doing this but haven't found any solutions that I could apply when the exact page position isn't known.
What I want is a div that has the attributes of a div placed with absolute position right in the html, an example of what I mean:
<html>
<body>
<div class="absolute_div" style="position:absolute; height:80%; width:80%; left:10%; right:10%; margin:0; padding:0;">
</div>
<div class="some_content" style="position: relative; height: xx; width: xx">
<div class="target_div_to_break_out" style="position:absolute; height:80%; width:80%; left:10%; right:10%; margin:0; padding:0;">
</div>
</div>
</body>
</html>
I want the containing div target_div_to_break_out to have the same properties of the absolute_div but am unable to figure out how to achieve that.
In the actual use case there are <app-popup></app-popup> tags inside of another dive that i desperately want to break out and be treated as outside the containing div.
Since I'm using Angular for this a solution using Typescript/javascript is more than welcome if it isn't easily achieved in CSS.
Basically I want a containing div to cover 80% of the entire page, regardless of where inside of other divs it is placed.
Instead of using absolute positioning (which will position it relative to it's first positioned ancestor, i.e. .some-content), you should use fixed positioning, which will position it relative to the entire viewport.
More info on CSS positions can be found here
I've a personal project to learn more about HTML/CSS/JS.
But I got a problem with it.
I have two divs in my <body>, each one with 2 circular concentric div. One is placed on the center of the area, the other one not.
<div id="sphaea_bloc">
<div id="actor" class="actor_locked">
<div class="actor_extern_locked"> </div>
<div class="actor_intern_locked"> </div>
</div>
<div id="lock" class="lock_locked">
<div class="lock_extern_locked"> </div>
<div class="lock_intern_locked"> </div>
</div>
</div>
The base placement is good.
The second step is to add drag'n'drop with JQuery, and it works fine. The aim is to drop the little div into the bigger div.
When it fails, it correctly returns at a base position.
But now, when the drop is good, I want to place with JQuery the little div in to center of the bigger div (making 4 circles concentric).
I searched for a long time but I didn't manage to do it without the problem : I've always a little offset between my 2 divs... And I'm not able to understand why.
Here is the fiddlejs link :
FiddleJS link
Someone can help me to find the problem, and why my little div is always inside the bigger but with an offset ?
Thanks in advance !
AeldredOni
i have did like below, and its working, it will be centered even if you change with and height of divs:
.actor_locked {
position:absolute;
left:-9999px;
right:-9999px;
top:-9999px;
bottom:-9999px;
display: block;
margin: auto;
width: 60px;
height: 60px;
border-radius: 50px;
}
http://jsfiddle.net/xga3dzfm/1/
so using ExpressionEngine, I can generate a lot of webpages using the same template with different content. My problem is that I can't get the footer to appear where I want it to appear: at the bottom of the background image for each separate webpage.
For example, say that one of my pages is about dogs and the other is about cats. I love dogs so I write two paragraphs about dogs while only writing one paragraph about cats. I would like for both the background image to grow and the footer to be relatively positioned at the bottom of the background image. I have tried messing with both relative and absolute positioning in css, but the minute that I get it right for the "dog" page, it screws up the format for the "cat" page. I have also tried to adjust the height of the background image.
Am I missing something? Maybe there is an easier way to position an object relative to another object in css that I am not aware of? Thanks in advance.
As I previously mentioned, this does NOT achieve the result that I would like:
#landing_details {
position: relative;
bottom: -20px;
left: 40px;
height: 900px;
}
#belowTitle {
position: relative;
bottom: 25px;
}
#landingBodyCopy {
width: 400px;
position: relative;
bottom: -50px;
}
#landing_footer {
position: relative;
left: 120px;
bottom: -105px;
}
These are both nested within a div id="wrapper" which I never reference in my css. The landing details is what changes per entry. Also, the landing_footer div is kept within the landing_details div.
UPDATE:
So the part that I highlighted in red represents the space that I would like to be eliminated from the page.
UPDATE: The basic html layout is as follows
{exp:channel:entries channel="landing_pages" url_title="{segment_2}" sort="asc" disable="categories|pagination"}
<div id="wrapper">
<link rel="stylesheet" type="text/css" media="all" href="{stylesheet='in-store-analytics/LandingBodyStyle'}" />
<div id="landing_details">
<h3 class="LandingHeader"> {landing_page_header} </h3>
<div id="belowTitle">
<h4 class="LandingSubTitle"> {landing_page_sub_title} </h4>
<div id="landingBodyCopy">
<div class="landingBodyCopyText"> {landing_body_copy} </div>
</div>
<div id="landing_footer">
{embed="embed/footer"}
</div> <!-- End of landing footer>
</div> <!--- End of below title-->
</div> <!-- End of the landing details -->
</div> <!-- END div wrapper -->
{/exp:channel:entries}
Thanks again and any help on this matter would be greatly appreciated.
If you do not absolutely position your footer, its default position value will be static, which means that it will naturally appear below ("at the bottom of", like you asked for) any statically or relatively positioned preceding elements, however many there may be, and however big they are.
As for the background image growing according to content length, any div whose height is not explicitly set will expand according to the size of its content. Therefore your two-paragraph content div about dogs will be larger than the one-paragraph page about cats. If there is a background image on the content div, the div will act as a window displaying a portion of the background depending on its size. More content -> bigger content div -> more of the background image displayed. This is possibly not what you mean by having the background image "grow", but it does effectively grow.
If you'd like to perform some kind of dynamic scaling on the bg image, you should be more specific about how you want that to work, since I'd only be guessing at your intent. As well, it would help people answer you if you can provide a barebones version of your rendered pages using jsFiddle or jsbin. Isolate the part of the layout that you want help with and mock it up.
I have an HTML Document that looks a bit like this, only is far more complex and harder to control:
<body>
<div id="title">This div does not do anything, just stays at the top.</div>
<div id="container">
<div id="navigation">Some navigation</div>
<div id="content">Most of the content</div>
</div>
</body>
Then I have a stylesheet that includes the following:
#container
{
height: auto !important;
overflow: visible !important;
overflow-x: auto;
overflow-y: scroll;
position: relative;
width: auto !important;
}
This all works absolutely perfectly. The title section stays at the top of the page, the container div becomes scrollable if the content is long enough to need to scroll, otherwise it doesn't.
The problem is, that I am then using Javascript to add a whole lot more stuff to the content div. This means that the content div is getting longer than the page after it has loaded and this seems to mean, in IE8 at least, that the scrollbars on the container never get activated, so once the Javascript added content falls off the bottom of the page it becomes inaccessible.
It doesn't help that the minute I start tinkering with the IE developer tools, the scrollbars vanish altogether and I can't make them reappear, so it becomes somewhat hard to test.
I know IE8 has some issues with overflow-y.
You should try with this maybe.
-ms-overflow-y: scroll;
Hope that helps.
Hard to say if this will work without seeing more code, but why not remove the styles from your css and add them with javascript, once the content has loaded.
The solution that has worked was a simple hackaround of resizing the element with JavaScript to match the size it actually is once I have added the extra data to it, like this:
document.all['container'].style.height = document.documentElement.clientHeight+"px";
Of course, this doesn't entirely circumvent the problem- for that we need a new function:
function resizeResults()
{
var resultPanel=document.all["container"];
var topPanel=document.all["title"];
var newHeight= document.documentElement.clientHeight;
newHeight -= topPanel.clientHeight;
resultPanel.style.height=newHeight;
}
Then we can use window.attachEvent("onresize", resizeResults); to ensure that we don't lose the scrollbar or have it otherwise messed around when the user changes the window size.
Just remove the styles you have given for the element to make it scroll before loading ajax content to it.After loading ajax content then add those attributes again.
I've seen this done in a few sites, an example is artofadambetts.com. The scroll bar on the page scrolls only an element of the page, not the entire page. I looked at the source and havent't been able to figure it out yet. How is this done?
That's pretty nifty. He uses "position:fixed" on most of the divs, and the one that scrolls is the one that doesn't have it.
In fact it is not the scrolling part that is "doing the job", it is the fixed part of the page.
In order to do this, you should use CSS and add position: fixed; property (use it with top, bottom, left and/or right properties) to the elements that you wish not to scroll.
And you should not forget to give them a greater z-index, if you don't there might be some of the scrolling element that can go over your fixed element as you scroll (and you certainly don't want that).
To find out how people do these kinds of things in CSS and/or Javascript the tool Firebug is just outstanding:
Firebug addon for Firefox
It should be noted that without further hacks position fixed does not work for IE6, which is still managing to hold on to 15-30% of the market, depending on your site.
You can use fixed positioning or absolute positioning to tie various elements to fixed positions on the page. Alternatively you can specify a fixed size element (such as a DIV) and use overflow: scroll to force the scrollbars on that.
As already mentioned, getting everything to work in Internet Explorer AND Firefox/Opera/Safari requires judicious use of hacks.
This can be done in CSS using the "position:absolute;" clause
Here is an example template:
http://www.demusdesign.com/bipolar/index.html
From http://www.demusdesign.com/
The browser is scrolling the page, its just that part of it is fixed in position.
This is done by using the "position: fixed" CSS property on the part that you wish not to scroll.
They've set the side and top elements to have fixed positions via CSS (see line 94 of their style.css file). This holds them in the viewport while the rest scrolls.
Try this for scrolling a particular part of web page......
<html>
<head>
<title>Separately Scrolled Area Demo</title>
</head>
<body>
<div style="width: 100px; border-style: solid">
<div style="overflow: auto; width: 100px; height: 100px">
sumit..................
amit...................
mrinal.................
nitesh................
maneesh................
raghav...................
hitesh...................
deshpande................
sidarth....................
mayank.....................
santanu....................
sahil......................
malhan.....................
rajib.....................
</div>
</div>
</body>
</html>
For a div, you can add in the cSS
overflow: auto
For example,
<div style="overflow:auto; height: 500px">Some really long text</div>
Edit: After looking at the site you posted, you probably don't want this. What he does in his website is make the layout as fixed (position: fixed) and assigns it a higher z-index than the text, which is lower z-index.
For example:
<div class="highz"> //Put random stuff here. it'll be fixed </div>
<div class="lowz"> Put stuff here you want to scroll and position it.</div>
with css file
div.highz {position: fixed; z-index: 2;}
div.lowz {position: fixed; z-index: 1;}
To put scroll bars on an element such as a div:
<div style="overflow-x: auto; overflow-y: auto;>the content</div>
If you only want a horizontal or vertical scroll bar, only use whichever of overflow-x and overflow-y you need.