Develop Reference

Javascript to change the position attribute to static of every style where position attribute is fixed

During some web scraping with Selenium WebDriver with Chrome, I encountered a page that has fixed regions (they do not scroll but stay fixed relative to the window). Oftentimes when I request that the web browser scroll to a particular control using Actions.MoveToElement() , the element winds up being obscured by one of the fixed regions. When Selenium clicks on an obscured element, the fixed region steals the click and my control does not get clicked.
The fixed regions have a class=SomeFixedPositionStyle. To get around this, I'd like to have Selenium inject Javascript code to go through each style on the page and modify it to set position:static if it's position:fixed. How can I do this?
I chose to not modify the class attribute of the fixed elements because the act of scrolling the page resets the class attribute to the original value that has the fixed style.
For example, take a look at http://www.ishares.com/us/products/239572/ishares-jp-morgan-usd-emerging-markets-bond-etf . As you scroll up and down, do you see the bands on the top and the bottom are fixed?
When I try to scroll to element //*[#id="holdingsTabs"]/ul/li[3] (this is the "All" link in the "Holdings" section, it winds up underneath the lower fixed region and cannot be clicked on.

You can inject a style rule into the page
var sheet = document.styleSheets[0];
sheet.insertRule("SomeFixedPositionStyle { position: static!important; }", 1);

What usually helps in situations like this is scrolling into view of an element:
driver.executeScript("arguments[0].scrollIntoView();", element);
You may also get rid of the "stickiness" by dynamically changing the "position" of the wrapper:
var wrapper = driver.findElement(webdriver.By.css('.sticky-wrapper'));
driver.executeScript("arguments[0].style.position = null;", wrapper);

How to prevent the backdrop of bootstrap modal dialog from covering the whole screen?

When I add a <div class='modal hide fade'> dialog into a div with fixed positioning (position:fixed in css), and call modal('show') on this dialog, the backdrop cover the whole screen, making it impossible to interact with the dialog. When the parent div is not fixed, this problem doesn't exists.
How can I use Bootstrap Modal dialog without changing the positioning of div?
I am using Bootstrap 2.3.2 by the way.
I will post a fiddle later, if no one is aware of this particular problem.

I end up solving this problem by using position:absolute in place of position fixed. But I figured out why this happens in the first place:
This is a Chrome-only problem, because in some version of Chrome released last year, they decide to put fixed elements in a different layer context from the root context. This link explains it clearly: http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements.
An example is like this: if element A(fixed) has z-index 1, and another unfixed element B has z-index 2, yet another element C (child of A) has z-index 3. If you render them in Chrome, B is above C, because C is in A's context, and B is above A, B-C-A. In other browsers, the layers are C-B-A, as expected.
If you encounter this problem, you could either not use fixed positioning, like I did, or do some special handling for Chrome, like we always do with IE.

Setting the outer div's z-index to a higher value than the modal-backdrop z-index (which was 1040) worked for me.
#someDiv {
position: fixed;
z-index: 1041;
}
See this example.

You need to add this to your code css
{body.modal-open div.modal-backdrop
z-index: 0;}

Scrolling layout - like facebook or google plus right sidebar

Any idea how make a layout like google plus or facebook. You can see at google plus home as example,
at the beginning, if you scroll the page in the main content, they will scroll together (friend post and sidebar), but when you scroll until the bottom of sidebar (in the right of friend post), that sidebar will stop scrolling , but the another content (friend post) will still scrolling. can explain to me how to make layout like that? sample code or demo will be very help.

Fixed positioning with CSS is a very limited approach. There are a number of ways to do this style of "fixed" areas, many of which have already been given in answers to similar questions on here (try the search above?).
One technique (which many are based on) is like so (in brief)..
Capture the browser's scrolling
Get the position from top of chosen element (x)
Check if the scrolling > x, if so apply a class to the element to fix it to a certain position.
The same will work in reverse, for example:
var target = $('#div-to-stick');
var div_position = target.offset().top;
$(window).scroll(function() {
var y_position = $(window).scrollTop();
if(y_position > div_position) {
target.addClass('fixed');
}
else {
target.removeClass('fixed');
}
}
Note: Depending on how you chose to complete the code above, the page will often "jump" as the div's position is modified. This is not always a (noticeable) problem, but you can consider getting around this by using .before with target.height() and appending a "fake" replacement div with the same height.
Hope this helps.

The new approach with css3 is reduce your effort. use single property to get it.
position:sticky;
here is a article explained it and demo.
article
Demo

You are looking for CSS position:fixed (for the scroll-along sidebar), you can set the location with left:[length], right:[length], top:[length], bottom:[length] and the normal width and height combos
You will need to augment it with a window resize and scroll listener that applies the position:fixed property after the window has scrolled past the top of the sidebar.

Use css property (position:fixed). This will keep the position of the div fixed even if you scroll down or scroll up.

Prepend a div without shifting the contents down? Using iScroll

I've got a container div with a bunch of scrollable content (for the record I'm using iScroll - if that changes the solution). When I scroll to the top I want to load content above the current scroll position. If I simply prepend the div using jQuery "prepend();" the contents in my scrollable area shift down. Ideally we'd want to keep the current content in the frame and have the scrollable area grow upwards above the content.
Any thoughts?
Thanks!

