Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    show hidden element on page scroll

    Looking for a simple way to have a hidden element made visible when the page scrolls.

    The idea is to have a back arrow appear only when the page has been scrolled horizontally.

    trying something along these lines without success ...

    Code:
    	<script type="text/javascript">
    		window.onscroll = function () {
    			if $("back").is(":hidden") {
    				$("back").show("slow");
    			}
    		}
    	</script>
    The site is here: www.milesjaffe.com.

    Thanks --
    Last edited by noah way; 07-07-2011 at 02:58 AM.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Which framework are you using? Is it jQuery? Do you have an element <back> on your page? I doubt it. Does the element have the id "back" or a class "back"?

    There have to be parentheses around the expression in the if statement.

    Did you take a look at jQuery's .scroll() handler? Something in the lines of
    Code:
    $(window).scroll(function() {
       if($('#back').is(':hidden')) ....
    });

  • Users who have thanked devnull69 for this post:

    noah way (07-07-2011)

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    OK, got it running but have a logic problem, I think.

    Starting with the DIV hidden, the first part of the coed shows it, and works fine on its own. The second part acts as a toggle, turning visibility off again.

    The idea is to use $(window).scrollLeft()==0 to see if the window is at x=0, and then to turn off visibility.

    Code:
    <script type="text/javascript">
    	$(window).scroll(function (){
    		if($('#back').is(':hidden')) {
    			$('#back').show('slow');
    			}
    			else if ($(window).scrollLeft()==0); {
    				$('#back').hide('slow');
    			}
    	});
    </script>

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    posted in frameworks jquery ...


  •  

    Posting Permissions

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