I'm trying to add Foundation Orbit Slider to my web page. It looks easy and I've got to see the images and the prev & next buttons, but if I click on prev and next buttons the orbit slider doesn't move at all. The images doesn't slide and I don't know why, beacuse I've seen many examples and I think my code looks the same. Any help woud be appreciated
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="altiria webapp">
<link rel="stylesheet" href="assets/css/foundation.min.css">
<link rel="stylesheet" href="assets/css/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/jquery-ui.css">
<link rel="stylesheet" href="assets/css/jquery-ui.structure.css">
<link rel="stylesheet" href="assets/css/jquery-ui.theme.css">
<link rel="stylesheet" href="assets/css/app.css">
<script src="assets/js/modernizr.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery-ui.js"></script>
<script src="assets/js/foundation.min.js"></script>
</head>
<body>
<div class="orbit-container">
<ul class="example-orbit" data-orbit>
<li>
<img src="assets/images/paisaje1.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li class="active">
<img src="assets/images/paisaje2.jpg" alt="slide 2" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="assets/images/paisaje3.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</li>
</ul>
<!-- Navigation Arrows -->
Prev <span></span>
Next <span></span>
<!-- Slide Numbers -->
<div class="orbit-slide-number">
<span>1</span> of <span>3</span>
</div>
<!-- Timer and Play/Pause Button -->
<div class="orbit-timer">
<span></span>
<div class="orbit-progress"></div>
</div>
</div>
<!-- Bullets -->
<ol class="orbit-bullets">
<li data-orbit-slide-number="1"></li>
<li data-orbit-slide-number="2" class="active"></li>
<li data-orbit-slide-number="3"></li>
</ol>
<script>
$(document).foundation();
</script>
</body>
It looks like you have a mix of the pre-rendered HTML and rendered HTML on your page. You don't need the chunks of code labeled with comments (navigation arrows, slide numbers, timer, bullets, etc); Foundation will render them for you.
In addition, it's possible that your class="example-orbit" is interfering and, unless you need it, I'd suggest removing it.
Important to note: According to the Foundation website, "Orbit has been deprecated, meaning that it is no longer supported." They officially recommend using a different image slider instead of their orbit.
Related
I watched a tutorial on a simple lightbox, and I am trying to figure out why it is not working for me. I am using http://lokeshdhakar.com/ version of the lightbox.
I do not know what the issue is. When I type it through the text editor I am using it just opens up the image in a new window. But just now in the code.io , it opened it up as the proper lightbox. I am so confused on what is happening.
Here is my code.
<head>
<meta charset="utf-8">
<title> Fine Art</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles5.css" rel="stylesheet" type="text/css">
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<link href="fineart.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?
family=Roboto:400,100,400italic,500,900,300,500italic,900italic"
rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/lightbox.min.js"></script>
</head>
<body>
<h1 class="fineart"> B & W Photo </h1>
<div id="page"><!--beginning of sidebar-->
<div id="sidebar">
<div><img id="logo" src="img/logo.png"/>
</div>
<div>
<ul class="sb">
<li > Home </li>
<li > About </li>
<li > Works </li>
<li > Resume </li>
</ul>
</div>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</div><!--end of sidebar-->
<div class="container-a4">
<ul class="caption-style-4">
<li>
<img src="http://i68.tinypic.com/2re64y0.jpg" alt="blur">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1><a href="http://i63.tinypic.com/9lhaj9.jpg" data-
lightbox="photos">Blur</a></h1>
<p> Photo Series </p>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
(here's the rest)
http://codepen.io/kasiariele/pen/jbjVgr
Like I said, I'm not sure why its working in the site editor, but when I save and refresh onto the browser it opens the image on a new page instead of the lightbox. Please help!
You need to order your javascript libraries correctly.
You are loading lightbox.min.js before loading jquery.min.js (which is a dependency for how you are using lightbox).
Here is a direct quote from the lightbox website.
If you already use jQuery on your page, make sure it is loaded before lightbox.js. jQuery 1.7 or greater is required.
You should also load all of your scripts together right before your </body> closing tag, like so:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="js/lightbox.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
I downloaded and bought the https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0 template, however I cant get it to work in my mvc 5 project properly.
I created my layoutpage using the "blankpage.html" example included in download.
The layout page works fine, but when I add the renderbody call and try to show page through my template. The renderbody call, keeps adding an extra unwanted div.
Which looks like
<div id="main" role="main">
</div>
TEXTADDED
and adds the text in the page after that additional div tag.
Althought the page using the template only contain a single word. In other words, my page using the layout contains the text "test". But renderbody generates:
<div id="main" role="main">
</div>
TEXTADDED
Do you have any clue? This is my layoutpage
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
#*#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")*#
<title> SmartAdmin </title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Use the correct meta names below for your web application
Ref: http://davidbcalhoun.com/2010/viewport-metatag
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Basic Styles -->
<link rel="stylesheet" type="text/css" media="screen" href="~/Areas/Admin/Template/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="~/Areas/Admin/Template/css/font-awesome.min.css">
<!-- SmartAdmin Styles : Please note (smartadmin-production.css) was created using LESS variables -->
<link rel="stylesheet" type="text/css" media="screen" href="~/Areas/Admin/Template/css/smartadmin-production.css">
<link rel="stylesheet" type="text/css" media="screen" href="~/Areas/Admin/Template/css/smartadmin-skins.css">
<!-- SmartAdmin RTL Support is under construction
<link rel="stylesheet" type="text/css" media="screen" href="~/Areas/Admin/Template/css/smartadmin-rtl.css"> -->
<!-- We recommend you use "your_style.css" to override SmartAdmin
specific styles this will also ensure you retrain your customization with each SmartAdmin update.
<link rel="stylesheet" type="text/css" media="screen" href="~/Areas/Admin/Template/css/your_style.css"> -->
<!-- Demo purpose only: goes with demo.js, you can delete this css when designing your own WebApp -->
<link rel="stylesheet" type="text/css" media="screen" href="~/Areas/Admin/Template/css/demo.css">
<!-- FAVICONS -->
<link rel="shortcut icon" href="~/Areas/Admin/Template/img/favicon/favicon.ico" type="image/x-icon">
<link rel="icon" href="~/Areas/Admin/Template/img/favicon/favicon.ico" type="image/x-icon">
<!-- GOOGLE FONT -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700">
</head>
<body class="">
<!-- possible classes: minified, fixed-ribbon, fixed-header, fixed-width-->
<!-- HEADER -->
<header id="header">
<div id="logo-group">
<!-- PLACE YOUR LOGO HERE -->
<span id="logo"> <img src="~/Areas/Admin/Template/img/logo-white2.png" alt="SmartAdmin"> </span>
<!-- END LOGO PLACEHOLDER -->
</div>
<!-- pulled right: nav area -->
<div class="pull-right">
<!-- collapse menu button -->
<div id="hide-menu" class="btn-header pull-right">
<span> <i class="fa fa-reorder"></i> </span>
</div>
<!-- end collapse menu -->
<!-- logout button -->
<div id="logout" class="btn-header transparent pull-right">
<span> <i class="fa fa-sign-out"></i> </span>
</div>
<!-- end logout button -->
#Html.Partial("_LoginPartial")
</div>
<!-- end pulled right: nav area -->
</header>
<!-- END HEADER -->
<!-- Left panel : Navigation area -->
<!-- Note: This width of the aside area can be adjusted through LESS variables -->
<aside id="left-panel">
<!-- User info -->
<div class="login-info">
<span>
<!-- User image size is adjusted inside CSS, it should stay as it -->
<a href="javascript:void(0);" id="show-shortcut">
<img src="~/Areas/Admin/Template/img/avatars/sunny.png" alt="me" class="online" />
<span>
john.doe
</span>
<i class="fa fa-angle-down"></i>
</a>
</span>
</div>
<!-- end user info -->
<!-- NAVIGATION : This navigation is also responsive
To make this navigation dynamic please make sure to link the node
(the reference to the nav > ul) after page load. Or the navigation
will not initialize.
-->
<nav>
<!-- NOTE: Notice the gaps after each icon usage <i></i>..
Please note that these links work a bit different than
traditional hre="" links. See documentation for details.
-->
<ul>
<li class="active">
<i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">Dashboard</span>
</li>
<li class="active">
<i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">ElAvtal</span>
</li>
<li class="active">
<i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">LarmAvtal</span>
</li>
<li class="active">
<i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">MäklarAvtal</span>
</li>
</ul>
</nav>
<span class="minifyme"> <i class="fa fa-arrow-circle-left hit"></i> </span>
</aside>
<!-- END NAVIGATION -->
<!-- MAIN PANEL -->
<div id="main" role="main">
<!-- MAIN CONTENT -->
<div id="content">
#RenderBody()
</div>
<!-- END MAIN CONTENT -->
</div>
<!-- END MAIN PANEL -->
<!--================================================== -->
<!-- PACE LOADER - turn this on if you want ajax loading to show (caution: uses lots of memory on iDevices)-->
<script data-pace-options='{ "restartOnRequestAfter": true }' src="~/Areas/Admin/js/plugin/pace/pace.min.js"></script>
<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
if (!window.jQuery) {
document.write('<script src="~/Areas/Admin/js/libs/jquery-2.0.2.min.js"><\/script>');
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
if (!window.jQuery.ui) {
document.write('<script src="~/Areas/Admin/js/libs/jquery-ui-1.10.3.min.js"><\/script>');
}
</script>
<!-- JS TOUCH : include this plugin for mobile drag / drop touch events
<script src="~/Areas/Admin/js/plugin/jquery-touch/jquery.ui.touch-punch.min.js"></script> -->
<!-- BOOTSTRAP JS -->
<script src="~/Areas/Admin/js/bootstrap/bootstrap.min.js"></script>
<!-- CUSTOM NOTIFICATION -->
<script src="~/Areas/Admin/js/notification/SmartNotification.min.js"></script>
<!-- JARVIS WIDGETS -->
<script src="~/Areas/Admin/js/smartwidgets/jarvis.widget.min.js"></script>
<!-- EASY PIE CHARTS -->
<script src="~/Areas/Admin/js/plugin/easy-pie-chart/jquery.easy-pie-chart.min.js"></script>
<!-- SPARKLINES -->
<script src="~/Areas/Admin/js/plugin/sparkline/jquery.sparkline.min.js"></script>
<!-- JQUERY VALIDATE -->
<script src="~/Areas/Admin/js/plugin/jquery-validate/jquery.validate.min.js"></script>
<!-- JQUERY MASKED INPUT -->
<script src="~/Areas/Admin/js/plugin/masked-input/jquery.maskedinput.min.js"></script>
<!-- JQUERY SELECT2 INPUT -->
<script src="~/Areas/Admin/js/plugin/select2/select2.min.js"></script>
<!-- JQUERY UI + Bootstrap Slider -->
<script src="~/Areas/Admin/js/plugin/bootstrap-slider/bootstrap-slider.min.js"></script>
<!-- browser msie issue fix -->
<script src="~/Areas/Admin/js/plugin/msie-fix/jquery.mb.browser.min.js"></script>
<!-- FastClick: For mobile devices -->
<script src="~/Areas/Admin/js/plugin/fastclick/fastclick.js"></script>
<!--[if IE 7]>
<h1>Your browser is out of date, please update your browser by going to www.microsoft.com/download</h1>
<![endif]-->
<!-- Demo purpose only -->
<script src="~/Areas/Admin/js/demo.js"></script>
<!-- MAIN APP JS FILE -->
<script src="~/Areas/Admin/js/app.js"></script>
<!-- PAGE RELATED PLUGIN(S)
<script src="..."></script>-->
<script type="text/javascript">
// DO NOT REMOVE : GLOBAL FUNCTIONS!
$(document).ready(function () {
pageSetUp();
})
</script>
#*#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)*#
<!-- Your GOOGLE ANALYTICS CODE Below -->
</body>
</html>
I take it you are using Visual Studio 2013? Install the Web Essentials plug in then launch the application, then make browser window smaller - Use the inspect feature to hover over the div in browser - and it should highlight code in Visual Studio that is rendering the div.
You can find a great SmartAdmin integration to MVC .NET tutorial here:
http://myorange.ca/supportforum/question/how-to-integrate-smartadmin-1-4-x-into-asp-net-mvc-5
I am developing a jquery mobile website and i have some problems running javascript code.
I have a home page , index.html , which is basically a listview to navigate to various html pages. I use the single-page structure for my pages , that means every 1 html file contains 1 page. Now from the home page , i navigate to another page where i am using a persistent NavBar with a horizontal button with 2 options. One is photos and the other is multimedia.
For the photos i am using the Javascript FB API , to download the photos from a FB Page and then with the PhotoSwipe Plugin i present them to the user.
The problem..
If i run the photos.html page , it will work well and load the albums. There are 2 things that my javascript does. 1) Use FB API to get albums, photos , cover photos etc.. 2) Dynamically create a listview with this albums and their photos. In this case both work great!
However when i am in my index.html and i navigate through the listview to the photos.html (photos is the default chosen button from the persisent NavBar) the Javascript code doesnt work. Like is not called at all..
The index.html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>-->
<link rel="stylesheet" href="themes/EspacioJoven.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="themes/custom.css" />
</head>
<body>
<div data-role="page" id="home" data-theme="a">
<!--
<div data-role="header">
<h1>Application Title</h1>
</div>
-->
<div data-role="content">
<h2 id="banner">Joven Mobile</h2>
<div class="main_menu">
<ul data-inset="true" data-role="listview">
<li><img src="themes/icons/news.png" alt="Information" class="ui-li-icon">Esen</li>
<li><img src="themes/icons/research.png" alt="Information" class="ui-li-icon">Laen</li>
<li><img src="themes/icons/staff.png" alt="Information" class="ui-li-icon">Multimedia</li>
<li><img src="themes/icons/students.png" alt="Information" class="ui-li-icon">Sanen</li>
</ul>
</div>
</div>
<!--
<div data-role="footer">
<h4>Page Footer</h4>
</div>
-->
</div>
</body>
</html>
The photos.html looks like :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>-->
<link rel="stylesheet" href="themes/EspacioJoven.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="themes/custom.css" />
<!-- Needed from PhotoSwipe Plugin -->
<link href="photoSwipe/jquery-mobile.css" type="text/css" rel="stylesheet" />
<link href="photoSwipe/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="photoSwipe/klass.min.js"></script>
<script type="text/javascript" src="photoSwipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<script type='text/javascript' src='photoSwipe/photoSwipeCall.js'></script>
<!-- Needed from PhotoSwipe Plugin -->
</head>
<body>
<div data-role="page" id="photos" data-theme="a" data-add-back-btn="true" data-back-btn-text="Back">
<div data-role="header" data-id="fixedNav" data-position="fixed">
<h1>Application Title</h1>
Back
<div data-role="navbar">
<ul>
<li>Photos</li>
<li>Videos</li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" class="albums">
<!-- Here the albums are created through javascript (createAlbums.js) -->
</ul>
<button type="button" id="loadMoreAlbums">More Albums...</button>
</div><!-- /content -->
</div><!-- /page -->
<div id="fb-root"></div>
<script type='text/javascript' src='javascript/createAlbums3.js'></script>
</body>
</html>
As you see i call my javascript in the end. Any ideas why its never called? If i refresh the page , that means run the photos.html , it will load normally.
Actually i also look at the "elements" table from the debugger. When im in the index.html page the html elements seem all correct. When i do the transition though to the photos.html page , by looking at the elements table i see that they dont change! The title does change but the rest stays the same which is incredible?! How on earth can that happen? It looks like is the same page , with the same css and javascript sources , but should be different! As you see i use photoSwipe javascript , css etc! Only if i reload the page the elements are correct. Please any ideas? I have no idea what is happening here.
Also for some reason i get a 304 Status , Not Modified through the transition , from one page to another.
The reason for this is because when you navigate to a page in jQuery Mobile it by defaults will try and pull the JQM page (data-role="page" (if there is no data-role='page' then it will pull the body)) via ajax and attaches it to the current page's DOM, the thing is it will only pull the JQM page (or body if there isn't any) and ignore everything (aside from the title) outside of it meaning your JavaScript is not going to get called.
When you refresh the page then a normal HTTP call is made and the entire page is loaded so your code is executed.
In order to have your JavaScript called you need to either have the relevant script's on your first page or you can have it withing your JQM page wrapper and it will then be pulled along with it.
<div data-role="page" id="photos" data-theme="a"
data-add-back-btn="true" data-back-btn-text="Back">
....
<script type='text/javascript' src='javascript/createAlbums3.js'></script>
</div><!-- /page -->
Have a look at the following Q&A from the official docs for more details.
I am trying to use bootstrap scaffold for first time and wonder if I can do that.
<header class="row"></header> // this covers browsers width
<div id="main-container" style="maring:auto; max-width:1200px"> I want this to be centered and not more than 1200px
<div class="row" class="span12" id="main">
</div>
</div>
The idea is that I want to use the scaffolding feature in different areas inside my html document independently, can I do it or I am forced to go on a whole page perspective ?
Well.. the first thing you're going to want is to start with this:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You do not have to do the entire page, you only put it around whatever you want.
<!-- The container is necessary for your rows -->
<div class="container">
<!-- Each row will hold a row of 'spans' -->
<div class="row">
<!-- This will center whatever content you want. -->
<div class="offset2 span8">
</div>
</div>
</div>
I have implemented a Phone Gap application using jQuery Mobile and java script for iPhone and android.
My app is almost completed.
Till now I used single index.html file for all the pages.
Now I need to use different html files for different pages.
So I have created multiple external html files for different pages, linked the references and added them in to www folder.
in that the i have a list view its css not visable
Main Page:- See page2 and page3 ref in index.html file
<div data-role="content">
<ul data-role="listview" data-theme="e" data-header-theme="a" data-dividertheme="a" id="List view">
<li data-role='list-divider' ><big>Lis view</big></li>
<li><a href='#page1' id='Page1' data-panel='main'>Page1 Information</a></li>
<li><a href='page2.html' rel="external" id='pagetwoid' data-panel='main'>Go to Page 2</a></li>
<li><a href='page3.html' rel="external" id='pagethreeid' data-panel='main'>Go to Page 3</a></li> </ul>
</div>
Page2:-
<!DOCTYPE html>
<html>
<head>
<title>Multiple htmls</title>
<meta id="viewport" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<!--
<link rel="stylesheet" href="inc/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="inc/jquery.mobile.splitview.css" />
<link rel="stylesheet" href="inc/jquery.mobile.grids.collapsible.css" />
<link rel="stylesheet" href="inc/jquery.mobile.structure-1.0.1.min.css" />
-->
<link rel="stylesheet" href="inc/jquery.alerts.css" />
<link rel="stylesheet" href="inc/jquery.mobile.datebox.css" />
<script charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" src="inc/jquery-1.7.1.js"></script>
<script type="text/javascript" src="inc/jquery.mobile.splitview.js"></script>
<script type="text/javascript" src="inc/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="inc/jquery.alerts.js"></script>
<script type="text/javascript" src="inc/iscroll-wrapper.js"></script>
<script type="text/javascript" src="inc/iscroll-lite.js"></script>
<script type="text/javascript">
alert('js Loadfed');
</script>
<style>
alert();
alert('css loaded');
</style>
</head>
<body>
<!--============= Page2 ===============--->
<div data-role="page" id="siteContacts" data-theme="e" >
<div data-role="header">
<h1>Page 2 </h1>
<a href="page2.html" id="EditButton" data-role="button" data-icon="gear" class="ui-btn-right" data-theme="e" >Edit</a>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" class="ui-listview" data-dividertheme="a">
<li data-role="list-divider"> <!--list Header --->
<div class="ui-grid-c"> <!--Section Headers Grid--->
<div class="ui-block-a" ><big> aaaa</big> </div>
<div class="ui-block-b" ><big> bbbb</big> </div>
<div class="ui-block-c" ><big> ccc</big> </div>
<div class="ui-block-d" ><big> e-sss</big> </div>
</div>
</li>
</ul>
</div>
</body>
</html>
Maybe I'm reading your code wrong, but it looks like the links to the jquery mobile stylesheets are commented out. You definitely need to have them defined in the HTML to get the styles applied.
Are you loading them someplace else that it not apparent from the code you posted?
PhoneGap requires you to manually set/allow aspects of your app in your "config.xml" file in the root directory.
The solution you are looking for, I believe, is this line:
<access origin="http://code.jquery.com" subdomains="true" />
You are allowing access to the external resource of "http://code.jquery.com" and allowing all of its subdomains. This means that you have just unlocked jquery mobile, which is what you are going for, as seen by your script tags:
<script type="text/javascript" src="inc/jquery-1.7.1.js"></script>
<script type="text/javascript" src="inc/jquery.mobile.splitview.js"></script>
These "src" attributes are now seen as "subdomains" of http://code.jquery.com, which you have just successfully allowed!