...

View Full Version : Need help passing variable from one script to another



Ltrainx
03-10-2012, 08:44 PM
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:


<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:


<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?

felgall
03-10-2012, 09:53 PM
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;
});
});

});

Ltrainx
03-11-2012, 09:39 AM
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?


#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?

Ltrainx
03-11-2012, 10:08 AM
Ok so I used


$hwinH = winH / 3


in conjunction with


if ($(this).scrollTop() > $hwinH) {


and it seems to work.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum