Site Loads to the Right, until finished, then centers - javascript

There were 2 other threads on Stackoverflow of people having this issue. Neither applied to me. One was something about javascript. I disabled javascript on my browser, still did this.
The other was adsense banners, and I don't have any on this page.
Can someone give me an idea why this is loading to the right, and then centering when the page is fully loaded?
Thanks!
http://www.halotracker.com/Reach/TrueSkillLB.aspx?GameType=Competitive&Playlist=13

It's because your width on the tables is set to 100% with two of the columns with the * to determine the padding. the * character tells the table to determine the width remaining and fill it with the table. So what happens is the browser renders the first * less the fixed width of the center column. It doesn't even render the third column until after the centering occurs. You can see this with firebug and stop the load when it is still aligned to the right.
<div class="SiteBody">
<table width="100%">
<tbody>
<tr>
<td width="*"></td>
<td width="1062"></td>
<td width="*"></td>
</tr>
</tbody>
</table>
</div>
I will say this once because so many will probably jump on this. You shouldn't use Tables to setup layout it's bad practice and it can give you problems like what you are seeing. That said, my conscience is clear.
You could remove the the first and third TD's, remove the Width 100% and set the background in the parent container. In my opinion this would be the best way to handle it. Set the margin to 0, auto and that should give you everything you are wanting.
<div class="SiteBody">
<div class="SiteMiddle">//site content</div>
</div>
<style>
.SiteBody { background: transparent url(image of background) }
.SiteMiddle { width:1062px; margin: 0, auto; }
</style>
OR This is probably the best way as it layers the divs and allows you to set the backgrounds for left and right and still set a centered content with the correct width
<div class="SiteBody">
<div class="SiteLeft">
<div class="SiteRight">
<div class="SiteMiddle">//site content</div>
</div>
</div>
</div>
<style>
.SiteBody { }
.SiteLeft { background: transparent url(image of left background) no-repeat left top; }
.SiteRight { background: transparent url(image of left background) no-repeat right top; }
.SiteMiddle { margin: 0, auto; width: 1062px; }
</style>

Don't use tables for layout.
They cause the page to be rendered more slowly, and may cause very late adjustments. I'm sure you've noticed this ;)
The site design doesn't look very complex. I would advise you to remake it without the use of tables as layout (the tables for the playlists are fine of course).

Hm, it's difficult to say, but this may be because of the right box with "position:absolute"
Maybe you should get rid of the table centering your main content, so as not to confuse your browser about the positon of every element on the page.
Try this one for HTML:
<div class="SiteBody">
<!-- remove table stuff here -->
<div class="container">
<!-- Your content -->
</div>
<!-- remove table stuff here -->
</div>
with this CSS:
.SiteBody {text-align:center;}
.container {width:1062px;margin:0 auto;text-align:left;position:relative;}

I'm guessing it's Cufon - which replaces your fonts after the dom is loaded. Can you replace Cufon and see if you still have this issue?
If that doesn't can you put up a test version of your page with all the script tags removed?

Don't use TABLES for layouts. If you use TABLES, use fixed width cells.
Move JS script tag to the end of HTML code.
Try to disable one by one the JS scripts and see what's happening.
Monitor your HTML rendering in real-time with Firebug.

After analysis of your site, below are my comments:-
Page total weight is of 2736.6 Kbytes (Which is high)
CSSImages weight is 986 Kbytes
JS files weight is 623.2 Kbytes
If you can use caching on server for CSS & JS files then page load will reduce
As CBRRacer mentioned, you should handle that too

I stripped all the javascript, cufon, absolute divs, etc from the site here
http://www.halotracker.com/Test/Halo%20%20Reach%20Challenges.htm
The only thing left is the tables. And I've seen the tables work before. I've always used tables and this problem randomly started. Anyway, cant figure it out, none of the answers given to me were complete.
Enjoy my reputation points CBRacer.

Related

Is it possible to put a footer at the bottom of the last page using Chrome print?

I know this has been asked multiple times before but none of those solutions have worked and hopefully since then someone has figured it out.
I have created a HTML page that i will be printing using Chromes browser print utility, i need to add an image at the bottom of the last page, the problem is that the content within the page is dynamic, so most methods i have looked at just place the image where the content ends, and not at the bottom of the last page.
<head>
<title></title>
<style>
#footer:before {
display: block;
content: "";
margin-top: 100%;
}
</style>
</head>
<body>
<div id="content">
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
</div>
<div id="footer">
<img src="https://get.clt.re/wp-content/uploads/2014/12/footer-background-01.jpg" style="">
</div>
</body>
This is a very simplified example, the content will be dynamic so there could be multiple pages, and the image in the footer will be large,
essentially i need the footer to look like this:
https://i.stack.imgur.com/Wh9s0.png
but only on the last printed page
any javascript or jquery solution is welcome
You could essentialy generate two footers, one for your page content and one for printing. Use CSS then for displaying:
#media print {
.content-footer {
display: none;
}
.print-footer {
display: block;
//Always at the bottom
position: absolute;
bottom: 0;
}
}
I don't think there is an answer here. If you want to place that image on each page then Idan Cohen has a good solution here: https://medium.com/#Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a
As to just the last page ... not even the CSS 2 Spec. for Paged Media supports a :last page selector (but does for :first). But even #page is unreliable as most browsers have scaled down support for things like page counters etc. (See #Page Browser Compatibility)
Your best bet is to explore either a compromise (either the image on each page, or the image at the end of the content - but not necessarily at the bottom of the page) or explore the possibility of getting the job done via a JavaScript library that generates PDF on the fly.

