Add "back to top"

vianjb
by vianjb · 9 posts
11 years ago in IMVU Homepage Codes
Posted 11 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 11 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 11 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 11 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 11 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 11 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 11 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 11 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
Select a forum Protection     Help & Support     Introductions     Mafia News     IMVU News General Discussion     IMVU Lounge        IMVU Series / Roleplaying        Social Games     Mafia Market     Mafia Tools        Premium IMVU Tools        Off Topic Tools     Off Topic     Contests Creator Corner     Graphics Design        Photoshop        GIMP     Basic Creator Help     Catalog And Product Showcase     3D Meshing        3Ds Max        Sketchup        Blender Gangsters with Connections     White Hat Activities        Google Hacking        Trackers Programming Corner     Coding        Python        .Net (C#, VB, etc)        Flash        JAVA        Autoit        Batch        HTML & CSS        Javascript        PHP        Other        IMVU Homepage Codes           General           About me Panel           Messages Panel           Special Someone Panel           Visitors Panel           New Products Panel           Rankings Panel           Wishlist Panel           My Badges Panel           Outfits Panel           Url Panel           Groups Panel           Slideshow Panel           My Room Panel           Sandbox panel           Layouts     Help & Requests Free Credits     Approved Methods     Submit Methods Free Money     Approved Methods     Submit Methods Adult Corner     Get Mafia AP Here     AP Lounge        AP Social Games        Casual Dating Tips     IMVU Slave Market & Escorts