| Page 1 of 1 |
|
|
 Posted: Thu, 16th Aug 2012 23:10 Post subject: Making a return to top 'button' |
|
 |
So I have a sense this is a jquerry question, so I'll post it here.
I have a simple site. In the main container is some random text. Next to it is a div, called side, with an image in it:
 Spoiler: | |
So what I want is to make the home image follow the bottom of the container div with the text in it, and when I click on it, to go to the top of the page 
So if any of you can point me in the right direction, I'd appreciate it
EDIT:
Oh, and if you know any simple way of making the goddamned nav bar aligned properly, that is, I want it to be on the right, but so that every link is equally spaced from each other. Do I need to mess with padding of each list or?
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
garus
VIP Member
Posts: 34200
|
| Posted: Fri, 17th Aug 2012 00:24 Post subject: |
|
|
snip
Last edited by garus on Tue, 27th Aug 2024 21:46; edited 1 time in total
|
|
| Back to top |
|
|
|
|
| Posted: Fri, 17th Aug 2012 02:05 Post subject: |
|
|
Last edited by Interinactive on Tue, 5th Oct 2021 04:02; edited 1 time in total
|
|
| Back to top |
|
|
|
|
| Posted: Fri, 17th Aug 2012 07:10 Post subject: |
|
|
| Interinactive wrote: | Although it's using some shitty old plugin, this page I made uses something similar:
http://coflash.com/steam/
If you want help with the other issue you'll need to post a link to the code |
Something along that line looks good!
@garus: I'll try that, and see what I'll get, thanks ^^
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
Werelds
Special Little Man
Posts: 15098
Location: 0100111001001100
|
|
| Back to top |
|
|
garus
VIP Member
Posts: 34200
|
| Posted: Sat, 18th Aug 2012 00:11 Post subject: |
|
|
snip
Last edited by garus on Tue, 27th Aug 2024 21:46; edited 1 time in total
|
|
| Back to top |
|
|
Werelds
Special Little Man
Posts: 15098
Location: 0100111001001100
|
|
| Back to top |
|
|
garus
VIP Member
Posts: 34200
|
| Posted: Sat, 18th Aug 2012 00:23 Post subject: |
|
|
snip
Last edited by garus on Tue, 27th Aug 2024 21:46; edited 1 time in total
|
|
| Back to top |
|
|
|
|
| Posted: Sat, 18th Aug 2012 00:45 Post subject: I have left. |
|
|
|
|
|
| Back to top |
|
|
Werelds
Special Little Man
Posts: 15098
Location: 0100111001001100
|
|
| Back to top |
|
|
|
|
| Posted: Sun, 19th Aug 2012 21:08 Post subject: |
|
|
Hmmm, I added in <head>
| Code: | <script type="text/javascript" src="jq.js"></script>
<script type="text/javascript" src="scrollTo.js"></script>
<script type="text/javascript">
$('side').animate({ scrollTop: 0 });
</script>
|
the container 'side' is where the image is, but it's not working. Do I need to add something?
EDIT:
I added the code part that garus posted:
| Code: | <script type="text/javascript">
$('#side').on('click', function () {
$('html, body').animate({ scrollTop: 0 });
});
</script> |
But no go. I realised I need the click functionality xD
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
|
|
| Posted: Sun, 19th Aug 2012 21:36 Post subject: I have left. |
|
|
|
|
|
| Back to top |
|
|
|
|
| Posted: Sun, 19th Aug 2012 21:46 Post subject: |
|
|
| Shoshomiga wrote: | | Werelds wrote: | | Shoshomiga wrote: | | A professional programmer would use an anchor for maximum compatibility |
No, we use an anchor for Javascript-less browsers and still animate scrollTop for anything else (read: decent). Which does not include Safari, because Safari fails miserably in handling it  |
Using animation effects for something this simple is a bad idea because the visitor could be using a weak device (phone, tablet, netbook) that will have problems animating smoothly and then he will get pissed and simply leave your site |
I really doubt that the viewers of a portfolio will look at it from a mobile phone 
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
|
|
| Posted: Sun, 19th Aug 2012 21:50 Post subject: |
|
|
Oh and I found the code that works!
| Code: |
<script type="text/javascript">
$(document).ready(function() {
$('#side').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});
</script>
|
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
|
|
| Posted: Sun, 19th Aug 2012 22:01 Post subject: I have left. |
|
|
|
|
|
| Back to top |
|
|
|
|
| Posted: Sun, 19th Aug 2012 22:26 Post subject: |
|
|
Well, it's a simple design based portfolio site, not something that I expect millions of views on, plus I really don't think ppl will notice their scrolling being hijacked 
On a side note, I'd like to have a hover effect on the image (making the cursor change to hand when one the image which will bring you to the top). I didn't find anything that will help on google :\
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
garus
VIP Member
Posts: 34200
|
| Posted: Sun, 19th Aug 2012 22:28 Post subject: |
|
|
snip
Last edited by garus on Tue, 27th Aug 2024 21:46; edited 1 time in total
|
|
| Back to top |
|
|
garus
VIP Member
Posts: 34200
|
| Posted: Sun, 19th Aug 2012 22:30 Post subject: |
|
|
snip
Last edited by garus on Tue, 27th Aug 2024 21:46; edited 1 time in total
|
|
| Back to top |
|
|
|
|
| Posted: Sun, 19th Aug 2012 22:36 Post subject: |
|
|
| garus wrote: |
| Code: | <style type="text/css">
#side:hover{
cursor: pointer;
}
</style> |
|
This!!!
<3
Thank you ^^
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
Werelds
Special Little Man
Posts: 15098
Location: 0100111001001100
|
| Posted: Sun, 19th Aug 2012 22:59 Post subject: |
|
|
| Shoshomiga wrote: | | Using animation effects for something this simple is a bad idea because the visitor could be using a weak device (phone, tablet, netbook) that will have problems animating smoothly and then he will get pissed and simply leave your site |
Hardly. Anyone who'd visit such a site has a phone and/or tablet that is from this decade, which can handle quite a lot animation wise. Particularly animating the document's (technically, body/html) scrollTop is not a complex animation because the DOM is not manipulated in any way.
|
|
| Back to top |
|
|
|
|
| Posted: Mon, 20th Aug 2012 01:46 Post subject: |
|
|
Last edited by Interinactive on Tue, 5th Oct 2021 04:01; edited 1 time in total
|
|
| Back to top |
|
|
Werelds
Special Little Man
Posts: 15098
Location: 0100111001001100
|
| Posted: Mon, 20th Aug 2012 12:10 Post subject: |
|
|
Well first of all, CSS3 itself is not GPU accelerated per se, CSS3 is just a spec. All the major browsers do use the GPU to accelerate parts of the specs though; but none accelerate all the same stuff nor do all accelerate everything they support in the first place.
As for JS versus CSS3: depends. Some CSS transitions work like shit even on an iPad. Then there's also the capability of a JS engine in a specific browser. Android's former default browser was mediocre on that front (Chrome and Opera are much better on that front), but the JS engine in Safari (and this goes for both desktop and mobile) is just downright aweful when you need it to do anything "fancy". Firefox isn't particularly good either although it does handle things more correctly; Safari quite simply does not support some things it should support, like scrollTop in some situations (fixed size div + overflow:hidden + scrollTop = lolfail). Chrome's V8 stands way ahead of both of them, only trumped by Opera which is ridiculously fast.
Former colleague of mine and I did some tests a while ago (I'll see if I can find the link for you later) on just basic selector usage, not even animations and the results were quite troubling to be honest. We used like 6 or 7 different methods of selecting an element and changing border colour to see how quick each browser could do it. Where iOS barely managed 1k Ops/sec, FF was at 7K, Safari Desktop about 9k. Chrome's V8 ranged from 8k to 11k depending on which version - worryingly, a newer revision dropped down from that 11k to 8k in Chrome 21, that's why I find Chrome so annoying lately. Like I said though, none of them are a match for Opera, where 11.64 was already at about 15-17K Ops/sec depending on the selector, in Opera 12 now it even goes past 20k.
So yeah, CSS3 may be easier to apply, but there's also things you can't do with CSS3 and there are things which do run faster in JS. The big problem with JS is that everyone uses plugins for everything these days. Using jQuery is one thing, but most developers I know don't know the first thing about how to actually set an animation up themselves (even though .animate() is really easy to use). Another example is a simple positioned slide-in I did a while ago on an unreleased project (need to finish it when I have time  ). The guy I did it with used CSS3 animations as well, but it ran like crap on the iPad. I rewrote it in JS and it ran fine on the iPad - and much smoother on desktop as well.
Something like those huge images of yours will work better with CSS3 though because the GPU can handle that indeed
|
|
| Back to top |
|
|
| Page 1 of 1 |
All times are GMT + 1 Hour |
