javascript - event.preventDefault() Causing :hover pseudo class to stick -


i trying implement document navigation, similar on bootstrap site documentation. i've got working on whole, there 1 little aspect of bugging me.

like on bootstrap, using combination of affix.js , scrollspy.js, , working. see following jsfiddle.

        $('#doc_nav').on( "click", "a", function( e ){ //            e.preventdefault();             var target = this.hash;             var $target = $(target);             var offset = $target.offset().top;             console.log(offset);             offset = offset - 100;             console.log(offset);              $('html, body').scrolltop( offset );           });

with e.preventdefault() commented out, behavior of navigation menu expected. scrolling down window results in displayed div being highlighted on menu. clicking on item in menu list, takes directly corresponding div on page , when scroll away section on page, menu updates accordingly.

on 'real' page, have fixed header of height 100px. currently, when click on menu link, pages jumps required section , places @ top of page header obscures slightly. scrolltop part of code above doesn't seem work unless use e.preventdefault(). if uncomment line in fiddle , run again, click on 'heading 3' link on menu, , see puts heading 3 content in page offset 100px top. perfect.

however, scroll page towards top. see 'heading 3' list item, remains in :hover state, when mouse no near it. though e.preventdefault() has prevented browser detecting mouse no longer hovering on item.

mouseclicking anywhere outside browser window, corrects problem.

can shed light on i'm doing wrong here? how can prevent default behavior of anchor click can control page scroll placement, without stopping correct css painting in process?

the problem arises because preventing browsers default behavior, using e.preventdefault(), want control scroll anchored element.

i've tested in firefox , ie10.

the issue not :hover state, :focus state.

when click on link, link gains focus apply :focus styling (that same :hover styling in code). preventing default behavior, link stays active , doesn't lose focus.

one quick solution unfocus/blur element using: $(this).blur().

in code this:

    $('#doc_nav').on( "click", "a", function( e ){         e.preventdefault();         var target = this.hash;         var $target = $(target);         var offset = $target.offset().top;         console.log(offset);         offset = offset - 100;         console.log(offset);         $(this).blur();         $('html, body').scrolltop( offset );     });

you can see demo here: https://jsfiddle.net/z32rpe3b/30/

why did work fine e.preventdefault() incorrectly without it?

the answer has order of execution. onclick event happens before href redirection happens in browser:

  • without e.preventdefault(), code executed, , browser scrolled correctly target offset - 100 position (in onclick), executed link href , scrolled target offset. happens fast seems goes directly target position.
  • with e.preventdefault(), code executed (scrolling offset - 100), , browser doesn't execute href action (so stays @ offset - 100).

Comments

Post a Comment

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

this code i'm using find latitude , longitude of place: function coords($address){ echo $url="http://maps.googleapis.com/maps/api/geocode/json?address=".$address; $json = file_get_contents(urlencode($url)); $data = json_decode($json, true); print_r($data['results'][0]['geometry']['location']['lat']); print_r($data['results'][0]['geometry']['location']['lng']); } however returns warning: failed open stream: http request failed! http/1.0 400 bad request if use above code in simple procedure works fine not in function. note: have tried curl_init()... method produced same result? instead of encoding whole url encode address part. following code work fine $add='jamshoro phase 2'; $url="http://maps.googleapis.com/maps/api/geocode/json?address=".urlencode($add); $json = file_get_contents($url); $data = json_decode($json, true); print_r($data['r
Read more

java - How to filter a backspace keyboard input -

i have code gives message when key number pressed: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochararray().length - 1]; if (!(ch >= '0' && ch <= '9')) { system.out.println("the char entered not number"); t.consume(); } } }); now if press on wrong button , press backspace remove it, error message. how can add backspace input if statement? i have found answer: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochar
Read more

java - Show Soft Keyboard when EditText Appears -

i have code in android app, alert dialog , keyboard, , when dialog shown want keyboard appear. not , not sure why? here code: final alertdialog.builder alert = new alertdialog.builder(this); alert.settitle("title"); alert.setmessage("message"); final edittext input = new edittext(this); input.setinputtype(inputtype.type_class_number); alert.setview(input); input.setonfocuschangelistener(new view.onfocuschangelistener() { @override public void onfocuschange(view v, boolean hasfocus) { if (hasfocus) { log.i(tag, "in focus"); inputmethodmanager inputmethodmanager = (inputmethodmanager) getsystemservice(context.input_method_service); inputmethodmanager.showsoftinput(input, inputmethodmanager.show_implicit); } } }); but keyboard not appear though edit text in focus, , tell appear why, doesn't come up? thanks in advance.
Read more