Is there Anything Close to a Position: Relative-Fixed? - javascript

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).

Related

How to align clickable regions with canvas when repositioning it in the viewport?

I don't even know if I'm asking the question correctly. I have to host a third party game without using an iframe, but I have a hard requirement to include a banner for the hosting entity. That takes up 60 pixels at the top of the viewport that the code (which I do not have access to) was counting on using. That banner at the top causes the content to extend below the bottom of the viewport into overflow territory. So I add styling to the canvas element to compensate for the lost space at the top:
max-height:calc(100vh - 60px);
But that screws up the vertical centering, so I also need:
position:absolute;
top:60px;
There. Now all looks great. Until you need to point your mouse at something and you find that the only way you can click is to point it ~60px below the visible click target.
So my question is: How can I "trick" the code that I can't see into thinking that the viewport is 60px shorter (vertically) than it is in reality, so that the click regions line up with their visible counterparts?

CSS elements seem to overlay when zooming in

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;
}

Correct CSS / JS parameters to fill div

I have a slideshow that I would like to fill a div completely.
Right now, if someone visits my site from a narrow browser viewport, the slideshow will only fill the width but not the entire height, therefore leaving space at the bottom of the div.
I would like the slideshow to proportionally scale to fit and cover the entire div, even if cropping from the sides is necessary. Does this make sense what I am asking?
Here's the example:
If you visit it right now from a wide or full screen browser window, the images probably fill the entire div. But if you narrow your window and refresh, you will see the bg color at the bottom of the div. Example:
http://mudchallenger.com/a-responsivef.html
How can I get this slideshow to fill the div?
Thank you!!
You can probably change your position:absolute for slideshow class
.slideshow {
position: absolute;
}
You're looking for a way to make your background image fit the back of the page. What Ed is looking for is the CSS/JS that you currently have, so we can better tell you what you should do differently.
This article gives great examples of different ways of achieving what you're asking for:
Perfect Full Page Backgrounds
And if you're interested in another way, here's a JS library that does it as well.
Backstretch
Without seeing your code, that's as good an answer as can be given.

How to position DIVs relatively to the browser window?

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

Website looks zoomed on load

I am building a website for my tennis club: http://users.aber.ac.uk/dwd/aut/
Can anyone tell me why it looks zoomed in and push to the right? Click view source to see the HTML/CSS/Javascript as its quite a lot to post in the comment thread.
If you zoom out once that's what the site SHOULD look like.
Any ideas guys?
Dan
You've set the content to have an above average width and absolutely positioned it some distance from the left of the page.
It looks lopsided because it's not properly centre-aligned (if you use the Ctrl+- shortcut it becomes more obvious)
If you remove position: absolute; from #wrapper it displays correctly centred for me (in Chrome)
Remove the font-size from the body CSS, and then remove position: absolute and left: 12em from your #wrapper div.
Others have pointed out why this is happening. Here's some more points, though:
to truly centre a container, use a value of auto on the margin X/Y axes. You are doing this currently, but it's being undermined by the fact that you have also specified absolute positioning, so remove the latter
incidentally, your current attempt to centre may work on your screen, but on a different resolution it will not, since you're essentially just bumping the page to the right by an arbitrary number of pixels
whilst a target resolution is something every site designer has to decide for him/herself, the standard is to make the page work in 1024 * 768. Your page container is currently 1024 pixels in width along, with a further 32px padding added either side. Either reduce your width or take advantage of the CSS property box-sizing, which means any specified padding eats into your element's width, rather than adding to it

Categories