I have a problem with adding dynamic content to a webpage.
The javascript loads some html and swap the divholder's innerhtml. Basically is a
$("#mydiv").load("some.html");
My problem is that when you get a huge page, it created a huge scrollbar, then, after swaping the html for a smaller html, the scrollbars aren't being resized.
eg: http://jode.com.br/joe/scrollbarerror.png
Using firebug, you can see that the highlighted content is the window but the scrollheight is just a lot bigger than the contents of it
It is happening on firefox and ie, but not in chrome. Using chrome, hte scrollbars are updated to only scroll content
any help?
My solution right now is create a div that holds all the content. The div's scrollbar is being updated to the right size when the content changes.
THen I used the method:
html, body {
height: 100%;
}
#MainContentHolder {
height: 100%;
}
with this, the maincontentholder got the right scrollbars and is being updated correctly.
many thanks who tried to help!
Jonathan
I guess the bug is because of your height:100% on the body tag.
Why do you need it ? You shouldn't do that :) Try removing it and tell us if the bug's still here.
Related
I have been searching about this problem from last week...all I could found is this " overflow-x :hidden "
Here is my site : seriesratings.com
when I open it in my iphone, it shows me horizontal scrollbar.
I tried this already:
html,body{overflow-x:hidden;overflow-y:scroll}
someone has told me this "You have inline styles all over your html that will not be properly fixed by using css"
I can not change style now because site is fully developed.
does someone has any other way, like hide horizontal scrollbar with jquery or JS or any other code.
At the sg-site-header-1 I found a H1 with an A tag in it, this thing causes the horizontal scroll-bar, why should you make a color #blank? This is not working, then make is display: invisible or something like that. Hopefully this will work for you!
#dutchsociety Thanks A Lot, you saved me, If you have time can you tell me how did you find out the solution to the problem, so I can do it by myself..
I opened my element inspector in Google Chrome and deleting sections of the website. So on that moment I deleted the header and saw that there was the long sized H1.
I am using the Skrollr lbrary to add some parallax to my website, and having an issue when more content is added, the effect does not work.
It might be better to show you the issue.
Working correctly
Not working when I add more content down the page
My code:
One main issue is the moon.
<img class="moon" src="images/moon.svg"
data-50="top: 460px;"
data-200="top: -120px;">
This might help someone else.
I found the library calculates the height of the viewport and adds this to the height of the body.
I just used this to remove it and all is working again:
html, body {
height: auto !important;
}
In my App, I am creating the dynamic pages, in which I given the css property to page container as overflow-y:auto. all works fine,
the problem is whenever the page loads, the page height exceeds and the height of the contaienr, the scroll works, but the scroll bar placed in the end of page. so i am seeing the end of the content of the container instead of the top.
is there any way to sort this issue without using script? if so any one suggest me the correct way please?
or do I need to add any special css property in the container?
any one advice me the correct approach please?
Update
This is happening only with Chrome browser. ie and firefox behaves correctly.
try below combination
overflow-y:auto
position:relative
by adjusting position to relative your scroll bar will remains at what you want.
hope it will help for you the same way i am doing this thing its works for me
I'm implementing a Wordpress theme where content slides into the page vertically. To do this, I need to measure the size of the div containing the content without visibly rendering it first. I'm attempting to do all of this without Ajax.
Here's what I've discovered so far:
I can easily load the document, read the size, then hide the div with javascript. Unfortunately there's a very obvious (and unacceptable) flicker because javascript doesn't hide the div fast enough. There's also the issue that if images are placed into the content, I have to wait until they're rendered to get the true size... no bueno.
The other option is to hide the content with the CSS, but if the user doesn't have javascript enabled, they'll just be staring at a blank page.
Which brings me to where I am currently.
I have a piece of javascript that runs immediately after the stylesheet is declared that changes the location of the stylesheet link element and then re-renders the page with a javascript specific stylesheet. This solves the problem of having to hide the content before reading the size.
This was accomplished by positioning the div containing the content absolutely and off the page 9999pixels.
#content {
position: absolute;
left: -9999px;
}
At this point, I use jquery to retrieve the height of the content with the following code:
$('#content').height();
The problem is, the number that's coming back is the incorrect size and is much smaller than the actual content. When I change the css to:
#content {
position: absolute;
left: 0px;
}
It renders correctly. What gives?? Is there a bug I don't know about? This happens in both Chrome and Firefox.
You can view it for yourself here http://thethechad.com/wordpress
-- UPDATE --------------------------------------------------------------------------
I figured out my problem. The div I was using had no specified width. When I moved it outside the flow of the document, it expanded to fill that gap, shifting the content and reducing the height of the element. I went back into my CSS and hardcoded the width and everything is working fine. I feel really dumb. I'm sure we all have those moments. Thanks so much for the help guys!
I'm a bit confused by your long explanation, but here's how I measure things without anyone seeing them.
I assign the div a class name I call "measure". Measure has predefined CSS:
.measure {
position: absolute; // doesn't affect layout
visibility: hidden; // not visible, but normal size
left: -1000px; // won't affect scrollbars
top: -1000px; // won't affect scrollbars
}
You are then free to get the divs height. Note: it's width may not be the same as it would be in the layout of the page because divs go full width when position: static.
If you want to make sure that the object is never seen, then you can give it an initial class of "measure" in it's original definition and then remove the class later when you want to use the object in the layout of the page.
I'm not sure what is causing your problem, but you might be able to use something like this:
http://jsfiddle.net/Paulpro/9YBDB/
<div id="thediv">This is the div</div>
<script type="text/javascript">
var $thediv = $('#thediv');
var height = $thediv.height();
$thediv.hide();
$thediv.html('Div\'s height is: '+height);
$thediv.show();
</script>
Were you execute a script to hide the div immediately after the div is rendered, rather than in a script later in your code or on DOMReady etc, so that the flicker doesn't get a chance to occur. However if the user's computer is slow or they are using an older browser the flicker might still appear, I'm not sure. It all depends on if the browsers HTML parser and Javascript engine is fast enough to finish executing $thediv.hide(); before the div is rendered, which I think almost all browsers will be, because rendering is a relatively slow process.
whenever the page's height is larger than the web browser window a scrollbar will appear to the right so you can scroll down/up in your page.
could scrollbar be displayed with javascript/jquery all the time even if there is no need for it? (has to do with a layout issue i've got)
You can do that even without javascript, it is a CSS property:
overflow: scroll
But this will also always show a scrollbar at the bottom. Afaik you cannot avoid this.
It might be that this confuses the user somehow as normally he is not used to the fact that a scrollbar is shown even if he cannot scroll.
Before you use this solution, you should try to fix your layout issue.
If you give the appropriate container element the style `overflow: scroll' then it'll have scrollbars. You can do that with jQuery if you like:
$('#containerId').css({overflow: 'scroll'});
Or of course you can do it in a CSS file, or even right on the element itself. You'll have to figure out which element to do that to; post some code if you need advice.
Don't need javascript. Just add the css
body{
overflow: scroll;
}