i created a page on which i tried to attain the effect of bottom aligned tool bar like the one face book has. For that i made a div with highest z-index set the position to fixed and set the bottom 0 like
#bar
{
z-index : 11;
position : fixed;
bottom : 0;
height : 50;
left : 0;
right : 0;
}
it works fine but while scrolling it seems like the page takes time rendering, like the page is heavy, scrolling is smooth but the page rendering is just a little slow that produces a not so good scroll effect. Did anyone know whats up...
or did you even get me :p
Position:fixed in itself shouldn't be causing these problems.
It sounds like the browsers are just being slow in rendering your page. Is the page large or complicated? This could be caused by over complicated HTML, CSS and especially Javascript.
Try simplifying (or disabling, for JS) each one in turn.
(I'd look hard at any JS events or and CSS that uses the * selector.)
If that bottom bar is at the bottom of the HTML-code, it will be loaded (and rendered) after everything else. If the rest of the page is big (silly code, complex javascripts or giant images), this will probably make everything worse, as styles are applied more or less continously as the page loads.
Simple way to check this: Recreate the bottom-bar at a super simple page and see if you get the same effect. If so, your page is probably to big or complicated.
Or your computer is just plain slow :-)
If you've got a "background-attachment: fixed" rule that may also be causing similar problems. Another issue you have to be careful about is IE6 doesn't support position: fixed, so you have to do it with JavaScript - which also slows down the website.
Related
On one of my sites, while the page loads images appear much bigger than they are supposed to (as specified in the CSS)
I was thinking that it might be something related to the size of the images, but no.
I tried changing the 'display' property but that did not help either. I'm thinking that perhaps it's some JS related resizing issue, but I don't really know how to test for it. The blocks are powered by OWL-Carousel, but I tried searching for such an issue and came up empty handed.
** Thanks for the answer - which was given by Benjamin. The issue was caused by FOUC, Above the fold rendering of the elements. Once I added the "critical CSS" (that loads before OWL carousel actually does), the issue dissepated.
What you're dealing with is something akin to what's known as FOUC (Flash of Unstyled Content) - though the cause for you appears to be related to your "owl carousel" which takes a moment to initialize, and your site relies on that for the actual final appearance.
You don't have any CSS that gets the layout close enough before the Owl Carousel loads in. If you applied something like the following CSS to it, it would get it pretty close (at least on desktop, I didn't check the actual appearance before/after on mobile, but that could be amended with an #media query)
.scolumns {
display: flex;
overflow-x: hidden;
}
.scolumns > .column {
width: 248px;
flex-shrink: 0;
padding: 10px;
}
Basically, if you rely on JavaScript based DOM manipulation for your final layout, you'll either want to apply some CSS that gets it close first (and doesn't affect the final layout, hence the Direct Child Combinator above: > - your carousel adds containers, so it won't affect it after it's done loading") - or use some kind of loading animation on the parent element that you hide when it's fully loaded.
I'm working on a site right now and can't really figure out what exactly is happening. You can view the page here: http://demo.easythemepro.com/?themedemo=AnimeStar
If you look at the top bar where you can switch themes, you'll see that it's actually overlapping with the website instead of pushing the entire thing down. What exactly needs to be changed to fix this?
I've tried changing everything from the PHP to the HTML to the CSS and it keeps happening. I know it's problem something extremely simple that I'm just overlooking after staring at this code for so long...
It's set to position: fixed.
#wpthemedemobar {
position: fixed !important;
}
Which means the element is positioned relative to the browser window. You can change it to relative and it should flow with the page content.
if you want to add a fixed topbar without over lapping the site you will have to use an iframe to contain the theme.
I have a Raphael.js SVG element living inside a div. Occasionally—when the page loads, or when a jquery-ui-draggable is dragged over the main svg node—the whole SVG element (over?)flows almost below the page. That is, if it started at 0,0 and it's 500px high, it jumps to 0,500 all of a sudden, and not always. I've tried setting position:relative but that doesn't seem to fix it. Actually, tweaking the position: in the Chrome debugger makes it "come back", but keeping it there through a page load doesn't fix the issue permanently. It happens maybe half of all page loads.
Anyone know what might be causing this, or at least a way to keep it jammed at the top? I'm rather CSS-ignorant.
Apologies for not having an example; it's part of a large setup that I can't share at the moment. I'm hoping someone has a hunch.
Can you examine the generated source code while it's happening (I use the Web Developer tool and there's an option in there to view the generated source code — and am sure there0s something similar in Chrome) to see if there isn't an element being inserted before it (or that something in your program logic is causing the canvas to be duplicated). I once had some very strange behaviour with Raphael and found that it was linked to my inadvertently loading the same script twice on the page.
I could always suggest absolute positioning too in CSS but that doesn't sound like it would fix the underlying problem.
Good luck and a hope that helps.
Apparently it was some CSS transforms: the input paths weren't in the right coordinate space, so we were doing a -webkit-transform: translateY(400px) scaleY(-1); in the <svg> element. I'm gonna try scaling the paths before putting them in the DOM instead.
I'm working on my website, http://www.perezfox.com, which features a fixed-position navigation menu. I'm happy with how this operates, but there is a problem with vertically-challenged browser windows. Users who scroll to the bottom will see the nav overlapping with the footer because their browsers don't have enough vertical space to accommodate both.
Is there a way to "push" the otherwise-static nav menu up as the page bottom approaches? Perhaps specify a distance-to-bottom that will override the position: fixed style? A friend has suggested that I need to monitor the page position and "fire an event", but I'm not sure what that means in practical terms.
I'm comfortable with CSS and HTML, but more of a beginning with Javascript and jQuery. Any advice is graciously appreciated, keeping that in mind. For example, you might have to say something to the effect of "put this within a script tag within your site head ..."
Thanks in advance!
EDIT
I found a few examples of this behaviour, but most of them are reversed. For example:
http://www.madebyparachute.com/products
On this site, the [left column] navigation elements start scrollable, become fixed. I want to have mine start fixed, become scrollable. Also, this one concerns the top, whereas mine concerns the bottom. But I image it's similar functionality at work, no?
I appreciate everyone leaving feedback but after a very frustrating day with this stuff, I must beg and plead that you please, please, don't just throw code at me. I need a bit of instruction, especially if there are script, CSS, and HTML components working in concert.
Also, note that I'm using the HTML5 elements for <nav> and <footer>, and not the traditional <div id="whatever">.
Thanks!!!
If you don't mind not supporting older browsers, you can use CSS3 Media Queries to change the styling when the window gets too short. It might look something like:
#media screen and (max-height:300px) {
navigation-element {
position:relative;
}
}
Note that for IE this only works in 9+. Other browsers are fine, i think.
Edit
If you need older browser support, you could do something like:
window.onresize = funciton() {
var sidebar = document.getElementById("idOfSidebar");
sidebar.style.position="relative";
//other styling stuff here
}
You can use jquery to set the nav to have relative positioning if the height of the browser is too small using the css function.
It might look something like this:
$(window).resize(function() {
if($(document).height() <= someNumber){
$("#nav").css('position', 'static');
} else {
$("#nav").css('position', 'fixed');
}
});
i know this issue is well documented but i cant find a working solution from what ive been reading. I have a pretty large site and i want a div to sit ontop of everything else on the site. now ive tried giving the div "position:absolute; z-index:99999;", this will work in everything apart from ie. How can i do this in ie?
You can try:
position: fixed; z-index: 9999;
This will make the div to appear on top of the others. (and follow as you scroll down)
so i tried this jquery script i found
$(function () {
var zIndexNumber = 1000;
$('div').each(function () {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
i added another wrapper around it to check if the broswer is ie before hand. this seems to fix the issue but does mean pages are slower loading in ie as every div is being treated. when the page loads.
This isn't what should happen. Without seeing the HTML & CSS, it's difficult to identify why. Some standard debugging techniques...
Setting the z-index to a very high number should render that element in front of everything else**. If it's not being rendered in front, then something is setting the z-index of the other elements to something higher. This could be set in CSS or by script. The quick check is to turn off scripting. To investigate this, use firebug to find the z-index of the element in front. To find it, edit any scripts, even minified ones, and simply search for "z-index".
It sounds like a quick "back to basics" re-examination of the problem may yeild the cause.
Normally one would use low z-index numbers - 2 is higher than 1, why use more?!? Some plug-in developers have been known to use stupidly high z-index numbers.
.
** IE 6 has a well-known bug where replaced form elements (e.g. select) will 'shine' through. The fix is to put an iframe in front of it.