iPhone Apps with JQTouch

Hello,
I am trying to create an iPhone App using the jQTouch library. I will like to have three buttons displayed horizontaly at the bottom of the second page(after clicking on "Akebia quinata"). I put three internal links there, but the links take me all to the main page. I want them to take me to the images page. my code is attahed and thank you for your help
<html>
<head>
<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css" />
<link type="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Invasive plants on iPhone</title>
<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript">
  var jQT = $.jQTouch({
			icon: 'kilo.png',
			statusBar:'black'
					  });
</script>
</head>

<body>

<div id="home">
   <div class="toolbar">
   </div>
   <img src="images/1.png">
   <ul class="edgetoedge">
      <li class="arrow"><a href="#Akebia">Akebia quinata</a></li>
   </ul>
</div>

<div id="Akebia">
  <img src="images/logo.png">
  <div class="toolbar">
    <a class="button back" href="#">Back</a>
  </div>
  
  <p>
      <strong>Description:</strong><br> 
     Five-leaf akebia is a climbing or trailing vine that invades forested areas throughout the eastern United States. It may be deciduous, semi-evergreen, or evergreen, depending on climatic variables. The twining vines are green when young, turning brown with age. The leaves are palmately compound with typically five; 1½ to 3inch (2.5-7.6 cm) long, oval leaflets with entire margins. Flowering occurs in the mid-spring, when small, purple to red, fragrant flowers develop. Fruit are purple seed pods that contain white pulp and small black seeds. Fruits are rarely observed in naturalized populations.<br>
      
    <strong>Similar native species:</strong><br> The native vine Virginia creeper (Parthenocissus quinquefolia) also has palmately compound leaves, but the leaflets have toothed margins and it climbs by tendrils that have adhesive disks used to climb.<br>
    
    <strong>Ecological threat:</strong><br> Five-leaf akebia is shade tolerant and invades forested habitats. The dense mat of vines can displace native understory species. It can also climb onto, smother and kill small trees and shrubs. Since fruit production is infrequent, spread most often occurs through plantings of ornamentals (which may produce fruit) and the dumping of viable plant material.<br>
    
    <strong>Potential range:</strong><br> 
    Throughout the state, especially near urban areas and gardens.<br>
    <strong>Origin:</strong><br> 
    Five-leaf akebia is native to eastern Asia and was first introduced into the United States in 1845 as an ornamental. It is still sold as an ornamental.
    Known distribution
      </p>
  
 

 <!---<ul class="edgetoedge">
      <li class="arrow"><a href="#Akebiaimages">Images</a></li>
 </ul>--->
 
  <ul class="edgetoedge">
    <a  href="#Akebiaimages">Images</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a  href="#Akebiaimages">Map</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a  href="#Akebiaimages">Control</a>   
  </ul>   
      
 </div> 
  
 
<div id="Akebiaimages">
  <img src="images/logo.png">
  <div class="toolbar">
    <a class="button back" href="#">Back</a>
  </div>   
 <img src="images/2.png"><br />
 <img src="images/3.png"><br />
 <img src="images/4.png"><br />
 <img src="images/5.png"><br />
 <img src="images/6.png"><br />
</div>  

</body>
</html>

Open in new window

bugwoodAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

remorinaCommented:
you need to place your links inside an <li> element
you're nesting the <a href> element inside the <ul> without an <li>

Try
<html>
<head>
<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css" />
<link type="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Invasive plants on iPhone</title>
<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript">
  var jQT = $.jQTouch({
                        icon: 'kilo.png',
                        statusBar:'black'
                                          });
</script>
</head>

<body>

<div id="home">
   <div class="toolbar">
   </div>
   <img src="images/1.png">
   <ul class="edgetoedge">
      <li class="arrow"><a href="#Akebia">Akebia quinata</a></li>
   </ul>
</div>

<div id="Akebia">
  <img src="images/logo.png">
  <div class="toolbar">
    <a class="button back" href="#">Back</a>
  </div>
  
  <p>
      <strong>Description:</strong><br> 
     Five-leaf akebia is a climbing or trailing vine that invades forested areas throughout the eastern United States. It may be deciduous, semi-evergreen, or evergreen, depending on climatic variables. The twining vines are green when young, turning brown with age. The leaves are palmately compound with typically five; 1¿ to 3inch (2.5-7.6 cm) long, oval leaflets with entire margins. Flowering occurs in the mid-spring, when small, purple to red, fragrant flowers develop. Fruit are purple seed pods that contain white pulp and small black seeds. Fruits are rarely observed in naturalized populations.<br>
      
    <strong>Similar native species:</strong><br> The native vine Virginia creeper (Parthenocissus quinquefolia) also has palmately compound leaves, but the leaflets have toothed margins and it climbs by tendrils that have adhesive disks used to climb.<br>
    
    <strong>Ecological threat:</strong><br> Five-leaf akebia is shade tolerant and invades forested habitats. The dense mat of vines can displace native understory species. It can also climb onto, smother and kill small trees and shrubs. Since fruit production is infrequent, spread most often occurs through plantings of ornamentals (which may produce fruit) and the dumping of viable plant material.<br>
    
    <strong>Potential range:</strong><br> 
    Throughout the state, especially near urban areas and gardens.<br>
    <strong>Origin:</strong><br> 
    Five-leaf akebia is native to eastern Asia and was first introduced into the United States in 1845 as an ornamental. It is still sold as an ornamental.
    Known distribution
      </p>
  
 

 <!---<ul class="edgetoedge">
      <li class="arrow"><a href="#Akebiaimages">Images</a></li>
 </ul>--->
 
  <ul class="edgetoedge">
    <li><a  href="#Akebiaimages">Images</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
    <li><a  href="#Akebiaimages">Map</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
    <li><a  href="#Akebiaimages">Control</a>   </li>
  </ul>   
      
 </div> 
  
 
