i'm learning how build web app, , i'm having problem jquery .load()
this got jquery
$(document).ready( function(){
setorientationlistener ();
changepage('test.html?v=1');
});
function changepage(filename){
$('.content_container').animate({opacity:0}, 500, function(){
$('.content_loading_container'.load('/content/'+filename), function(){
alert('loaded');
})
})
}
it fades out dosen't seem load requested page. have alert tell me if loaded in.
i have index.html file in parent folder, , test.html in folder called content.
(the page <p>loaded</p>)
i tried different path versions see if path loaction, still didn't work
can see whats wrong?
(and brief explanation of did wrong)
*incase want need css
/* global */
body {margin:0px; padding: 0px; font-family: helvetica; font-size: 16px; background-color: #ddd;}
/*global layout*/
header{
display: block; position:absolute; top:0px; left:0px; height: 70px; background:url(../images/banner.png?v=1) no-repeat 0px 0px;
/*-webkit-box-shadow: 0px 5px 4px 4px rgba(28,84,0,0.15); box-shadow: 0px 5px 4px rgba(28,84,0,0.15);*/
}
article{
display: block; position: absolute; top: 70px; left: 0px; background:url(../images/content.png?v=1) repeat-x 0px 0px;
}
article .content_container{
position: absolute; top: 0px; left: 0px; background: none;
}
article .content_container .content_loading_container{
position:absolute; top:0px; padding: 40px 20px 0px 40px;
}
footer{
display: block; position:absolute; bottom: 0px;left: 0px; height:60px;
background-color: #fff;
}
nav{
position: absolute;bottom: 18px; left: 25px;
}
.banner_logo{position: absolute; top:10px; right:30px;}
/* */
.page.home article .content_container{
background:url(../images/background.png?v=1) no-repeat 0px 0px;
}
/* */
.page.landscape {position: relative; width: 1024px; height: 748px; overflow: hidden;}
.page.landscape header{width: 1024px;}
.page.landscape article{width: 1024px; height: 618px;}
.page.landscape footer{width: 1024px;}
.page.landscape article .content_container{width: 1024px; height: 618px;}
/* */
.page.portrait {position: relative; width: 768px; height: 1004px; overflow: hidden;}
.page.portrait header{width: 768px;}
.page.portrait article{width: 768px; height: 874px;}
.page.portrait footer{width: 768px;}
.page.portrait article .content_container{width: 768px; height: 874px;}
*incase want need html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- force latest ie rendering engine (even in intranet) & chrome frame
remove if use .htaccess -->
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
<title>my web app</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scaled=0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link type="text/css" rel="apple-touch-icon-precomposed" href="images/go_icon.png?v=1"/>
<link type="text/css" rel="apple-touch-startup-image" href="images/graphicone-hor.png?v=1"
media="screen , (min-device-width:481px) , (max-device-width:1024px) , (orientation:landscape)"/>
<link type="text/css" rel="apple-touch-startup-image" href="images/graphicone-vert.png?v=1"
media="screen , (min-device-width:481px) , (max-device-width:1024px) , (orientation:portrait)"/>
<link rel="stylesheet" type="text/css" href="assets/go.css?v=1"/>
<script type="text/javascript" src="assets/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="assets/iscroll/src/iscroll.js"></script>
<script type="text/javascript" src="assets/go_parent.js?v=1"></script>
</head>
<body>
<div class="page home">
<footer></footer>
<article>
<div class="content_container">
<div class="content_loading_container"></div>
</div>
</article>
<header></header>
<img class="banner_logo" src="images/logo.png"/>
<nav></nav>
</div>
</body>
</html>
More discussions in Develop server-side applications in Dreamweaver
adobe
Comments
Post a Comment