Wikipedia viewer project feedback & help/advice

http://codepen.io/UnfixedMold/pen/bwaBNz

Issues:

  • Page reloads after submitting input with ‘enter’ key for the first time. If input is submitted with ‘search’ button at first, ‘enter’ submission works fine until you reload page manually. I’m guessing this has something to do with <input action=''> attribute.

  • <div class=.results> keep’s not corresponding to sibling elements after animation finishes and .class='form_elements' position: absolute attribute is removed.

  • Can’t figure out how to set #search_box border-radius to 5px on focus mode. Bootsramp’s default border on focus mode doesn’t seem to change no matter what i do.

In order:

  1. You’ll want to call the preventDefault method on your keyup handler’s event object (you call it ‘key’, which is fine, but non-standard)
$('#search_box').keydown(function(key){
     if(key.keyCode===13)
     {
       key.preventDefault(); // <-- If the enter key is pressed, prevent its default behavior
       if(virgin===true)
       {
         searchbox_animation();
         virgin=false;
         
       }
       else get_input();
     }
   });
  1. I’m not sure what this means. What can I do to replicate the issue?

#search_box:focus {
  /* use the :focus pseudo-selector */
}
  1. Got it! Thanks
  2. After input is submitted i move .form_elements to top of the page, using animate() method, but .results div overlaps .form_elements. How can i avoid this? I want .form_elements to stay centered in between top page border and .results div, despite various resolutions.
  3. Figured it out. Needed to set outline to none