Solved

Bootstrap Scrollspy not highlighting nav in MVC partialview

Posted on 2014-07-17
10
789 Views
Last Modified: 2014-07-29
Trying to get the latest Bootstrap version of Scrollspy working on a MVC partialview <div> container.
I have tried many variations from google searches but no one really address MVC partial views and if it is doable or not.
What I do not see working is when I scroll the div area my navbar does not show the highlighted current section.

My code...

<div id="container2">
    <div class="table" style="margin-left:0px;margin-right:0px; display:table;">
        <div class="row" style="margin-left:0px;margin-right:0px; display:table-row;">
            <div id="container" class="content" style="display:table-cell;width:50%;padding-right: 5px;">
                <nav id="side-nav" class="navbar navbar-default navbar-static" role="navigation" style="position:absolute;top:116px;left:405px;margin-bottom: 0px;min-height: 5px;"> @**@
                    <div class="container-fluid">
                        <ul id="snul" class="" style="list-style:none;">
                            <li style="margin-bottom:0px;" class="active"><a href="#one" style="padding: 12px 10px;">GENERAL</a></li>
                            <li style="margin-bottom:0px;"><a href="#two" style="padding: 12px 10px;">PRICING</a></li>
                            <li style="margin-bottom:0px;"><a href="#three" style="padding: 12px 10px;">SHIPPING</a></li>
                            <li style="margin-bottom:0px;"><a href="#four" style="padding: 12px 10px;">ADDITIONAL INFO</a></li>
                            <li style="margin-bottom:0px;"><a href="#five" style="padding: 12px 10px;">ADVANCED</a></li>
                            <li style="margin-bottom:0px;"><a href="#six" style="padding: 12px 10px;">PICTURES</a></li>
                            <li style="margin-bottom:0px;"><a href="#seven" style="padding: 12px 10px;">DESCRIPTION</a></li>
                            <li style="margin-bottom:0px;"><a href="#eight" style="padding: 12px 10px;">SPECIFICATIONS</a></li>
                            <li style="margin-bottom:0px;"><a href="#nine" style="padding: 12px 10px;">CATALOG SPECIFICATIONS</a></li>

                        </ul>
                    </div>
                </nav>
                <div id="myScrollspy" data-spy="scroll" data-target="#side-nav" data-offset="0" style="position:relative;overflow:auto;height:850px;">
                    <ul id="myNavx" class="list">
                        <li id="one">
                            <h4 class="h4h">GENERAL</h4>
                           
                        </li>
                        <li id="two">
                            <h4 class="h4h">
                                PRICING
                            </h4>
                           
                        </li>
                        <li id="three">
                            <h4 class="h4h">
                                SHIPPING
                            </h4>
                           
                        </li>
                        <li id="four">
                            <h4 class="h4h">
                                ADDITIONAL INFO
                            </h4>
                           
                        </li>
                        <li id="five">
                            <h4 class="h4h">
                                ADVANCED
                            </h4>
                            <div class="hdiv">
                                <div class="input-group" style="">
                                    <span class="input-group-addon">Rewrite Url</span>
                                    <textarea id="sku" rows="2" cols="20" style="" class="form-control">@ViewData("")    </textarea>
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon">Min. Qty</span>
                                    <textarea id="sku" rows="2" cols="20" style="" class="form-control">@ViewData("")    </textarea>
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon">Pre-Content Column</span>
                                    <textarea id="sku" rows="3" cols="20" style="" class="form-control">@ViewData("")    </textarea>
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon">Post-Content Column</span>
                                    <textarea id="sku" rows="3" cols="20" style="" class="form-control">@ViewData("")    </textarea>
                                </div>
                            </div>
                        </li>
                        <li id="six">
                            <h4 class="h4h">
                                PICTURES
                            </h4>
                          
                        </li>
                        <li id="seven">
                            <h4 class="h4h">
                                DESCRIPTION
                            </h4>
                          
                        </li>
                        <li id="eight">
                            <h4 class="h4h">
                                SPECIFICATIONS
                            </h4>
                         
                        </li>
                        <li id="nine">
                            <h4 class="h4h">
                                CATALOG SPECIFICATIONS
                            </h4>
                           
                        </li>
                    </ul>
                </div>
            </div>

           
        </div>
    </div>
</div>

Open in new window

CSS...
 
  #snul li.active,
    #snul li.active:hover,
    #snul li.active:focus {
        background: #9CF;
        border: 2px solid #9cf;
        border-radius: 5px;
    }

        #snul li.active a,
        #snul li.active:hover a,
        #snulli:focus a {
            color: #FFF;
        }

    #snul li {
        display: inline;
    }

Open in new window

0
Comment
Question by:Cubbybulin
  • 4
  • 4
10 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40203873
What counts here is what is rendered.  The scrollsby is outlined  http://getbootstrap.com/javascript/#scrollspy
<div class="bs-example">
    <nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-scrollspy">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project Name</a>
        </div>
        <div class="collapse navbar-collapse bs-example-js-navbar-scrollspy">
          <ul class="nav navbar-nav">
            <li class=""><a href="#fat">@fat</a></li>
            <li class=""><a href="#mdo">@mdo</a></li>
            <li class="dropdown active">
              <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
                <li class=""><a href="#one" tabindex="-1">one</a></li>
                <li class="active"><a href="#two" tabindex="-1">two</a></li>
                <li class="divider"></li>
                <li class=""><a href="#three" tabindex="-1">three</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
      <h4 id="fat">@fat</h4>
      <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
      <h4 id="mdo">@mdo</h4>
      <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
      <h4 id="one">one</h4>
      <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
      <h4 id="two">two</h4>
      <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
      <h4 id="three">three</h4>
      <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
      <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
      </p>
    </div>
  </div>

Open in new window


I would like to recreate your RENDERED code to test.  I started  here http://jsbin.com/sibap/1/edit?html,css,js will you please either update the jsbin or run your page, view the source and paste that here (just this portion).  let's try and recreate your html, css and js and get this to work for you.
0
 

Author Comment

