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
    Mar 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Need help passing variable from one script to another

    Hey there,

    I'll explain what I'm trying to do. I have a back-to-top button on my website that will only appear after the user is 500px down the page. I'd like to be able to change that 500px value to whatever the users window height is.

    I have a code that retrieves the users window height and will echo it wherever I place the script on my page:

    Code:
    <script>
    var winW = 800, winH = 600;
    if (document.body && document.body.offsetWidth) {
     winW = document.body.offsetWidth;
     winH = document.body.offsetHeight;
    }
    if (document.compatMode=='CSS1Compat' &&
        document.documentElement &&
        document.documentElement.offsetWidth ) {
     winW = document.documentElement.offsetWidth;
     winH = document.documentElement.offsetHeight;
    }
    if (window.innerWidth && window.innerHeight) {
     winW = window.innerWidth;
     winH = window.innerHeight;
    }
    
    document.writeln(+winH);
    
    </script>
    I'll also post the script for the back-to-top button:

    Code:
    <script type="text/javascript" src='<?php bloginfo('template_url'); ?>/js/jquery.min.js'></script><script>
    $(document).ready(function(){
    
    	// hide #back-top first
    	$("#back-top").hide();
    	
    	// fade in #back-top
    	$(function () {
    		$(window).scroll(function () {
    			if ($(this).scrollTop() > 500) {
    				$('#back-top').fadeIn();
    			} else {
    				$('#back-top').fadeOut();
    			}
    		});
    
    		// scroll body to 0px on click
    		$('#back-top a').click(function () {
    			$('body,html').animate({
    				scrollTop: 0
    			}, 800);
    			return false;
    		});
    	});
    
    });
    </script>
    In that first code, it seems like the value +winH is what I need to use. The line document.writeln(+winH); merely prints the value as text on my page.

    Now in this second piece of code there's two numeric values. The second, 800, is the speed that the page scrolls back to the top. The first value, 500, is the value I want to replace.

    Can anyone guide me through how I might combine these two scripts to work together?

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,616
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Code:
    var winW = 800, winH = 600;
    if (document.body && document.body.offsetWidth) {
     winW = document.body.offsetWidth;
     winH = document.body.offsetHeight;
    }
    if (document.compatMode=='CSS1Compat' &&
        document.documentElement &&
        document.documentElement.offsetWidth ) {
     winW = document.documentElement.offsetWidth;
     winH = document.documentElement.offsetHeight;
    }
    if (window.innerWidth && window.innerHeight) {
     winW = window.innerWidth;
     winH = window.innerHeight;
    }
    
    $(document).ready(function(){
    
    	// hide #back-top first
    	$("#back-top").hide();
    	
    	// fade in #back-top
    	$(function () {
    		$(window).scroll(function () {
    			if ($(this).scrollTop() > winH) {
    				$('#back-top').fadeIn();
    			} else {
    				$('#back-top').fadeOut();
    			}
    		});
    
    		// scroll body to 0px on click
    		$('#back-top a').click(function () {
    			$('body,html').animate({
    				scrollTop: 0
    			}, 800);
    			return false;
    		});
    	});
    
    });
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's that easy? Thanks, okay.

    So I threw the code in and the back-to-top button functions but seems to appear at double the winH value for some reason.

    Would any part of the above code, or the below CSS cause this behaviour? Maybe it's something in the jquery.min.js file?

    Code:
    #back-top {
    	width:100%;
    	position: fixed;
    	bottom: 95px;
    	padding-left: 980px;
    }
    
    #back-top a {
    	width: 58px;
    	display: block;
    	text-align: center;
    	font: 11px/100% Arial, Helvetica, sans-serif;
    	text-transform: uppercase;
    	text-decoration: none;
    	color: #bbb;
    
    	/* transition */
    	-webkit-transition: 0.75s;
    	-moz-transition: 0.75s;
    	transition: 0.75s;
    }
    
    #back-top a:hover {
    	color: #000;
    }
    
    #back-top span {
    	width: 58px;
    	height: 58px;
    	display: block;
    	margin-bottom: 7px;
    	background: #ddd url(/wp-content/uploads/2012/02/tumblr58.png) no-repeat center center;
    
    	-webkit-border-radius: 15px;
    	-moz-border-radius: 15px;
    	border-radius: 15px;
    
    	-webkit-transition: 0.75s;
    	-moz-transition: 0.75s;
    	transition: 0.75s;
    }
    
    #back-top a:hover span {
    	background-color: #777;
    }
    Maybe there is a way that I can halve the value winH and use that?

  • #4
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok so I used

    Code:
    $hwinH = winH / 3
    in conjunction with

    Code:
    			if ($(this).scrollTop() > $hwinH) {
    and it seems to work.


  •  

    Posting Permissions

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