0

I have been writing a small script that shortens documents that are being output on a JSON feed of mine.

I realised that with longer messages, on minimising it could skip a few and you'd have to scroll back to find where you were and so added a scroll function to take you back to the top of the message on minifying. This turned out to be quite annoying when it fired every single time - so I thought, why not make it fire only when the top of the element is above the screen?

And this is where I am stuck --> $(window).scrollTop(); simply doesn't want to output the screen height for me, it's infuriating. I tried with different browsers and the only one .scrollTop() worked for correctly was Internet Explorer.

Here is the function below:

function jexpand(id){
    var elm=$('#d'+jdesc[id].i); // element

    var ofs=elm.offset().top; // element height - works fine
    var top=$(window).scrollTop(); // Y U NO WORK?!!!

    if(jdesc[id].e==true){ // boolean to check whether to expand or contract
        jdesc[id].e=false; // change boolean flag
        if(ofs < top) $('html').animate({scrollTop:($('#'+jdesc[id].i).offset().top)-(20)+'px'},'slow'); // animate to top minus 20 pixels
        elm.html(jdesc[id].d.substring(0,347)+'...<br><div class="readmore"><span id="'+id+'">Show More</span></div>');
    }else{
        jdesc[id].e=true;
        elm.html(jdesc[id].d+'<br><div class="readmore"><span id="'+id+'">Show Less</span></div>');
    }
    $('.readmore span').click(function(){jexpand(this.id)}); // reset click trigger

    //alert(top+' <-> '+ofs);
}

When I uncomment the alert() at the bottom in a browser other than IE (I tried chrome, mozilla, chrome android, boat browser android) I get a message akin to:

[object Window] <-> 1077.5625

[object Window] is obviously not a number that can be greater or less than the element height! So what does this mean, is there another flag I need to ask of it? At first I assumed it might be the wrong element I was refering so tried top=$('body').scrollTop();, html, etc, I even tried using div wrapper elements but to no avail.

I am using jquery 1.11.0 and with 1.9.1 I had the same issue.

Am I trying to return the screen top in the wrong way or have all my browsers gone loopy?

EDIT:

Weirdly I've found an issue which may explain things a little, when I typed $(document).scrollTop() into a console it gave me the correct screen height however if I make a var top; outside of the function I get this error 'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead..

I am using a webkit borrowed from html5up and this is somehow interfering with the code. Now to find out what it is....

Sorry for the confusion, without this script everything works fine grr...

Lucas
  • 1,298
  • 11
  • 19
  • Try to console it by using `console.log(top);` – Rohan Kumar Apr 03 '14 at 11:25
  • Kind of unreadable code you have there... BTW, looks wrong here regarding your comment: `$('.readmore span').click(function(){jexpand(this.id)}); // reset click trigger` This doesn't reset click handler, this bind a new one without removing any previous one. And btw, you are recalling same function again and again on each click – A. Wolff Apr 03 '14 at 11:27
  • Rohan, in console I get this response: `"window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.` – Lucas Apr 03 '14 at 11:28
  • What is the result if you put `alert()` just after declaring `top` variable? I don't see why you can get result you said you have. You should *try* to replicates your issue on jsFiddle – A. Wolff Apr 03 '14 at 11:30

4 Answers4

2

Try this way

JS CODE:

 $(window).scrollTop(0);  // this will scroll to top of the page

LIVE DEMO:

http://jsfiddle.net/dreamweiver/fZrz7/6/

Happy Coding :)

dreamweiver
  • 5,860
  • 2
  • 25
  • 38
1

What about $(document).scrollTop()? It always worked for me.

Ani
  • 2,536
  • 1
  • 17
  • 17
  • well this would do the same effect as `$(window).scrollTop()`.http://stackoverflow.com/questions/5371139/window-scrolltop-vs-document-scrolltop – dreamweiver Apr 03 '14 at 11:30
0

Try smth like this..

if($(window).scrollTop()>500){
     elm.html(jdesc[id].d.substring(0,347)+'...<br><div class="readmore"><span id="'+id+'">Show More</span></div>');}
else{
     elm.html(jdesc[id].d+'<br><div class="readmore"><span id="'+id+'">Show Less</span></div>');
}

If work try next with

var ofs=elm.offset().top;
Darex1991
  • 603
  • 6
  • 20
0

Try this:

$(document).height(); //returns window height

$(document).scrollTop(); //returns scroll position from top of document

$(selector)[0].scrollHeight;

$(document).prop('scrollHeight');
Mr.G
  • 3,023
  • 2
  • 14
  • 19