This is an effect very seen but i dont know how to do it, i want to have a DIV in an absolute position, for example in the middle of the page
but when you scroll down and your "border-top" of your navigator touches the div, then it comports like with
position:fixed; top:0px
Is there any way to do it only with css3? I think i can do it with jQuery and changing classes dinamically, but I'm sure there is an easy way
Thank you
It's not possible in plain CSS3 without Javascript/jQuery's help for at least a few reasons:
CSS is a language where you can only define rules that determine the appearance of HTML elements and cannot implement other programming concepts like conditions, variables, etc. [However SASS (Syntactically Awesome Stylesheets) does support the use of the aforementioned, but it lacks in so many things from Javascript, e.g. it cannot listen to events from DOM elements just as Javascript does.]
You need to listen to the scroll event when the page is scrolled (which isn't possible in CSS). For this listening to happen, you need to register a handler to handle the situation when that particular event is fired.
As soon as the current position from the top of the screen reaches some height (better known as offset) upon scroll, first, you may want to calculate that offset. Next thing you'd do is to add the style to the element which forces position: fixed on it. You could define the rule for this in CSS certainly, but yet again, you need Javascript's help to enforce this rule on the element.
Related
I'm learning css and decided to understand something in Facebook: the minifeed on the right, allows scrolling without using frames. How does it work?
I suspect I may know the answer by now, but I can't find a definite proof. It's a smaller fixed element, containing a larger element. Then the relative position of the inner larger element relative to the outer smaller one, is being changed by js in response to mouse events. All this is ok. Now the problem:
I can't find where this relative position is defined. I'm using Chromes "inspect element" and trying to spot the place where this positioning is defined, and thus probably changed by js.
I found that :
<div class="tickerActivityStories" ...
is the inner large element, and that:
<div class="uiScrollableAreaWrap ...
is the first ancestor that is smaller, and thus limiting it to a "virtual frame".
But I cannot find where the position of the first relative to the last, is set. I'm going through the styles and the computed styles that chrome shows me, and can't see any relevant positioning directive. The following types of help will be appreciated:
A specific answer to this specific matter by somebody who opened facebook and checked.
A guidance about what I may have been doing wrong to find the answer, and how could I do it better
It has nothing to do with relative positioning. The script checks the scrollTop position of the container against the height of the container. When it reaches a certain value, it triggers an AJAX call to fetch more stuff. When the stuff returns, the script places it in the DOM below the last items in the current container and updates the pagination value so the next fetch will be intuitive. When more stuff is added to the DOM, the scrollbar automatically adjusts itself.
this is a repo that i recenlty found, This may help you
http://jamesflorentino.github.com/nanoScrollerJS/
also there are other like "lionbars" or something, i cannot remember
Here is the scenario: I have a div which I pre-load into a page and automatically set it's display property to hidden. I use javascript to pop-up said div. The issue is when clients have CSS disabled they can see the DIV, obviously. What is the best way to have the div (or contents of the div) display only when my javascript function is called?
The best way I could think of is passing the raw HTML to a javascript var and then loading all the HTML using javascript, however, this is a bit slow(theres a decent amount of HTML) which causes the script to break when it tries to reference DIVs that do not exist yet.
any other more elegant solutions?
Thanks
You can wrap html comment tags around it:
<!-- <div>your stuff, which should be invisible</div> -->
Or remove it completely from the DOM
http://plugins.jquery.com/plugin-tags/html-comments
Maybe, here some related stuff
If CSS is disabled, then the only way to hide the div is to remove it from the DOM.
You can set an inline style on the div (not recommended but your case is an exception anyway).
You can use JS/jQuery on page load to hide the div but it'll cause the flicker effect (div wiil be visible momentarily until the JS runs to hide it).
You want to have a div on your page when the page loads so that users without javascript can see it, perhaps to indicate them that some of the site functionalities require JS to work.
If you need to use that div exclusively with JS then having it already on the page is a bad approach imho. You should create it on the fly, at least the content.
This way you will ensure users without CSS won't see it, while still being able to show it for the rest of the people with JS enabled.
Set the height of the div you wanna hide to zero using javascript.
$('#mydiv').css("height", "0px");
Everyone knows that there are problems with the float CSS property: there are text jogs in some browsers, you have to clear them to pull parent elements around a floated div, etc.
Let's assume I build a layout and float everything, and I'm careful to control for the browser-specific bugs. Are there disadvantage to using float for everything? Will the page take longer to render, or is there a better practice?
I'm trying to improve my CSS layout building technique.
#kevin; float is not a bad practice; it depends on how you are using it & what the needs of the design are. There is no need to use it on everything when there is no need & it comes from experience.
Every browser renders float correctly.
yes if you use clear:both in your markup like this
<div style="clear:both"></div>
it's increase your markup which increase your page loading time.
. SO, use overflow:hidden in your css to clear it.
Floating everything can make for a great deal of inconsistency; depending on how wide a screen is and how tall certain elements are rendered, you can end up with a hodgepodge of screen jag.
For example, widening the screen would cause more elements to fit on the top line, so they would jump up. Items not in the top line will slide down, and then catch on the corner of an element slightly taller than everything before it.
Float is a handy tool, but it's no panacea; use with caution. Make yourself a sandbox site, and use something like Chrome's developer tools, or Firefox w/ Firebug to see what results you get when floating it all.
I dislike using floats because of these clearing issues. I generally use display:inline-block, and for my IE6/7 stylesheet for the same rules, I put zoom:1; display:inline
With inline-block, block elements flow like inline elements, while behaving like blocks. This I feel is more intuitive than breaking out of the flow like floats do.
I use this kind of layout on my twitter client: https://timshomepage.net/twitter
And here's the uncompressed stylesheet: https://static.timshomepage.net/css/twitter.css
I designed a web page using CSS/HTML.
I gave all the divs an absolute position property,and used % instead of px for all the dimension.
My problem is that minimizing the browser window makes my divs interferes,change them size,and looks messy.
I added the "DOCTYPE" tag and meta tags.
I thought there is something wrong with the position property so i tried "relative",and "static" instead of "absolute" but nothing changed.
what can i do??
I take it your are new to HTML/CSS, as you should ALWAYS have a DOCTYPE or your code will most defiantly not be valid and will break cross browser.
Using absolute on everything isn't recommended, by myself or anyone else. But you could add a wrapper div around your page, set it to relative and that might help then you wouldn't have to recode your page to fix this issue. But then again, it might not do much at all without your code or an example there is really no way to tell.
Using absolute positioning for everything will do exactly that. Keep everything static unless you really need AP, and when you use AP make a parent element or grandparent of the AP element position relative so you have a base to position off of.
When you resize the browser window, the width and height change, thus your relative positions change and break your layout. The rule of thumb is: do not use absolute positioning unless it's unavoidable. Use the standard document flow and floats where possible.
I have a bookmarklet that will come up with a iframe that will load a web form I have. On most site, it works fine with the bookmarklet on top of every element in the current html page. But for certain sites with a lot of javascript loading (e.g. meebo.com), the loaded iframe will go below. How can i troubleshot this? Thanks. attached screen shot.
If you are using a positionable element such as a div, you should ensure the z-index style is set to a value higher then any other element.
Of course the page you load in the iFrame may also be doing exactly this. Therefore you may need to use a timer (setTimeout) to delay for say 500ms and then get the current highest z-index and add 1 to it.
Also, because you don't know in advance anything about the page shown in the iFrame, you would actually need to manually search for all elements containing a z-Index style. Once you have a collection of these elements, then get the highest z-Index value.
I'd definitely look at using jQuery to make this much easier.