How to scroll a container or element into view using jQuery javascript in your html.

I had a simple need. This functionality expands on the way I was bringing a Kendo Grid detail template into view on selection. I wanted a better look feel so I dug a little deeper.

I adapted this function to work on any container or element. I am using this in a custom table that when click make another row visible. I wanted the whole row to be displayed if possible, but only scroll if I needed to. This code will scroll only if needed, load the container to appear at least at the bottom and if the container is too large, drags it to the top.

Super easy to use and great look and feel.

     function scrollContainerIntoViewIfNeeded(container) {

                var docViewTop = $(window).scrollTop();
                var docViewBottom = docViewTop + $(window).height();

                var elemTop = $(container).offset().top;
                var elemBottom = elemTop + $(container).height();

                var isScrolled = ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));

                if (!isScrolled) {
                    if ($(container).height() > $(window).height()) { //then just bring to top of the container
                        $(window).scrollTop(elemTop)
                    } else { //try and and bring bottom of container to bottom of screen
                        $(window).scrollTop(elemTop -  ($(window).height() - $(container).height()));
                    }

                }
        }

 

usage.

scrollContainerIntoViewIfNeeded($("#myContainer"));

Happy coding.

How to animate a slide from the right with the Jquery show command

I didn’t see this in the documentation, but I’m sure its there somewhere. Here is an easy way to slide in a container/div/etc from the right.

$("#myActionsAuditUnitContainer").show({ effect: "slide",direction:"right", duration: 900 });

Use the direction option. Nice and easy.

Happy Coding!

How to add complex headers to a Kendo grid using simple jQuery javascript

I was trolling through the horrible documentation provided by Telerik for the kendo grid. I needed to create a complex header. Basically, a two row header so that I could group columns in a visually meaningful way.

simple example:

I spent far too much time reading how it couldn’t be done. A light bulb finally hit me, this is html. Yeah, flexibility abounds if you can be clever. I simply opened up the old browser developer tool and looked at the generated html for the grid.I then realized, this is a simple table, why not just inject another table row.

So, here is the easy way to add another row to your kendo grid and make a nice complex header. You can use this technique to go to town on adding additional features to your grid as well.

//create grid.

function BuildMyActionsList(tasks) {
            var list = $("#tasksContainer");
            list.empty();

            list.kendoGrid(
                {
                    dataSource: {
                        data: tasks,
                        schema: {
                            model: {
                                id: "Id",
                                fields: {
                                    Name: { type: "string" },                                    
                                    LessThanEGAs: { type: "number" },
                                    GreaterThanEGAs: { type: "number" },
                                    LessThanRisks: { type: "number" },
                                    GreaterThanRisks: { type: "number" },
                                    LessThanCNs: { type: "number" },
                                    GreaterThanCNs: { type: "number" },                                    
                                    ReportSignDate: { type: "date" }
                                }
                            }
                        },
                        //     pageSize: 20
                    },
                    dataBound: addExtraStylingToTasksGrid,
                    filterable: true,
                    scrollable: true,
                    sortable: true,
                    columns: [
                        {
                            field: "Name", title: "Engagement", width: "175px",
                            filterable: {
                                extra: false,
                                operators: {
                                    strings: {
                                        startswith: "Starts with",
                                        eq: "Is equal to",
                                        neq: "Is not equal to"
                                    }
                                }
                            }
                        },                        
                        {
                            field: "LessThanEGAs", title: "EGA's", width: "80px"
                        },
                        {
                            field: "GreaterThanEGAs", title: "CN's", width: "80px"
                        },
                        {
                            field: "LessThanRisks", title: "Risk's", width: "80px"
                        },
                        {
                            field: "GreaterThanRisks", title: "EGA's", width: "80px"
                        },
                        {
                            field: "LessThanCNs", title: "CN's", width: "80px"
                        },
                        {
                            field: "GreaterThanCNs", title: "Risk's", width: "80px"
                        },
                        {
                            field: "ReportSignDate", title: "Report Signing", width: "125px", filterable: false                            
                        }
                    ]
                });

            list.find("thead").first().prepend("<tr><th></th><th class='lessThanDaysGrouping' colspan='3'>&lt;= 2 Days</th><th  class='greaterThanDaysGrouping' colspan='3'>&gt; 7 Days</th><th></th></tr>");

        }

Notice , the line at the end. This is where we search the table for the header and then prepend the row. Just make sure your new row definition aligns with the same column structure as your table. If you need help with this, search on html tables on google.

Line of code that does the magic:

  list.find("thead").first().prepend("<tr><th></th><th class='lessThanDaysGrouping' colspan='3'>&lt;= 2 Days</th><th  class='greaterThanDaysGrouping' colspan='3'>&gt; 7 Days</th><th></th></tr>");

 

Happy Coding!

 

Click event bug with the iPad when using jQuery

I am writing a web application that uses a kendo grid with a detail pane. I hooked up a click event on a table in the detail pane to navigate to another page. It worked beautifully on the desktop. I tested on the iPad, and when you clicked a row, it would immediately fire off the click event and navigate away. WTF.

This drove me nuts. I found a person that also had a click issue posting about their oddity. Slightly different for them, but the fix is the one and the same.

It turns out that on the iPad, you can bind to the touchevent event instead of the click event and the problem goes away. It also takes out the 300ms delay some complain about.

Implementation is rather easy. Instead of using .click(function….) use bind.

Put this at the top of your script section.

  var ua = navigator.userAgent,
            clickEventBindingName = (ua.match(/iPad/i)) ? "touchstart" : "click";//stupid ipad workaround

Now, in your code, you simply using this to capture the events.

  $("#YOURELEMENT").bind(clickEventBindingName,
                function () {
                    doStuff();
                }
                );

Problem solved.

 

Happy Coding.

 

How to do a smooth scroll to an element/div with jquery

I was looking for a neat way to load dynamic data and then scroll the user to it. I wanted it to look smooth as well. Quick jumps make it look too harsh, like a page refresh.

Here is a simply function you can use. Just pass an element to it, jquery wrapped.

function…..

[javascript]
     function scrollToElement(ele) {
            var position = ele.position();
            $('html, body').stop().animate({
                scrollTop: position.top
            }, 500);
        }
[/javascript]

usage.

<div id=’foo’/>

You want to scroll to foo.

scrollToElement($(‘#foo’));

that easy.

Happy Coding!