According to the iScroll website, it has a method called scrollToElement:
scrollToElement(el, runtime): scrolls to any element inside the scrolling area. el must be a CSS3 selector. Eg: scrollToElement("#elementID", '400ms')
If you always prepend a fixed amount of divs (e.g. always a single div), I imagine you could use it to scroll to (e.g.) the second element right after you've prepended the new content:
// ... (prepend new content)
myScroll.scrollToElement('#scroller :nth-child(2)', '0ms');
I haven't tried this, so please let us know if this works for you.

After a quick look through iScroll's source, here's what I've found:
The current x and y are always available through myScroll.x and myScroll.y.
iScroll has an internal function _offset(el), which returns the left and top offset of any given element.
This basically opens up two solutions:
Use _offset(el). While possible, this is inadvisable. The underscore is a convention for marking a function "private", meaning, amongst other things, that it's not part of the official API.
or
Use the newly added element's height:
var x = myScroll.x;
var y = myScroll.y;
// ... (prepend new content)
y += $('#scroller :first-child').outerHeight();
myScroll.scrollTo(x, y, '0ms');
You may need to pass true to .outerHeight(), which makes it include margins.
Once again, I haven't tested this, so please let us know if it works.

Issues with Fixed div on bottom of page that stops at given place

We needed a footer toolbar that stays at the bottom of the page, and sticks to some area when page is scrolled below that area.
We did achieved this using following script:
fixed div on bottom of page that stops in given place
But there is an issue on some page where the footer toolbar just disappears from the page, and then appear again when page is scrolled down further.
We found that this particular issue appears only on few page, when the page has some contents like Images, Video, or Ajax load other content where the content is filled in (or space is being filled) after page has loaded.
I have no clue how to fix this.
Here is the link from live site with problem page.
http://www.sandiegopchelp.com/services/cellphone-repair/htc/
http://www.sandiegopchelp.com/top-10-tips-to-help-secure-your-computer/
http://www.sandiegopchelp.com/notes-on-the-phablet-does-the-world-need-one/
It is usually more visible on blog posts with many comments. May be due to Disqus comments being loaded after the page has loaded completely.

How does this look?
http://jsfiddle.net/LukeGT/NxSc3/
$(window).scroll(function() {
$('#bar').css('position', 'static');
console.log($('#bar').position().top);
console.log($(window).scrollTop() + $(window).height());
if ($(window).scrollTop() + $(window).height() < $('#bar').position().top + $('#bar').height()) {
$('#bar').css('position', 'fixed');
}
});
setTimeout(function() {
$('#extra').show();
}, 1000);​
I simulated the late loading of images by just showing a few extra divs after 1 second. I believe the problem arises from the fact that the height of the page changes after the code for the bar runs, so it's behaving as it should if the page were shorter (without the images/ajax etc).
What I do instead is position the bar in it's place at the bottom of the page each time the page is scrolled, calculate its height from the top there, and compare this with the scroll height. If we're too far up, it positions the bar in a fixed position at the base of the page, and otherwise leaves it alone. It works smoothly in Chrome, but I haven't tested elsewhere.

I guess this is a problem with the $(window).height() function. Check here. For all the dynamic contents like Images, Video or Ajax-loaded content the height is not added to the result of $(window).height() unless it is specified somewhere in the HTML or CSS (and from the referred link I see this happens only in Chrome. You might want to confirm on this though). To those dynamic contents you can either try adding the height attribute in html or height attribute in the corresponding style.

This is not the answer but i have found something while inspecting your website...
This is you actual HTML when its working fine as you want..
<div class="footer-toolbar-container" id="sticky_for_a_while" style="position: fixed; ">
but when it is not working, the Position attribute is changing from Fixed to Relative .
<div class="footer-toolbar-container" id="sticky_for_a_while" style="position: relative; ">
you can check you script for that or post you script here...

At initial state, your div is in position: relative so its offset is based on the container element, not on the total height of the page. The variable stickyOffset is set based on that relative offset, that is why it gets clip down sooner than expected while scrolling and also why it works in your JSFiddle as the container there is the page (Iframe) itself.
In your $(document).ready function, you'll need to add the offset of not only the footer but also the rest of the offset on top of the containing element so that the offset is based on the total page instead of the containing div.
Hope that helps.

By looking at your example on http://www.sandiegopchelp.com/services/cellphone-repair/htc/ using chrome, I can see that your footer disappears when it gets at the "related links" section. At this moment, you set the position of the footer to "relative" so it will replace it in the regular flow of the document and its position is actually below the "related links" section which is why it disappears off screen (below "related links").
but you calculated the position at which it should become relative on page load only where you should have recalculated it after having added the "related links" section as it changes the page height (I understood that you added afterward, am I right?).

Try adding a zero height div just above the position of the sticky div, which will remain at that position as the page resizes, then check that position as you scroll to determine the position where the sticky div should stop.

Finally got it fixed by two techniques, setting explicit height wherever possible using CSS and delaying jQuery function after all images are loaded. Refer this: Delay some jQuery function until all images are loaded completely