Showing posts with the label Jquery

Bootstrap3 - Radio Nested/Collapsible

Last year I create a login page which I'm very happy to say I built it just how I wanted it. A rare thing if you've ever had to deal with management. Since the page only existed within sharepoint I want to keep things simple. So I went with jquery 2.x and bootstrap 3.3.7. Oldies But Goldies; so a few things I didn't want to create a lot of jquery code. So I had to really use the bootstrap collapsible component as much as I could without breaking it.

Bootstrap PixKrh7Su5Bootstrap Fdjc8kQiER
Disable collapse for link in a data-toggle element
You need to add a class for those elements that you don't want to fire the collapse event and then stop the event propagation via javascript. So... here is the correct answer. <divclass="panel panel-default"><divclass="panel-heading"><divclass="panel-title"data-toggle="collapse"href=

Custom Login Validation

One of the many behaviors that I was asked recently to create was to allowing hide/show of the password and warn users that the locked character key is active. Since this solution could get complex and I just wanted to create a quick/simple demo and because of that I'm going to pick jquery. I could late come back and do it in another library but I already have a few ideas what I want to do.

input - Is it standard practice to indicate on the form that Caps Lock is on? - User Experience Stack Exchangehtml5 - What's the difference between HTML 'hidden' and 'aria-hidden' attributes? - Stack Overflow

Edit fiddle - JSFiddleBetter Passwords #3: Caps-lock Warnings — SitePointCode Bins : Password masking in jQuery

Jquery Cheatsheet

Time to time I still use jquery and honestly don't have too many complaints about using jquery over more modern frameworks. Either way keep coming back to this page for reminders or small bugs in my code that I forget to add. I think the best approach for anyone is to create plugins for their needs and just keep expending around that.
Javascript - Event orderlightbox for images, videos, YouTube, iframes, ajaxdeferred.always() | jQuery API Documentation.trigger() | jQuery API DocumentationjQuery advantages/differences in .trigger() vs .click() - Stack OverflowjQuery BlockUI PluginHow to detect pressing enter on keyboard using jquery? - Stack Overflowjquery - Last element in .each() set - Stack OverflowjQuery event.preventDefault() not working in Firefox (JSFiddle included)jquery - Checking to see if AJAX response is empty and other problemsjavascript - jQuery's $(form).submit() not firing for IE only (MVC3 app)javascript - How can I refresh a page with jQuery?…

UI Design for Processing Modals

Dialogs, Light boxes, and Modals whatever you call them are a common interface used in websites. When I started out I constantly had to write code to handle multiple situations. After writing a few I started to list a few behaviors I think should happen in/after a modal close. Without going to deep in an explanation I really just wanted to come up with a good way to include offline mode in my applications.
Rules Not all of them but just some examples, the image is a better example. Every action must give imitate feedback to the user (results can be async). I.E. "Buy" will convert to "Processing" Information should be logged and stored for users to retrieve it. Applications Types of applications these I thought of. Ecommerce quick way to buy Settings in a Dashboard Post back or User session stored variables. Social Media Log ins When attaching or connecting to main site account. Pretty much any modal that modifies back-end data.

My Career at Coriell Institute and Personal Achievements

The time has come where I need a change in my career and sadly that requires me to leave my current position at Coriell Institute. So just like what I did way back in 2013 with Northern Safety, I thought I would wrap things up in an article and look back on my achievements. 
Achievements (Order of Completion)
The ones with asterisks are ones I built in groups. 
Atlas Project - Storage Module -Provided an interface to store unique data sets in multi-forms.Coriell Bio-Repository Catalog* Atlas Project - Manager Module - Provided managers to control other user to access data.Blits Project - Modules  Issues & Repairs* - Reported equipment  that were broken or had problems.Inspections* - Collected equipment w/ schedules for inspections. Maintenance - Collected equipment  for regular maintenance and setup schedules. Dashboard* - Graphical dashboard on data provided from other modules.My Goals and Plans While attending Coriell, I had a lot of plans to bring the Front-end at Coriell on t…

The New Way to Create Jquery Plugins Using Grunt & QUnit

This is my take on the Jquery basic documentation for creating a plugin. There are a lot of new ways to create a jquery plugin and even more frameworks to replace jquery altogether. However I found myself at that point where the scope of the project was limited in a framework but had large enough components that could separated into plugins. I've removed all the business logic and now just want to create a very scalable plugin.

Example Project & Setup
With my Jquery Plugin, I'm using Nodejs and continuous integration to do the heavy lifting. All I'm doing is taking a selected element from the caller and determine if it already has a table. Then if it does attach data to provided url's from the developer. Simple enough but there more to it, I just simplified the explanation incase people want to skip over this part and others who are interested can just read more about the plugin on github.