by:Cubbybulin
ID: 40204635
Now that I look at View Source I do not see any of my partialview content.
It should be in id="prodlistsec" but do not see anything.
Not sure how MVC renders it.
Here is complete View Source of page.
Attached is a screenshot of page showing scrollable div.
The main body of the page (excluding top menu and left side menu) is in a partial view.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product </title>
    
    <script src="/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <link href='../Content/bootstrap.css' rel='stylesheet' />
    <link href='../Content/site.css' rel='stylesheet' />
    <link rel="stylesheet" type="text/css" href="../Content/component.css" />

   
    <script src="/Scripts/nprogress.js"></script>

    <link href="/Content/toast/css?v=_vAGzwixLE-IY8LyEu6Y4V_hi-OOpUiX9zLFldHrojk1" rel="stylesheet"/>

    <script src="/bundles/toast?v=v34hyh6Df8cGjvcXXyzlot2h5d07T_06uMTeizgrblM1"></script>

    

</head>
<body >
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">WCI Website Portal</a>
            </div>
            <div class="navbar-collapse collapse">
                
                <nav id="cbp-hrmenu" class="cbp-hrmenu">
                    <ul>
                        <li>
                            <a href="#">Admin</a>
                            <div class="cbp-hrsub">
                                <div class="cbp-hrsub-inner">
                                    <div>
                                        <h4>Admin Utilities</h4>
                                        <ul>
                                            <li><a href="/Account/ManageUsers">Manage Internal Users</a></li>
                                            <li><a href="#">Synching</a></li>
                                            <li><a href="#">Audit Log</a></li>
                                            <li><a href="#">Help</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Products</h4>
                                        <ul>
                                            <li><a href="#">Part Numbers Manager</a></li>
                                            <li><a href="#">Inventory Manager</a></li>
                                            <li><a href="#">Taxes Manager</a></li>
                                            <li><a href="#">Cross Sales Manager</a></li>
                                            <li><a href="#">Features/Specs Manager</a></li>
                                        </ul>
                                        <h4>Utilities</h4>
                                        <ul>
                                            <li><a href="#">Blogs Manager</a></li>
                                            <li><a href="#">Reviews Manager</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Website</h4>
                                        <ul>
                                            <li><a href="#">My Projects Manager</a></li>
                                            <li><a href="#">Shopping Cart Manager</a></li>
                                            <li><a href="#">Orders</a></li>
                                            <li><a href="#">Gift Certificates</a></li>
                                            <li><a href="#">Coupons/Sales</a></li>
                                            <li><a href="#">Offers</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Admin Reports</h4>
                                        <ul>
                                            <li><a href="#">Report 1</a></li>
                                            <li><a href="#">Report 2</a></li>
                                            <li><a href="#">Report 3</a></li>
                                            <li><a href="#">Report 4</a></li>
                                            <li><a href="#">Report 5</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /cbp-hrsub-inner -->
                            </div><!-- /cbp-hrsub -->
                        </li>
                        <li>
                            <a href="#">Web Pages</a>
                            <div class="cbp-hrsub">
                                <div class="cbp-hrsub-inner">
                                    <div>
                                        <h4>Web Pages</h4>
                                        <ul>
                                            <li><a href="/PageBuilder/PageBuilder">Page Builder</a></li>
                                            <li><a href="/TokenBuilder/TokenBuilder">Token Builder</a></li>
                                            <li><a href="/Product/Product">Products</a></li>
                                            <li><a href="/ProdVar/ProdVar">Product Variations</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Libraries</h4>
                                        <ul>
                                            <li><a href="#">Tokens</a></li>
                                            <li><a href="#">Pictures</a></li>
                                            <li><a href="#">Files</a></li>
                                            <li><a href="#">301 Redirects</a></li>
                                            <li><a href="#">CSS, Java</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /cbp-hrsub-inner -->
                            </div><!-- /cbp-hrsub -->
                        </li>
                        <li>
                            <a href="#">Reports</a>
                            <div class="cbp-hrsub">
                                <div class="cbp-hrsub-inner">
                                    <div>
                                        <h4>Analytics</h4>
                                        <ul>
                                            <li><a href="#">Report 1</a></li>
                                            <li><a href="#">Report 2</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Orders</h4>
                                        <ul>
                                            <li><a href="#">Report 3</a></li>
                                            <li><a href="#">Report 4</a></li>
                                            <li><a href="#">Report 5</a></li>
                                            <li><a href="#">Report 6</a></li>
                                            <li><a href="#">Report 7</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Products</h4>
                                        <ul>
                                            <li><a href="#">Report 8</a></li>
                                            <li><a href="#">Report 9</a></li>
                                            <li><a href="#">Report 10</a></li>
                                        </ul>

                                    </div>
                                    <div>
                                        <h4>Misc.</h4>
                                        <ul>
                                            <li><a href="#">Report 11</a></li>
                                            <li><a href="#">Report 12</a></li>
                                            <li><a href="#">Report 13</a></li>
                                            <li><a href="#">Report 14</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /cbp-hrsub-inner -->
                            </div><!-- /cbp-hrsub -->
                        </li>
                    </ul>
                </nav>
                
    <ul class="nav navbar-nav navbar-right">
        
        <li><a href="/Account/Login" id="loginLink">Log in</a></li>
    </ul>


            </div>
        </div>
    </div>
    <div class="container body-content">
        






<style>


    .disabled {
    color:lightgray;}
</style>
<h2 style="margin-top:2px;margin-bottom:2px;margin-right:20px;float:left;color:#428bca;">Catalog</h2>

