jquery - Change Anchor ID When Media Query Active -
i'm trying alter id of anchor tag when media query kicks in. code i'm trying failing with:
$(window).resize(function() { if ($('.container').css('width') == "100%"){ $("a[href='#why-us']").attr("href='#why-us-2'"); } });
i want replace href="#why-us"
href="why-us-2"
thanks.
edit ** code have smooth scroll
$("a[href^='#']").on('click', function(e) { // prevent default anchor click behavior target = this.hash; e.preventdefault(); // animate $('html, body').animate({ scrolltop: $(this.hash).offset().top }, 500, function(){ // when done, add together hash url // (default click behaviour) window.location.hash = target; }); }); $(window).scroll(function() { if($(this).scrolltop() > 400) { $('.scroll-to-top').fadein(); } else { $('.scroll-to-top').fadeout(); } }); $('.scroll-to-top').click(function() { $('html, body').animate({scrolltop: 0},800); homecoming false; });
not sure if test works expect alter of attribute should be
$("a[href='#why-us']").attr("href","#why-us-2");
for handling media query changes through javascript see http://wicky.nillia.ms/enquire.js/
enquire.register("screen , (max-width:580px)", { match : function() { $("a[href='#why-us']").attr("href","#why-us-2"); }, // optional // if supplied, triggered when media query transitions // *from matched state unmatched state*. unmatch : function() { $("a[href='#why-us-2']").attr("href","#why-us"); } });
demo using above plugin: http://jsfiddle.net/nr2xhzja/
jquery html media-queries
No comments:
Post a Comment