Solved

ASP.NET MVC 4 Jquery Slide View

Posted on 2016-07-25
3
171 Views
Last Modified: 2016-07-27
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
0
Comment
Question by:Jeff Darling
  • 2
3 Comments
 
LVL 8

Accepted Solution

by:
Prakash Samariya earned 500 total points
ID: 41729432
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
 
LVL 12

Author Comment

by:Jeff Darling
ID: 41729522
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
 
LVL 12

Author Comment

by:Jeff Darling
ID: 41731889
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

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Loop not working 29 47
Name space syntax error 12 40
Angular JS Route 3 47
jquery conditionally populate list boxes 2 21
This article discusses how to create an extensible mechanism for linked drop downs.
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now