CSS Relative background not expanding on insertion of html code

Thanks for any help you can offer me/point me in the write direction.
I am not sure how to explain what is happening.
I current have a page with an image background (the image is 4044,2160 so it is larger than you would view on a single screen (normally)).
Currently when the page loads, the image is top-centered and is not on repeat and thus fills the background completely.
However when inserting html code (CRUD) via javascript, etc. with the resulting page becoming larger than the original in the y direction, the background stops and does not fill the space below.
http://postimg.org/image/jqzx0vuzr/
I am not sure what to do to fix it and most likely think it is a css problem.
Below is code:
HTML
<section id="index" class="index clinic">
<div id="x_container">
Javascript insertion of code
</div>
</section>
CSS
.clinic{
width:100%;
position:relative;
background: url(../img/clinic.jpg) no-repeat top center;
}
.index{
height: 100%;
padding: 0;
}
#index.index {
padding:15% 0 0 0;
}
#xcrud_container{
width: 90%;
margin: 0 auto;
}
It seems that the javascript does not matter as to what is inserted, (have tried lorem ipsum, etc.)
But just to expand on what is inserted, the size of the x_container changes based on a state and this is altered by javascript. (Thus page is not reloaded and background size recalculated)
I have currently tried a clearfix solution (but to no avail) as well as attempting repeat-y on the background image.
Lastly I have attempted to manually create the page through directly saving the html code (i.e. it is not inserted by anything and is apart of the html code of the page) to the page and attempting to see if the background expands. It does not. The background fills the initial view area, however as soon as you scroll down the page, the white area reappears.
Just to make sure this is known the background image is larger than area viewed, thus the white area should not be present.
Any help would be greatly appreciated, as I have been at this for a few days...
Thanks
Change % to Pixels as for example.
.index{
height:1000px;
padding: 0;
}
Thanks for you help guys,
Through the comments and answer I have been able to figure out my own stupidity in trying to force a tag to define the background of the page rather than using body. i.e. .
The reason for my defining it as a section tag is due to its use on previous pages where the was followed by another section and thus the white space area would not be a problem. (Also is the reasoning for the height:100%;, as I had to define the height of the section as being 100% in order to fully create the image within the section.
Thanks again.

Why does my element move around when the page loads and when javascript executes?

Consider this page: http://www.collegeanswerz.com/adelphi-university/academics/professors/do-professors-explain-things-clearly-are-professors-interesting.
The element in question is "Do they make things easy to understand? Are they interesting?" in the light gray box on the top right. When the page loads, it starts off high up, and then it moves 30px down. The same thing happens when you click "Information" in the navbar.
This is the element: <div id="question_sub" class="well"></div>.
Why does this happen, and how can I fix it?
Answer to Why does it Happen
If you try loading your page without javascript the page looks like
Problem
Your page is very heavily dependent on js for dom elements modification and for styling also.
Solution To avoid this style your page in css as maximum as possible, JS should be used for interaction or making web page attractive.
Probable Problem
If you are loading lots of external script which are not related to page content like discus inside head element
Solution
Move all the external js from head to end of body if you are not doing it, or you can load them asynchronously. Refer Mozilla Synch and Async
Another Way
If you want content to be loaded from server only when some portion of it has changed then use application cache technique with this the pages will be loaded from client machine so only initial page load will take time for the first load and then it will be quite fast
Check Using Application Cache
Other Ways
Compress Javascript and CSS
Use gzip compression
there are lot of more stuff, search it you will find ocean of knowledge, reference
If you want to keep the 50px margin between the elements then change the navbar class to also be 50px
.navbar {
margin-bottom: 50px;
}
Currently it is set at 20px;
Remove this code :-
comments powered by <span class="logo-disqus">Disqus</span>
This is a problem about fusion-margin
Remove this:
#college_pages_css .questions {
margin-top: 30px;
And try this, it will work fine:
#college_pages_css .questions {
margin-top: 0;
If you want a margin, put the margin on div#normal ;)
It looks like you're having a CSS issue due to the floating elements.
try floating the nav on the left:
#normal > nav {
float: left;
}
.disqus { float: right }
and wrap the following elements in a div that is floated to the right, for exemple:
<div class="disqus">
<div id="question_sub" class="well">Do they make things easy to understand? Are they interesting?</div>
<p class="stratify" style="display: block;">tip: talk about the best/worst/average cases</p>
<div id="disqus_thread">
</div>

Scrollbars on overflow div do not appear when content is added to div using Javascript

