Maintain Scroll Position on Button click using jQuery in ASP.Net

jordan

SOLVED CLOSED ACTIVE ANSWERED
User: jordan
Posted: on Jan 16, 2017 01:51 AM
Forum: jQuery and jQuery Plugins
Answer: 3
Views: 7276

Hello i have created menu using button.When i click on button it it refresh the page so i need to scroll down to see images.

But i dont want to do like this.I want i reamin same without refreshing

i have menu which consist of AllProduct,Best Seller,NewestAdded

I want my all Product image should remain stable where other two will diaplay only at the time of click.And it shouldnot be refresh.

second thing i want is when i click on button it colo should change not on mouse hover.

third i want my image dynamaically

Here is my code.

  <script type="text/javascript">
        $(function () {
            $('#menu ul li a').click(function () {
                var selectedLink = $(this)[0].innerHTML
                localStorage.setItem('selectedLink', selectedLink);
            });
        });
        window.onload = function () {
            $('#menu ul li a').each(function () {
                if ($(this)[0].innerHTML == localStorage.getItem('selectedLink')) {
                    $(this).attr('style', 'background-color:deeppink');
                }
                else {
                    $(this).attr('style', 'background-color:none');
                    if (localStorage.getItem('selectedLink') == null) {
                        $('[id*=lnkAllProducts]').attr('style', 'background-color:deeppink');
                    }
                }
            });
        }
</script>

 <div class="container">
        <div id="menu">
            <ul class="nav navbar-nav navbar-left">
                <li class="active">
                    <asp:LinkButton ID="lnkAllProducts" CssClass="btn btn-block" Text="All Products"
                        runat="server"  />
                </li>
                <li>
                    <asp:LinkButton ID="lnkBestSellers" CssClass="btn btn-block" Text="Best Sellers"
                        runat="server" OnClick="BindImages"/>
                </li>
                <li>
                    <asp:LinkButton ID="lnkNewestAdded" CssClass="btn btn-block" Text="Newest Added"
                        runat="server" OnClick="BindImages"/>
                </li>
            </ul>
        </div>
        <br />
        <br />
        <br />
        <div id="product" runat="server">
        </div>

 public void BindImagesOnPageStart()
    {
        clsProductPearlMain objpp = new clsProductPearlMain(true);

        //   objProduct.getProduct();
        objpp.getCatPro();
        string str = string.Empty;
        int j = 0;
        for (j = 0; j < objpp.ListclsProductPearlMain.Count; j++)
        {
            // string path = objProduct.ListclsProductMain[i].ProductID+".jpg";
            if (File.Exists(Server.MapPath("images/ProductPearl/" + objpp.ListclsProductPearlMain[j].ProductID + ".jpg")))
            {
                str += @"<div class='row col-md-3 col-xs-6 hovereffect'>
                    <div class='imageBackGround' style='width:250px;height:280px;'>
                    <img class='imges'  style='height:220px;' src='images/ProductPearl/" + objpp.ListclsProductPearlMain[j].ProductID + ".jpg" + @"' />
                        <p class='sname'>" + objpp.ListclsProductPearlMain[j].ProductName + @"</p>
                    <p class='sname2'>" + objpp.ListclsProductPearlMain[j].MRP + @"</p></div><br/>
    </div>";
            }
        }
        //}
        product.InnerHtml = str;
    }
}

Download FREE API for Word, Excel and PDF in ASP.Net

AnandM

0 3

Reply
ANSWER
User: AnandM
Replied: on Jan 16, 2017 03:43 AM
Report

jordan says:
  <script type="text/javascript">

        $(function () {

            $('#menu ul li a').click(function () {

                var selectedLink = $(this)[0].innerHTML

                localStorage.setItem('selectedLink', selectedLink);

            });

        });

        window.onload = function () {

            $('#menu ul li a').each(function () {

                if ($(this)[0].innerHTML == localStorage.getItem('selectedLink')) {

                    $(this).attr('style', 'background-color:deeppink');

                }

                else {

                    $(this).attr('style', 'background-color:none');

                    if (localStorage.getItem('selectedLink') == null) {

                        $('[id*=lnkAllProducts]').attr('style', 'background-color:deeppink');

                    }

                }

            });

        }

