1

I'm trying to add javascript on top of my page and if it detects mobile browser then my html code will use the appropriate html code and image height and width settings.

<script type="text/javascript">
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
    <img src="https://drive.google.com/uc?export=view&id=0B2VHnnIsISjHdWRLVk9zS2VuUFk" alt="" style="width:1904px;height:328px;">
  else
    <img src="https://drive.google.com/uc?export=view&id=0B2VHnnIsISjHdWRLVk9zS2VuUFk" alt="" style="width:1904px;height:528px;">
</script>

I am not sure why its not working?

how do i make this in full javascript

var img = document.createElement("img");
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  img.src = "http://home.bt.com/images/the-iphone-7-and-7-plus-which-bt-mobile-plan-is-right-for-me-136409622203503901-160915131847.jpg";
  img.style.width = "648px";
  img.style.height = "365px";
} else {
  img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Desktop_computer_clipart_-_Yellow_theme.svg/281px-Desktop_computer_clipart_-_Yellow_theme.svg.png";
  img.style.width = "281px";
  img.style.height = "203px";
}
document.body.appendChild(img);

so its in

<script type="text/javascript">

some code

like this full code so i can add it to my html code

edited new

is this correct ?

    <script type="text/javascript">
     var img = document.createElement("img");
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  img.src = "https://drive.google.com/uc?export=view&id=0B2VHnnIsISjHdWRLVk9zS2VuUFk";
  img.style.width = "1904px";
  img.style.height = "365px";
} else {
  img.src = "https://drive.google.com/uc?export=view&id=0B2VHnnIsISjHdWRLVk9zS2VuUFk";
  img.style.width = "1904px";
  img.style.height = "403px";
}
document.body.appendChild(img);

        </script>
dean lee
  • 11
  • 3

1 Answers1

1

If i understand correctly you want to show 1 of 2 images depending if the user is on a mobile or computer. (btw i have not tested your test function) 

   <script type="text/javascript">
    var img = document.createElement("img");
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    img.src = src;
    img.style.width = width;
    img.style.height = height;
    }
    else{
    img.src = src;
    img.style.width = width;
    img.style.height = height;
    }
document.body.appendChild(img);
    </script>

first you can create the image node, set the src height and width and then append to the body. also there is room to clean up the code I have used in my example. set the style width and height outside the if else blocks for e.g.

Yusaf Khaliq
  • 3,033
  • 10
  • 37
  • 80
  • how do i set the hieght and width boss – dean lee Dec 15 '16 at 22:43
  • how do i also add link to image src – dean lee Dec 15 '16 at 22:44
  • change `img.src = "link to image here"`; and `image.style.width = "100px"` – Yusaf Khaliq Dec 15 '16 at 22:45
  • both image are same problem is when i set the height of 433 then on pc it looks fine but when using mobile browser it is to large , so this is why am trying to detect if it is mobile browser if then use the correct hight for it – dean lee Dec 15 '16 at 22:46
  • https://jsfiddle.net/rxff2qoq/ in this exmaple, if the browser is on mobile it will show a mobile image, if a computer an image of a computer. – Yusaf Khaliq Dec 15 '16 at 22:48
  • ok don't set the image to a fixed "px" set it to relative width using either "%" or "em". I would go with % as it's easier. set width to "100%" using image.style.width = "100%" – Yusaf Khaliq Dec 15 '16 at 22:50
  • can u check the 1st post i added your code, if u can kindly show me the full javascript code so i can add it to my page to test it live please boss – dean lee Dec 15 '16 at 22:51
  • can u check my 1st post again last one i added ? – dean lee Dec 15 '16 at 22:54
  • can u check my 1st post again last one i added ?, i added this to my post its not showing up the image maybe i done it wrong ? – dean lee Dec 15 '16 at 22:55
  • the 100% should be in quotes like "100%". it's a string. also if you used "100%" width do not set the height, the browser will automatically take care of the height. – Yusaf Khaliq Dec 15 '16 at 22:56
  • i think this is wrong – dean lee Dec 15 '16 at 23:00
  • am trying to add – dean lee Dec 15 '16 at 23:01
  • after the code you have to close the tag using – Yusaf Khaliq Dec 15 '16 at 23:01
  • yup i have if u check 1st post last one it has it , but my wordpress its not outputting it – dean lee Dec 15 '16 at 23:03
  • I can't help you beyond here unfortunately, I can not go through every option to see why it is not working. please use the jsfiddle links i have provided to reference. – Yusaf Khaliq Dec 15 '16 at 23:05
  • if u test it here also https://jsbin.com/qoyoseguda/edit?html,output its not showing – dean lee Dec 15 '16 at 23:05
  • js fiddler working but how do i make it work in html as full javascript? – dean lee Dec 15 '16 at 23:06
  • i ran the whole code again on this website https://js.do/ and it says × JavaScript error: TypeError: document.body is null on line 15 – dean lee Dec 15 '16 at 23:08
  • heres the new one https://jsbin.com/votowadidu/edit?html,output . it't because you are using the javascript in the head. the body hasnt rendered. – Yusaf Khaliq Dec 15 '16 at 23:10
  • its working but it puts it in my footer of the site how come – dean lee Dec 15 '16 at 23:15
  • i have a specific bannera area where i add html code and i want it to appear their instead it goes to footer area all the way bottom of the site – dean lee Dec 15 '16 at 23:16