CODEWITHSUNDEEP
htmlcss
rabo
rabo

Reputation: 47

same id on desktop and mobile

I have:

  1. jumplinks
  2. two different designs for desktop and mobile
  3. some CSS media query in order to display only one of the designs while the other one is on display: none.

Basically is something like that:

<a href="#my_ID">go to my_ID</a>
<div id="my_ID" class="desktop"> my desktop content</div>
<div id="my_ID" class="mobile"> my mobile content</div>

It works fine for the design, but the jumping only works partly: The browser always wants to jump to the first ID, if the first ID is not displayed the browser does nothing. (I thought it will jump to the second one that is displayed.)

Is there any solution for that problem like adding the IDs dynamically with jQuery or some other workaround?

Thanks in advance

Upvotes: 1

Views: 521

Answers (2)

rabo
rabo

Reputation: 47

I changed the href of the links on mobile with some jquery, now I can use two different IDs. It goes like that:

if ($(window).width() < 767){       
        $("a[href='my_URL']").attr('href',  'my_URL_mobile');
}

Upvotes: 0

rawnewdlz
rawnewdlz

Reputation: 1265

ID's can only be used once per html page.

The anchor should be different for desktop and mobile if one is hidden depending on the user's display.

/* Medium screens and larger - example */
@media only screen and (min-width: 40.063em) {
  a[href="#my_mobile_ID"],
  #my_mobile_ID {
    display: none;
  }
}


/* small screens - example */
@media only screen and (max-width: 40em) {
  a[href="#my_desktop_ID"],
  #my_desktop_ID {
    display: none;
  }
}

#my_desktop_ID {
  background: lime;
  width: 300px;
  height: 400px;
}

#my_mobile_ID {
  background: cyan;
  width: 300px;
  height: 400px;
}
<a href="#my_desktop_ID">go to my_desktop_ID</a>
<a href="#my_mobile_ID">go to my_mobile_ID</a>
<div id="my_desktop_ID" class="desktop"> my desktop content</div>
<div id="my_mobile_ID" class="mobile"> my mobile content</div>

Upvotes: 1

Related Questions