Tue, 2011-03-22 16:44
I want to click on an anchor link and have webkit-transition and webkit-transform:translate take me, move me, scroll me over to the other places <div>s of my document. Right now it is jumping me to the anchor tags but not transitioning over.
Is this even possible with CSS?
I have another webpage where I can make a div come to where I am but in this case I want to travel to the div.
Wed, 2011-03-23 04:06
#1
Transitions can only be used
Transitions can only be used on the element that you're interacting with. What you're describing involves other elements, either the body or the element you want to move to, so you'd have to use javascript instead.
Fri, 2011-03-25 20:25
#2
moving from one anchor to another
Here's the URL of the website I made.
http://www3.telus.net/broadbentfamily/My%20Norwex%20House.html
I have tried softscroll javascript to scroll from one link to another but it just disables my links.
On a side note, I am trying to learn javascript but I feel like I can't even find the "words" to start "talking". With HTML and CSS at least there is a "dictionary" or list of words to "pronounce" and experiment "talking" with. I have tried a lot of javascript tutorials but can't seem to move past (stupid and useless) alerts.
Mon, 2011-03-28 21:05
#3
javascript scroll to anchor horizontal and vertical
After days of googling and studying I found these 2 websites:
http://www.mediacollege.com/internet/javascript/page/scroll.html
[which taught me javascript ScrollBy]
and
http://stackoverflow.com/questions/3267794/scroll-page-until-some-height
[which taught me javascript setInterval and clearInterval],
I now have links where I can click on a link and move me both horizontally and vertically over to the other places!
<!DOCTYPE HTML> <html> <head> <title>java scroll experiment2</title> <link rel="stylesheet" href="javascrollexperiment.css"> <script type="text/javascript"> function startPageScrollroom2() {var scrollAmt = 0; var id=setInterval (function() {if(scrollAmt<2550) {window.scrollBy(20,0); scrollAmt +=50; } else{clearInterval(id);}},100); } </script> <script type="text/javascript"> function startPageScrollroom3() {var scrollAmt = 0; var id=setInterval (function() {if(scrollAmt<6000) {window.scrollBy(20,0); scrollAmt +=50; } else{clearInterval(id);}},100); } </script> <script type="text/javascript"> function startPageScrollroom4() {var scrollAmt = 0; var id=setInterval (function() {if(scrollAmt<2000) {window.scrollBy(0,20); scrollAmt +=50; } else{clearInterval(id);}},100); } </script> <script type="text/javascript"> function startPageScrollroom5() {var scrollAmt = 0; var id=setInterval (function() {if(scrollAmt<2000) {window.scrollBy(25,20); scrollAmt +=50; } else{clearInterval(id);}},100); } </script> <script type="text/javascript"> function startPageScrollroom6() {var scrollAmt = 0; var id=setInterval (function() {if(scrollAmt<2000) {window.scrollBy(50,20); scrollAmt +=50; } else{clearInterval(id);}},100); } </script> </head> <body> <div id="room1"> <a href="javascript:startPageScrollroom2 ()">go to room 2</a> <a href="javascript:startPageScrollroom3 ()">go to room 3</a> <a href="javascript:startPageScrollroom4 ()">go to room 4</a> <a href="javascript:startPageScrollroom5 ()">go to room 5</a> <a href="javascript:startPageScrollroom6 ()">go to room 6</a> </div> <div id="room2"> <a href="#room1">Back to room 1</a> </div> <div id="room3"> <a href="#room1">Back to room 1</a> </div> <div id="room4"> <a href="#room1">Back to room 1</a> </div> <div id="room5"> <a href="#room1">Back to room 1</a> </div> <div id="room6"> <a href="#room1">Back to room 1</a> </div> </body> </html>