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?

[Webinar] Streamline your web hosting managementRegister Today

x
 
remorinaConnect With a Mentor Commented:
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
 
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
All Courses

From novice to tech pro — start learning today.