Programming Information and Tips

jQuery/JavaScript Tips

Scroll Page to top

 $('html, body').animate({ scrollTop: 0 }, 'slow');
    
    
  • Place within $(document).ready(function(){});
  • ('html, body') area can be elements or Ids
  • slow or fast switch
keywords:
jQuery, web, html

Adding Print Button to Page

 
    $(document).ready(function () { 
    $('#divButtons').prepend('Click me to print'); 
    $('.printLink').click(function()
        { window.print(); return false; }
        ); 
    }); 
        
    
  • Place within $(document).ready(function(){});
  • ('html, body') area can be elements or Ids
  • slow or fast switch
keywords:
jQuery, web, html

Super Easy Barebone Image Slideshow

Style - place in Style section

.fadein { position: relative; } 
.fadein img { position: 
            absolute; left: 0px; top:
            0; }


Jquery Script

$(function () { 
    $('.fadein img:gt(0)').hide();
    setInterval(function () 
        { $('.fadein :first-child')
            .fadeOut()
            .next('img')
            .fadeIn()
           .end()
           .appendTo('.fadein');
       }, 4000); 
}); 
    
HTML



  • Wrap Images within div with id of fadein

Open External Links in External Browser

 
    $('a').each(function () { 
        var a = new RegExp('/' + window.location.host + '/'); 
        if (!a.test(this.href)) { 
            $(this).click(function (event)
            { 
                event.preventDefault(); 
                event.stopPropagation(); 
                window.open(this.href, '_blank');
            }); 
            } 
        }); 
        
    
  • Place within $(document).ready(function(){});
  • Loads All External Link in separate window leaving current site open
  • Doesn't take user off current site
keywords:
jQuery, web, html

Useful Plugins for web applications

Date Picker - Jquery UI

  
        $("#DeliveryDate").datepicker({ 
        showAnim: '', 
        dateFormat: 'm/d/yy', 
        showOn: 'button', 
        buttonImageOnly: true, 
        buttonImage: '/Content/Images/calendar.gif', 
        buttonText: 'Select a date' 
        }); 
    
  • Uses Jquery UI js and css Files
  • If planning on using Gif for Calendar
  • Include Calendar gif base Calendar Gif base Calendar Gif base Calendar Gif in Content/Image Folder
keywords:
jQuery, plugins, datepicker

Date Picker - Datepicker Plugin

  $('#SimpleDatePicker').datepick({
        showTrigger: '#calImg' }); 
    
  • Uses Jquery.datepick.min.js and jquery.datepick.css
  • Since dates are used through out the application have reference within Layout Page
  • If planning on using Gif for Calendar
  • Include Calendar gif base Calendar Gif base Calendar Gif base Calendar Gif in Content/Image Folder
  • Include div on Master layout page to hold calendar gif
keywords:
jQuery, plugins, datepicker

Tabs - jQuery UI

   
<div id="tabs">
        <ul>
            <li><a href="#divProgrammingTips">jQuery/JavaScript Scripts</a></li>
            <li>< href="#divPlugins">Plugins</a></li>
        </ul>
        <div id='divProgrammingTips'>
        </div>
        <div id='divPlugins'>
        </div>
    </div>
    
        <script type="text/javascript">
        $(function () { 
        $("#tabs").tabs(); 
        });</script> 
    
  • Uses jquery-ui-1.8.16 and jquery-ui-1.8.16.css
  • Wrap anchor (a) with href=div that holds content list items with class (in sample name tabs)
  • Have Content Divs, with id same as anchor in tabs
keywords:
jQuery, plugins, jQuery Tabs

ASP MVC Tips and Tricks

Redirect jQuery Authorize Request

When making a request to a JSON service via jQuery that requires the User to be authenicated,
the result is the Login Page being returned and not a 401 Un-authorized
The following code handles this eventuality when placed in the
Application_EndRequest() Method of the Global.asax File
 
    protected void Application_EndRequest() { 
    var context = new HttpContextWrapper(Context); 
    // If we're an ajax request, and doing a 302,
    // then we actually need to do a 401 
        if (Context.Response.StatusCode == 302 
             && context.Request.IsAjaxRequest())
            {
                Context.Response.Clear(); 
                Context.Response.StatusCode = 401; 
            } 
        } 
    
    
  • Place within Global.asax
keywords:
jQuery, MVC, C#, 401 Redirect