<div class="tabbable">
    <ul class="nav nav-tabs" id="myTab" style="margin-top:2px;">
        <li class="active"><a href="#tab1" data-toggle="tab">Products</a></li>
        <li><a href="#tab2" data-toggle="tab" id="tabProduct">Kits</a></li>
        <li><a href="#tab3" data-toggle="tab">Categories</a></li>
        <li><a href="#tab4" data-toggle="tab">Shared Variations</a></li>
        <li><a href="#tab5" data-toggle="tab">Product Types</a></li>
        <li><a href="#tab6" data-toggle="tab">Reviews</a></li>
        <li><a href="#tab7" data-toggle="tab">Batch Edit</a></li>
        <li><a href="#tab8" data-toggle="tab">Inventory</a></li>
        <li><a href="#tab9" data-toggle="tab">Gift Certificates</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
            <div style="display:table-row;">
                <div style="width:160px;">
                    <ul id="productpills" class="nav nav-pills nav-stacked" style="max-width:150px;margin-top:10px;">
                        <li class="active"><a href="#tab10" data-toggle="tab">Product List</a></li>
                        <li><a href="#tab11" class="disabled" data-toggle="tab" id="">Edit Product</a></li>
                        <li><a href="#tab12" class="disabled" data-toggle="tab" id="">Images</a></li>
                        <li><a href="#tab13" class="disabled" data-toggle="tab">Categories</a></li>
                        <li><a href="#tab14" class="disabled" data-toggle="tab">Product Variations</a></li>
                        <li><a href="#tab15" class="disabled" data-toggle="tab">Reviews</a></li>
                        <li><a href="#tab16" class="disabled" data-toggle="tab">Cross Sells</a></li>
                        <li><a href="#tab17" class="disabled" data-toggle="tab">Volume Discounts</a></li>
                        <li><a href="#tab18" class="disabled" data-toggle="tab">Inventory</a></li>
                    </ul>
                </div>
                <div style="display:table-cell;width:100%;height:600px;">
                    <div class="panel panel-default" style="margin-bottom:0px;">
                        <div class="panel-heading">
                            <h3 class="panel-title">Product Listing</h3>
                        </div>
                        <div class="panel-body">
                            <div id="prodlistmain">
                                
                                <div id="prodlisting">
                                    Loading...
                                </div>
                            </div>
                            <div id="prodlistsec" style="display:none">
                                Loading...
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab2">
            <p>Kits Section</p>
        </div>
        <div class="tab-pane" id="tab3">
            <p>I'm in Section 3.</p>
        </div>
        <div class="tab-pane" id="tab4">
            <p>I'm in Section 4.</p>
        </div>
        <div class="tab-pane" id="tab5">
            <p>I'm in Section 5.</p>
        </div>
        <div class="tab-pane" id="tab6">
            <p>I'm in Section 6.</p>
        </div>
        <div class="tab-pane" id="tab7">
            <p>I'm in Section 7.</p>
        </div>
        <div class="tab-pane" id="tab8">
            <p>I'm in Section 8.</p>
        </div>
        <div class="tab-pane" id="tab9">
            <p>I'm in Section 9.</p>
        </div>
    </div>
</div>

<input id="prodidserial" type="hidden" value="-1" />
<input id="prodname" type="hidden" value="" />
<input id="prodpic" type="hidden" value="" />

<script type="text/javascript">
    //$("#filter").keyup(function () {
    //    // Retrieve the input field text and reset the count to zero
    //    var filter = $(this).val(), count = 0;
    //    // Loop through the comment list
    //    $(".productslist li").each(function () {
    //        // If the list item does not contain the text phrase fade it out
    //        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
    //            $(this).fadeOut();
    //            // Show the list item if the phrase matches and increase the count by 1
    //        } else {
    //            $(this).show();
    //            count++;
    //        }
    //    });
    //    // Update the count
    //    var numberItems = count;
    //    $("#filter-count").text(count + " Items");
    //});

    $("#productpills li a").each(function () {
        if ($(this).hasClass("disabled")) {
            $(this).removeAttr("href");
        }
    });

    $('button').click(function (e) {
        debugger;
        if ($(this).hasClass('newproduct')) {
            NProgress.start();
            $('#container ul').removeClass('list').addClass('grid');
            $("#prodlistsec").show();
            $("#prodlistmain").hide();
            $.get('/EditProduct', { "codeid": -1 },
                function (data) {
                    $("#prodlistsec").html(data);
                    NProgress.done();
                });
        }
    });

    $(".glyphicon-ok-circle").click(function () {
        NProgress.start();
        debugger;
        //$('#myTab #tabProduct').tab('show');
        //var nextId = $(this).parents('.tab-pane').next().attr("id");
        var checkid = $(this)[0].parentElement.parentElement.parentElement.parentElement.id;
        $("#prodlistmain").hide();
        $("#prodlistsec").show();
        $('[href=#tab11]').tab('show');
        $(".panel-title").html('Edit Product');
        //+nextId +
        $.get('/EditProduct',
                   function (data) {
                       $("#prodlistsec").html(data);
                       NProgress.done();
                   });
    });

    // dynamically activate list items when clicked
    $(".nav.nav-pills li a").on("click", function () {
        debugger;
        var myClass = $(this).attr("class");
        if (myClass == "disabled2") {
            $('[href=#tab10]').tab('show');
        }else{
            NProgress.start();
            //$(".nav.nav-pills li").removeClass("active");
            //$(this).addClass("active");
            $(".panel-title").html($(this).text());

            var MyVar = $(this).text();
            switch (MyVar) {
                case "Product List":
                    $("#prodlistsec").hide();
                    $("#prodlistmain").show();
                    
                    NProgress.done();
                    break;
                case "Edit Product":

                    $.get('/EditProduct', { "codeid": $("#prodidserial").val()},
                        function (data) {
                            $("#prodlistsec").html(data);
                            NProgress.done();
                            $("#prodlistsec").show();
                            $("#prodlistmain").hide();

                        });
                    break;
                case "Images":
                    $(".panel-title").html(MyVar);
                    $.get('/AddlImages',
                      function (data) {
                          $("#prodlistsec").html(data);
                          NProgress.done();
                          $("#prodlistsec").show();
                          $("#prodlistmain").hide();

                      });
                    break;
                case "Categories":
                    $(".panel-title").html(MyVar);
                    $.get('/Categories',
                      function (data) {
                          $("#prodlistsec").html(data);
                          $("#prodlistsec").show();
                          $("#prodlistmain").hide();
                          NProgress.done();
                      });
                    break;
                case "Product Variations":
                    $(".panel-title").html(MyVar);
                    $.get('/Product/ProdGrpList', { "id": $("#prodidserial").val() },  
                  function (data) {
                      $("#prodlistsec").html(data);
                      NProgress.done();
                      $("#prodlistsec").show();
                      $("#prodlistmain").hide();
                  });
                break;
                case "Reviews":
                    $(".panel-title").html(MyVar);
                $.get('/Reviews',
                      function (data) {
                          $("#prodlistsec").html(data);
                          NProgress.done();
                          $("#prodlistsec").show();
                          $("#prodlistmain").hide();
                      });
                    break;
                case "Cross Sells":
                    $(".panel-title").html(MyVar);
                    $.get('/CrossSells',
                      function (data) {
                          $("#prodlistsec").html(data);
                          $("#prodlistsec").show();
                          $("#prodlistmain").hide();
                          NProgress.done();
                      });
                    break;
                case "Volume Discounts":
                    $(".panel-title").html(MyVar);
                    $.get('/Discounts',
                      function (data) {
                          $("#prodlistsec").html(data);
                          $("#prodlistsec").show();
                          $("#prodlistmain").hide();
                          NProgress.done();
                      });
                    break;
                case "Inventory":
                    $(".panel-title").html(MyVar);
                    $.get('/Inventory',
                      function (data) {
                          $("#prodlistsec").html(data);
                          $("#prodlistsec").show();
                          $("#prodlistmain").hide();
                          NProgress.done();
                      });
                    break;
            }
        }
    });

    var W = window.screen.availWidth, H = window.screen.availHeight;
    var WW = $(window).width(), HW = $(window).height();
    var wndw = HW - 260
    //$(".productslist").css('height', wndw);


    $(document).ready(function () {
        //fnLoadGrid();
        NProgress.start();
        $("#prodlisting").load('/ProductList');
        
        NProgress.done();
    });


      