Tools & Systems
Travis-ciNodejs packagesgrunt/grunt-clijshintqunitJs …

AngularJS: Select All Checkboxes

There were very few examples I found on this idea however most of them were not complete or depended on libraries were not included in my projects. I could simply include them and call it a day but that would be too easy. So I took the best example I could find and rewrote it in just AngularJS.

$scope.items = [ {item:1, flag: true}, {item:2, flag: true}, {item:3, flag: true }]; $scope.allNeedsClicked=function () { var newValue =!$scope.allNeedsMet(); for (var i =0; i <$scope.items.length; i++) { $scope.items[i].flag = newValue; } }; $scope.allNeedsMet=function () { var needsMet = []; for (var i =0; i <$scope.items.length; i++) { if ($scope.items[i].flag ===true) needsMet.push(true); } console.log($scope.items.length, needsMet.length); return (needsMet.length===$scope.items.length); };


I should probably put this in a direct…

HTML5 Game Asset Manager and Loading Screen

Its important initialize a game if and when it is ready. I probably spent probably about two weeks looking for examples of this idea.One thing I was hope to get from this process was a way accurately update the loading and give the user a percent of when the game has loaded.For accurately updated the loading bar the best I have come up with is to have counter based on the number of assets and after each assets is loaded update the bar. The following setup is for the start button to change when the assets are loaded.

    Follow code is taken directly from the example on HTML5 Rocks but I collected it into a single script and it proved to be very useful. I was working on some logic to queue not only images but sounds because more often than not audio files are larger than image files. Keep in mind though there is not a universal format that is supported like images.


Bootstrap Typeahead/Autocomplete

This UI feature goes by many names and whatever you call it is currently no included in the bootstrap project as of 3.1.1 but that might change in later versions. No all hope is lost, actually had found multiple alternatives to import this feature with no dependencies! My biggest concern I had at the start of my research for this feature was that I would have to include Jquery UI which as Autocomplete. Not that there is anything wrong with Jquery UI but I try to avoid adding too many third party styles into my applications. I also try to leverage the css files that I do have as much as possible. So below is two solutions that I am very comfortable with using and strongly suggest.

Typeahead/Autocomplete Projects - Another approach which I have used.

jquery - Where is the typeahead javascript module in bootstrap 3 RC 1? - Stack Overflow
Install typeahead in Bootstrap 3, fix css overlay bug…

Bootstrap Dropdown-Checklist

When it comes to web development there is a lot of ways achieve what you want but more importantly it is critical to know what to look for if you have no clue how to achieve it. Over the last five years I have become very efficient at finding examples to achieve my work and to push that even further what I have done is put those code snippets in my back pocket for other projects. Some codes I come across I modify for my own use, others I can simply plug n' play but having that code off hand is quicker than writing it. So what I'm leading up to is an example of that concept. I had a task recently to make a dropdown styled in bootstrap, where inside the dropdown was a series of checkboxes. Now by default the behavior for bootstrap would close dropdown immediately after I clicked. What I need is to keep the dropdown open until it is blurred. What I found with a quick search was what I needed but still once I had the code, and rather than just plugging' it in. What I did …

Asp.Net MVC: Error Handling Ajax Partial Views

During the second year of my job as a Application Developer I was ask to design some type of error handler to properly display partial views that were pulled in via ajax. What was currently happening was that partial errors were being displayed as full page error and causing other issues when Jquery libraries being loaded in twice.
Questions Could you create a partial view and full view error page for display appropriately for both? So in the case where it was a partial view error the error page would simply display inside the partial.Is there a way to determine by ActionResult type the error handler needed?My Solution ///This is an attribute for PartialViews. It handles any errors and override the basecontroller's OnExpection method. public class PartialErrorAttribute : HandleErrorAttribute { ///Similar setup to the base controller OnExpection method, but has a special partial view error page called _ErrorPartial".<summary> ///This OnException wi…

Updating Jquery Nuget Package to 1.11

I feel a lot of developers out there are unaware of the fact that they can update Jquery without any work, and since I did the digging already I wanted to get other developers excited about Jquery 1.11. If  currently you try to update the Jquery Nuget package via the package manager currently is will only display Jquery 2.x.x which may break some javascript instead use the simply use the command console to update. So if your using Jquery's Nuget package with your MVC application it's easy to update from 1.10 to 1.11. There is no breaking changes from what I have read with the update and if you're trying to support IE8 you should be in the clear as well.

PM> Install-Package jQuery -Version 1.11.0
Also just as a personal note I find the warning message that appears for jquery 1.10 to be extremely annoying and I feel its my mission to help out others by removing it from the internet.

