I would like to have vertically but not horizontally fixed div element. Currently, I am using jQuery to update the position top every time scroll occurs, but I don't want it seeing moving. I would like it to be fixed without moving. Is there a way to do this?
-----------------
| | |
| | |
| div A | div B |
| | |
| | |
| | |
-----------------
Scrolling down
-----------------
| div A | |
| | |
| | div B |
| | |
| | |
| | |
-----------------
I would like to be able keep Div B vertically fixed while Div A scrolls down and up. But when I scroll to the right and left, I wand Div A and Div B to move.
I noticed that Twitter uses something similar. Once you click on a tweet, the element on the right that display the tweet detail, is veridically fixed. I am not sure how they are doing it. See the second image, when scrolling down the right panel stays fixed.
Second image:
Twitter uses a css property: position: fixed; which sure is the best way to go.
This does exactly what it says it does, it fixes the position. By using the top, right, bottom and left properties you can set the exact position of your div.
Edit 13-12-11 (awesome date!)
The property position: fixed; can not influence a positioning property over one axis only. This means, that you can not scroll left or right, like you want to.
I highly suggest you should either avoid surpassing the screen width, using percentages for your element's width. You can also just stick to your javascript.
You could however go for the method I suggested at first, but change the left property using a scroll event listener so that when you scroll, the left offset is increased or decreased. Because jQuery's bad-ass cross-browser support I'd go for jQuery. I think you can do practically the same with the prototype library, but I'm not familiar with that library.
jQuery (worked in google chrome):
var offset = 400; // left offset of the fixed div (without scrolling)
$(document).scroll(function(e) {
// b is the fixed div
$('.b').css({
'left': offset - $(document).scrollLeft()
});
});
Have a look at the live demo
You might need to change the document object to another object or selector of your choice.
A whole lot of people want this, but unfortunately pure CSS does not offer a way to accomplish this very simple, very useful task. The only way that I have found is to give the div position:fixed. However, as you have found, this fixes the div on both the x and y axes.
This is a big failing in CSS, in my opinion. We really need something like CSS position:fixed-x and position:fixed-y. The only way I have found to do this is to have a piece of JavaScript code that's entered on a SetInterval( ) timeout (I use .10 second) that repositions the div on the axis that needs to change.
In your case (if I read your question correctly) you'd change the top: of DivB at each SetInterval( ) tick, moving DivB down to the position you want it in the viewport. Easy to do and it works, just a needless pain.
You might ask, and rightly, why you (and I) can't do this manipulation when the scroll event fires. The answer is that the scroll event doesn't fire in some versions of IE.
If you can make this depend upon scroll event cross-browserly, that would be a huge advance.
HTH.
This is easily done with the correct markup and CSS. You need a container (div, section, etc.) to contain your two content areas. In the following example, I exploit the way JSFiddle renders the fiddle's content, but the technique is the same outside of JSFiddle.
Live example.
First, we need the markup:
<div id="container">
<div id="divA">
<p>This div will scroll.</p>
</div>
<div id="divB">
<p>This div will not scroll.</p>
</div>
</div>
Next, the CSS:
#container {
height: 100%;
postition: relative;
width: 100%;
}
#divA {
background: #ccc;
height: 300%; /* So we can see scrolling in action */
left: 0;
position: absolute;
top: 0;
width: 25%;
}
#divB {
background: #c55;
height: 100%;
position: fixed;
right: 0;
width: 75%;
}
In this example, I take advantage of the fact that JSFiddle will create a view port of limited size. Thus, I can specify all of my sizes in percentages.
Notice that I set the container's position to relative. This is so that I can set the position model of divA and divB to "absolute" and "fixed" such that they will be positioned according to the box generated by "container". This is the key part of solving your problem.
use position:fixed as style and set a fixed width for div. also set top and left or right in pixel.
Related
I am trying to determine the top/bottom padding of a div (.content) based on it's height, and to recalculate it based on load AND resize of the window. This is supposed to align nicely centered next to another div (.character) beside it.
I've tried using CSS calc, but in this case it doesn't do exactly what I want it to do since the syntax doesn't support operators and I have a few media queries that change the size of the font based on the viewfinder, so the height of the .content div is somewhat dynamic.
Below is the JS portion, but here is the JSFiddle of what I've done so far: https://jsfiddle.net/inochiishtal/a9z13fb2/62/
$(function(){
$.w = $(window);
$.w.on('load resize', res);
res();
});
function res() {
$('.content').css('height',($.w.innerHeight()/2)+'px');
}
Any help or suggestions are appreciated. I'm not 100% dedicated to using innerHTML if there is a better solution.
It's a little unclear exactly how you want the items aligned, but based on what you said it seems like you want the .content and the .character to be vertically center aligned with each other.
In your snippet you have both of them absolutely positioned. If that's the way you want to go, you can just ignore their margins and JavaScript in general with this little vertical centering trick applied to both:
top: 50%;
transform: translateY( -50% );
The first line says "Put the top of this element 50% of the way down the element that it's positioned based on." Since it goes by the top, the second line says "Scoot me back up 50% of my height." That's just the way those CSS properties work -- the "top" % is about its parent, and the translateY % is about itself.
Since both of your elements would be vertically centered in their parent, they'd be aligned.
https://jsfiddle.net/qowxezpy/
HOWEVER if you don't need the elements to overlap like they do in this example (which I think looks nice and modern) there's a much easier way, using flex.
The parent would get:
display: flex;
align-items: center;
And the two children get:
flex-basis: 50%; //just to give them some width, since one is empty
I'm trying to implement an effect where there is a moving/animating window that pans over a background image such that you can only see a certain section of the image at a time.
Actually, the window itself should not move as it will be a div sitting somewhere on the page - but the effect should be the background moves behind it. The background however, should not take up any space on the DOM (i.e it should not affect any elements around it).
What is the best way to implement this? Should I just create a background image for the window div and then adjust the background-position? Can this be animated using jQuery?
____________________
| |
| IMAGE |
| ___________ |
| | window | |
| |_________| |
|___________________|
UPDATE: jsFiddle for CSS based animation.
Check out this jsFiddle make sure it's what you want.
HTML
<div class="window">
</div>
JS
var position = 135;
$('.window').click(function() {
position += 20;
$(this).css('background-position-x', position);
});
CSS
.window {
background-image: url(image);
display: block;
height: 200px;
width: 200px;
background-position: 135px -40px;
}
I've been working on my new portfolio/website and decided to go for a design that is basically one big index page that scrolls horizontally to show the different sections and vertically to show the content of the sections. Both the container and the boxed inside have a fixed width. The container is positioned relative and the boxes inside are floated left and positioned relative.
My question now is - how do I make it so that, regardless of the size of the browser window the user has when opening the website and even when re-sizing, the first box appears centered horizontally in the browser window AND without revealing the content that is on its right (content to which the user can scroll horizontally using buttons)?
The inspiration for my website came from this website http://www.cosstores.com/
I've inspected the code and I believe they are doing it using JavaScript and negative margins; but my Javascript knowledge is quite basic and I don't really understand how these negative margins are implemented effectively.
Would appreciate it if someone could explain how it works for the COS website or even come up with an easier alternative a noobie like me could use.
Thank you and please feel free to ask me to post anything else you think could help understand the problem better!
This is really quite simple, don't you worry. See it in action!
You'll need to work on a grid system. (You can use different-sized columns, but it's simpler if everything's nice and square.) Create a container div and a bunch of child "box" divs in your HTML:
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br />
<div class="box"></div>
<div class="box "></div>
<div class="box"></div>
<div class="box"></div>
</div>
Use <br /> to start a new row. Otherwise, rows will extend infinitely. The container div is exactly the height and width of one box, so it will only show one box at a time. But you can scroll, obviously.
Annotated CSS below:
#container {
font-size: 0; /* remove gaps between boxes */
height: 400px; /* show one box at a time */
margin: 0 auto; /* center horizontally */
overflow: scroll; /* show scroll bars */
width: 400px; /* show one box at a time */
white-space: nowrap; /* let boxes continue horizontally until manually <br />'d */
}
.box {
display: inline-block; /* stack up left to right */
font-size: 14px; /* undo font-size from parent so you can actually see text */
height: 400px;
vertical-align: top; /* line up tops of boxes within row */
width: 400px;
}
Then, to scroll to a location with Javascript:
$("#container").animate({ scrollTop: 400, scrollLeft: 800 }, "slow"); //with animation
$("#container").scrollTop(400).scrollLeft(800); //without animation
You'll need jQuery to use that code. Well worth it, since it hides browser inconsistencies in scrolling with Javascript.
If you want to use the browser's scrollbars, you'll need to use the body as your container. It's trickier, because you don't have a specified width and height. There is no way to hide elements (for sure) from every user—some have truly massive screen resolutions.
Basically, add a margin on each box so you get some space around it. With some quick JS calculations, you can figure out the location of each box and center it on screen. See updated fiddle.
Here's the relevant JS for anyone interested:
$("#scroll").click(function() { scrollCenter("#target"); });
scrollCenter("#home", 0);
function scrollCenter(target, duration) {
if (duration == undefined) duration = "slow";
target = $(target);
var offset = target.offset();
var top = offset.top - ($(window).height() - target.height()) / 2;
var left = offset.left - ($(window).width() - target.width()) / 2;
$("html, body").animate({ scrollTop: top, scrollLeft: left }, duration);
}
Run that OnDOMReady. The call to scrollCenter("#home", 0) forces the page to center the first box on load. You shouldn't even notice the jump.
Happy coding!
you should use the jQuery plugin scrollTo
http://archive.plugins.jquery.com/project/ScrollTo
Centering a div tag on the screen is easy. Set the margin property in it's css class to this:
margin:0px auto;
As for the rest of your question, this is a case for jQuery (in my opinion). Take a look at this link:
http://addyosmani.com/blog/building-spas-jquerys-best-friends/
And also google jQuery tutorials (you need to learn the framework first) and then, more specifically, "single-page sites" and "jQuery Paralax".
Good Luck!
I have a HTML application that works with three columns, each of which is a div in a container object.
| |
A | B | C
| |
I'd like to make it such that the three columns would each be adjustable, and the text would reflow and adjust inside of them.
This works trivially with Frames (See: http://www.tizag.com/pics/htmlT/frameindex.html ), but I'd like to replicate this behavior with my Divs.
Is there a jQuery plugin to do this? The best way I can think of is to create a slider div between the contents, similar to the implementation at http://www.catchmyfame.com/2010/08/12/adjustable-columns-with-jquery/
Is there any easier/cleaner/prettier way? This seems like it has to be a pretty standard request...
A rudimentary way to set them up all the same width:
div {
float: left;
width: 33%;
height: 300px;
overflow: scroll;
}
If you want to allow the user to resize the columns with a drag-n-drop method then you'll want to look into a JS framework. Here's a jQuery example:
http://docs.jquery.com/UI/API/1.8/Resizable
I have two side borders on my website, left and right side... small image about 15x15 which repeats itself down the website... When setting 100% like below, the border only goes "one screen" down (which is 100%). But my website is dynamic and the content changes... I want the border to change along with the total height of the page...
How can I do this?
Here is the css:
.bgr_right {
background-image: url(../Graphics/bgr_right.jpg);
background-repeat: repeat-y;
background-position: right;
position: absolute;
top: 0px;
height: 100%;
width: 30px;
right: 0px;
background-color: #E7F5F0;
}
Here is the HTML DIV:
<div class="bgr_right"></div>
Also, is position: absolute the right thing to have?
UPDATE:
After reading the responses, I thought there has to be a better way...
How about using javascipt...
Does anybody know if there is a way to, with javascript, get the height of the body?
then:
<div height="javascript_function()" or something...
???
Thanks again
Alternativly I'd suggest to wrap another two divs around content container and repeat the background aligning it in one div to the left and in the other to the right. I.e.:
<div id="left_wrapper" style="background: url(my_leftimage.png) y-repeat top left;">
<div id="right_wrapper" style="background: url(my_rightimage.png) y-repeat top right;">
<div id="content">hello world</div>
</div>
</div>
Then if you want it to go height 100% set the html, body and the content containers to 100% height like this in the CSS:
html, body, #content { height: 100%; }
Hope this helps :)
At the risk of angry comments and loss of reputation - use a table to contain your layout. You get the full-height borders free - they will automatically adjust to the same height as your content.
<table>
<tr>
<td class="bgr_left"></td>
<td class="content"></td>
<td class="bgr_right"></td>
</tr>
</table>
If you have a fixed-width design, you could just use one background image, either on the body or on your content container, depending on the effect you want. This image would be something like:
(left bar)-> | ([x]px space here) | <-(right bar)
With repeat-y, this would give you:
| |
| |
| |
| content here |
| |
| |
| |
Then the bars will be as high as your content. If you apply this to <body>, then it will have the height of the body.
Hope this helps.
There doesn´t seem to be a reason to use a separate div for the background as it´s empty, but it depends if the column width is fixed.
You should apply the background image to the div you want to have a background, that way you can be sure that it will continue below as the div grows.
If your column width is fixed, you
can just combine the left and right
image in a very wide image that will
only repeat vertically.
If your column width is variable,
you can have for example the left
background in the growing div and
the right one on a wrapper div that
contains the growing div.
Using the right padding you will get the effect you want.