</script>




    </div>

    <input type="hidden" id="success" />
    <input type="hidden" id="info" />
    <input type="hidden" id="warning" />
    <input type="hidden" id="error" />

    <footer style="clear:both;margin-left:20px;">
        
        <p style="margin:0px;margin-top:5px;">&copy; 2014 - Wine Cellar Innovations</p>
    </footer>

    
    <script src="/bundles/bootstrap?v=2Fz3B0iizV2NnnamQFrx-NbYJNTFeBJ2GM05SilbtQU1"></script>

    

    
    <script src="../Scripts/cbpHorizontalMenu.min.js"></script>
    <script>
        $(function () {
            cbpHorizontalMenu.init();
        });
    </script>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"cf1318cf11904c96b7e539fc73e47b2e"}
</script>
<script type="text/javascript" src="http://localhost:49997/a8fa0b3ab58b4260995d58ffb663c0d8/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40204678
You can see where I added bootstrap from the cdn http://jsbin.com/ziyoy/1/edit
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Open in new window


Something is not right here.   Viewing at a wider screen http://jsbin.com/ziyoy/1 we just get the nav it looks like.  

When I place your code in the validator http://validator.w3.org/ there are some issues with duplicate ID's.  That will probably cause an issue with anything js.  I am not a .NET dev, but I see duplicate ID's is a common thing from people using Visual Studio.

I'm not sure how you need to fix that. But it looks like part of the issue is going to be the html.
0
 

Author Comment

by:Cubbybulin
ID: 40204910
I've fixed my duplicate ID's. No difference in issue. Trying to get you the view source of whole page including partialviews. Not sure how to do it though. A post mentioned Fiddler web debugger but not familiar with it.
Still working on it.
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 40204920
Start with some hand coding of what the html output should be.  http://sscce.org/

I will take a look at all of this later.
0
 

Author Comment

by:Cubbybulin
ID: 40205112
Here is stripped down code.

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product </title>
    
   <script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  

    

