Develop Reference

$swipe on child elements conflict with scroll and scroll stops working in AngularJS

I have a parent element to which I applied ng-swipe-right and ng-swipe-left. The swipe functionality works well. One of the element's child element has some content that overflows hence scroll gets automatically applied to it. BUT now, this scroll has stopped working after I had applied the swipe functionality. When I remove the swipe, the scroll works.
Can you please advice, how I can have the parent element to have the swipe functionality but its child element which has overflowing content to also retain its scroll functionality.
NOTE: I've not used any plugin for applying scroll functionality, it automatically takes scroll.

Your case requires both the scroll and swipe event to be available, which I couldn't figure out how to do. Also see this question: Cancel ng-swipe-right on child
If anyone else who doesn't need both events sees this: in my use case the user can either swipe or scroll, depending on whether they tapped a gallery image or not. So I could do the following:
<!-- Fit image to page -->
<div class="gallery-content fit-to-page" ng-if="vm.fitToPage"
ng-swipe-right="vm.showPreviousSlide()" ng-swipe-left="vm.showNextSlide()">
<img ng-src="{{vm.currentSlide.url}}" ng-click="vm.fitToPage = false" />
</div>
<!-- Natural image size -->
<div class="gallery-content natural-size" ng-if="!vm.fitToPage">
<img ng-src="{{vm.currentSlide.url}}" ng-click="vm.fitToPage = true" />
</div>
So using the ng-swipe directives on the element I need swipe for, but not on the one I need to scroll.

Instagram style post heading stick to top of page and then get replaced by next one

Making a web app similar to instragrams layout and the post items have a full width image and then a div heading above each once.
e.g.
<div class="blogpost">
<div class="blogtitle">
</div>
<div class="blogimage">
</div>
</div>
This is a simple list of the posts with the title above. On instragram, once the title hits the tops of the page (because of user scroll) that title div is fixed. Once the user scrolls more and the next title div meets the bottom of the current fixed once, the current one is pushed up and the new one fixed to the stop.
Any help on this?

You are looking to create a site that uses parallax scrolling. Here is a link to a helpful site.

Make a variable with a value of zero, and check (in JQuery) $('.blogtitle').eq('variableWithZero')offset().scrollTop() and if it's zero, change its position to fixed, and add one to the variable with zero. Before that, remove() (.blogTitle).eq('numberWithZero - 1)
This will only help with scrolling up, but it should get you started ;)

How to move fixed div 200px up when reaching the end of the page (when scrolling)?

I have a page with two columns(sidebars).
The left one is fixed (contains google ads) and remains nonchanged even when I scroll down the page.
The right one contains posts and is positioned relative so scrolling is ok.
However I have a footer after right column(sidebar).
This footer's width is 100% of the page.
The problem is that the footer goes to the left sidebar when I scrolled to the bottom.
I would like to move the left sidebar 200px to the top when I reach 200px from the end of the page when scrolling down.
And return back when srolling back to the top.
<div id="main">
<div id="left">Google Ads here</div>
<div id="right">Content posts here</div>
</div>
<div id="footer">
footer here
</div>

You can use jQuery scroll . most websites use this to load content for their sites.
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() >= $(document).height() - 200){
setLeftBarPosition();
}
});
function setLeftBarPosition(){
// your code to set position of lefftbar
}

You can do this using plain CSS instead of javascript.
Read this for details. A Demo here

Scrollbar doesn't update on page

I'm using the jQuery Masonry plugin on my page. I've set it up so that when a box is clicked, a popup dialog is displayed with the contents of the box.
I've created a demo here.
before the popup is shown, there's a scrollbar on the page because all the boxes don't fit there. When one of the boxes is clicked, I append the content into the popup and show it. I hide all the other boxes but the scrollbar doesn't update to reflect the popup i.e. the content in the popup is less than the viewing area but the scrollbar still stays for boxes.
If you've understood what I meant, could you help me out?
Thanks.

Masonry is applying a fixed height to the containing #grid element, which is why the scroll height stays the same even when all the contents are hidden. If you move the popup element outside of the containing #grid element, and show / hide the grid on click, the scroll height will update correctly.
Updated fiddle
The important bits:
<div class="reader">
<!-- content -->
</div>
<div id="grid">
<!-- content -->
</div>
<script>
$('.box').click(function() {
$('.reader').show();
$('#grid').hide();
});
$('.reader #close').click(function() {
$('.reader').hide();
$('#grid').show();
});
</script>

Shifting elements in a div with overflow auto

I am experiencing problem with the layout of a page where my controls are shifting when I attempt to change the class using a javascript event. Can anyone help with some ideas around the problem. It only seems to be a problem in IE when the left scroll bar appears.
Here is an example of the html
<div id="container" style="overflow:auto;">
<div id="control1Container" style="left:17%;top:145px;display:inline;position:absolute;">
<div id="control1" class="listOUT" >I am a control</div>
</div>
<div id="control2Container" style="left:67%;top:145px;display:inline;position:absolute;">
<div id="control2" class="listOUT" >I am a control</div>
</div><!-- more controls here -->
</div>
So now the imagine that the controls within the container div take up enough space that the overflow margin appears on the left i.e. the controls extend below the bottom of the container div. If I attempt to change the listOUT class on control1 to say listIN using javascript the control will shift to the left. To me it almost seems like the browser is readjusting the control1Container to a new location that is 17% if the container div's new width with the scrollbar in place.
Any idea's?

You need to give to the container div position:relative, so that the absolute positioned elements inside it get positioned in relation to it ..