I have a PHP page that displays me the content of a conversation and allows me to answer back. As messages are displayed in inverse chronological order (newer messages are showed first), positioning the "Answer" form at the end of the page would look bad and not comfortable to use (one has to scroll between all messages), but positioning it on the top looks bad too, as one cannot read old messages and answer back.
So, I need something like Facebook does for conversations: one can read all messages while the textbox remains at the fixed position. An example may be found here: when entering the page [and waiting a few seconds], an image on the left appears, and follows the browser as you scroll the page.
It sounds like you want the position:fixed CSS property.
HTML:
<textarea class="inputbox"></textarea>
This CSS will put it at the bottom of the page:
.inputbox {
position: fixed;
bottom: 0px;
}
You probably also want to look at top, left, and right.
use can use position:fixed on div and adjust it with top , left or bottom, right or whatever that you want to choose
Related
Im working on a Website and everything is ok, except my webside is "shaking". (I'm using chrome)
The margin of my main Container is changing on some sides and i have no idea why. They have the same html code, it must have something to do with the content in the main div-container
My Website: www.anitalernt.de
http://www.anitalernt.de/about-us.html is a bit more to the left and http://www.anitalernt.de/index.html after getting a task (just click some buttons) also.
Has someone a idea?
Always display the scrollbar
html {
overflow-y: scroll;
}
See:
Always show browser scrollbar to prevent page jumping
How to always show the vertical scrollbar in a browser?
You could add
html{ overflow-y: scroll;}
to your css.
Places a permanent (but sometimes empty) scroll bar on the window
The issue is most likely caused by the scrollbar appearing, which reduces the viewable area of the browser window and may adjust the contents accordingly.
There are a couple possible workarounds:
You could extend the length of the adjusted web-page so that the content (post-adjustment) also runs "below the fold"
Alternatively, you could encase everything in an absolute positioned DIV which won't "shake" when the viewable area contracts on the scrollbar's appearance.
Or -- depending on your specific content -- you could disable the scrollbar. Although this last workaround is only advisable in very specific cases.
body{
margin: 0;
}
seems to resolve this without having to add a dummy scrollbar :)
I had the same problem because of jQuery scroll where I was checking the scroll value and using that. I fixed my navigation bar by using addClass and removeClass, adding class was not working because I did not use !important in CSS class.
I am trying to create a HTML site with CSS styling and run into the following issues:
Depending on monitors size, my HTML element's positioning changes. So if It's a bigger screen, then lets say everything fits correctly. But if you open it in a smaller screen, not everything is displayed!
If I zoom in the browsers view, the elements begin to overlay each other - yet I want to stay where they are (even if that means they wont be displayed on screen due to a high zoom IN).
(I cannot post images yet, so I'm adding a link to the picture to explain abit more):
I am also posting a fiddle where you can see my CSS for the MENU and the HTML part that is connected with it:
I have to write some code, but my code is too long and wouldn't look nice.
My Fiddle
It would be really nice of you, if you can help me out here. If it's a problem more complicated to explain on how to fix it, I'd kindly ask, if you can change my fiddle to a working version (if it's not too much to ask).
I have checked already similar Questions, but there were no efficient answers that helped me to solve my problem.
So, the reason that you are getting this behavior comes down to the fact that you have set your two buttons to each be fixed with the position set to %. This means the position of each is calculated as a percent relative to the 'viewport' (the browser window). If the window is only 500px wide, then your 40% left position button sits at 200px and the 50% left position button sits at 250px, thereby causing them to overlap.
Generally, I would not use fixed positioning here, but it's really not possible to provide a better alternative without seeing more of your code. (Perhaps you'd like to get feedback in general by posting all of your code on CR).
You can solve the problem by wrapping both elements in a div and give that div your fixed position values for the first element and allow the second button to be positioned relative to the first.
Here's an example of that approach and your updated fiddle:
Change your HTML:
<div class="btns">
<a href='index.html' class='button_lay'>NONE</a>
<a href='dft.html' class='button_dft'>NONE2</a>
</div>
Add a rule for the .btns class to your css and remove the fixed positioning from each of the buttons:
.btns {
position: fixed;
top: 80%;
left: 40%;
min-width: 300px;
}
I have a Tumblr account and I'm working on editing the html of it. My question is this: how do I make my side bar be in a certain position but then when I scroll down on the page, it stays where it is relative to my browser? For an example of what I'm talking about, click ask a question and look at "similar questions" then scroll. I would prefer for it to be in CSS. I have already tried everything I can think of.
http://snipt.org/AGff7
That is the code that I'm starting with, plus my custom CSS which is at the end of <style>
I have already tried position:fixed.
I want it to start in the middle of the browser window then when i scroll down, it hits the top of the window and stays fixed relative to the window.
You're definitely going to need to make use of JS for this as CSS won't be able to detect scrolling. Here's a basic example:
<div id="scroller" class="floating"></div>
This is our original element, where it's already partially down the page and floating in the middle. style like
.floating{
margin-top: 50px;
}
We then need to use Javascript in order to measure when the user has scrolled down (I've done this using jQuery)
$(window).scroll(function(){
if($(this).scrollTop() > 50){
$('#scroller').removeClass('floating');
$('#scroller').addClass('fixed');
}else{
$('#scroller').addClass('floating');
$('#scroller').removeClass('fixed');
}
});
where you have an alternative css declaration for fixed like
.fixed{
position: fixed;
}
I have a site, elemovements.com, where, on the home page, you can click to view an archive of the news and a little popout appears. I have taken advantage of jQuery Waypoints so that, when scrolling, the popout will follow you down the page. Unfortunately, the way I have it set up, I have its position styled with CSS which works appropriately under the resolution I am using. Unfortunately, not everyone uses 1600x900. My question is (and I know there is no such thing in CSS): is there any way for an element to have fixed positioning relative to another element? In my code, I created a JavaScript object which handles most of the operations for this archive popout called objArchive, and in it, a function called getRight() which I was attempting to use to remedy this situation whenever a person scrolled or resized under suitable conditions. Alas, I could not get it to work. You can take a look at the site here and a majority of the code for it here. Whoever can help, I will definitely give you some credit in the code comments :)
By the way, to open it, look at the right hand side of the title bar for the "Latest News" box and there will be an "Archive" link. Thanks!
When you make an element fixed it positions it relative to the browser window, and only the browser window. However, since your website is centered, you have the center of the window as a constant and can position it relative to that center line. If you give your .sticky class these rules, you will have the position you're looking for.
.sticky {
position: fixed !important;
right: 50% !important;
margin-right: -592px;
}
These rules positions the .sticky element so it's right edge is at the center line of the browser's width, then moves it 592 pixels to the right (which is half of you're containers width + the width of the element).
I'm designing a website and I have multiple pages that use the same template, some pages are longer than the browser window's height, other's aren't. The ones that are longer get pushed to he left by about 10px, this might no sound like much but it's noticeable when switching pages as everything jumps sideways.
Is there some CSS thing I can do to make the scroll bar on each page appear over the content rather than pushing it, I have a margin in the template so if the browser window is too small it will just cover the margin when the user scrolls to the far right.
The only way to do this is to have the scrollbar always visible.
html { overflow-y: scroll; }
Give overflow value as overlay. This will avoid the recalculation of layout when scrollbar appears
Overflow: overlay worked for me. Would've commented on jintoppy's post but I'm a nooob