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
Related
I am a mostly skilled server-end developer, and am creating an ambitious website project - all by myself. I know c#, MVC, T-SQL, LINQ, and ASP.NET pretty well. Obviously, since I'm working by myself, I have knowledge in design too. I'm obviously good with html (who isn't?). And I absolutely love jQuery! The thing is, I'm decent in my understanding of css, but css is my least knowledgeable trait. I understand programming, I also am good in design, not just because I have a decent level of knowledge in css (and jQuery) - but also because I just know what looks good (I can draw and paint on real paper too).
The thing is, I know I can probably do this with jQuery code, but I was wondering if this could also be done with css alone. On my main design (Views/Shared/_Layout.cshtml) - I made the body to have a "min-width: (my value);" attribute, which, obviously isn't supported with older browsers, so I also included a transparent image of a default width of 1px that I set to stretch to my desired width also - it works in controlling the width of the page (to the minimum I desired). But - I have a site header div which resides at the top of the page. I have a part of that header div with elements positioned on the far right - which is nice when the browser is on a device that is large enough and the browser is in decent size, but once the browser is set to a size less than my desired minimum width, then the scroll bar shows up, and I can move it around as expected. But, the elements in that header div do not stay to the far right in conjunction with my minimum width - but stay on the right of the current window size instead. I have the main div holding the elements itself set to be in fixed position, I tried making those elements relative with no success. I tried a few ideas, the problem still persists.
So, as I said, I am well aware of concepts using jQuery that can do what I have previously described I desire in these regards, but, as I also said, I know a decent amount of css, but am the least close to an "expert" in css than anything else I know. I just have a strong suspicion what I desire here can be done with css and css alone (also, it would be nice to have it compatible with most browsers, or at the least most browsers made after the year 2008).
Can someone please give me some good information in these regards?
I just remembered asking this question.
I actually found a way to go about doing what I wrote I desired here through some experimentation that eventually got me to where I needed to be. What I did was instead of using relative positioning - which I thought was the proper way of doing this, I used absolute positioning inside the absolute positioned top header div. I didn't think this would be the solution at the time of asking the question, I assumed setting something as absolute positon - even inside something that is already absolute positioned - would put it in a new context of absolute positioning like any absolute positioned element inside the body tag. What I discovered was if I put an absolute positioned element inside another absolute positioned element - the context of the absolute positioning was based on the original absolute positioned element - so top (or left for that matter) 0px wasn't 0px from the context of the body (the very top of the page) - but - 0px from the element that the element is inside of. I think that's a pretty explanation of it, so I'll end explaining it here.
I'm sure there's plenty of people that know css much more than I do, and think this issue I had here is so basic, but, I did ask the question, and I might as well answer it based upon the solution I used. I could've posted an example on jsfiddle like asked for in a comment, but I thought my explanation was good enough, and since no one offered an answer based on my question alone, I decided to try to address the issue with experimentation, which I had success with.
This behavior is somewhat confusing to me, so I would appreciate some external help to understand what is happening.
I have prepared a fiddle to illustrate the behaviour http://jsfiddle.net/cseignc/mfoejqum/
I have an html table whose header is maintained fixed by absolute-positioning a second header via some CSS.
The table is generated thanks to the ng-repeat directive that loops through the array of columns and rows.
In order to provide horizontal scrolling, while maintaining the first column and the header fixed, I am filtering the array of columns to ng-repeat on by using the startFrom and LimitTo filters.
I am providing navigation buttons (left and right chevrons) to allow the user to scroll horizontally through the table. Those buttons increment/decrement the value passed to the startFrom filter.
This is working as expected for the table body but the second header fails to render properly. I am even finding it impossible to detect consistency in how the second header is rendering - or not.
I initially thought this was to do with $scope.$apply() not being called for, but all my code is within AngularJs, so I do not believe that there is a need for calling it...Correct me please if I am wrong.
I have found that resizing the screen will cause the header to render properly.
Any insight on this will be greatly appreciated.
Thanks !
EDIT:
The above issues appears to be Chrome specific. I have tested the behaviour in IE and Firefox and the header is rendering correctly in those browsers.
I made some changes to your fiddle that should give you a bit of a start in achieving exactly what you want:
http://jsfiddle.net/a06uvkr3/
The gist is that I:
1) initialized $scope.skip to 0 in the controller
2) Ditched the ng-repeat filters and used ng-show with some logic based on $index
3) tweaked the CSS so that the header's .tr-inner container is absolute rather than the things inside it and gave the header a fixed height. Also tweaked a bit of padding to account for the header items being thrown out a little
Obviously I can't verify that it fits your exact use cases, but you can see the result is much more promising.
I have a Drupal website loaded with AJAX. Every time I edit my title, AJAX is checking whether or not I've actually changed it. But every time the AJAX starts checking, my whole lay-out is jumping around...
BEFORE
AFTER
I tried to edit the .ajax-threbber-css class with position absolute, relative and fixed, but no result. Every time the throbber reacts differently. A z-index of 99999999999 doesn't work either... Is there a way to float this ajax-throbber-div to the absolute top without influencing any other items?
You would first need to check its current CSS properties, it could be that you are having them overwritten by something else.
Firebug or Google Chrome developer tools would help. Setting the position to absolute, should do it for you, its just CSS gets murky if you don't consider other pieces of the puzzle acting upon your object that you are trying to style.
I have a Blogger template which is wider than the screen-width and causes the horizontal scrollbar to be displayed. I want to change it so that it fits and no scrollbar is shown. But the problem is I don't know what is causing this. I have downloaded the template file and in my code editor looked for all width properties and changed all 100%s to 90% and pix width values to value-100, but still the page is as before.
In finding the effective rule/rules in a such cases, what else should I look for/do? What is a comprehensive procedure to check things to find the rules?
Instead of changing the width, try adding the CSS property overflow: hidden to everything you think might be causing the issue and then remove them one-by-one until the scroll bar reappears and you'll have the culprit. You might need to add it to html and body as well. If the scrollbars aren't revealing any actual content, you can leave the overflow: hidden on the culprit to resolve the issue.
It might not be a width property that's causing the problem - there might be a block element inside your template that doesn't wrap or float that might be stretching out your container if the widths of the containers are defined using percentages.
Define the root container using a fixed width and this should eliminate many of those sorts of issues. Try that first and let us know if it works.
Procedure:
1). Understand the box model and how this varies on IE. It is just as likely that a problem "width" may actually be caused by padding, margin, or even border as width.
2). Check the rendering in other browsers. If you can reproduce the problem in FF get Firebug and use that to find out the calculated dimensions of the element in question, and tunnel down through it's children which may well be causing the issue. Chrome has a similar debugger to Firebug iirc, but I'm not familiar with it.
3). If that doesn't tell you what the problem is, start removing rules or whole patterns from your CSS until the problem goes away (or remove everything and add it back in piecemeal until the problem returns) - at that point you know what is causing the issue, if not why, and you can always update the question to ask us why when you've identified it.
hth
(Apols if any of this was already obvious)
Well, % always begins with "100". See the percentage of width of body tag is set to 100%. then according to it, just set other component % as per the requirement in your display.
Personally I do believe that, use of % is better then 'px'. If you know CSS, then try to change 'px' to % as per the requirement.
It seems that the component has min-width style and overflow property set to auto. You may want to set it to visible and do it in FireBug Firefox Page Inspector first, to see the effect alive before making post edit. If you just want to adjust the whole post width, blogger has standard interface. You can also edit the template manually
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.