We Keep Coding

Is it possible to suppress Durandal navigation?

My web application makes use of bootstrap, knockout and durandal. Below is a snippet of the rendered html, that defines a row with five columns. Irrelevant details are left out.
<div class="row list-row" data-bind="click: function(vm, event) { $(event.currentTarget).trigger('durandal-navigation'); }">
<div class="col-xs-2">
...
</div>
<div class="col-xs-2">
...
</div>
<div class="col-xs-6">
...
</div>
<div class="col-xs-1">
...
</div>
<div class="col-xs-1">
<button class="btn btn-default btn-xs deletebutton" data-bind="click: DeleteClicked">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
Now when the mouse hovers over any of those divs, the css in place lits up the entire row which is how it is supposed to be, and a click navigates to the desired screen with durandal. The latter, however, should not be the case when the user clicks the button in the last column: only the DeleteClicked function should fire.
Is there any way to suppress the navigation here?

I've found a quite simple way around it by using sessionStorage: DeleteClicked now contains the line
sessionStorage.setItem("cancelNavigation", true);
The part of the application that actually implements the navigation:
$(document.body).on('durandal-navigation', function (event) { ... }
...performs a check on the status of "cancelNavigation" before calling router.navigate(...); and in addition of course removes the cancelNavigation key from sessionStorage. Works perfectly!

Using a loading spinner in a Dynamics 365 embedded iframe web resource

I am trying to use a loading spinner in an embedded iframe in a Dynamics 365 application. I am using this library: https://loading.io/button/. I can see that the CSS loads properly, because it shows the spinning icon when had a class of running on the button/div element.
What I'm trying to do is add the "running" class to the button when it is clicked, so the user knows that an action is occurring and they should expect something to happen in the near future. However, when I have code that adds the "running" class to the button, it does not seem to work. Here's my code:
$("#retakeButton").on("click", function () {
$("#retakeButton").addClass('running');
\\\\\\ LOGIC GOES HERE \\\\\\
$("#retakeButton").removeClass('running');
});
And here is my HTML:
<div id="outerBorder" class="container embed-responsive ">
<div class="col-md-12" id="topbuttons">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<div type="button" id="retakeButton" class="btn btn-primary hovering ld-over">
<strong>Take Photo</strong>
<div class="ld ld-ring ld-spin-fast"></div>
</div>
</div>
</div>
</div>
<div id="carousel" class="slideshow-container"></div>
<br>
<div id="dots" style="text-align:center"></div>
</div>
What is strange is that if I open the console and select the iframe as the target, I can get it to show the in progress animation by running $("#retakeButton").addClass('running');. However, it doesn't seem to work in the javascript that is referenced by the HTML.

I just tested this, its working.
For clear visibility, I added a border for div, also commented out the removeClass for testing (it may be too fast to notice).
<div id="div_loader" class="btn btn-default ld-ext-top" style="border:solid; font-size:2em">
<div class="ld ld-ring ld-spin-fast"></div>
</div>
$("#div_loader").on("click", function () {
$("#div_loader").addClass('running');
//do some logic
//$("#retakeButton").removeClass('running');
});
One last thing. Problem could be by class hovering - you can remove & test your code.

Summernote error on Meteor and Semantic-ui

I used summernote package: summernote:summernote for my website and everything work well except the feature to insert image, videos and link won't work.
Example:
Click insert link button (image and videos are the same)
A popup appear to set the link.
Click anywhere on that popup, it disappeared.
Here are my code:
post_edit.html
<template name="postEdit">
<div class="ui segment">
<form class="ui form">
<h1 class="ui dividing header">Edit post</h1>
<div class="field">
<label>Title</label>
<input type="text" id="title" name="title" value="{{title}}">
</div>
<label>Content</label>
<div class="field" id="content" name="content">
{{{content}}}
</div>
<button type="submit" class="ui orange button"><i class="edit icon"></i> Edit</button>
<a class="negative ui button delete"><i class="remove icon"></i> Delete</a>
<a class="ui button" href="{{pathFor 'postPage'}}"><i class="arrow left icon"></i> Back</a>
</form>
</div>
post_edit.js
Template.postEdit.onRendered(function(){
$(document).ready(function() {
$('#content').summernote({
height: 400,
maxHeight:800,
minHeight:250,
});
});
});

I ran into this issue myself when adding autoform-summernote to my project that already uses semantic-ui. The problem is that there's a conflict between Bootstrap's and Semantic UI's $.modal() method. See these links for code references:
Summernote modal init
Bootstrap's modal definition
Semantic UI's modal definition
Summernote expects the modal method to be Bootstrap's, but instead calls Semantic UI's modal method. Because of the differences between the implementations of the modal methods, the modal closes right away when you click anywhere in the window.
Without some low-level hacks, these two packages will conflict since Semantic UI's is available globally in your project on any $('object'). If you're not using Semantic UI's modal method anywhere else in your site, you could disable it, which will fix it in this case. However, that's not a solution that works for me. Instead, I'm looking into a solution to remove summernote, or at least its dependency on Boostrap.
Edit 1/13/2016
I ended up replacing summernote with a different editor, https://atmospherejs.com/gildaspk/autoform-medium. It gives me the functionality I need and doesn't have conflicting dependencies.

Custom button with angular js

I am working on a phonegap. I have made a kind of "custom button", which is actually just a <div> with an ng-click attached to it.
However, I am encountering 2 problems:
How do I give the user a feedback on his touch event? Buttons have a sort of default wired up animation. How would I add a "highlight" animation on div touch?
ng-disabled doesn't seem to stop the user from activating the ng-click event wired up to the button. - Solved!
here is the code for a sample button:
<div class="app-button center" ng-click="contactEmployee('email')" ng-disabled="buttonDisabled">
<div class="absolute">
<p class="absolute app-button-title-text">title</p>
<div class="app-button-icon-container absolute">
<img src="img/envelope-icon.png" class="absolute app-button-icon">
</div>
</div>
</div>

modal not sliding from top

I implemented the bootstrap model in my website.....
the model is working fine but the model does not slide from top exactly like the actual bootstrap model....
How to fix it....
Actual model
http://jsfiddle.net/nJ6Mw/1/
model not sliding from top
http://jsfiddle.net/y88WX/embedded/result/
<div id="example" class="modal hide fade in" style="display: block;" aria-hidden="false">
<div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>You can add some text here.</p>
</div>
<div class="modal-footer"> Call to action
Close
</div>
</div>

You have got way too many resources conflicting in the fiddle that you're trying to get working, this fiddle works, so if you can put this code into the page that you're trying to load it into and it doesn't work, you know the problem isn't your bootstrap, also, please send a link to the page you're having problems with, please don't send a fiddle with many different resources attached.
You need to define options for the modal via javascript:
$(function() {
$('#event-modal').modal({
backdrop: true;
});
});
Placing all css and links/html from the site directly into fiddle is not easy for someone to jump into and debug for you.
http://jsfiddle.net/sfWBT/1/