Add "back to top"

vianjb
by vianjb · 9 posts
12 years ago in IMVU Homepage Codes
Posted 12 years ago · Author
Well , i want to share a "back to top" for you imvu hp . maybe you could use it if your page are too high, so you no longer need to scroll to the top or you can use it just for looking good

[spoiler=Clik to see code]
Code
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#noop-top").fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='noop-top' style='display: none; position: fixed; bottom: 1px; right:1%; cursor:pointer;font:12px arial;'><span>^</span></a><style type="text/css">#noop-top span{-moz-transition:all .3s ease-in 0s;-webkit-transition:all .3s;-o-transition:all .3s;background-color:#F90808;background:-moz-linear-gradient(top,#F90808 0,#F90808 50%,#F90808 51%,#F90808 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#F90808),color-stop(50%,#F90808),color-stop(51%,#F90808),color-stop(100%,#F90808));background:-webkit-linear-gradient(top,#F90808 0,#F90808 50%,#F90808 51%,#F90808 100%);background:-o-linear-gradient(top,#F90808 0,#F90808 50%,#F90808 51%,#F90808 100%);background:-ms-linear-gradient(top,#F90808 0,#F90808 50%,#F90808 51%,#DA2941100%);background:linear-gradient(top,#F90808 0,#F90808 50%,#F90808 51%,#F90808 100%);border:3px solid #fff;border-radius:14px 14px 14px 14px;color:#fff;font:bold 56px cursive;height:50px;left:3px;display:block;text-align:center;text-shadow:1px 1px 0 #000;top:-56px;width:50px}#noop-top:hover span{box-shadow:0 0 49px #F90808;height:70px}#noop-top{color:#000;text-shadow:1px 1px 0 #fff;text-decoration:none}</style>
[/spoiler]

you can change with other color , this script i make your easy to change . just , change html color codes #F90808 with other color codes you want it and press F3 or ctrl + F to easy search then change color code #F90808

you can get color code in this site http://html-color-codes.info

SORY aobut my speak may make confused
Last edited by vianjb on Tue Jul 10, 2012 1:20 am, edited 1 time in total.
Posted 12 years ago
vianjb wrote:
Well , i want to share a "back to top" for you imvu hp . maybe you could use it if your page are too high, so you no longer need to scroll to the top or you can use it just for looking good

[spoiler=Clik to see code]
Code
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#noop-top").fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='noop-top' style='display: none; position: fixed; bottom: 1px; right:1%; cursor:pointer;font:12px arial;'><span>^</span></a><style type="text/css">#noop-top span{-moz-transition:all .3s ease-in 0s;-webkit-transition:all .3s;-o-transition:all .3s;background-color:#F90808;background:-moz-linear-gradient(top,#F90808 0,#F90808 50%,#F90808 51%,#F90808 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#F90808),color-stop(50%,#F90808),color-stop(51%,#F90808),color-stop(100%,#F90808));background:-webkit-linear-gradient(top,#F90808 0,#F90808 50%,#F90808 51%,#F90808 100%);background:-o-linear-gradient(top,#F90808 0,#F90808 50%,#F90808 51%,#F90808 100%);background:-ms-linear-gradient(top,#F90808 0,#F90808 50%,#F90808 51%,#DA2941100%);background:linear-gradient(top,#F90808 0,#F90808 50%,#F90808 51%,#F90808 100%);border:3px solid #fff;border-radius:14px 14px 14px 14px;color:#fff;font:bold 56px cursive;height:50px;left:3px;display:block;text-align:center;text-shadow:1px 1px 0 #000;top:-56px;width:50px}#noop-top:hover span{box-shadow:0 0 49px #F90808;height:70px}#noop-top{color:#000;text-shadow:1px 1px 0 #fff;text-decoration:none}</style>
[/spoiler]

you can change with other color , this script i make your easy to change . just , change html color codes #F90808 with other color codes you want it and press F3 or ctrl + F to easy search then change color code #F90808

you can get color code in this site http://html-color-codes.info

SORY aobut my speak may make confused


Kinda wont work IMVU doesn't allow expernal JS to be linked unless you draw change the dom by a javascript function or use IMVUs jquery alreadt existing :)
Posted 12 years ago · Author
Ťṓƴᶎ wrote:
vianjb wrote:
Well , i want to share a "back to top" for you imvu hp . maybe you could use it if your page are too high, so you no longer need to scroll to the top or you can use it just for looking good

