0

im doing frontend job for translating design mockup to webpage. the design have mobile responsive design also.

i do mobile responsive by duplicating an element (same id, but another have additional class to hide the element)

//desktop
<div id="obj" class="container hidden-xs"></div> //javascript works on desktop view

//mobile
<div id="obj" class="container visible-xs"></div> //javascript doesn't work on mobile view

i have default javascript function that already run (lets say change it's background color), but when i add mobile version it doesn't work on mobile view

maybe i do responsive wrong way, can someone suggest "how the way i should do responsive web" please ?

Opping Cinchan
  • 61
  • 8
  • You cannot use two element with same ids, ids are unique in the document, use classes rather ids. – Sohail Ashraf Jan 12 '20 at 03:40
  • is there any method to do responsive design with working javascript then? @Sohail – Opping Cinchan Jan 12 '20 at 03:43
  • remove the element from the `DOM` which is hidden. – Sohail Ashraf Jan 12 '20 at 03:46
  • i have think that way, but it comes to my mind how about if user change their phone orientation, then the view should be tablet or maybe dekstop right? – Opping Cinchan Jan 12 '20 at 03:47
  • thanks for somebody who tag this as duplicate but that reference not helping me anyway, i need solution not just the reason why it cannot – Opping Cinchan Jan 12 '20 at 03:50
  • Don't make a copy. Instead, use Javascript to change the class name when mobile view should be active – Andrew Jan 12 '20 at 03:53
  • oh my god you clear my mind @Andrew, i think that will be working. thanks – Opping Cinchan Jan 12 '20 at 03:56
  • i forgot @Andrew, i think cannot do that way because some feature got moved into another element (ex. search feature on navbar, moved into product container). so it cannot just add or remove class, thats why im thinking to make duplicate of it with different structure – Opping Cinchan Jan 12 '20 at 04:17

0 Answers0