Develop Reference

How to fade out then direct to a new page

I was just wondering how to fade out the page when clicked and open up another html page. Right now I have
<div class="menu-item color">
<a href="html/webmap.html">
<i class="fa fa-flask"></i>
<p>Webmap</p>
</a>
</div>
How can I make it so that when "Webmap" menu item is clicked, the page fades out and opens up my webmap.html page?
I know javascript is invovled, I just can't figure it out!
Thanks in advance!

Not a whole lot to explain :
$(function() {
$('.menu-item a').click(function() {
var destination = this.href;
$('body').fadeOut('slow', function() {
window.location = destination;
});
return false;
});
});

scrollTo in AngularJS

Until now I have always been using jQuery for my single page "scroll to div" applications, but since in making an Angular app (just for learning purposes) I try to do everything in angular instead of falling back on good ol' jQuery.
Im trying to make a scroll-to-div-on-the-same-page-menu, but Im not really sure on how to do this in Angular tho.
Currently I'm using this snippet to do what I want:
JS
app.directive('scrollOnClick', function() {
return {
restrict: 'A',
link: function(scope, $elm, attrs) {
$elm.click(function() {
var linkHref = attrs.href;
angular.element('html,body').animate({
// select the element the href points to
scrollTop: angular.element(linkHref).offset().top - 60
}, 'slow');
});
}
}
});
HTML
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a ng-href="/" role="button" class="navbar-brand">angularApp</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
</div>
<div id="page-wrap">
<div id="one">...</div>
<div id="two">...</div>
<div id="three">...</div>
</div>
But it doesn't work perfectly.
I need it to scroll with a margin of 60px as you can se in the code, because of my fixed navbar. I also want it to navigate slower and have a pretty url like /two instead of /#two.
How is this achieved?

If you have jQuery loaded already, you can use angular.element as an alias for $. That's usually the "proper" way to do it in angular. If you don't load jQuery first, angular.element uses jQLite, which is limited in terms of what selectors are available. Since you're already using jQuery, lets assume you already have it loaded up before angular.
Assuming that your jQuery example is working the way you like, you can just use the same selectors, substituting $elm for target, subtract the 60px and also set the animation timer to 1000 as you did in your jQuery example.
Try something like this:
app.directive('scrollOnClick', function() {
return {
restrict: 'A',
link: function(scope, $elm) {
$elm.click(function() {
// same as your jQuery example
angular.element('html,body').animate({
scrollTop: $elm.offset().top - 60
}, 1000);
});
}
}
});
--EDIT--
Wait, I see what you're trying to do here...
You need to get the href attribute from your element. The link function can take a third argument, which is the attributes attached to the element. Then instead of setting scrollTop to the offset of the link you clicked, you set it to the offset of the element in the href, using angular.element to select that. Like this:
app.directive('scrollOnClick', function() {
return {
restrict: 'A',
link: function(scope, $elm, attrs) {
$elm.click(function() {
var linkHref = attrs.href;
angular.element('html,body').animate({
// select the element the href points to
scrollTop: angular.element(linkHref).offset().top - 60
}, 1000);
});
}
}
});

I ended up using angular-scrollto which I think is very good. Very simple to use. All I had to do after I installed it with bower was to inject the module and the simply add this to my HTML (just an example from the github):
Go to element
<div id="element">
You will scroll to me
</div>

Hide or disable drop down list menu buttons. jQuery of JavaScript.

I have a dynamically created 3 options list which are attached at the end of a table row. I want to hide or disable Edit and Copy options if certain conditions are not met when page loads. How can i do this using either jQuery of JavaScript.
<div class="btn-group ewButtonGroup open">
<button class="dropdown-toggle btn btn-small" data-toggle="dropdown" href="#">Options <b class="caret"></b></button>
<ul class="dropdown-menu ewMenu">
<li><a class="ewRowLink ewView" data-caption="View" href="teamsview.php?showdetail=&TeamID=1">View</a></li>
<li><a class="ewRowLink ewEdit" data-caption="Edit" href="teamsedit.php?TeamID=1">Edit</a></li>
<li><a class="ewRowLink ewCopy" data-caption="Copy" href="teamsadd.php?TeamID=1">Copy</a>
</li>
</ul>
</div>
I have tried the following code which deosnt work.
<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink ewView span').text();
if ( Week_Check > 10) {
$('.ewRowLink ewView').hide();
}
});
</script>

