ASP.NET MVC 4 Jquery Slide View

I had this question after viewing Transitions in mvc.

I was able to get some of the jQuery Slide to work, but it is not quite what I'm looking for

I have some parts of the view that render.  

Here is what I did:

  • Create a sample Intranet MVC 4 project with VS2012



ss1
  • Add PageScripts section to the about.cshtml

@section PageScripts{
    
    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-ui-1.8.24.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".makeitslide").show("slide", 1000);
            });
    </script>
}

Open in new window


  • Add DIV around the html in the about.cshtml

<div class="makeitslide">
(All page html in here)
</div>

Open in new window


  • Add RenderSection PageScripts to the _Layout.cshtml

@RenderSection("PageScripts",false)

Open in new window


  • Move jquery reference in _layout.cshtml

This line of code was generated at the bottom, I had to move it to the top so that it was available when the about.cshtml was called.

 @Scripts.Render("~/bundles/jquery")

Open in new window


Attached is a short swf video to demonstrate the about page slide in.  

The question is how to make everything slide in?  Notice that only part of the page content slides in.  The rest just renders after the initial item slides in.
2016-07-25_1414.swf
LVL 13
Jeff DarlingDeveloper AnalystAsked:
Who is Participating?
 
Prakash SamariyaConnect With a Mentor IT ProfessionalCommented:
I guess, you want to slide all the content pages, right? If yes then,

Put below code into _layout.cshtml in header section
 
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-ui-1.8.24.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".makeitslide").show("slide", 1000);
            });
    </script>

Open in new window

In body there is container div like
 <div class="container body-content"> 

Open in new window

add css class to container div like
<div class="container body-content makeitslide">

Open in new window

your content pages should be simple html code.

This will work!
1
 
Jeff DarlingDeveloper AnalystAuthor Commented:
That is one idea.  It would mean that all layouts would slide.  

I tried it, but now I'm having trouble getting the javascript to fire.  

_layout.cshtml


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/modernizr")
    @section PageScripts{
        <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-ui-1.8.24.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".makeitslide").show("slide", 1000);
                alert("fired!");
            });
        </script>
    }
</head>
<body>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
            </div>
            <div class="float-right">
                <section id="login">
                </section>
                <nav>
                    <ul id="menu">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div id="body">

        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix makeitslide">
            @RenderBody()
        </section>

    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>



</body>
</html>

Open in new window

0
 
Jeff DarlingDeveloper AnalystAuthor Commented:
I got this working, but, I had to remove @section PageScripts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-ui-1.8.24.js"></script>
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")

        <script type="text/javascript">
            $(document).ready(function () {
                $(".makeitslide").show("slide", 1000);
                //alert("hello");
            });
        </script>
</head>
<body>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
            </div>
            <div class="float-right">
                <section id="login">
                </section>
                <nav>
                    <ul id="menu">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div id="body">
     

        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix makeitslide">
            @RenderBody()
        </section>

    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>


    @RenderSection("Scripts", required: false) 
</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.