logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 02-02-2014, 09:26 AM   #1
madhatter
 
Join Date: Jan 2014
Location: exeter devon
Posts: 1
Default help with jquery

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>
madhatter is offline   Reply With Quote
Old 02-02-2014, 11:40 AM   #2
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

I've never worked with jQuery mobile, but adding the following meta viewport tag to the head will display it as it should.

HTML Code:
<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:

HTML Code:
<img src="images/Untitled-1.gif" />
and then add the following to your CSS to make your images fluid:

Code:
img {
max-width: 100%;
height: auto;
}
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:29 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com