You have a bad jQuery selector. If you want to hide an element having both of those classes you want to go this way:
$('.ewRowLink.ewView').hide();
By using $('.ewRowLink ewView').hide(); you basically state: hide all ewView (?) elements that are inside other elements having ewRowLink class.

You can use .off() to unbind the event:
$('.ewEdit, .ewCopy').off('click');
or if you want to hide:
$('.ewEdit, .ewCopy').hide();
Yet you need to mention on what condition you want to do this.

<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink, #ewView').find('span').html();
if ( Week_Check > 10) {
$('.ewRowLink, .ewView').hide();
}
});
</script>

Creating a bootstrap popover on click of a button with dynamic content and dismiss when click again

I have a page where there is a jquery grid and a link with and icon. I need to show a popover and show a form inside the popover. But the popover should close when the user clicks on another link (another popover should appear) or anywhere else on the page except the popover.
The current code I have written does not work.
Current code:
HTML Code for link (This div is a column in the grid and rowid will be different for each row):
<div rowid="5" class="action-buttons">
<a href="javascript:void(0);" class="blue editRow">
<i class="icon-pencil bigger-130"></i>
</a>
<a href="javascript:void(0);" class="green markComplete">
<i class="icon-check bigger-130"></i>
</a>
</div>
Javascript Code:
$('#grid-table').on('click','.editRow',function(e){
$(this).popover({
html: true,
title: 'Popover Title<a class="close" href="#">×</a>',
content: '<a>This one works fine!!</a>' //Content can change based on rowId
});
$(this).popover('show');
e.stopPropagation();
$('body').click(function (e) {
if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
$(this).popover('hide');
}
});
});

You should write the following code outside of .editRow click event:
$('body').click(function (e) {
if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
$(this).popover('hide');
}
});

I'm trying to implement a click event on a bootstrap dropdown menu

Hi I have a bootstrap dropdown menu that is auto filled from a database. I am trying to get an event to happen when I click on one of the items in the menu. I have tried
$("body").on("click", ".ddBtnClick", function(event) {
console.log("Is it working? Yes!!");
});
with ".ddBtnClick" being a class assigned to each of the items in the list. but nothing happened.
Here is the code to populate the list from a database.
$.getJSON("http://jeremiah.abrahamott.com/DadsCarsObjects.txt", function(data){
$.each(data.aaData, function(i, option){
$("#dropdownfill").append($('<li/>').append($('<a/>').attr("id", option.Year).attr("href", "#").attr("tabindex", "-1").addClass("ddBntClick").text(option.Make)))
});
});
Here is the html for the dropdown.
<div class="row" style="margin-left:50px;">
<div class="span3">
<div class="btn-group">
<a class="btn dropdown-toggle" data- toggle="dropdown" href="#">Make
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" id="dropdownfill">
</ul>
</div>
</div>
</div>

Issue is with your className. You are registering the delegated event handler for ddBtnClick but actual class name is ddBntClick.
$("body").on("click", ".ddBtnClick", function(event) {
console.log("Is it working? Yes!!");
});
and
.addClass("ddBntClick");
Change the class name during construction or change in your event delegation.
$(function()
{
$("body").on("click", ".ddBntClick", function(event) {
console.log("Is it working? Yes!!");
});
});

Have you tried wrapping your Javascript in the document.ready event?
$(function()
{
$("body").on("click", ".ddBtnClick", function(event) {
console.log("Is it working? Yes!!");
});
});
See the jQuery .ready() documentation for more information and examples.
Also, you should register the click event on the actual button and use .click() instead of .on():
$(function()
{
$(".ddBtnClick").click(function(event) {
console.log("Is it working? Yes!!");
});
});
Also, you have a typo:
.addClass("ddBntClick")
Should be:
.addClass("ddBtnClick")