Forums

jarv

Hi, I am using getskeleton.com in my website at: my website

my problem is that when I resize to view as iPad (tablet) and iPhone size the responsiveness works but I need to refresh the page

See screen grab
http://aet.inpreview.net/test/images/Screen2.png

here is my HTML

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<title>AET</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


	<link rel="stylesheet" type="text/css" href="stylesheets/base.css">
	<link rel="stylesheet" type="text/css" href="stylesheets/skeleton.css">
	<link rel="stylesheet" type="text/css" href="stylesheets/layout.css">
	<link rel="stylesheet" type="text/css" href="stylesheets/aet.css">
	<link rel="stylesheet" type="text/css" href="stylesheets/jqueryslidemenu.css" />
	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script&gt;
	<![endif]-->
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
	<script src="javascripts/modernizr.custom.32233.js"></script>
	<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script&gt;
	<script src="javascripts/tabs.js"></script>
	<!-- include Cycle plugin -->
	<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script&gt;
	<script type="text/javascript">
	$(document).ready(function() {
	    $('#banners ul').cycle({
			fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
		});
		$("#menu ul li:last-child").addClass("nopadding");
	});
	</script>

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="javascripts/jqueryslidemenu.js"></script>

</head>
<body>

	<div class="container">
		<div class="nine columns">
			<div class="logo"><img src="images/logo.jpg" alt="logo"/></div>
		</div>
		<div class="seven columns">
			<div id="newsletter">
				<form method="post" action="#" name="newsletter">
					<p>Sign up to out e-newsletter</p>
					<input type="text" name="name" value="Name"/><input type="text" name="email" value="email" /><input type="button" name="submit" value="Sign up" />
				</form>
			</div>
		</div>
		<div class="sixteen columns">
			<div id="myslidemenu" class="jqueryslidemenu">
				<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Systems</a>
					<ul>
						<li><a href="#" title="AET Flexible Space UFAC">AET Flexible Space UFAC</a></li>
						<li><a href="#" title="Solar Hot Water Systems">Solar Hot Water Systems</a></li>
						<li><a href="#" title="Solar Cooling">Solar Cooling</a></li>
					</ul>
				</li>
				<li><a href="#">Products</a>
				  <ul>
				  	<li><a href="#">Air Handling Units</a></li>
					<li><a href="#">Fan Terminal Units</a></li>
					<li><a href="#">Raised Access Floor</a></li>
					<li><a href="#">Solar Thermal Collectors</a></li>
					<li><a href="#">Chillers – Absorption Chillers</a></li>
					<li><a href="#">Heat Pump Technology</a></li>
				  </ul>
				</li>
				<li><a href="#">Services</a>
				  <ul>
				  <li><a href="#">AET what we offer</a>
				    <ul>
					    <li><a href="#" title="Design">Design</a></li>
						<li><a href="#" title="Supply">Supply</a></li>
						<li><a href="#" title="Commissioning">Commissioning</a></li>
						<li><a href="#" title="Maintenance">Maintenance</a></li>
				    </ul>  
				  </li>
				  <li><a href="#" title="to be developed">to be developed</a>
					<ul>
						<li><a href="#" title="Offices To Let">Offices To Let</a></li>
						<li><a href="#" title="Showsuite / Demo zone">Showsuite / Demo zone</a></li>
						<li><a href="#" title="CPD Training">CPD Trainingt</a></li>
						<li><a href="#" title="AET Logistics – possibly new domain?">AET Logistics – possibly new domain?</a></li>
					</ul>
				  </li>
				  </ul>
				</li>
				<li><a href="http://www.dynamicdrive.com/style/">Projects</a&gt;
					<ul>
						<li><a href="#" title="UFAC">UFAC</a></li>
						<li><a href="#" title="UFAC">Solar</a></li>
					</ul>
				</li>
				<li><a href="#" title="Contact">Contact</a>
						<ul>
							<li><a href="#" title="Office location map">Office location map</a></li>
							<li><a href="#" title="Distributor">Distributor</a></li>
							<li><a href="#" title="Personnel">Personnel</a></li>
						</ul>
					</li>
				</ul>
				<br style="clear: left" />
				</div>
			<div id="banners">
				<ul>
					<li>
						<h2>Whitehall Quay</h2>
						<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies vulputate ipsum a aliquet. Integer aliquet vestibulum nibh, quis accumsan massa pharetra ac. </span>
						<img src="images/banner-1lg.jpg" alt="banner 1" />
					</li>
					<li>
						<h2>Whitehall Quay</h2>
						<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies vulputate ipsum a aliquet. Integer aliquet vestibulum nibh, quis accumsan massa pharetra ac. </span>
						<img src="images/banner-2lg.jpg" alt="banner 2" />
					</li>
					<li>
						<h2>Whitehall Quay</h2>
						<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies vulputate ipsum a aliquet. Integer aliquet vestibulum nibh, quis accumsan massa pharetra ac. </span>
						<img src="images/banner-3lg.jpg" alt="banner 3" />
					</li>
				</ul>
			</div>
		</div>
		<div class="sixteen columns">
			<div class="spacer">&nbsp;</div>
		</div>
		<div class="one-third column">
			<h4>Services</h4>
			<ul id="services">
				<li class="aircon"><a href="#"><h5>Air Conditioning</h5></a><span>text</span></li>
				<li class="flooring"><a href="#"><h5>Flooring</h5></a><span>text</span></li>
				<li class="solarpanels"><a href="#"><h5>Solar Panels</h5></a><span>text</span></li>
			</ul>
		</div>
		<div class="one-third column">
			<h4>Distributors</h4>
			<div class="map">
				<a href="#">View map</a>
			</div>
		</div>
		<div class="one-third column">
			<h4>Latest Updates</h4>
			<ul id="latest">
				<li><a href="#"><h5>AET Launches Contant Air Volume Terminals</h5><span>text</span></a></li>
				<li><a href="#"><h5>AET Launches Contant Air Volume Terminals</h5><span>text</span></a></li>
				<li><a href="#"><h5>AET Launches Contant Air Volume Terminals</h5><span>text</span></a></li>
			</ul>
		</div>
		<div class="sixteen columns">
			<div class="footer">
				<strong>Advanced Ergonomic Technologies</strong> Company Registration number 2874101
			</div>
		</div>
	</div><!-- container -->

</body>
</html>

Mottie

The problem is that jQuery Cycle isn't responsive. It sets the width of your images and can only change them on refresh. So, try a more responsive slider like Flexslider.

Also, I suggest that you don't point to scripts hosted on github (cycle plugin).

And lastly, these three files don't exist and I know if jQuery v1.3.1 did exist, it would cause problems because it would try to override v1.7.2.

<script type="text/javascript" src="javascripts/jquery-1.3.1.min.js"></script>	
<script type="text/javascript" language="javascript" src="javascripts/hoverIntent.js"></script>
<script type="text/javascript" language="javascript" src="javascripts/jquery.dropdown.js"></script>

treehouse : what would you like to learn today?

Forums

Responsive layout breaks when resized - need refresh