html - animate menu: shall I use canvas or javascript? -


i must animate main menu links ( us, contact, etc) have specific graphics (i using anchor background image class). i'm wondering if canvas best way animate specific div (my menu). want move 100px upward/downwards after being clicked. example: click "projects", anchor (with image) moved 100 pixels down. when click "about us", "projects" link moved (at it's original position), , "about us" moved down 100px.

is canvas right way it? use css3 transitions/animate ie9 not supported. want ie9 able render site correctly.

shall use canvas or kind of javascript plugin this? ( use plain javascript relative/absolute positioning keeps changing top pixels, don't result of it). used plain javascript this:

my menu:

 <div id="menu">    <ul class="nav">         <li><a href="#" class="projects" id="projects" onclick="move()"></a>         </li>          <li><a href="#" class="aboutus"></a>         </li>          <li><a href="#" class="contact"></a>         </li>    </ul>

my css:

 a.projects   {      width: 184px;      height: 32px;      background: url('css-images/projects.png') no-repeat;          position: absolute;  } #menu {     position:relative; }

my javascript:

 function move(){      var proj = document.getelementbyid("projects");      var count = 0;      var id  = setinterval(loop, 30);       function loop(){          proj.style.top = count + "px";           var max = 100;          count+=10;          if(count >= max){         clearinterval(id);          }      }  }

go jquery's animate() function if broad browser support required. if not, use css3 transitions.

if you're not concerned how animations long they're equivalent, leverage modernizr deliver css3 animations browsers support them , jquery animations don't.

it's worth nothing jquery's animate() function could natively deliver css3 animations eligible browsers, jquery's developers haven't yet implemented this. because browsers still implement css3 transitions varying degrees of success, whereas jquery geared towards keeping things consistent.

canvas isn't appropriate use case imo due abstraction semantic elements.


Comments

Post a Comment

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

i'm learning java , have question regarding reading file want read numbers file contains strings well. here example of file: 66.56 "3 java 3-43 5-42 2.1 1 and here coding: public class test { public static void main (string [] args){ if (0 < args.length) { file x = new file(args[0]); try{ scanner in = new scanner( new fileinputstream(x)); arraylist<double> test = new arraylist<>(); while(in.hasnext()){ if(in.hasnextdouble()){ double f=in.nextdouble(); test.add(f);} else {in.next();} } catch(ioexception e) { system.err.println("exception during reading: " + e); } } my problem add 66.56,2.1 , 1 doesn't add 3 after "3 or ignores 3-43 , 5-42 can tell me how skip strings , add doubles here? thanks all said 3 ie; "3, 3-43 , 4-42 strings either u read string , split , check number @ " , - or put in space between characters , integers. jvm after compilation tre...
Read more

rewrite - Trouble with Wordpress multiple custom querystrings -

i'm working on adding multiple querystring , doesn't seem work. i've found codes seems work others might i'm missing something. i want like: http://mydomain.com/board/?getyear=2013&getsometext2=sometext to http://mydomain.com/board/2013/sometext/ i added code below functions.php file. doesn't seem work should though. this works. echoing querystring gets both variable without problem. http://mydomain.com/board/2013/sometext/ but doesn't. tested querystring vis isset() seems nothing being set/get http://mydomain.com/board/2013/ function add_query_vars($vars) { $vars[] = "getyear"; $vars[] = "getsometext2"; return $vars; } add_filter('query_vars', 'add_query_vars'); function add_rewrite_rules($arules) { $anewrules = array('board/([^/]+)/([^/]+)/?$' => 'index.php?pagename=board&getyear=$matches[1]&getsometext2=$matches[2]'); $arules = $a...
Read more