Web Design Wall

Friday, June 23, 2017

GlobalConfiguration does not contain a definition for Configure

Open the Package Manager Console for the Project with the error. Type in Install-Package Microsoft.AspNet.WebApi.WebHost and hit Enter. Rebuild your Project.

Delaying a jquery script until everything else has loaded

Multiple $(document).ready() will fire in order top down on the page. The last $(document).ready()will fire last on the page. Inside the last $(document).ready(), you can trigger a new custom event to fire after all the others..

Wrap your code in an event handler for the new custom event.

<html>
<head>
<script>
$(document).on("my-event-afterLastDocumentReady", function () {
// Fires LAST
});
$(document).ready(function() {
// Fires FIRST
});
$(document).ready(function() {
// Fires SECOND
});
$(document).ready(function() {
// Fires THIRD
});
</script>
<body>
... other code, scripts, etc....
</body>
</html>

<script>
$(document).ready(function() {
// Fires FOURTH
// This event will fire after all the other $(document).ready() functions have completed.
// Usefull when your script is at the top of the page, but you need it run last
$(document).trigger("my-event-afterLastDocumentReady");
});
</script>

Thursday, June 25, 2015

Kendo UI ListView Infinite Scroll for Non-Mobile ListView

The Kendo UI non-mobile ListView does not come with infinite scrolling. However, I've managed to invent a hack which makes it work for cases where the ListView items are read-only. This solution uses a ListView to fetch new pages of data while a div above it holds all previous pages of data.

The Kendo UI non-mobile ListView does not come with infinite scrolling. However, I've managed to invent a hack which makes it work for cases where the ListView items are read-only.

This solution uses a ListView to fetch new pages of data while a div above it holds all previous pages of data.

    <div id="noResults"></div>
    <div id="listPrev"></div> 
    <div id="list"></div> 
    <div id="loading">

    <script id="myTemplate" type="text/x-kendo-tmpl">
        
    </script>

    <script>

    var viewModel = kendo.observable({
        MyObjects: [],
        PreviousScrollPosition: 0,
        FetchMore: true
    });

    $(document).ready(function () {
        $("#list").kendoListView({
            template: kendo.template($("#myTemplate").html()),
            autoBind: true,
            dataSource: getDataSource(),

            dataBound: function() {
                viewModel.FetchMore = true;
            }
        });
        kendo.bind(document.body, viewModel);
    });

    function getDataSource()
    {
        return new kendo.data.DataSource({
            data: viewModel.Interactions,
            pageSize: viewModel.MyObjects,
            schema: {}
            }
        });
    }

    // Handle scroll Event
    $(window).scroll(function() {
        var scrolled = Math.max(Math.max(document.body.scrollTop, (window.pageYOffset - 1)), 0);
        // Anytime user scrolls to the bottom
        if (isScrolledToBottom(viewModel.ScrollBottomPadding) === true) {
            // Get data for infinite scroll
            infiniteScrollDown();
        }
        viewModel.PreviousScrollPosition = scrolled;
    });

    function isScrolledToBottom(buffer) {
            var pageHeight = document.body.scrollHeight;
            // NOTE: IE and the other browsers handle scrollTop and pageYOffset differently
            var pagePosition = document.body.offsetHeight + Math.max(document.body.scrollTop, (window.pageYOffset - 1));
            buffer = buffer || 0;
            return pagePosition >= (pageHeight - buffer);
    }

    function infiniteScrollDown() {
        console.log("infiniteScrollDown()");
        viewModel.FetchMore = false;
        // For endless scrolling: Append contents of ListView to div above the ListView.
        $("#listPrev").append($("#list").html());
        // Add new page of data to the bottom of the Infinite scroll.
        var lv = $("#list").data("kendoListView").dataSource;
        lv.page(lv.page() +1);
    }

    </script>

Wednesday, June 24, 2015

Pure CSS Cross-Browser Multi-Line Text with Ellipsis

