Sulu.MeanStack Sulu.MeanStack - 5 months ago 9
CSS Question

Seperate href url for large screen and small screen Html

I have a responsive web application. For the web view I have the url as

<a href="#/mailbox/sent">Sent Mail</a>


But for the small screen I need the url as

<a href="#/mailbox/sent#toFocus"> Sent Mail</a>


'#toFocus' is appended with the url for focuzing the page to particular position on small devices. I am using the same code for small screen and large screens. If I put the same code for large screen, design got broke down. Is there is any way to put seperate url for large screen & small screen seperately?

Answer

You have to use javascript or jQuery for this.

Here is a solution using jQuery. use $(window).width() and $(window).height() to get with and height of the device respectively , and use it to add link using jQuery attr.

var width = $(window).width(), height = $(window).height();
if ((width <= 1023) && (height >= 768)) {  //or specific device width 
  jQuery('a').attr('href','#/mailbox/sent#toFocus');
} else {
   jQuery('a').attr('href','#/mailbox/sent');
}
Comments