</head>
<body >
   <div id="container2">
    <div class="table" style="margin-left:0px;margin-right:0px; display:table;">
        <div class="row" style="margin-left:0px;margin-right:0px; display:table-row;">
            <div id="container" class="content" style="display:table-cell;width:50%;padding-right: 5px;">
                <nav id="side-nav" class="navbar navbar-default navbar-static affix" role="navigation" style="position:absolute;top:116px;left:5px;margin-bottom: 0px;min-height: 5px;">
                    <div class="container-fluid">
                        <ul id="snul" class="" style="list-style:none;">
                            <li style="margin-bottom:0px;" class="active"><a href="#one" style="padding: 12px 10px;">GENERAL</a></li>
                            <li style="margin-bottom:0px;"><a href="#two" style="padding: 12px 10px;">PRICING</a></li>
                            <li style="margin-bottom:0px;"><a href="#three" style="padding: 12px 10px;">SHIPPING</a></li>
                            <li style="margin-bottom:0px;"><a href="#four" style="padding: 12px 10px;">ADDITIONAL INFO</a></li>
                            <li style="margin-bottom:0px;"><a href="#five" style="padding: 12px 10px;">ADVANCED</a></li>
                            <li style="margin-bottom:0px;"><a href="#six" style="padding: 12px 10px;">PICTURES</a></li>
                            <li style="margin-bottom:0px;"><a href="#seven" style="padding: 12px 10px;">DESCRIPTION</a></li>
                            <li style="margin-bottom:0px;"><a href="#eight" style="padding: 12px 10px;">SPECIFICATIONS</a></li>
                            <li style="margin-bottom:0px;"><a href="#nine" style="padding: 12px 10px;">CATALOG SPECIFICATIONS</a></li>

                        </ul>
                    </div>
                </nav>
                <div id="myScrollspy" data-spy="scroll" data-target="#side-nav" data-offset="0" style="position:relative;overflow:auto;height:850px;">
                    <ul id="myNavx" class="list">
                        <li id="one">
                            <h4 class="h4h">GENERAL</h4>
                            <div class="hdiv">
                                <div class="input-group">
                                    <span class="input-group-addon" style="border-right:1px solid lightgray"></span>
                                    <input id="prd_active" type="checkbox" class="inp1" checked="@ViewData("prd_active")    " style="width:25px;margin-top:6px;margin-left:10px;" /> Active
                                    <input id="prd_active2" type="checkbox" class="inp1" checked="@ViewData("prd_haschild_skus")    " style="width:25px;margin-top:6px;margin-left:10px;" /> Has Child SKU's
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">SKU</span>
                                    <input type="text" class="form-control" id="ep_sku" value="@ViewData("prd_sku")    " style="">
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">Name</span>
                                    <textarea id="ep_name" rows="3" cols="20" style="" class="form-control" maxlength="150">@ViewData("prd_name")    </textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">ProdType</span>
                                    <input type="text" class="form-control" id="ep_type" value="@ViewData("prd_type")    " style="">
                                </div>
                            </div>
                        </li>
                        <li id="two">
                            <h4 class="h4h">
                                PRICING
                            </h4>
                            <div class="hdiv">
                                <div class="input-group">
                                    <span class="input-group-addon">MSRP</span>
                                    <input type="text" class="form-control" id="msrp" value="@ViewData("prd_msrp")    " style="width: 100px;text-align:right;">
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">Price</span>
                                    <input type="text" class="form-control" id="Price" value="@ViewData("prd_price")    " style="width: 100px;text-align:right;">
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">Cost</span>
                                    <input type="text" class="form-control" id="cost" value="@ViewData("prd_cost")    " style="width: 100px;text-align:right;">
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">Text</span>
                                    <textarea id="ep_misc" rows="2" cols="20" style="" class="form-control" maxlength="250">@ViewData("prd_misc")    </textarea>
                                </div>
                            </div>
                        </li>
                        <li id="three">
                            <h4 class="h4h">
                                SHIPPING
                            </h4>
                            <div class="hdiv">
                                <div style="width:50%;">
                                    <div class="input-group" style="">
                                        <span class="input-group-addon">Weight</span>
                                        <input type="text" class="form-control" value="@ViewData("prd_weight")    " id="ep_weight" style="">
                                    </div>
                                </div>
                                <div style="width:33%;display:inline-block;float:left;">
                                    <div class="input-group" style="">
                                        <span class="input-group-addon">Length</span>
                                        <input type="text" class="form-control" value="@ViewData("prd_dim_length")    " id="ep_length" style="">
                                    </div>
                                </div>
                                <div style="width:33%;display:inline-block;float:left;">
                                    <div class="input-group" style="">
                                        <span class="input-group-addon">Width</span>
                                        <input type="text" class="form-control" value="@ViewData("prd_dim_width")    " id="ep_width" style="">
                                    </div>
                                </div>
                                <div style="width:33%;display:inline-block;float:left;">
                                    <div class="input-group" style="">
                                        <span class="input-group-addon">Height</span>
                                        <input type="text" class="form-control" value="@ViewData("prd_dim_hght")    " id="ep_height" style="">
                                    </div>
                                </div>

                                <div class="input-group" style="">
                                    <span class="input-group-addon">Ship Fee</span>
                                    <input type="text" class="form-control" value="@ViewData("prd_ship_fee")    " id="ep_shipfee" style="">
                                </div>


                                <div class="input-group" style="">
                                    <span class="input-group-addon">Ship Mode</span>
                                    <input type="text" class="form-control" value="@ViewData("prd_ship_mode")    " id="ep_shipmode" style="">
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon" style="border-right:1px solid lightgray"></span>
                                    <input type="checkbox" checked="@ViewData("prd_active")    " style="width: 20px;margin-top:10px;margin-left:10px;"> Non-Shipping Product
                                    <input type="checkbox" checked="@ViewData("prd_active")    " style="width: 20px;margin-top:10px;margin-left:10px;"> Ship Seperately
                                </div>
                            </div>
                        </li>
                        <li id="four">
                            <h4 class="h4h">
                                ADDITIONAL INFO
                            </h4>
                            <div class="hdiv">
                                <div class="input-group" style="">
                                    <span class="input-group-addon">
                                        Price Track
                                        <button class="" id="pricetrack" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="ep_pricetrack" rows="6" cols="20" style="" class="form-control">@ViewData("prd_pricetrack")    </textarea>
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon">
                                        Promo Text
                                        <button class="" id="promotext" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="ep_promotext" rows="6" cols="20" style="" class="form-control">@ViewData("prd_promotext")    </textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Promo Image Text
                                        <button class="" id="promoimagetext" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="ep_pitext" rows="6" cols="20" style="" class="form-control">@ViewData("prd_promo_imgtext")    </textarea>
                                </div>
                            </div>
                        </li>
                        <li id="five">
                            <h4 class="h4h">
                                ADVANCED
                            </h4>
                            <div class="hdiv">
                                <div class="input-group" style="">
                                    <span class="input-group-addon">Rewrite Url</span>
                                    <textarea id="ep_url" rows="2" cols="20" style="" class="form-control">@ViewData("")    </textarea>
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon">Min. Qty</span>
                                    <textarea id="ep_qty" rows="2" cols="20" style="" class="form-control">@ViewData("")    </textarea>
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon">Pre-Content Column</span>
                                    <textarea id="ep_precontent" rows="3" cols="20" style="" class="form-control">@ViewData("")    </textarea>
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon">Post-Content Column</span>
                                    <textarea id="ep_postcontent" rows="3" cols="20" style="" class="form-control">@ViewData("")    </textarea>
                                </div>
                            </div>
                        </li>
                        <li id="six">
                            <h4 class="h4h">
                                PICTURES
                            </h4>
                            <div class="hdiv">
                                <div class="input-group" style="">
                                    <span class="input-group-addon">Small Picture</span>
                                    <img id="ep_smallpic" style="width:300px" src="@ViewData("prd_sm_img")    " alt="Small Image" />
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon">File Path</span>
                                    <input id="smpicpath" type="text" class="form-control" value="@ViewData("prd_sm_img")    " placeholder="Choose a File">
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon">Alternate Text</span>
                                    <textarea id="ep_smalttext" rows="3" cols="20" style="" class="form-control">@ViewData("prd_sm_img_alt_text")    </textarea>
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon">Medium Picture</span>
                                    <img id="ep_medpic" style="width:400px" src="@ViewData("prd_med_img")    " alt="Med Image" />
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon">File Path</span>
                                    <input id="ep_med_img" type="text" class="form-control" value="@ViewData("prd_med_img")    " placeholder="Choose a File">
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon">Alternate Text</span>
                                    <textarea id="ep_medalttext" rows="3" cols="20" style="" class="form-control">@ViewData("prd_med_img_alt_text")    </textarea>
                                </div>
                            </div>
                        </li>
                        <li id="seven">
                            <h4 class="h4h">
                                DESCRIPTION
                            </h4>
                            <div class="hdiv">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        &nbsp;Long&nbsp;
                                        <button class="" id="desclong" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="ep_declong" rows="6" cols="20" style="" class="form-control">@ViewData("prd_description_long")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">Short</span>
                                    <textarea id="ep_descshrt" rows="6" cols="20" style="" class="form-control">@ViewData("prd_description_short")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">Meta Title</span>
                                    <textarea id="ep_metatitle" rows="6" cols="20" style="" class="form-control">@ViewData("prd_meta_title")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">Meta Description</span>
                                    <textarea id="ep_metadesc" rows="6" cols="20" style="" class="form-control">@ViewData("prd_meta_desc")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">Meta Keywords</span>
                                    <textarea id="ep_meta_keywords" rows="6" cols="20" style="" class="form-control">@ViewData("prd_meta_keywords")</textarea>
                                </div>
                            </div>
                        </li>
                        <li id="eight">
                            <h4 class="h4h">
                                SPECIFICATIONS
                            </h4>
                            <div class="hdiv">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Features
                                        <button class="" id="featuresedit" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_features" rows="6" cols="20" style="" class="form-control">@ViewData("prd_features")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        &nbsp;Specs&nbsp;
                                        <button class="" id="specsedit" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_specs" rows="6" cols="20" style="" class="form-control">@ViewData("prd_specs")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Design
                                        <button class="" id="design" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_design" rows="6" cols="20" style="" class="form-control">@ViewData("prd_design")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Warranty
                                        <button class="" id="warranty" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_warranty" rows="6" cols="20" style="" class="form-control">@ViewData("prd_warranty")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Shipping
                                        <button class="" id="shipping" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_shipping" rows="6" cols="20" style="" class="form-control">@ViewData("prd_shipping")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Finishes
                                        <button class="" id="finishes" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_finish" rows="6" cols="20" style="" class="form-control">@ViewData("prd_finish")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Policies
                                        <button class="" id="policies" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_policy" rows="6" cols="20" style="" class="form-control">@ViewData("prd_policy")</textarea>
                                </div>
                            </div>
                        </li>
                        <li id="nine">
                            <h4 class="h4h">
                                CATALOG SPECIFICATIONS
                            </h4>
                            <div class="hdiv">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Features
                                        <button class="" id="features2" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_features2" rows="6" cols="20" style="background-color: lightgoldenrodyellow;" class="form-control">@ViewData("prd_features2")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        &nbsp;Specs&nbsp;
                                        <button class="" id="specsedit2" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_specs2" rows="6" cols="20" style="background-color: lightgoldenrodyellow;" class="form-control">@ViewData("prd_specs2")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Design
                                        <button class="" id="design2" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_design2" rows="6" cols="20" style="background-color: lightgoldenrodyellow;" class="form-control">@ViewData("prd_design2")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Warranty
                                        <button class="" id="warranty2" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_warranty2" rows="6" cols="20" style="background-color: lightgoldenrodyellow;" class="form-control">@ViewData("prd_warranty2")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Shipping
                                        <button class="" id="shipping2" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_shipping2" rows="6" cols="20" style="background-color: lightgoldenrodyellow;" class="form-control">@ViewData("prd_shipping2")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Finishes
                                        <button class="" id="finishes2" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_finish2" rows="6" cols="20" style="background-color: lightgoldenrodyellow;" class="form-control">@ViewData("prd_finish2")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Policies
                                        <button class="" id="policies2" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_policy2" rows="6" cols="20" style="background-color: lightgoldenrodyellow;" class="form-control">@ViewData("prd_policy2")</textarea>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

           
        </div>
    </div>
