There is a link at the bottom. Pretty much what happens, is when the page gets opened, it loads entirely on the right side of the screen. Then when it finishes loading every single element, it moves to the center which is it's actual position.
I believe the problem is caused by javascript, since the site works perfectly fine without it. It doesn't seem to matter what javascript is included, if I leave just 1 of them, the whole thing comes back.
Could really use the help. Also the site right now is about 500 pages big, so I'm really hoping for a solution which can fix this with just a few steps.
Thanks.
Here is the link to the page so you can get css/code: http://bit.ly/3EyoWu
Its definitely javascript. I think the banners on your site are loaded at the very end, which leaves the browser making incorrect guesses about the dimensions of the content until the page is loaded.
Try enclosing your javascript code inside fixed width (and height) divs or tables. You can easily determine the width (and height) required by javascript generated code by inspecting your page after its loaded. If its the banners, they are almost always predefined size.
Edit 1 ----
I got it. The specified cell widths for your table are narrower, the browser therefore is unable to calculate the page layout until the page is rendered completely. A column with width 110px has a banner having width = 120px.
Edit 2 ----
Try specifying widths for all-but-one column. That is, if you have three columns in the suspect table, specify the width for two, and let the browser decide the width for the third. Furthermore, the banners seem to occupy a width of 125px instead of 120px, probably because of unnecessary white space around them. I suggest that you revise the column widths appropriately (and parent table's width if necessary).
This might almost qualify as a 'flash of unstyled content' (FOUC) except that the browser doesn't first render a page in an unstyled format.
Instead, you see styled content before the Javascript is able to add the finishing touches.
You might get some further hints by searching for 'flash of unstyled content'.
Related
We used to have a silverlight page that used canvas to scale the page, this resulted in a page that would always be the size of the window it was on, making the whole page smaller if the window was smaller (it does preserve aspect ratio), as if the page was a single png but it isn't, it has dynamic elements. Also when one tries to zoom in or out, it does nothing, it just makes a scroll appear to the right and bottom without affecting the page.
We are migrating the page to HTML 5 with CSS, and we haven't been able to replicate this behavior. It is a page that has 10 small tables and each has 10 "messages" that can appear. When zooming in stuff starts to overlap in addition to change size, when resizing the window,stuff overlaps too but without changing size. Most of the positions are absolute but have % in their position onscreen. However we don't want it to be responsive, we want the behavior of the silverlight version. At least that's what the bosses want.
We have been researching how to do this but so far haven't really found a good solution, especially with messing the zoom functionality of browsers. most pages/forums say this shouldn't be done.
Edit:
For now I have added a bunch of max-width and max-height in the html style and body style, as well as added a media query for switching % left to px left for an absolutely positioned group of objects. However this is by no means whay I seek to accomplish. We need the whole page to behave like an bgimage, scaling every element with the size of the window.
I am currently building a portfolio website for myself. I have an array of projects that are flex and change size as the window changes size, once they get to a min-width they wrap over to the next line. My problem is that when the website is loaded for the first time without a cache, the images haven't loaded yet and the height of their container doesn't fit them. This causes a lot of overlap, but when the page is refreshed and there is a cache it fixes itself. An example is shown here:
The cache problem.
My idea to fix this was to make a min-height, but since its responsive and the size of the container changes, I don't know how to set the min-height. I was thinking of setting it to a mathematical relation to the width of the view port window, but wasn't sure if I had the skills to make that work. I will happily attach the code if needed.
If you want to preserve space for an existing image you can wrap it into a div and adjust this div's dimensions any way you like. For example, you can set min-height. Or if the image height varies you can use loading indicators (gif loading animations) with their own dimensions, and when your images finally load, you can replace the gifs with the actual images using js onload event
To make space for images before they load you need to give each image a corresponding value(*) of its height and width.
( * - in good coding practices, this is actually a requirement ! )
For example ::
<img src=[url] width=180px height=300px>
If you want a fast, stable, responsive, robust and absolutely solid page - Never leave images, tables and table-cell columns without a 1. width and 2.height specs.
Even if they are flexy, you are highly encouraged to at least use relative size (%).
<img src=[url] width=60% height=100%> /*relative::Let's say this set of images is in a
div who's css height is 300px. The images width given as 60% matches exactly its pixel
width, which is 180px.*/
You will immediately notice a tremendous improvement of your page performance and have away better experience working with them. Depending on the complexity of elements a ten fold improvement of the render speed may be achieved.
I'll try my best to explain this as clearly as I can. I'm also using the Bulma CSS framework if it matters. So the layout I'm trying to create is this.
I created a working version that can be seen in action here
However, in the working example the vh/px of the scrollable box is fixed to a certain amount and I'm using tiles from the Bulma CSS framework. I tried using columns and the same outcome occurred. If I was to not make it a fixed amount, it'll just extend past the screen, but I want it to fit the entire screen regardless of the size and the only scrollable part should be the green box I've showed above. Also, the box may not even have enough content to become scrollable in some cases, and in that case I would still like it to fill up the rest of the height with the box even if it's going to be empty.
As you can see here, if the height isn't explicitly set, it'll keep going past the screen, but if it's properly set it will work as intended. I'm wondering how I can make this height fill the space properly no matter how it's resized and etc.
Any help would be appreciated!
It sounds like you should set the height property on the wrapper of the content and set the overflow: scroll; Then all of the contents will be the height you set and have scrollable content.
We do use CKEditor in a SaaS system that is meant to produce Presentation material (think Powerpoint but on the Web, basically). We actually produce "slides" with a CKEditor.
A slide has a definite height in our specific case. The height will not be dynamic, we know beforehand how high (in pixel) an article typed into CKEditor will need to be before being cut off in the Presentation.
Problem: we want a sort of live display, like a red line or something alike, that shows when the page is going to break; so that the user typing into CKEditor gets a feeling of when the breaks are going to come (I an not talking about putting the breaks in there manually, just having a display of when breaks naturally occur).
How should we tackle the problem with CKEditor ?
Let's say that your slide height must be 500px.
Create an empty transparent PNG image with width 1px and height 500px. Make the last 2-3 pixels red. This will indicate the page break.
Then, find contents.css inside your CKEditor folder and modify the .cke_editable section to include background-image: url('page_break_indicator.png'); which will add the image as a background that will be repeated both horizontally and vertically.
But beware that when a user creates 3 or more slides and then modifies a slide that's not the last, all other slides that come after it must be checked according to their page breaks.
After googling around and finding a lot of ie bugs I still did not find a description of the problem I have.
The initial situation is a standard one. We have a tooltip which is actually a hidden div that will be displayed on mouseover at a given location. The div is hidden with display:none and contains a table with the content. We tried different libraries for showing the div (scriptaculous and jQuery Cluetip) but the effect is the same.
The problem:
Everything is fine as long as the contents fits the width of my window. But when I resize it until the horizontal scrollbar is activated the content of the hidden div will be shown at the end of the page when the tooltip is activated.
This is really strange as it happens only under these premises. When more than one tooltip is involved the browser might even crash (and under Vista takes the whole system with him duh).
I know it's a bit complicated to explain but I hope that someone at least had heard of that bug and can point me into the right direction.
Setting the width css property to "auto" (defined in the W3C standard) in IE will cause the <div> element to take up the entire space allotted to it. If the <body> element does not have a width applied, then this can result in a page miles and miles wide. This often crashes the browser, depending on the operating system. The best option is to just set it to null instead.
(This is based on actual experience coding for IE6 and may not necessarily apply to IE7+).
Another thing to keep in mind is that most browsers do what's called "lazy rendering" which means that if an element is hidden on the page, it won't render it. It won't even acknowledge its existence as a potentially visible object until it is unhidden. This means having no idea how big that object is going to be until you reveal it. This can cause problems if you're trying to figure out how big something will be once you make it visible. Basically the only way around it is to unhide it, read its size, re-hide it, then proceed.
The way that I did my tool tip is to use visibility hidden and visible. Once the mouse is off, I set the x and y to 0 to move the tooltip out of the viewing space.
This only works if the position is set to absolute.
Edit: How did you position the tooltip when showing it:
I positioned the tooltip by changing the css values of "top" and "left".
box.css("left, e.pageX+1);
box.css("top", e.pageY+1);
Where 'e' is my event variable from:
mousemove(function(e){});