[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Conditional statement question

Posted on 2013-05-23
2
Medium Priority
?
222 Views
Last Modified: 2013-05-23
I have a scrolling image which needs to be smaller for iPhone.  Here is the code:
<ul id=scroller>
if ((navigator.userAgent.indexOf('iPhone') != -1)) {
document.write('<li><img src="images/1.jpg" Alt="" ></li>');
} else
{document.write('<li><img src="images/2.jpg" Alt="" ></li>');
}
</ul>

If I insert <script type="text/javascript"> above the opening <ul> tag, and </script> before the closing </ul>, then the image doesn't scroll.  If I insert it after the opening <ul> tag, I get an error that <ul> cannot contain a script tag.  If I leave it out, the page scrolls, but the same image is loaded, regardless of the user agent.  Please advise.
0
Comment
Question by:ddantes
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 31

Accepted Solution

by:
Frosty555 earned 1000 total points
ID: 39192912
Try something like this:

<ul id=scroller>
     <li><img id="image1" src="about:blank" Alt="" /></li>
</ul>

<script>
if ((navigator.userAgent.indexOf('iPhone') != -1)) {
    document.getElementById("image1").src="images/1.jpg";
} else {
    document.getElementById("image1").src="images/2.jpg";
}
</script>

Open in new window


Basically, you don't use Javascript to actually write the HTML itself. Instead, you use Javascript to programatically change the value of the "src" attribute.

The script could go directly inline on the page, or it could go into your in <head> tag in an onload event.
0
 

Author Comment

by:ddantes
ID: 39192934
Thank you, that really helped.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question