</div>
                
 
 

</body>
</html>

Open in new window

0
 

Author Comment

by:Cubbybulin
ID: 40218408
I have this working in JS Bin, but when I put it in my MVC project it does not work.
Thinking it has to do with a partialview that is not loaded when the page is initially loaded but added later in jquery and ajax.

 
 <script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  

    

</head>
<body >
   <div id="container2">
    <div class="table" style="margin-left:0px;margin-right:0px; display:table;">
        <div class="row" style="margin-left:0px;margin-right:0px; display:table-row;">
            <div id="container" class="content" style="display:table-cell;width:50%;padding-right: 5px;">
                <nav id="side-nav" class="navbar navbar-default navbar-static " role="navigation" style="position:absolute;top:116px;left:5px;margin-bottom: 0px;min-height: 5px;">
                    <div class="container-fluid">
                        <ul id="snul" class="nav  nav-list" style="list-style:none;">
                            <li style="margin-bottom:0px;" class="active"><a href="#one" style="padding: 12px 10px;">GENERAL</a></li>
                            <li style="margin-bottom:0px;"><a href="#two" style="padding: 12px 10px;">PRICING</a></li>
                            <li style="margin-bottom:0px;"><a href="#three" style="padding: 12px 10px;">SHIPPING</a></li>
                            <li style="margin-bottom:0px;"><a href="#four" style="padding: 12px 10px;">ADDITIONAL INFO</a></li>
                            <li style="margin-bottom:0px;"><a href="#five" style="padding: 12px 10px;">ADVANCED</a></li>
                            <li style="margin-bottom:0px;"><a href="#six" style="padding: 12px 10px;">PICTURES</a></li>
                            <li style="margin-bottom:0px;"><a href="#seven" style="padding: 12px 10px;">DESCRIPTION</a></li>
                            <li style="margin-bottom:0px;"><a href="#eight" style="padding: 12px 10px;">SPECIFICATIONS</a></li>
                            <li style="margin-bottom:0px;"><a href="#nine" style="padding: 12px 10px;">CATALOG SPECIFICATIONS</a></li>

                        </ul>
                    </div>
                </nav>
                <div id="myScrollspy" data-spy="scroll" data-target="#side-nav" data-offset="0" style="position:relative;overflow:auto;height:550px;">
                    <ul id="myNavx" class="list">
                        <li id="one">
                            <h4 class="h4h">GENERAL</h4>
                            <div class="hdiv">
                                <div class="input-group">
                                    <span class="input-group-addon" style="border-right:1px solid lightgray"></span>
                                    <input id="prd_active" type="checkbox" class="inp1" checked="@ViewData("prd_active")    " style="width:25px;margin-top:6px;margin-left:10px;" /> Active
                                    <input id="prd_active2" type="checkbox" class="inp1" checked="@ViewData("prd_haschild_skus")    " style="width:25px;margin-top:6px;margin-left:10px;" /> Has Child SKU's
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">SKU</span>
                                    <input type="text" class="form-control" id="ep_sku" value="@ViewData("prd_sku")    " style="">
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">Name</span>
                                    <textarea id="ep_name" rows="3" cols="20" style="" class="form-control" maxlength="150">@ViewData("prd_name")    </textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">ProdType</span>
                                    <input type="text" class="form-control" id="ep_type" value="@ViewData("prd_type")    " style="">
                                </div>
                            </div>
                        </li>
                        <li id="two">
                            <h4 class="h4h">
                                PRICING
                            </h4>
                            <div class="hdiv">
                                <div class="input-group">
                                    <span class="input-group-addon">MSRP</span>
                                    <input type="text" class="form-control" id="msrp" value="@ViewData("prd_msrp")    " style="width: 100px;text-align:right;">
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">Price</span>
                                    <input type="text" class="form-control" id="Price" value="@ViewData("prd_price")    " style="width: 100px;text-align:right;">
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">Cost</span>
                                    <input type="text" class="form-control" id="cost" value="@ViewData("prd_cost")    " style="width: 100px;text-align:right;">
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">Text</span>
                                    <textarea id="ep_misc" rows="2" cols="20" style="" class="form-control" maxlength="250">@ViewData("prd_misc")    </textarea>
                                </div>
                            </div>
                        </li>
                        <li id="three">
                            <h4 class="h4h">
                                SHIPPING
                            </h4>
                            <div class="hdiv">
                                <div style="width:50%;">
                                    <div class="input-group" style="">
                                        <span class="input-group-addon">Weight</span>
                                        <input type="text" class="form-control" value="@ViewData("prd_weight")    " id="ep_weight" style="">
                                    </div>
                                </div>
                                <div style="width:33%;display:inline-block;float:left;">
                                    <div class="input-group" style="">
                                        <span class="input-group-addon">Length</span>
                                        <input type="text" class="form-control" value="@ViewData("prd_dim_length")    " id="ep_length" style="">
                                    </div>
                                </div>
                                <div style="width:33%;display:inline-block;float:left;">
                                    <div class="input-group" style="">
                                        <span class="input-group-addon">Width</span>
                                        <input type="text" class="form-control" value="@ViewData("prd_dim_width")    " id="ep_width" style="">
                                    </div>
                                </div>
                                <div style="width:33%;display:inline-block;float:left;">
                                    <div class="input-group" style="">
                                        <span class="input-group-addon">Height</span>
                                        <input type="text" class="form-control" value="@ViewData("prd_dim_hght")    " id="ep_height" style="">
                                    </div>
                                </div>

                                <div class="input-group" style="">
                                    <span class="input-group-addon">Ship Fee</span>
                                    <input type="text" class="form-control" value="@ViewData("prd_ship_fee")    " id="ep_shipfee" style="">
                                </div>


                                <div class="input-group" style="">
                                    <span class="input-group-addon">Ship Mode</span>
                                    <input type="text" class="form-control" value="@ViewData("prd_ship_mode")    " id="ep_shipmode" style="">
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon" style="border-right:1px solid lightgray"></span>
                                    <input type="checkbox" checked="@ViewData("prd_active")    " style="width: 20px;margin-top:10px;margin-left:10px;"> Non-Shipping Product
                                    <input type="checkbox" checked="@ViewData("prd_active")    " style="width: 20px;margin-top:10px;margin-left:10px;"> Ship Seperately
                                </div>
                            </div>
                        </li>
                        <li id="four">
                            <h4 class="h4h">
                                ADDITIONAL INFO
                            </h4>
                            <div class="hdiv">
                                <div class="input-group" style="">
                                    <span class="input-group-addon">
                                        Price Track
                                        <button class="" id="pricetrack" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="ep_pricetrack" rows="6" cols="20" style="" class="form-control">@ViewData("prd_pricetrack")    </textarea>
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon">
                                        Promo Text
                                        <button class="" id="promotext" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="ep_promotext" rows="6" cols="20" style="" class="form-control">@ViewData("prd_promotext")    </textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Promo Image Text
                                        <button class="" id="promoimagetext" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="ep_pitext" rows="6" cols="20" style="" class="form-control">@ViewData("prd_promo_imgtext")    </textarea>
                                </div>
                            </div>
                        </li>
                        <li id="five">
                            <h4 class="h4h">
                                ADVANCED
                            </h4>
                            <div class="hdiv">
                                <div class="input-group" style="">
                                    <span class="input-group-addon">Rewrite Url</span>
                                    <textarea id="ep_url" rows="2" cols="20" style="" class="form-control">@ViewData("")    </textarea>
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon">Min. Qty</span>
                                    <textarea id="ep_qty" rows="2" cols="20" style="" class="form-control">@ViewData("")    </textarea>
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon">Pre-Content Column</span>
                                    <textarea id="ep_precontent" rows="3" cols="20" style="" class="form-control">@ViewData("")    </textarea>
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon">Post-Content Column</span>
                                    <textarea id="ep_postcontent" rows="3" cols="20" style="" class="form-control">@ViewData("")    </textarea>
                                </div>
                            </div>
                        </li>
                        <li id="six">
                            <h4 class="h4h">
                                PICTURES
                            </h4>
                            <div class="hdiv">
                                <div class="input-group" style="">
                                    <span class="input-group-addon">Small Picture</span>
                                    <img id="ep_smallpic" style="width:300px" src="@ViewData("prd_sm_img")    " alt="Small Image" />
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon">File Path</span>
                                    <input id="smpicpath" type="text" class="form-control" value="@ViewData("prd_sm_img")    " placeholder="Choose a File">
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon">Alternate Text</span>
                                    <textarea id="ep_smalttext" rows="3" cols="20" style="" class="form-control">@ViewData("prd_sm_img_alt_text")    </textarea>
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon">Medium Picture</span>
                                    <img id="ep_medpic" style="width:400px" src="@ViewData("prd_med_img")    " alt="Med Image" />
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon">File Path</span>
                                    <input id="ep_med_img" type="text" class="form-control" value="@ViewData("prd_med_img")    " placeholder="Choose a File">
                                </div>
                                <div class="input-group" style="">
                                    <span class="input-group-addon">Alternate Text</span>
                                    <textarea id="ep_medalttext" rows="3" cols="20" style="" class="form-control">@ViewData("prd_med_img_alt_text")    </textarea>
                                </div>
                            </div>
                        </li>
                        <li id="seven">
                            <h4 class="h4h">
                                DESCRIPTION
                            </h4>
                            <div class="hdiv">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        &nbsp;Long&nbsp;
                                        <button class="" id="desclong" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="ep_declong" rows="6" cols="20" style="" class="form-control">@ViewData("prd_description_long")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">Short</span>
                                    <textarea id="ep_descshrt" rows="6" cols="20" style="" class="form-control">@ViewData("prd_description_short")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">Meta Title</span>
                                    <textarea id="ep_metatitle" rows="6" cols="20" style="" class="form-control">@ViewData("prd_meta_title")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">Meta Description</span>
                                    <textarea id="ep_metadesc" rows="6" cols="20" style="" class="form-control">@ViewData("prd_meta_desc")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">Meta Keywords</span>
                                    <textarea id="ep_meta_keywords" rows="6" cols="20" style="" class="form-control">@ViewData("prd_meta_keywords")</textarea>
                                </div>
                            </div>
                        </li>
                        <li id="eight">
                            <h4 class="h4h">
                                SPECIFICATIONS
                            </h4>
                            <div class="hdiv">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Features
                                        <button class="" id="featuresedit" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_features" rows="6" cols="20" style="" class="form-control">@ViewData("prd_features")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        &nbsp;Specs&nbsp;
                                        <button class="" id="specsedit" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_specs" rows="6" cols="20" style="" class="form-control">@ViewData("prd_specs")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Design
                                        <button class="" id="design" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_design" rows="6" cols="20" style="" class="form-control">@ViewData("prd_design")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Warranty
                                        <button class="" id="warranty" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_warranty" rows="6" cols="20" style="" class="form-control">@ViewData("prd_warranty")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Shipping
                                        <button class="" id="shipping" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_shipping" rows="6" cols="20" style="" class="form-control">@ViewData("prd_shipping")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Finishes
                                        <button class="" id="finishes" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_finish" rows="6" cols="20" style="" class="form-control">@ViewData("prd_finish")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Policies
                                        <button class="" id="policies" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_policy" rows="6" cols="20" style="" class="form-control">@ViewData("prd_policy")</textarea>
                                </div>
                            </div>
                        </li>
                        <li id="nine">
                            <h4 class="h4h">
                                CATALOG SPECIFICATIONS
                            </h4>
                            <div class="hdiv">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Features
                                        <button class="" id="features2" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_features2" rows="6" cols="20" style="background-color: lightgoldenrodyellow;" class="form-control">@ViewData("prd_features2")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        &nbsp;Specs&nbsp;
                                        <button class="" id="specsedit2" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_specs2" rows="6" cols="20" style="background-color: lightgoldenrodyellow;" class="form-control">@ViewData("prd_specs2")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Design
                                        <button class="" id="design2" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_design2" rows="6" cols="20" style="background-color: lightgoldenrodyellow;" class="form-control">@ViewData("prd_design2")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Warranty
                                        <button class="" id="warranty2" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_warranty2" rows="6" cols="20" style="background-color: lightgoldenrodyellow;" class="form-control">@ViewData("prd_warranty2")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Shipping
                                        <button class="" id="shipping2" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_shipping2" rows="6" cols="20" style="background-color: lightgoldenrodyellow;" class="form-control">@ViewData("prd_shipping2")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Finishes
                                        <button class="" id="finishes2" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_finish2" rows="6" cols="20" style="background-color: lightgoldenrodyellow;" class="form-control">@ViewData("prd_finish2")</textarea>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        Policies
                                        <button class="" id="policies2" title="Editor">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </span>
                                    <textarea id="prd_policy2" rows="6" cols="20" style="background-color: lightgoldenrodyellow;" class="form-control">@ViewData("prd_policy2")</textarea>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

           
        </div>
    </div>
</div>


[b]CSS....[/b]

.nav-list > .active > a, .nav-list > .active > a:hover, .nav-list > .active > a:focus {
color: #ffffff;
text-shadow: 0 -1px 0 
rgba(0, 0, 0, 0.2);
background-color: #9CF;
}

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40218591
If you have the static page working, that is about as far as I can help with.   It just a matter of updating your mvc to match the output.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Whether you’re a college noob or a soon-to-be pro, these tips are sure to help you in your journey to becoming a programming ninja and stand out from the crowd.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

757 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

19 Experts available now in Live!

Get 1:1 Help Now