I tried looking up an answer to my issue and found this css - margin top causes unwanted body scroll bar but it doesn't seem to fix my issue.
Here is my code to center
if(W > H)
{
scale = (height-45) / H;
}
else if(H > W)
{
scale = (width-5) / W;
}
var left = (width*0.5)-(0.5*W*scale);
var top = ((height+40)*0.5)-(0.5*H*scale);
$("#plan").css({"position":"absolute", "left": left,"top": top});
Basically I am centering my div's center in the center of the screen, and I am having 2 issues.
I have it set so that there is a scale for my div, that is based on the smaller of height or width, and in the example I have a 1285x910 div. My height will be maxed out, but I still get scrollbars. The horizontal is also there.
Using the same example as above there is a horiz scrollbar, that if I scroll over, will bring me over to the left a random amount, for each of my plants it's different. 1 brought it over to make the plan 0,0, the next made it so that it made the plan's center be at 0,0.
When I switched from position"relative" to "absolute" it changed one plan to only scroll a little bit, but it's still there.
So basically (in this example) I am looking to stop the verticle scrollbar for appearing since there is nothing to scroll, and by the scrollbars being there it takes up too much room and it's not full screen anymore.
As well as stop the horizontal scrollbar from appearing when my plan is centered and not big enough to scroll. If my plan is big enough and needs to scroll left or right, that should be allowed and enabled.
The answer in the above link is
"One simple solution, margin:0; and padding:0; on the body.
The reason of this, is to reset all the defauls set on the margins and paddings.
html, body {height:100%; margin:0; padding:0;}
"
Which seems to be what I want to do for at least #1, but if it works for #2, that would be great (i.e., I want my div to be centered but it to be as if nothing was moved so it doesn't throw off the scrollbars, unless it got big enough to do so, or it was big enough to do so based on it's size).
Fiddle: http://jsfiddle.net/Lh3ze3m6/18/
Any comments or questions please let me know,
Thanks all!
To disable both horizontal and vertical scrollbars apply this to your css stylesheet:
body {
overflow: hidden;
}
Related
I'm using Google Charts (the Timeline in particular) and I am facing a weird issue.
When the timeline is placed inside a container that can scroll vertically, the bars' tooltip's vertical position is wrong if the container is scrolled.
Basically, the more you scroll the more the tooltip "drifts down", I've taken some screenshot to illustrate this:
Here is the tooltip when the container is not scrolled, the position is correct:
Now, let's scroll a bit, the tooltip vertical position starts to drift:
...and the more we scroll, the more it drifts:
I've tried reproducing this in JSfiddle but with no success, unfortunately the original code is quite complex and difficult to replicate as a simple example, but any suggestion on how to even approach this is welcome.
Well, while waiting for answers I developed this workaround:
//This instruction selects the internal div that actually shows the scrollbar
//The div is generated automatically by the Google library when you put the Timeline inside
//an element (#maincontainer in our case) that has a fixed height too small to fit the entire timeline
//It unfortuantely has no classes to make a more specific selector
let scrollElem = $(`#maincontainer > div > div:nth-child(1) > div > div`);
//We then monitor mouse movement on the scrollable div
scrollElem.on('mousemove', function( event ) {
//When mouse moves, we determine how much the container is scrolled vertically
let scrollAmnt = scrollElem.scrollTop();
//then we update a CSS style tag that forces the tooltip to a specific position
//Y-axis position = level with mouse pointer (= mouse Y-position relative to scrolling container - scroll amount)
//X-axis position = just to the right of the mouse pointer
$('#tooltip-style').text(`.google-visualization-tooltip{
top: ${event.offsetY - scrollAmnt}px !important;
left: ${event.offsetX + 15}px !important;
}`);
});
maybe not the prettiest of solutions, but works great.
I'll leave the question open for a few days to see if someone has a more "proper" solution.
Is there any way to make an image move up when users scroll the page? I have 2 square images (each 400px in wide and height), both are visible. The left image is fixed by position. The right image is positioned 200px below the left image. I need to make the right image to move up by 200px (get aligned with the left image) when we scroll the page. Then the it stays still on that position.
I found the one on this page is quite the same with what I'm trying to create http://jessandruss.us/#waiting The difference is my images are all visible, while on this page the overflow of the left image is hidden and it gets back to its original position when users scroll up.
Really appreciate any help on this matter. Thank you.
$(document).ready(function(){
var aligned = false; // A flag to tell us when the images are aligned
$(window).scroll(function(){
if($(this).scrollTop() == 192 ) { // when the window scroll to the alignment point...
aligned = true; // the images are aligned
}
if (aligned) { // if they're aligned...
$(".image-2").css("top", 8 + $(this).scrollTop()) // match .image-2's top css property
} // to the window's scrollTop value, +
// 8px for the body's margin.
})
})
Here's a JSFiddle with what I think you want.
There's simply a boolean to tell us when the images are lined up. When they are, image-2's CSS property 'top' is matched to the window's scrollTop value.
The boolean variable is currently hard coded to tell us when the images are lined up (I looked at the window's scrollTop value when they were lined up, 192 in this case). This isn't a great approach since it won't account for changes in the images' positions or sizes, but this should be enough to get to going.
EDIT
https://jsfiddle.net/eLdo0s3w/5/
Here's another method to achieve the same result. As long as having the second image position: fixed is OK, then it should be more efficient, and will hopefully avoid the jumping around that OP says happened with the first method.
It targets image-2's top CSS property and matches it to the window.scrollTop value, until image-2 reaches the necessary point.
Again, this code isn't very reusable, but it should work fine for a one-off situation. If anyone wants improve on it, please do so!
Sounds like you need to use jQuery to link the picture's transform: translateY() property with scrollTop(). It's a little hard to explain in words, but if you provide a jsfiddle I'll show you what I mean.
I have a page where I display a long list of results from a DB query.. and I also show a Google Map to the RIGHT of this long list.
Map is roughly 240px wide and maybe 600px long/height.
This MAP is inside a container DIV (#mapContainer).. that contains the map, and a dropdown box above the map canvas.
Currently, the mapContainer scrolls along with the page itself.. what I would like to do is have it be static/fixed element. So it starts/displays/is placed where I have it currently on the page.... if I scroll the page.. the map should stay fixed.. until the end (bottom) of the results are scrolled to..
(I dont want the mapContainer to scroll and cover the footer element/div)
Following this tutorial:
http://www.webgeekly.com/tutorials/jquery/a-simple-guide-to-making-a-div-static-as-you-scroll-past-it/
It doesnt stay fixed..
//sticky map placement
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
console.log("NOT IE 6");
var top = $('#mapContainer').offset().top;
$(window).scroll(function (event) {
console.log("scrolling.......");
var y = $(this).scrollTop();
if (y >= top) {
$('#mapContainer').addClass('fixed');
console.log("class added");
}else {
$('#mapContainer').removeClass('fixed');
console.log("class removed");
}
});
}
});
The first console.log() outputs fine.. but nothign in the window.scroll() portion fires ever.
Rest of code used:
#mapContainer{
display:table;
width:240px;
float:right;
/* sticky map */
position: absolute;
top: 458px;
left: 50%;
/* width: 100px; */
margin-left: 339px;
}
#<span class="skimlinks-unlinked">mapContainer.fixed</span> {
position: fixed;
}
On the tutorials page itself.. he has a toolbar on the left side..
that stops 'being fixed' when you scroll all the way to the top.. (it will start to move with the rest of the page scroll at a certain point).. and it doesnt go all the way down to cover the footer either.
I'm not clear why the jQuery portion isnt firing.. and I'm not clear what that last style is for? (seems odd looking)
All this absolute, fixed, relative, to parent, to viewport..etc.. is confusing.
Any easy to read/follow/understand tutorials that will get me to where I want to be? Or suggestions on what I am doing wrong with the correct approach?
I looked at your Fiddle and noticed a couple things:
Your "fixed" class was not represented in the CSS. When I looked into the CSS I saw a span element wrapping a ".fixed" reference with a position property set.
You are styling the mapContainer div using the ID. This is a very rigid selector as the order of CSS selectors goes. The hierarchy of CSS selectors is specifid and IDs will override types and classes. See: http://htmlhelp.com/reference/css/structure.html
The when scrolling, I am seeing the console logging in my dev tools. Also, when inspecting the element, I am seeing it add and remove the class name.
Based on my observations, modifying the CSS selector for your container should do the trick. Adding the ID to the class will keep the CSS rule specific enough:
#mapContainer.fixed { position: fixed; }
Refer to this updated Fiddle for an example with these changes in place:
http://jsfiddle.net/pmurst8e/4/
Update: For demonstration purposes of what I was referring to with the resize I modified your example a bit. It isn't the prettiest, but it conveys the point: http://jsfiddle.net/pmurst8e/6/
Update: There are a couple issues with the latest Fiddle (v12):
The sidebar will always go fixed the moment you scroll because "top" is never calculated. It's being set to zero, and the offset calculation is commented out.
Absolute positioning is relative to the closest positioned parent. If no parent is positioned, it's relative to the window. To constrain an absolute positioned element, set the constraining parent to "position:relative;".
Instead of using a percentage and left position rule, consider positioning the sidebar to the right, relative to the "contentContainer", by a set number of pixels.
When the fixed position takes effect, we also need to set the sidebar fixed left position. Otherwise, it will use the positioning in the CSS. In contrast to absolute positioning, Fixed positioning is relative to the window, meaning an absolute element "right: 10px" will be 10px from the right of the positioned parent, but will appear 10px from the right of the window when fixed.
You don't need a float when you have absolute positioning. Absolute position removes an element from the normal flow of the document, and because of this float does not apply.
I updated the Fiddle to show how to make these adjustments. I cleaned out the float and margin from the mapContainer and left the absolute positioning. With that I set the contentContainer to relative to constrain mapContainer to it. You will also see, on the script side, I added a line to set the offset of mapContainer. Without this, when it becomes fixed it will be 10px off the right border of the window.
Updated Fiddle: http://jsfiddle.net/pmurst8e/14/
Also, you want to leave your top offset line in tact. Without that, it goes fixed the moment the scroll moves and never goes back. When that becomes the case, you're better off just setting fixed permanently.
var top = $('#mapContainer').offset().top; // you want this
Regarding the bottom boundary, you can do a couple things:
Resize the sidebar so that it shrinks to the window size. This is demoed in my example from my first post in this and the downside is it forces the sidebar to become a scrollable div so the child content is all visible.
Use a check for the bottom so that when you hit the limit, the container goes back to an absolute position, but one set at the bottom: 0 of the parent.
Something like:
var limit = $('footer').offset().top;
var $mc = $('#mapContainer');
var pos = $mc.offset().top + $mc.outerHeight();
if (pos >= limit) {
$mc.removeClass('fixed')
.addClass('bottom-set').css('left',''); // define this in CSS for bottom absoluteness
}
#mapContainer.bottomFixed {
bottom: 0;
top: auto;
}
And to be fully honest, you might save yourself some time working this all out if you take a look at the ScrollToFixed plug-in (https://github.com/bigspotteddog/ScrollToFixed). I seem to be mentioning it quite a bit lately, but this issue seems to be a popular one right now.
Incidentally, go to your OP and click the Edit button. Shrink the height of your browser and scroll down. You should see SO has a fixed sidebar that passed the footer. ;)
So I am redesigning my website: http://staging.slackrmedia.com/keenanpayne/, but I am coming across a small issue. I want each "pane" of the website to be the exact height of the window, no matter what the size. I also want the content therein to be exactly positioned in the center.
I am trying to accomplish this with jQuery at the moment:
function setSectionHeight() {
// Set section heights
windowHeightPadding = $(window).height() / 2;
firstSectionPadding = ($(window).height() - $('header').height()) / 2;
// Apply proper styling
$('section').css({"padding-top":windowHeightPadding,"padding-bottom":windowHeightPadding});
$('section.home').css({"padding-top": firstSectionPadding,"padding-bottom":windowHeightPadding});
}
setSectionHeight();
// Adjust section heights on window resize
$(window).on('resize', function(){
setSectionHeight();
});
So what this is doing is calculating the window height and dividing it by 2, so I can set the top and bottom padding on each section.
However, for the first section, to get the proper top and bottom padding, I need to subtract the height of the header, which is why I have a firstSectionPadding variable.
Then I just add the CSS to each section tag on my website, with separate styling for the home section tag.
This works pretty well, but as you can see when you visit my site, for some reason the heights are not correct.
Right now it looks like:
And it should look like:
I have absolutely no idea where this extra padding or space is coming from on the top. I think my equations are right, but perhaps there isn't something I'm taking into consideration?
This could be done with CSS. One div set to 100% height and width, with text-align:center; A second div within set to display:table and 100% height and width. Finally, a third div set to display:table-cell and vertical-align:center;
Please see the jsFiddle http://jsfiddle.net/Lijo/ryDnn/1/ . I have two columns layout. It is % based layout – but there is minimum width defined. When I make the zoom (of browser IE8) as 75 % or below, it works well. When I make the zoom as 85%, the orange box goes down. How can we overcome this misalignment? The Orange Box should remain in the correct postion (as shown in the image) irrepective of the zoom/browser minimize/desktop resolution. It should not go down.
Result window in jsFiddle: http://jsfiddle.net/Lijo/ryDnn/1/embedded/result/
Also, it would be great if you can explain the CSS theory behind it.
Note: Such misalignment is observed even when the browser is minimized.
Note: My desktop was configured in 1024 by 768 when this is tested.
Even after removing the margins from leftNavContainer and main container, the issue is there. Please see http://jsfiddle.net/Lijo/ryDnn/10/
To allow for rounding errors, take of a percent. 15% for left and 84% should work.
However, the problem is that you are adding in margins too, that obviously won't work well.
Consider to first get two divs to use 15% and 84% (or 85% if it works), and then use those two divs as wrappers in which you put a div which you give the right margins. That way, your margins aren't interfering with the width calculations.
In other words, margins aren't part of the div's width.
When in doubt, use a Page/Web Inspector extensively to get an idea of the boxing models...
your total width is 100% leftNavContainer taken width is 25% because margin-left-10px and width-15% ,mainContainer is also same
if you are giving margin means reduce your width related to margin size
mainContainer css
#mainContainer {
width:75%; //(or) reduce your margin
}
or
#leftNavContainer {
width:15%; //(or) reduce your margin
margin:5px;
}