CODEWITHSUNDEEP
javascriptreactjsreact-reduxreact-bootstrapreactstrap
aishcript
aishcript

Reputation: 553

How do I hide an svg and show another when using a phone?

I'm developing a web app with react strap. I am using 2 SVG's for background and I want one to be shown only when user access it from pc and another one should only be shown when user access it on Thier phone. So basically I want the 1st SVG to be hidden when user access website with their phone and vice versa

Upvotes: 2

Views: 1111

Answers (2)

Anvay
Anvay

Reputation: 345

A simple and elegant solution would be to apply bootstrap classes hidden-xs and visible-xs on the parent html element of the svg to be shown on pc and the svg to be shown on mobile respectively.

How it works:

  1. All the classes with -xs as the suffix apply their effects only when the viewport is below 480px.
  2. So in the case of hidden-xs, the element on which this class is applied will get hidden whenever the viewport resolution is below 480px. On higher resolutions, it will be shown by default.
  3. And in the case of visible-xs, the element on which this class is applied will only be shown when the viewport resolution is below 480px. On higher resolutions, it will be hidden by default.

Example:

<div class="visible-xs">
  <svg /> <-- This will be shown on mobile and hidden on desktop --!>
</div>
<div class="hidden-xs">
 <svg /> <-- This will be hidden on mobile and shown on desktop --!>
</div>

In Bootstrap 4, this can be achieved by using the classes of the following format:

  • .d-{value} for xs
  • .d-{breakpoint}-{value} for sm, md, lg, and xl.

Where value is one of:

  • none
  • inline
  • inline-block
  • block table
  • table-cell
  • table-row
  • flex
  • inline-flex

Upvotes: 2

andylamax
andylamax

Reputation: 2073

check to see if its mobile, see this post

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

and 

var isMobile = false
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
    isMobile = true;
}

if(isMobile) {
  svg1.style.visibility = "hidden"
  svg2.style.visibility = "visible"
} else {
  svg2.style.visibility = "hidden"
  svg1.style.visibility = "visible"
}
<svg id=svg1 width=200 height=200>
  <circle cx=70 cy=67 r=50 />
</svg>

<svg id=svg2 width=200 height=200>
  <circle cx=120 cy=100 r=50 />
</svg>

I believe its in your best interest to extract isMobile into a seperate function

Upvotes: 1

Related Questions