<div id="Akebiaimages">
  <img src="images/logo.png">
  <div class="toolbar">
    <a class="button back" href="#">Back</a>
  </div>   
 <img src="images/2.png"><br />
 <img src="images/3.png"><br />
 <img src="images/4.png"><br />
 <img src="images/5.png"><br />
 <img src="images/6.png"><br />
</div>  

</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
remorinaCommented:
I think I understood what you're trying to achieve.
If you want them to be horizontal, you'll need to define your own css and give them a class

Try the following
add the below class to theme.css under themes\jqt
ul.edgetoedge li.horizontal
{
    display:block;float:left;
    }


Then try the below code
This should show them horizontally and they'd still take you to the "Akebiaimages" tab


<html>
<head>
<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css" />
<link type="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Invasive plants on iPhone</title>
<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript">
  var jQT = $.jQTouch({
                        icon: 'kilo.png',
                        statusBar:'black'
                                          });
</script>
</head>

<body>

<div id="home">
   <div class="toolbar">
   </div>
   <img src="images/1.png">
   <ul class="edgetoedge">
      <li class="arrow"><a href="#Akebia">Akebia quinata</a></li>
   </ul>
</div>

<div id="Akebia">
  <img src="images/logo.png">
  <div class="toolbar">
    <a class="button back" href="#">Back</a>
  </div>
  
  <p>
      <strong>Description:</strong><br> 
     Five-leaf akebia is a climbing or trailing vine that invades forested areas throughout the eastern United States. It may be deciduous, semi-evergreen, or evergreen, depending on climatic variables. The twining vines are green when young, turning brown with age. The leaves are palmately compound with typically five; 1¿ to 3inch (2.5-7.6 cm) long, oval leaflets with entire margins. Flowering occurs in the mid-spring, when small, purple to red, fragrant flowers develop. Fruit are purple seed pods that contain white pulp and small black seeds. Fruits are rarely observed in naturalized populations.<br>
      
    <strong>Similar native species:</strong><br> The native vine Virginia creeper (Parthenocissus quinquefolia) also has palmately compound leaves, but the leaflets have toothed margins and it climbs by tendrils that have adhesive disks used to climb.<br>
    
    <strong>Ecological threat:</strong><br> Five-leaf akebia is shade tolerant and invades forested habitats. The dense mat of vines can displace native understory species. It can also climb onto, smother and kill small trees and shrubs. Since fruit production is infrequent, spread most often occurs through plantings of ornamentals (which may produce fruit) and the dumping of viable plant material.<br>
    
    <strong>Potential range:</strong><br> 
    Throughout the state, especially near urban areas and gardens.<br>
    <strong>Origin:</strong><br> 
    Five-leaf akebia is native to eastern Asia and was first introduced into the United States in 1845 as an ornamental. It is still sold as an ornamental.
    Known distribution
      </p>
  
 

 <!---<ul class="edgetoedge">
      <li class="arrow"><a href="#Akebiaimages">Images</a></li>
 </ul>--->
 
  <ul class="edgetoedge">
    <li class="horizontal"><a  href="#Akebiaimages">Images</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
    <li class="horizontal"><a  href="#Akebiaimages">Map</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
    <li class="horizontal"><a  href="#Akebiaimages">Control</a>   </li>
  </ul>   
      
 </div> 
  
 
<div id="Akebiaimages">
  <img src="images/logo.png">
  <div class="toolbar">
    <a class="button back" href="#">Back</a>
  </div>   
 <img src="images/2.png"><br />
 <img src="images/3.png"><br />
 <img src="images/4.png"><br />
 <img src="images/5.png"><br />
 <img src="images/6.png"><br />
</div>  

</body>
</html>

Open in new window

0
bugwoodAuthor Commented:
It didn't solve the whole issue, but was on the way
0
bugwoodAuthor Commented:
Thank you Rimoria for the second solution. Very helpful
0
remorinaCommented:
Hi bugwood,
glad I was helpful, but next time could you kindly ask for any further assistance required before assigning a B grade?
I've posted my second comment which perfectly solves your query much long before you accept an answer!

Thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
iPhone

From novice to tech pro — start learning today.