</script>

replace above code with below

<script type="text/javascript">
    $(function () {
        $('#menu ul li a').click(function () {
            var selectedLink = $(this)[0].innerHTML
            localStorage.setItem('selectedLink', selectedLink);
        });
    });
    window.onload = function () {
        var div = document.getElementById("product");
        var div_position = document.getElementById("div_position");
        var position = parseInt('<%=Request.Form["div_position"] %>');
        if (isNaN(position)) {
            position = 0;
        }
        div.scrollTop = position;
        div.onscroll = function () {
            div_position.value = div.scrollTop;
        };
        $('#menu ul li a').each(function () {
            if ($(this)[0].innerHTML == localStorage.getItem('selectedLink')) {
                $(this).attr('style', 'background-color:deeppink');
            }
            else {
                $(this).attr('style', 'background-color:none');
                if (localStorage.getItem('selectedLink') == null) {
                    $('[id*=lnkAllProducts]').attr('style', 'background-color:deeppink');
                }
            }
        });
    }
</script>

jordan says:
<div id="product" runat="server">

</div>

replace above code with below

<div id="product" style="overflow-y: scroll; height: 800px;" runat="server">
</div>
<input type="hidden" id="div_position" name="div_position" />

Assign the height according to your need.

AnandM

0 4

Reply
ANSWER
User: AnandM
Replied: on Jan 16, 2017 04:23 AM
Report

jordan says:
<div class="container">

       <div id="menu">

           <ul class="nav navbar-nav navbar-left">

               <li class="active">

                   <asp:LinkButton ID="lnkAllProducts" CssClass="btn btn-block" Text="All Products"

                       runat="server" />

               </li>

               <li>

                   <asp:LinkButton ID="lnkBestSellers" CssClass="btn btn-block" Text="Best Sellers"

                       runat="server" OnClick="BindImages"/>

               </li>

               <li>

                   <asp:LinkButton ID="lnkNewestAdded" CssClass="btn btn-block" Text="Newest Added"

                       runat="server" OnClick="BindImages"/>

               </li>

           </ul>

       </div>

       <br />

       <br />

       <br />

       <div id="product" runat="server">

       </div>

replace above code with below

<div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div class="container">
                <div id="menu">
                    <ul class="nav navbar-nav navbar-left">
                        <li class="active">
                            <asp:LinkButton ID="lnkAllProducts" CssClass="btn btn-block" Text="All Products"
                                runat="server" />
                        </li>
                        <li>
                            <asp:LinkButton ID="lnkBestSellers" CssClass="btn btn-block" Text="Best Sellers"
                                runat="server" OnClick="BindImages" />
                        </li>
                        <li>
                            <asp:LinkButton ID="lnkNewestAdded" CssClass="btn btn-block" Text="Newest Added"
                                runat="server" OnClick="BindImages" />
                        </li>
                    </ul>
                </div>
                <br />
                <br />
                <br />
                &nbsp;&nbsp;&nbsp;
                <div id="product" style="overflow-y: scroll; height: 800px;" runat="server">
                </div>
                <input type="hidden" id="div_position" name="div_position" />
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <div>
    </div>
</div>

AnandM

0 8

Reply
ANSWER
User: AnandM
Replied: on Jan 16, 2017 05:05 AM
Report

jordan says:
<asp:LinkButton ID="lnkAllProducts" CssClass="btn btn-block" Text="All Products"

runat="server" />

you need to assign a onclick event handler to bind the images on the click of All Product images and then call "BindImagesOnPageStart()" method in onlick event of AllProducts link button like below

HTML

<asp:LinkButton ID="lnkAllProducts" CssClass="btn btn-block" Text="All Products"
OnClick="BindAllImages" runat="server" />

protected void BindAllImages(object sender, EventArgs e)
{
    BindImagesOnPageStart();
}

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Maintain Scroll Position on Button click using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us