PDA

View Full Version : help with jquery


madhatter
02-02-2014, 09:26 AM
hi i hope some one can help me here
i have started to play with jquery in dw cs6 i have updated jquery in dw to 1.4.0 and 1.11.0 this has put a lot of new files in the folder for jquery
not sure if i need all of them or which ones i need to point to
any how i made test site and up load it to the web and it not working as it should it to big it like a normal web page on my phone.where have i gone wrong if you what to have a look go to www.oaklandsridingclub.co.uk like i said a test site?
here is the code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link rel="stylesheet" href="themes/test3.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<script src="jquery-mobile/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
</head>
<body>

<div data-role="page" id="page">
<div data-role="header">
<img src="images/Untitled-1.gif" width="480" height="52">
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#page2">two</a></li>
<li><a href="#page3">three</a></li>
<li><a href="#page4"> four</a></li>
</ul>
</ul>
<p><img src="images/new riding school in sand.jpg" width="450" height="103"></p>
<p>Oaklands Riding school and livery yard was established in 1971 and has always been a family run business.We pride ourselves in the quality and variety of our 50 riding school horses and treat each customer as an individual, catering for any specific needs. All our staff are friendly and experienced and always willing to help. Our facilities consist of a jumping paddock, flood lit sand school and indoor school.We are also affiliated to the Riding for Disabled Assosiation</p>
</div>
<div data-role="footer">
<h4><img src="images/telphone.gif" width="100" height="31"></h4>
</div>
</div>

<div data-role="page" id="page2">
<div data-role="header">
<h1>Page Two</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#page">one</a></li>
<li><a href="#page3">three</a></li>
<li><a href="#page4"> four</a></li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>

<div data-role="page" id="page3">
<div data-role="header">
<h1>Page Three</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#page">one</a></li>
<li><a href="#page2">two</a></li>
<li><a href="#page4">four</a></li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>

<div data-role="page" id="page4">
<div data-role="header">
<h1>Page Four</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#page">one</a></li>
<li><a href="#page2">two</a></li>
<li><a href="#page3">three</a></li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>

</body>
</html>

gentleone
02-02-2014, 11:40 AM
I've never worked with jQuery mobile, but adding the following meta viewport tag to the head will display it as it should.


<meta name="viewport" content="width=device-width, initial-scale=1" />


But you will notice that your big image will not scale, because you defined a fixed width and height.
Delete the width and height attributes form your img tags, so you get this:

<img src="images/Untitled-1.gif" />

and then add the following to your CSS to make your images fluid:


img {
max-width: 100%;
height: auto;
}