With jquery how do you keep an element in focus after resize? -
i'm trying copy mashable.com's second menu in 640px & 320px. i'm having trouble when resize called menu item element becomes no longer in focus anymore when rotating 640px 320px. can me please?
here current code, i've taken out resize function moment until can sorted.
<script> jquery(document).ready(function(){ var sliderwidth = jquery('.mosts').css('width'); swidthnum = sliderwidth.replace("px", ""); if (swidthnum >= 640) { jquery('#slider').css('width', '150%'); jquery(".buttongroup1>.date-nav-1").click(function(){ jquery("#slider").animate({left: "0px"}); }); jquery(".buttongroup1>.date-nav-3").click(function(){ jquery("#slider").animate({left: "-50%"}); }); } else if (swidthnum >= 320) { jquery('#slider').css('width', '300%'); jquery(".buttongroup2>.date-nav-1").click(function(){ jquery("#slider").animate({left: "0px"}); }); jquery(".buttongroup2>.date-nav-2").click(function(){ jquery("#slider").animate({left: "-100%"}); }); jquery(".buttongroup2>.date-nav-3").click(function(){ jquery("#slider").animate({left: "-200%"}); }); } jquery(window).resize(function(){location.reload();}); }); </script> <div class="buttongroup1"> <button class="date-nav-1">what's trending</button> <button class="date-nav-3">read more</button> </div> <div class="buttongroup2"> <button class="date-nav-1">trending</button> <button class="date-nav-2">newest</button> <button class="date-nav-3">read more</button> </div>
i been trying week 640px 320px good. think pseudo code goes this: when page first loads have focus .date-nav-1, when rotating keep focus on current element whether .date-nav-1 or .date-nav-3 every-time add resize function looses focus :(
and me going awesome right :)
maybe:
$(window).resize(function(){$("#my-element").focus();});
ps: why reload page? don't recommend this.
Comments
Post a Comment