There are two common ways to do Multi-Line text with ellipsis. The first is to use CSS that only works on webkit browsers. The second is to use a javascript plugin. Below is a third solution that uses pure CSS and works for all browsers.

Lorem ipsum dolor sit amet, consectetur eu in adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.

...

[div class="container"]
    [div class="text"]
        [[Text]]
    [/div]
    [div class="ellipsis"]...[/div]
[/div]

[style]
    body {
       margin: 20px;
    }
    .container{
        position: relative;
        background-color: #bbb;
        padding: 20px;
    }
    .text {
       overflow: hidden;
       /*text-overflow: ellipsis; Not needed */
       line-height: 16px;
       max-height: 48px; /* Multiples of line-height */
    }
    .ellipsis {
        position: absolute;
        bottom: 20px;
        right: 20px;
        height: 16px;
        width: 30px;
        background-color: inherit;
        padding-left: 8px;
    }
[/style]

The pure css solution works when the text overflows the available space. However, short text strings do not overflow the space and should not be given an ellipsis.

To solve the short text problem, Implement the javascript solution, below, as well:

[script]
    function getTextWidth(text, font) {
        var canvas = getTextWidth.canvas ||
            (getTextWidth.canvas = document.createElement("canvas"));
        var context = canvas.getContext("2d");
        context.font = font;
        var metrics = context.measureText(text);
        return metrics.width;
    };

    $(".container").each(function() {
        if (getTextWidth(
            $(this).find(".text").text(),
            $(this).find(".text").css("font")
            ) < ($(this).find(".text").width() * 3)) { // Multiplier is number of lines to show
                $(this).find(".ellipsis").remove();
            }
    });
[/script]

Monday, September 15, 2014

Kendo UI - Hide Loading Spinner and Fade Animation

Wednesday, September 3, 2014

Twitter and Facebook Links to Share URLs from an email

Twitter Share This Link:
Text or Image tag
Replace [[Twitter URL]] with the following:
http://www.twitter.com/share?url=[[My URL]]

Facebook Share This Link:
Text or Image tag
Replace [[Facebook URL]] with the following:
http://www.facebook.com/share.php?u=[[My URL]]

Replace [[My URL]] with the URL you wish to share.
Make sure you Character Encode your [[My URL]] text:
http://meyerweb.com/eric/tools/dencoder/

Monday, September 1, 2014

Setup an MVC 5 Razor Site with WebAPI in 3 Minutes

The purpose of this tutorial is to provide a quick walkthrough on how to setup a single project which will house both an MVC 5 site and a JSON WebAPI. For more information on this scaffolding, look for tutorials on One ASP.NET.

Using Visual Studio 2013:

Select: New Project --> Visual C# --> Web --> ASP.NET MVC 5 Web Application

Give your Project a Friendly Name.
Browse to a good location for your Local Workspace.
Click Create.

Your MVC 5 application will scaffold and load into Visual Studio.
Click RUN.

Your project should compile and you should see a Sample Website in your browser.
Click STOP.

Right Click on your Project in Solution Explorer.
Select: Add --> Folder.
Name the folder Controllers.API (this important step will create a namespace container for your API controllers).
Right-click the Controllers.API folder.
Select: Add --> New Scaffolded Item.
Select: Common --> MVC --> WebAPI --> Web API 2 Controller......
(NOTE: If you do not have the WebAPI option, you will need to install a NuGet package for Microsoft ASP.NET Web API 2.2)
Click ADD.

Open App_Start/WebApiConfig.cs.
Paste the following into the Register() method:

//Use JSON instead of XML
var json = config.Formatters.JsonFormatter;
json.SerializerSettings.PreserveReferencesHandling = Newtonsoft.Json.PreserveReferencesHandling.Objects;
config.Formatters.Remove(config.Formatters.XmlFormatter);
json.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;

***Please refer to other tutorials on how to build out an MVC 5 app, WebAPI, Entity Framework, or Repository Layer.