how to make div fixed at a scroll and buttton click

Question

0.00/5 (No votes)

See more:

I want to make a particular side div fixed at a particular scroll level.This div have listview.At pageload the fixed div is work well but i click one button and update listview at a time fixed div not worked. How is it possible ? with css or jquery.

Posted 2-Jan-14 23:55pm

sarathtamil

Add a Solution

Comments

Jenno Richi 3-Jan-14 6:43am

Post your code which you used to change the data of the list and the previous list which worked

sarathtamil 3-Jan-14 6:58am

this javascript to use fix the div

$(function() {
var $sidebar = $("#smallscroll"),
$window = $(window),
rightOffset = $sidebar.offset(),
rightDelta = $("#Footer").offset().top - $("#Header").offset().top - $("#Header").outerHeight() - $("#smallscroll").outerHeight(),
topPadding = 15;

$window.scroll(function() {
$sidebar.stop().animate({
marginTop: Math.max(Math.min($window.scrollTop() - rightOffset.top + topPadding, rightDelta), 0)
});
});

});

sarathtamil 3-Jan-14 7:00am

i click add button like quantity 1 to 2.Listview have following fields itemname,qunatity,price.listview updated but fixed div go to top of page.

2 solutions

Solution 1

I am guessing one issue here.

You are doing all the changes in jQuery load method. When you are doing any other event and updating any control as you are doing it for ListView, so if you use Ajax UpdatePanel or something for that, so Page would not refresh.

If Page don't refresh, then it will not execute the codes which you have written in load event of jQuery.

So, I would suggest you to put a debugger inside this jQuery load event and see if it is hitting that when you update the ListView. If not, then you have to execute the same code while updating the ListView.

Posted 3-Jan-14 4:48am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Comments

sarathtamil 6-Jan-14 1:46am

page refresh...listview updated but fixed div move to top...

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 6-Jan-14 2:00am

So, you have to execute the same code in while ListView is updated.

sarathtamil 6-Jan-14 2:13am

onclientclick i call the same function but fixed div move to top and not scroll .fixed div scrolled first time only ,

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 6-Jan-14 2:37am

Can you check if the rendered HTML of that div in browser is correct or not?
I mean compare the HTML of that div when it loads for the first time and when it loads after the ListView update.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

sarathtamil · Accepted Answer · 2014-01-05T21:56:00

I try onclick with register script

C#

ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "MyScript", "scrolltop();", true);

function is

JavaScript

function scrolltop() {
          
            var $sidebar = $('#smallscroll'),
        $window = $(window),
        rightOffset = $sidebar.offset(),
        rightDelta = $('#Footer').offset().top - $('#Header').offset().top - $('#Header').outerHeight() - $('#smallscroll').outerHeight(),
        topPadding = 15;

            $sidebar.css({ 'position': 'fixed','right':'0px'});
 
                $window.scroll(function() {
                  $sidebar.stop().animate({
                  marginTop: Math.max(Math.min($window.scrollTop() - rightOffset.top + topPadding, rightDelta), 0)
                });
            });
        }

it should be work well..thank you Tadit Dash