[spoiler=Clik to see code]
Code
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#noop-top").fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='noop-top' style='display: none; position: fixed; bottom: 1px; right:1%; cursor:pointer;font:12px arial;'><span>^</span></a><style type="text/css">#noop-top span{-moz-transition:all .3s ease-in 0s;-webkit-transition:all .3s;-o-transition:all .3s;background-color:#F90808;background:-moz-linear-gradient(top,#F90808 0,#F90808 50%,#F90808 51%,#F90808 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#F90808),color-stop(50%,#F90808),color-stop(51%,#F90808),color-stop(100%,#F90808));background:-webkit-linear-gradient(top,#F90808 0,#F90808 50%,#F90808 51%,#F90808 100%);background:-o-linear-gradient(top,#F90808 0,#F90808 50%,#F90808 51%,#F90808 100%);background:-ms-linear-gradient(top,#F90808 0,#F90808 50%,#F90808 51%,#DA2941100%);background:linear-gradient(top,#F90808 0,#F90808 50%,#F90808 51%,#F90808 100%);border:3px solid #fff;border-radius:14px 14px 14px 14px;color:#fff;font:bold 56px cursive;height:50px;left:3px;display:block;text-align:center;text-shadow:1px 1px 0 #000;top:-56px;width:50px}#noop-top:hover span{box-shadow:0 0 49px #F90808;height:70px}#noop-top{color:#000;text-shadow:1px 1px 0 #fff;text-decoration:none}</style>
[/spoiler]

you can change with other color , this script i make your easy to change . just , change html color codes #F90808 with other color codes you want it and press F3 or ctrl + F to easy search then change color code #F90808

you can get color code in this site http://html-color-codes.info

SORY aobut my speak may make confused


Kinda wont work IMVU doesn't allow expernal JS to be linked unless you draw change the dom by a javascript function or use IMVUs jquery alreadt existing :)


:) , hehe , thanks for telling , now i want to edit the code again just delete code jquery

-- Tue Jul 10, 2012 1:54 am --

Mew wrote:
i use javascript all the time on IMVU o.o its never not worked for me..


oh , well , i tried in google chrome , mozzila and IE , thats worked . hmm , may you can look in my id test on

http://examplebacktotop.co.cc , you can scroll in below then you can look back to top in the right side bottom , :)
Posted 12 years ago
Here try this out:
[spoiler=Clicky]<head>
<style>
body {
font: .88em/150% Arial, Helvetica, sans-serif;
margin: 30px auto;
}
#pagewrap {
margin: 0 auto;
width: 600px;
padding-left: 150px;
position: relative;
}

/*
Back to top button
*/
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}
</style>

</head>

<body id="top">
<div id="pagewrap">
<p> Put whatever code you want in here</p><br>
<p> ...</p><br>
<p> ...</p><br>
<p> ...</p><br>
<p> ...</p><br>
<p> ...</p><br>
<p> ...</p><br>
<p> ...</p><br>
<p> ...</p><br>
<p> ...</p><br>
<p> ...</p><br>


<p id="back-top">
<a href="#top"><span></span>Back to Top</a>
</p>

</div>
</body>
</html>[/spoiler]

If you want a Demo of it go here: Clicky
Posted 12 years ago
Ťṓƴᶎ wrote:
Kinda wont work IMVU doesn't allow expernal JS to be linked unless you draw change the dom by a javascript function or use IMVUs jquery alreadt existing :)


That is just a rule for IMVU's HP code section on their forums which limits people's codes for security. Actually using external JS will cause no problems at all, as long as the provider of the external file does not change the file at all.
Posted 12 years ago · Author
lol , yes doesnt work , first time i want to make a simple code just
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#top"><img src="http://vianjb.googlecode.com/files/BTT.gif" /></a>
then not work too :badgrin:
Posted 12 years ago
Don Von Free Credits wrote:
Ťṓƴᶎ wrote:
Kinda wont work IMVU doesn't allow expernal JS to be linked unless you draw change the dom by a javascript function or use IMVUs jquery alreadt existing :)


That is just a rule for IMVU's HP code section on their forums which limits people's codes for security. Actually using external JS will cause no problems at all, as long as the provider of the external file does not change the file at all.

Ive never had any issues placeing my javascript directly on the IMVU hompages. its always worked on mine O.o
and ive had other people look at my homepage useing diffrent browsers and it still worked o.o
Could this be because its not "a lot" of scripting?
Posted 12 years ago
Lol, I was wondering why the pages didn't normally actually have this but this code is going to make it so much easier to navigate the user pages that are like PAGES long but are smart enough for this.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in

Already have an account? Sign in here

SIGN IN NOW

Create an account

Sign up for a new account in our community. It's easy!

REGISTER A NEW ACCOUNT