EDIT: I was an idiot. I simply had an image that was vertically long, so it "moved", because the scroll bars showed up. I know... :O
I'm having a lot of trouble figuring out why an image is moving the entire body, and it is a huge issue. You can check it out here: http://needstackhelp.tumblr.com/
So basically, if you click the "hide post" on the top right, it contracts the div, thus hiding the image. You will also notice whenever you click hide post, then show, it moves the entire body left and right slightly. Why so?
If I remove the image that reads "This is an image", however, the body stays in one place!
How can I fix this issue? I plan to always have an image inside the div, so it's a pretty important issue to me.
Also, for those who are going to diagnose the source, I'm sorry, I never thought anyone else would ever need to see the code, and I've just been a very lazy designer. Just use Chrome/Firefox's inspect element for the most part.
The only change I'm seeing is simply caused by the browser hidiing / showing its vertical scrollbar, thereby altering the body width slightly and causing the centered content to readjust.
Your image is taller than your window browser, so, your browser have to construct a vertical scrollbar. This is why, your body width is affected.
Related
I'm facing a huge problem. I have a modal that renders a list of texts. The div where the text is shown has a scrollbar, but when I change the text the scrollbar remains at the same spot. If I scroll to the middle and change the text it will appear from the middle and not from the top as it should.
I've tried this code: window.scrollTo(0,0) but it resets the main page scroll not the modal one.
Could anyone help me?
I'm not sure I'm understanding your question. It is more helpful if you post the bit of code that's giving you trouble so we can clearly see what's going wrong. That said, window.scrollTo(0,0) will scroll the whole page. If you want to scroll to the top of an element like that, call .scrollTop from the element you wish to scroll. I think you are looking for something like this:
$("#myScrollDiv").scrollTop(0);
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.
I'm helping out a friend with an issue with their blog, and can't for the life of me figure out the error.
http://theglamshack.blogspot.com/
Somewhere within the code, between the body it is managing to place 50000 or so pixels. I can't manage to locate WHERE it is coming from, aside from the fact that body min-height is 100% (which I cant find anywhere in the code at all.. ) I can't find any error.
If I could get some help tha'td be great!
Under #sidebar-wrapper-left, the div that has classes "widget-content list-label-widget-content" is the one causing the issue.
Every for every list item contained in the unordered list is adding a few hundred pixels to the height. All of them added up is how you get a height of 50K.
The strange part is, the left-sidebar isn't really visible. If you don't need the left sidebar you could just set #sidebar-wrapper-left to display:none to see how it looks until you figure out how to remove it from the layout altogether.
Update:
It's easy to diagnose this using Chrome. Right click on the blank section below the body and hit 'Inspect Element' then mouseover the HTML elements in the code and their width/height values will popup.
Keep moving down the list until you find the lowest element that has a width > 50K and that shows you the section causing the problem (ie the one I outlined above).
Check the DIV sidebar-wrapper-left and the other divs/content inside CSS inside it. Use FireBug a debugging tool to find out more info on what's wrong.
You have "Label Widget" that is causing that problem. Remove it from your layout and you should be fine.
I'm having a little trouble getting my head around a Javascript animated scroll issue.
I'm using the SuperScrollorama Jquery plugin which is built on-top of the Greensock JS tweening library.
The fundamental effect I'm after is to "pin" a section down, then use vertical scrolling to expand some content, then "unpin" the section once the content is fully expanded, so the user can scroll on - i.e. http://blueribbondesign.com.au/example/
But when I try to apply this same effect to multiple sections one after the other, everything gets all broken: the "unpinned" content below the pinned element is pushed off screen and it seems to miscalculate the height of the element when it performs the animation in reverse (i.e. scrolling back up the page). - i.e. http://blueribbondesign.com.au/example2/
I've been endlessly fiddling with the "position:fixed" and "pin-spacer" div, and tried attaching the Superscrollorama plugin to various containing elements, but still cannot work out how to get it to work.
Any help from the brilliant crowd-sourced minds of the web would be much appreciated,
Cheers,
TN.
I've been working with this issue myself. What happens is there's a blank div spacer put above the section being pinned with a height that you've defined in the pin() function. Secondly, the pinned element gets a position:fixed assigned to it. Both of these things allow the scroll bar to continue down the page while the element stays affixed. In turn, whatever you had below that section gets bumped down because of that spacer div's height.
If your pinned element is centered horizontally, first give it a left:50%, margin-left:-{width/2}px to fix it from pushing to the left edge.
Next, you'll have to detect the pin/unpin events (which are offered by the plugin as parameters additional to "anim"), and change the section underneath to also toggle a fixed/relative position. When you change that underlying section to be at a fixed position, be sure to set its "top" property to whatever the pinned element's height is. Once the pinned element becomes unpinned, change it back to relative positioning. Does that make any sense?
It seems that different techniques will call for different fixes, but those things are what I'd pay attention to... fixed positioning, and then using the pin/unpin events for adjustment.
Basically what I have is a page with a background image and when I have content which is quite long and overflows. I want the text to be inside that image and it appears to fade out when scrolling at the end of the image and the top of the image. I do not want internal scrollbars. The background image itself is fixed and centered and I want the text to always remain inside there.
Is this possible? if this is not clear then I will try and explain myself further.
I have looked at options in Jquery and CSS fading but cannot find exactly what i want.
Any help is appreciated!
Thanks
H
I would suggest you plant an image overlay (white to transparent) at the top and bottom of the div, but that might not work because of your background...could we perhaps see the background you are using?
The two images Nexxeus says should be placed in a fixed position at the top and bottom of the browser. You shouldn't touch what the overflow does, since it will be hidden below the two images.