I have an HTML Document that looks a bit like this, only is far more complex and harder to control:
<body>
<div id="title">This div does not do anything, just stays at the top.</div>
<div id="container">
<div id="navigation">Some navigation</div>
<div id="content">Most of the content</div>
</div>
</body>
Then I have a stylesheet that includes the following:
#container
{
height: auto !important;
overflow: visible !important;
overflow-x: auto;
overflow-y: scroll;
position: relative;
width: auto !important;
}
This all works absolutely perfectly. The title section stays at the top of the page, the container div becomes scrollable if the content is long enough to need to scroll, otherwise it doesn't.
The problem is, that I am then using Javascript to add a whole lot more stuff to the content div. This means that the content div is getting longer than the page after it has loaded and this seems to mean, in IE8 at least, that the scrollbars on the container never get activated, so once the Javascript added content falls off the bottom of the page it becomes inaccessible.
It doesn't help that the minute I start tinkering with the IE developer tools, the scrollbars vanish altogether and I can't make them reappear, so it becomes somewhat hard to test.
I know IE8 has some issues with overflow-y.
You should try with this maybe.
-ms-overflow-y: scroll;
Hope that helps.
Hard to say if this will work without seeing more code, but why not remove the styles from your css and add them with javascript, once the content has loaded.
The solution that has worked was a simple hackaround of resizing the element with JavaScript to match the size it actually is once I have added the extra data to it, like this:
document.all['container'].style.height = document.documentElement.clientHeight+"px";
Of course, this doesn't entirely circumvent the problem- for that we need a new function:
function resizeResults()
{
var resultPanel=document.all["container"];
var topPanel=document.all["title"];
var newHeight= document.documentElement.clientHeight;
newHeight -= topPanel.clientHeight;
resultPanel.style.height=newHeight;
}
Then we can use window.attachEvent("onresize", resizeResults); to ensure that we don't lose the scrollbar or have it otherwise messed around when the user changes the window size.
Just remove the styles you have given for the element to make it scroll before loading ajax content to it.After loading ajax content then add those attributes again.

How to set up the browser scrollbar to scroll part of a page?

I've seen this done in a few sites, an example is artofadambetts.com. The scroll bar on the page scrolls only an element of the page, not the entire page. I looked at the source and havent't been able to figure it out yet. How is this done?
That's pretty nifty. He uses "position:fixed" on most of the divs, and the one that scrolls is the one that doesn't have it.
In fact it is not the scrolling part that is "doing the job", it is the fixed part of the page.
In order to do this, you should use CSS and add position: fixed; property (use it with top, bottom, left and/or right properties) to the elements that you wish not to scroll.
And you should not forget to give them a greater z-index, if you don't there might be some of the scrolling element that can go over your fixed element as you scroll (and you certainly don't want that).
To find out how people do these kinds of things in CSS and/or Javascript the tool Firebug is just outstanding:
Firebug addon for Firefox
It should be noted that without further hacks position fixed does not work for IE6, which is still managing to hold on to 15-30% of the market, depending on your site.
You can use fixed positioning or absolute positioning to tie various elements to fixed positions on the page. Alternatively you can specify a fixed size element (such as a DIV) and use overflow: scroll to force the scrollbars on that.
As already mentioned, getting everything to work in Internet Explorer AND Firefox/Opera/Safari requires judicious use of hacks.
This can be done in CSS using the "position:absolute;" clause
Here is an example template:
http://www.demusdesign.com/bipolar/index.html
From http://www.demusdesign.com/
The browser is scrolling the page, its just that part of it is fixed in position.
This is done by using the "position: fixed" CSS property on the part that you wish not to scroll.
They've set the side and top elements to have fixed positions via CSS (see line 94 of their style.css file). This holds them in the viewport while the rest scrolls.
Try this for scrolling a particular part of web page......
<html>
<head>
<title>Separately Scrolled Area Demo</title>
</head>
<body>
<div style="width: 100px; border-style: solid">
<div style="overflow: auto; width: 100px; height: 100px">
sumit..................
amit...................
mrinal.................
nitesh................
maneesh................
raghav...................
hitesh...................
deshpande................
sidarth....................
mayank.....................
santanu....................
sahil......................
malhan.....................
rajib.....................
</div>
</div>
</body>
</html>
For a div, you can add in the cSS
overflow: auto
For example,
<div style="overflow:auto; height: 500px">Some really long text</div>
Edit: After looking at the site you posted, you probably don't want this. What he does in his website is make the layout as fixed (position: fixed) and assigns it a higher z-index than the text, which is lower z-index.
For example:
<div class="highz"> //Put random stuff here. it'll be fixed </div>
<div class="lowz"> Put stuff here you want to scroll and position it.&lt/div>
with css file
div.highz {position: fixed; z-index: 2;}
div.lowz {position: fixed; z-index: 1;}
To put scroll bars on an element such as a div:
<div style="overflow-x: auto; overflow-y: auto;>the content</div>
If you only want a horizontal or vertical scroll bar, only use whichever of overflow-x and overflow-y you need.

Categories