Question

This is what I have and it works:

$(function(){
$('.slide-out-div').tabSlideOut({
        tabHandle: '.handle',                     //class of the element that will become your tab
        pathToTabImage: 'http://mhmiisdev2/images/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
        imageHeight: '122px',                     //height of tab image           //Optionally can be set using css
        imageWidth: '40px',                       //width of tab image            //Optionally can be set using css
        tabLocation: 'right',                      //side of screen where tab lives, top, right, bottom, or left
        speed: 300,                               //speed of animation
        action: 'click',                          //options: 'click' or 'hover', action to trigger animation
        topPos: '200px',                          //position from the top/ use if tabLocation is left or right
        leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
        fixedPosition: true                      //options: true makes it stick(fixed position) on scroll
    });
});

This is what I want and it doesnt work when I change from one controller to another controller. NOTICE THE IMAGE PATH IS NOT ABSOLUTE

$(function(){
    $('.slide-out-div').tabSlideOut({
        tabHandle: '.handle',                     //class of the element that will become your tab
        pathToTabImage: '/images/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
        imageHeight: '122px',                     //height of tab image           //Optionally can be set using css
        imageWidth: '40px',                       //width of tab image            //Optionally can be set using css
        tabLocation: 'right',                      //side of screen where tab lives, top, right, bottom, or left
        speed: 300,                               //speed of animation
        action: 'click',                          //options: 'click' or 'hover', action to trigger animation
        topPos: '200px',                          //position from the top/ use if tabLocation is left or right
        leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
        fixedPosition: true                      //options: true makes it stick(fixed position) on scroll
    });
});

the html for completeness….

<div class="slide-out-div">
    <a class="handle" href="http://link-for-non-js-users.html">Content</a>
    <h3>Medical Variance Reports</h3>
    <div>
        <ul>
            <li><a href="http://mhmssrs2/Reports/Pages/Report.aspx?" target="_blank">Individual Medicines</a></li>
        </ul>
    </div>
</div>

I suspect somehow pathToTabImage: /images/contact_tab.gif' loses its context when browsing throught controllers. Help me understand…

Answer 1

I suspect somehow pathToTabImage: /images/contact_tab.gif’ loses it
context when browsing throught controllers.

Oh yes, you are correct. Always use url helpers when dealing with urls in ASP.NET MVC:

pathToTabImage: '@Url.Content("~/images/contact_tab.gif")'

Never hardcode urls as you did in your code. This will ensure that your application will work when you deploy it in IIS under a virtual directory.