www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] Emulating this jquery code in javascript

  1. #1
    Join Date
    Dec 2010
    Posts
    232

    resolved [RESOLVED] Emulating this jquery code in javascript

    I want to be able to emulate the effect that google has used on their search results screen whereby the results are shown on the left and the user can click a button on each result to show a preview of that result on the right.

    The thing is as the user scrolls the page the right hand result preview panel is constantly anchored to the top and bottom of the browser window. Also when the window resizes the panel stays anchored and resizes too. Obviously this cannot be done with css alone as the page itself needs to be scrollable so the user can scroll the results whilst this preview panel needs to remain anchored to the page height so I assumed javascript/jquery was required.

    I found somewhat of a solution in jquery format:-


    "The trick is that you have to set it as position:fixed, but only after the user has scrolled past it.

    This is done with something like this, attaching a handler to the window.scroll event

    Code:
       // Cache selectors outside callback for performance. 
       var $window = $(window),
           $stickyEl = $('#the-sticky-div');
    
       var elTop = $stickyEl.offset().top;
    
       $window.scroll(function() {
            var windowTop = $window.scrollTop();
    
            $stickyEl.toggleClass('sticky', windowTop > elTop);
        });
    This simply adds a sticky CSS class when the page has scrolled past it, and removes the class when it's back up.

    And the CSS class looks like this

    Code:
      #the-sticky-div.sticky {
         position: fixed;
         top: 0;
      }
    "

    However I want to achieve this in javascript alone. Can anyone help me with this please?

  2. #2
    Join Date
    Nov 2010
    Posts
    1,084
    I'm a little confused - can you explain again why you can't just do it with css?

    Code:
    <html>
    <head>
    <style>
    #thediv{
    position:fixed;
    border:solid;
    height:95%
    }
    body{
    height:100%}
    #content{
    float:right}
    #thediv{
    float:left}
    
    
    </style>
    </head>
    <body>
    <div id="thediv"> Sticky div</div>
    
    <div id="content"> Scrollable content
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>
    </body>
    </html>

  3. #3
    Join Date
    Dec 2010
    Posts
    232
    Thanks xelawho. I think I've seen an example almost identical to that before. The difference is I need the whole window/body to be scrollable not the content div itself.

    So basically this "preview div" I'm trying to implement needs to be the size of the "viewport" itself. In javascript it seems to be referred to as window.innerHeight which I think I'll need to create a function for now in javascript.

    The best examples I can think of are as I mentioned, Googles search results preview panel and facebook new right hand side chat panel which seems to have it's height updated via javascript as the browser window resizes.

    Thanks for the help. I'll keep trying and let you know how it goes.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles