We Keep Coding

Not able to scroll within a page using AngularJS in HTML

I have a simple html code where I have a left menu. I want to scroll content on click of menu within the same page. Also I don't want to scroll menu.
The problem is, I am using AngularJS so compiler is confused between routing and segment logic.
Here is my menu:
<div class="container">
<div style="float: left;width:150px;">
<ul class="list-group">
<li class="list-group-item">overview</li>
<li class="list-group-item">Clinical features</li>
<li class="list-group-item">Diagnosis</li>
<li class="list-group-item">Testing laboratories</li>
<li class="list-group-item">Result interpretation</li>
</ul>
</div>
<div class="col-md-10" id="clinical">
<div class="row">
<div class="col-md-2">Result interpretation</div>
<div class="col-md-10">
<p style="text-align: right;">Back To Top</p>
</div>
</div>
<hr>
<p>Hey this is just to test.</p>
</div>
</div>

This is not a problem specific to AngularJS or anything else. It's just a tiny CSS problem:
You're aligning your menu using float: left, which will cause it to appear on the left border but it won't follow you down when scrolling (as you've noticed).
The solution is pretty simple, just attach your menu in a different way. There are many different ways to do this, also depending on whether you're using any JavaScript library (like Bootstrap), but the most simple approach would be pinning the menu using CSS:
.menubar {
/* A fixed alignment will ignore scroll bar positions */
position: fixed;
/* Stretch the bar by forcing offsets and a width */
top: 0;
left: 0;
bottom: 0;
width: 150px;
}
Last but not least you'll have to move your content so it's not hidden by the menu bar (which would otherwise overlap):
.content {
padding-left: 150px; /* of course this could use positioning as well */
}
You can try the whole thing in this jsFiddle.
From your question it's not clear whether you're also looking for soft scrolling, but for that you'll most likely want some additional JavaScript library - or you could just use some library that provides everything for you (including menu bar CSS etc.), like Bootstrap or UI Kit.

JQuery slidetoggle

I am currently building a website for an indie game development team I am working with.
Right now I am writing the alpha sign up page and I have created layout which needs to make use of the slideToggle() and fadeToggle() methods, however after a few hours of faffing around in my editor I cannot seem to fathom a solution for the behavior I want.
When the page loads I want the form container to be in its slid up position and when the user clicks on the div I want the form container to animate down.
I have tried to animate the display property from hidden to block and I have also tried to hide the element when the document loads and then re-show it on click, however when I did that I noticed a strange behavior as the div would slide down and then up, which would cause the user to have to press the button again to view the sign-up form.
The code below handles the click event,
<a href="#" >
<div onclick="$('#showForm .inner').fadeToggle({queue:false});$('#showForm').slideToggle();" id="alpha-container" class="alpha-off"></div>
</a>
And this is the div I want to be hidden and re-appear
<div id="formContainer" class="form container">
<div id="showForm" class="outer">
<div class="inner">
<form method="post" action="verify.php">
<table>
<tr>
<td class="intro">
<h1 class="header-orange">Liberico Alpha Application</h1>
<p class="body-text">So you think you have what it takes to brave the battlefield?
</p>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
I have created a jsfiddle demonstrating how my page currently renders - http://jsfiddle.net/alexmk92/54EUC/ - any pointers would be greatly appreciated.

Firstly, i removed the javascript code from html and added a class "clickable" to the clickable element:
<a class="clickable" href="#" >
<div id="alpha-container" class="alpha-off">CLICK ME FOR ANIMATION</div>
</a>
And then, i've created a custom javascript toggle function with slideDown and up:
$('.clickable').click(function(){
var showFormObj = $('#showForm');
if(showFormObj.hasClass('active')){
showFormObj.removeClass('active');
showFormObj.slideUp();
}else{
showFormObj.addClass('active');
showFormObj.slideDown();
}
});
On the css part i hid the 'showForm' element:
#showForm {display:none;}
Here is the fiddle: http://jsfiddle.net/Karzin/54EUC/2/

If you need to hide the form when page loads. For form container use
display : none
Eg:
http://jsfiddle.net/54EUC/1/

How to full page a div element?

I wonder if there is any way to set one div container to full page (like a zoom, with no other elements of the page shown) and allow user to turn back to normal by doing a escape or click outside of the div element.

I use jQuery UI for this solution. It's really simple and straight forward.
Here's the Fullscreen working Demo of this effect
Here's the Fiddle broken down piece by piece
And of course, the code ->
The HTML ->
<div class="body">
Open Modal
<div class="overlay"></div>
<div id="modal" title="the modal"> Modal </div>
</div>
The CSS ->
body{
height:100%;
width:100%;
padding:50px;
}
.ui-widget-overlay{
z-index:10;
}
.ui-dialog{
z-index:20;
}
The jQuery ->
$('#modal').dialog({
'autoOpen' : false,
'modal' : true
});
$('#open-modal').click(function(){
$('#modal').dialog('open');
$('.overlay').addClass('ui-widget-overlay');
});
$(document).on('click', '.ui-widget-overlay', function(){
$(this).removeClass('ui-widget-overlay');
$('#modal').dialog('close');
});

Jquery pop-up using fancybox

I've a button clicking on which it shows a pop-up message. Code is given below:
<a id="report_button_id" href="#report_form_container" class="form_show_link" style="text-decoration: none; cursor: hand">
<span id="report_button_text_id" class="top_nav_report_button">My Link Here</span>
</a>
<div style="display:none;">
<div id="report_form_container" class="popup_container">
// Some page is displayed here using div tags
</div>
</div>
In Javascript file:
$("a.form_show_link").fancybox({
centerOnScroll:true,
overlayOpacity:0.7,
overlayColor:'#000000',
showCloseButton:false,
hideOnOverlayClick:false,
onStart:resetPopupFormErrors
});
$("#report_form").keypress(function(e) {
if(e.which == 13){
$("#report_form").submit();
}
});
Can any one explain how the above code is displaying pop-up windows on clicking button especially when the style is none????
Thanks!

If I understand your question ('how does this work?'), it is prett simple... Fancybox is moving the target div out of its old container and into a temporary one that it controls. As such, its parent containers no longer have influence on the target (such as 'display:none').

jQuery - Coda-like content sliding

I need to achieve an effect where when a user triggers a hover on an a tag, current content on the screen slides out, and the new content slides in (depending on what was hovered on). Here is my HTML:
<div class="services-image" style="background:url('/sites/default/files/services-background.jpg') top left no-repeat">
<ul>
<li>Secure Mobile Computing</li>
<li>IT<br />Consulting</li>
<li>Software<br />Engineering</li>
<li>Microsoft<br />Services</li>
<li>Cyber<br />Security</li>
<li>Infrastructure & System<br />Adminstration</li>
</ul>
</div>
</div>
So, when a user triggers a#box-2 hover, the divs below ease in/out with new content. Example container markup:
<div class="content-slides">
<div class="slide-1">text</div>
<div class="slide-2">text</div>
<div class="slide-3">text</div>
<div class="slide-4">text</div>
<div class="slide-5">text</div>
<div class="slide-6">text</div>
</div>

I remember seeing this tutorial - it's aimed at designers, so you should fly through it :)
http://jqueryfordesigners.com/coda-slider-effect/
It should be easy enough to change the click events to mouseover.