ginerjm Posted June 10, 2011 Share Posted June 10, 2011 Trying to use a different sized image when a user comes in from an iphone instead of a regular computer screen. Have a secondary image uploaded, have the ability to check the screen size, and have a function call in my body tag's onload event. BUT - I'm getting the message "object doesn't support this property or method" when the js code executes. The offending line is: document.getElementByID('div_img').style.backgroundImage ='url(images/SunriseatThacher_IMG_3113_300x460.jpg)'; I've read everything I can find on the net and I dont' see what is wrong. I've tried different combos of quotes on the url portion and they didn't make a difference. The id name is correct - matches the div that I'm trying to alter. I think my capitalization is correct. Anyone? Quote Link to comment https://forums.phpfreaks.com/topic/239024-trying-to-change-a-background-image-for-different-devices/ Share on other sites More sharing options...
sunfighter Posted June 11, 2011 Share Posted June 11, 2011 See if this does it. Use document.getElementById(div_img').innerHTML = "And write a new style for a new BGND image" hope you understood that. I re-write the DOM all the time, easier than remembering the .style.backgroundImage s.uff Quote Link to comment https://forums.phpfreaks.com/topic/239024-trying-to-change-a-background-image-for-different-devices/#findComment-1228167 Share on other sites More sharing options...
ginerjm Posted June 11, 2011 Author Share Posted June 11, 2011 Do you really think so? I didn't run across any code samples addressing this problem via 'innerhtml'. I'll try it tomorrow morning. Quote Link to comment https://forums.phpfreaks.com/topic/239024-trying-to-change-a-background-image-for-different-devices/#findComment-1228210 Share on other sites More sharing options...
ginerjm Posted June 11, 2011 Author Share Posted June 11, 2011 ok - here's what I tried: document.getElementById('div_img').innerHTML = 'background-image:url(images/SunriseatThacher_IMG_3113_300x460.jpg);'; the result? I now see the string on my screen. Quote Link to comment https://forums.phpfreaks.com/topic/239024-trying-to-change-a-background-image-for-different-devices/#findComment-1228343 Share on other sites More sharing options...
ginerjm Posted June 11, 2011 Author Share Posted June 11, 2011 I've been trying many things and here is a slight change in the problem I think. Here is my js code: var div = document.getElementByID('maindv'); if (w > 500) { div.style.backgroundImage ="url('images/SunriseatThacher_IMG_3113_300x460.jpg')"; } My error message (object doesn't support this property or method) is on the first line of code. Here is the rest of my html <body bgcolor="#000000" onload="FadeOpacity('div_black', 80, 1, 3000, 15),FadeOpacity('div_text', 5, 100, 5500, 10),FadeOpacity('div_imgname', 5, 50, 5500, 10),document.thisform.btn.focus()"> <div id="maindv"> <div id="div_black"> <div id="div_text"> <form name="thisform" method="POST" action="index.php"> <p id="p1">Welcome to my site. As this new effort of mine grows, I will be providing access to some tools that I find useful and that others may enjoy; photographs that I have taken from around my area, my vacations and other items of interest, as well as whatever crosses my mind and makes it to the web.</p> <p id="p_italic">I hope you enjoy.</p> <br> <center> <input id="btn_italic" name="btn" type="submit" value="Enter >>"> </center> <input name="chg" type="button" onclick="SetSizeforScreen()" value="Change Bkgrnd"> </form> </div> <div id="div_imgname"> <p>Sunrise in Thacher Park</p> </div> </div> </div> </body> A simple page with 3 divs, the first one being the one I'm trying to modify. Note I have used the correct spelling of my id tag and there is no duplication of the name with any function or something like that. All my research for js tips and tricks tell me I am doing the right thing, yet IE is telling me it's wrong. Quote Link to comment https://forums.phpfreaks.com/topic/239024-trying-to-change-a-background-image-for-different-devices/#findComment-1228363 Share on other sites More sharing options...
ginerjm Posted June 11, 2011 Author Share Posted June 11, 2011 SOLVED. Stupid javascript syntax! My code used "getElementByID" which not one of the over a dozen viewers of this post picked up on as being mis-typed. Stupd Javascript syntax. Why did the creators of this handy language make it so unique? I've been programming since the 70's and have never encountered a language (other than LISP which those who know it hate for its own syntax problems) that had such strict syntactical rules. Quote Link to comment https://forums.phpfreaks.com/topic/239024-trying-to-change-a-background-image-for-different-devices/#findComment-1228364 Share on other sites More sharing options...
sunfighter Posted June 12, 2011 Share Posted June 12, 2011 My code used "getElementByID" which not one of the over a dozen viewers of this post picked up on as being mis-typed. Actually my code had the correct syntax. It also works if you had implemented it correctly. I don't know what you have in your 'div_img' div so I left that up to you, but I will guess now that it was just a html show image line and that entire line had to be re-written. You should have used something like this: <script type="text/javascript"> function change(){ document.getElementById('div_img').innerHTML = '<img height="69px" width="69px" src="images/SunriseatThacher_IMG_3113_300x460.jpg" alt="smaller"'; } </script> Go ahead and try that.... or what ever you have in the div May I also suggest you get an editor that auto completes javascript. I think PSPad does and its free. Quote Link to comment https://forums.phpfreaks.com/topic/239024-trying-to-change-a-background-image-for-different-devices/#findComment-1228708 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.