Can I keep Nuget on the jQuery 1.9.x/1.x path (instead of upgrading to …

Setting up QunitJs for MVC Debugging

Using QUnit is important for me on some of my projects that are more front-end driven. So developing, debugging and testing all need to happen in javascript but without being in the final production. One thing I do not want to do is include the QunitJs in my bundles and would serve no purpose because the bundling and minifying does not happen for debugging. Instead what I did was create an extension method and return a bool, like the one shown in the resources.
//Location ../Helpers/IsDebuggingpublic static bool IsDebugging(this HtmlHelper helper) { #if DEBUG return true; #else return false; #endif } //Location ../Views/Shared/_Layout.cshtml//These two files are not apart of any bundled packages.@if(Html.IsReleaseBuild()) { @Scripts.Render("~/Scripts/qunit-1.14.0.js") @Styles.Render("~/Content/qunit-1.14.0.css") }Side Notes
The intellisense will do some weird things with the coloring for code inside the else statement but it will have …

Research on JQuery Editable Table Plugins

My goal here was to find or create a jquery editable table that I could custom to my needs with a little or no work and helpfully be easy to maintain. I also wanted to make sure that what I chose would not impact how I implemented my back-end. The following is the basic a starting point of what I am working with but not limited to...
<table class="table table-condensed"> <thead class="storage"></thead> <tbody></tbody> </table> From this point I would pull my table data in by either a model binder or simply create the table via ajax and appending it there. Still is without looking at how a plugin is design or needs to be setup so I might have to look at that before I begin implementing which I got with. I started my research by listing what I was looking for and what I thought I might have to customize.

My Requirements
 Input check for duplicates.character input limiting (no more than 12 chars).Highlighting if a in…

Jquery Ajax with BlockUI Plugin

I love making Ajax calls and if a user is interacting with a page and doesn't need to refresh or be redirected to another page than an Ajax call is the best thing to use in my opinion. With my best efforts I try to give my users an experience where every action has a result. This means everything even if the reaction is simple or does nothing more than alert the user. I like to let the user know that all is fine and meant to be the way it is. If an error happens they should be alerted as well. Which I should also try to prevent and recover from, but what about with an ajax call that takes a while to process? Well I have been using a really cool process with my code where I can display to my users that the process is going through. With "Please wait..." message users can see it is order is being processed and controls will returned to them when it has completed.
    You can see an example here and to go a step further then this I thought this would be a cool place to…

Penguins Rising: Eliminate render-blocking JavaScript

For the most part I have already done a lot of the work for this and this has always been something in my practice to do. In the past what I have done is render all javascripts at the bottom of the page and all styles at the top inside the header. However with this application and since so much of my code is customized and mineralized, I believe I have a small issue with the Jquery taking up more time than the css to load.

(function () { var script = document.createElement('script'); script.setAttribute("type", "text/javascript"); script.setAttribute("src", "js/jquery-2.0.3.min.js"); document.getElementsByTagName("head")[0].appendChild(script); Resources
Remove Render-Blocking JavaScripts - PageSpeed Insights — Google Developers
HTML script async Attribute - This might have also worked but look at later. javascript - load jquery after the page is fully loaded - Stack Overflow Goog…

HTML Select Placeholder

Adding a selected and disabled attribute works as well and doesn't require any javascript, however refreshing the page does not reset the value. Doing a hard refresh does reset the value (for firefox). However there seems to be a placeholder attribute in draft (as of november 2014). "When there is no default option, a placeholder can be used instead". However in the example the placeholder value is still selectable after a choice has been made. This may not be what you want, so combining the two attribute and the javascript below guaranty the behavior I'm looking for. I could even support older browser with a little work.

    The Purpose of this article is to make a placeholder in select that should help prevents bad selections with and make it easier to validate if no selection is made. In this article I will assume you have Jquery and the Jquery Validation plugin installed on your web application and similar html code displayed like the the following...

My First Windows 8 App publishing Experience

Introduction     I have a lot of experience from web development so I decided to take a blackjack game that I created in JavaScript and just edit it enough to be published on the window 8 app store. I will include a lot of my experiences but also my opinion. It took me about a month to make this game, the content and the functions within the game. The styling I edited later in the game, but in the beginning it was very dull for the most part and not very metro style looking. Don't have the original image of what the game looked like but just take my word that it needed improving. Here is how it looks now...
...As the picture explains and what I have not told yet is that my game is called "BlackJack the King of Cards". If you would like to download the game you can find it in the market under free card games.

Windows 8 App     Ok, so lets say you have an window's 8 app ready to go. You go to the Store tab top of your visual studio window and from there you create a p…